Skip to content

Commit d99cd3c

Browse files
tdunn891tdunn891
committed
Add material icons to navbar and tickets page
1 parent 0459fb0 commit d99cd3c

File tree

2 files changed

+155
-50
lines changed

2 files changed

+155
-50
lines changed

‎templates/base.html‎

Lines changed: 56 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,46 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
99
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
11-
rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11+
<!-- Material Icons -->
12+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
13+
<!-- Roboto -->
14+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
15+
<!-- Open Sans -->
16+
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
17+
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
1218
{% block head %}
1319
{% endblock %}
1420
<title>{% block title %}{% endblock %}</title>
1521
</head>
1622

17-
<body style="background-color: lightgrey;">
18-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
19-
<a class="navbar-brand" href="{% url 'tickets' %}">IshTrak</a>
23+
<body>
24+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
25+
<a class="navbar-brand" href="{% url 'tickets' %}"><i class="material-icons align-top">track_changes</i>
26+
TrackIt</a>
2027
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
2128
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
2229
<span class="navbar-toggler-icon"></span>
2330
</button>
24-
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
31+
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
2532
<div class="navbar-nav">
26-
<a class="nav-item nav-link active" href="{% url 'tickets' %}">Tickets <span
27-
class="sr-only">(current)</span></a>
28-
<a class="nav-item nav-link" href="{% url 'add_ticket' %}">Add Ticket</a>
2933
{% if user.is_authenticated %}
30-
<a class="nav-item nav-link" href="{% url 'user_list' %}">User List</a>
34+
<a class="nav-item nav-link active" href="{% url 'tickets' %}">Tickets <i
35+
class="material-icons-outlined align-bottom">confirmation_number</i><span
36+
class="sr-only">(current)</span></a>
37+
<!-- <a class="nav-item nav-link" href="{% url 'add_ticket' %}">Raise Ticket <i
38+
class="material-icons align-bottom">add</i></a> -->
39+
<a class="nav-item nav-link" href="{% url 'dashboard' %}">Dashboard <i
40+
class="material-icons-outlined align-bottom">assessment</i>
41+
</a>
42+
<a class="nav-item nav-link" href="{% url 'kanban' %}">Kanban <i
43+
class="material-icons-outlined align-bottom">view_week</i>
44+
</a>
45+
<a class="nav-item nav-link" href="{% url 'user_list' %}">Team <i
46+
class="material-icons-outlined align-bottom">people</i></a>
3147
<a class="nav-item nav-link" href="{% url 'profile' %}">Profile: {{ user }}</a>
32-
<a class="nav-item nav-link" href="{% url 'logout' %}">Log Out</a>
48+
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout <i
49+
class="material-icons-outlined align-bottom">exit_to_app</i></a>
3350
{% else %}
3451
<a class="nav-item nav-link" href="{% url 'login' %}">Log In</a>
3552
<a class="nav-item nav-link" href="{% url 'registration' %}">Register</a>
@@ -38,20 +55,43 @@
3855
</div>
3956
</nav>
4057
<div class="container">
41-
{% block page_heading %}
42-
{% endblock %}
58+
<div class="row">
59+
<div class="col col-12">
60+
<br>
61+
<h2>{% block page_heading %}{% endblock %}</h2>
62+
<hr>
63+
</div>
64+
</div>
4365
{% block content %}
4466
{% endblock %}
4567
</div>
46-
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
47-
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
48-
crossorigin="anonymous"></script>
68+
<!-- footer -->
69+
<hr>
70+
<footer class="container-fluid" style="height: 120px;">
71+
<div class="row">
72+
<div class="col col-12 text-center">
73+
<p>TrackIt</p>
74+
<!-- <p>Developed by Thomas Dunn</p> -->
75+
</div>
76+
</div>
77+
</footer>
78+
<!-- jQuery -->
79+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
80+
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
81+
<!-- popper.js -->
4982
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
5083
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
5184
crossorigin="anonymous"></script>
85+
<!-- bootstrap -->
5286
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
5387
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
5488
crossorigin="anonymous"></script>
89+
<!-- initialize tooltips -->
90+
<script>
91+
$(function () {
92+
$('[data-toggle="tooltip"]').tooltip()
93+
})
94+
</script>
5595
{% block scripts %}
5696
{% endblock %}
5797
</body>

‎tickets/templates/tickets.html‎

Lines changed: 99 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,127 @@
11
{% extends "base.html" %}
22
{% block title %}
3-
Tickets
3+
TrackIt | Tickets
4+
{% endblock %}
5+
{% block head %}
6+
<!-- <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> -->
7+
<link rel="stylesheet" type="text/css"
8+
href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.css" />
49
{% endblock %}
510
{% block page_heading %}
6-
<h2>Tickets</h2>
7-
<hr>
11+
<i class="material-icons-outlined">confirmation_number</i> Tickets ({{ tickets.count }})
12+
<a class="btn btn-primary float-right" href="{% url 'add_ticket' %}">Raise Ticket
13+
<i class="material-icons align-bottom">add</i></a>
814
{% endblock %}
915
{% block content %}
1016
<div class="row">
11-
<div class="col col-2">
12-
<div class="checkbox">
13-
<label><input type="checkbox" value="bug">Bug</label>
14-
</div>
15-
<div class="checkbox">
16-
<label><input type="checkbox" value="feature">Feature</label>
17-
</div>
18-
</div>
19-
<div class="col col-10">
20-
<a class="btn btn-success" href="{% url 'add_ticket' %}">Raise Ticket</a>
21-
<input type="text" placeholder="Search"><button class="btn btn-info">Go</button></input>
17+
<div class="col col-12">
2218
<br>
23-
<br>
24-
<table class="table table-sm">
19+
<table class="table table-hover table-responsive display" id="tickets-table">
2520
<thead>
2621
<tr>
27-
<th scope="col"><a href="?order=id">ID</th>
28-
<th scope="col"><a href="?order=summary">Summary</th>
29-
<th scope="col"><a href="?order=ticket_type">Type</a></th>
30-
<th scope="col"><a href="?order=submitted_by">Submitted By</th>
31-
<th scope="col"><a href="?order=assigned_to">Assigned To</th>
32-
<th scope="col"><a href="?order=status">Status</th>
33-
<th scope="col"><a href="?order=priority">Priority</th>
34-
<th scope="col"><a href="?order=created_date">Created</th>
22+
<th>ID</th>
23+
<th>Summary</th>
24+
<th>Type</th>
25+
<th>Submitter</th>
26+
<th>Assignee</th>
27+
<th>Priority</th>
28+
<th>Status</th>
29+
<th>Created</th>
30+
<th>Age (days)</th>
31+
<th>Upvotes</th>
3532
</tr>
3633
</thead>
3734
<tbody>
3835
{% for ticket in tickets %}
39-
<tr>
40-
<td scope="row">{{ ticket.id }}</td>
41-
<td><a href="{% url 'view_ticket' ticket.id %}">{{ ticket.summary }}</a></td>
42-
<td>{{ ticket.ticket_type }}</td>
36+
{% if ticket.status == "New" %}
37+
<tr data-url="{% url 'view_ticket' ticket.id %}" class="table-light clickable-row">
38+
{% elif ticket.status == "In Progress" %}
39+
<tr data-url="{% url 'view_ticket' ticket.id %}" class="table-warning clickable-row">
40+
{% elif ticket.status == "Resolved" %}
41+
<tr data-url="{% url 'view_ticket' ticket.id %}" class="table-success clickable-row">
42+
{% endif %}
43+
<td>{{ ticket.id }}</td>
44+
<td><a href="{% url 'view_ticket' ticket.id %}" data-toggle="tooltip" data-placement="bottom"
45+
title="{{ ticket.description }}">{{ ticket.summary }}</a></td>
46+
{% if ticket.ticket_type == "Bug" %}
47+
<td><i class="material-icons-outlined" data-toggle="tooltip" title="Bug"
48+
data-placement="left">bug_report</i>
49+
</td>
50+
{% else %}
51+
<td><i class="material-icons-outlined" data-toggle="tooltip" title="Feature"
52+
data-placement="left">build</i><span class="d-none">Feature</span>
53+
</td>
54+
{% endif %}
4355
<td>{{ ticket.submitted_by }}</td>
4456
<td>{{ ticket.assigned_to }}</td>
45-
<td>{{ ticket.status }}</td>
4657
{% if ticket.priority == "Low" %}
47-
<td><span class="badge badge-pill badge-success">{{ ticket.priority }}</span></td>
58+
<td><span class="badge badge badge-light">{{ ticket.priority }}</span></td>
4859
{% elif ticket.priority == "Medium" %}
49-
<td><span class="badge badge-pill badge-warning">{{ ticket.priority }}</span></td>
60+
<td><span class="badge badge badge-warning">{{ ticket.priority }}</span></td>
5061
{% elif ticket.priority == "High" %}
51-
<td><span class="badge badge-pill badge-danger">{{ ticket.priority }}</span></td>
62+
<td><span class="badge badge badge-danger">{{ ticket.priority }}</span></td>
5263
{% else %}
53-
<td><span class="badge badge-pill badge-light">{{ ticket.priority }}</span></td>
64+
<td><span class="badge badge badge-light">{{ ticket.priority }}</span></td>
5465
{% endif %}
55-
<td>{{ ticket.created_date }}</td>
66+
<!-- Ticket Status Icon -->
67+
{% if ticket.status == "New" %}
68+
<td><i class="material-icons-outlined" data-toggle="tooltip" title="New"
69+
data-placement="right">local_activity</i><span class="d-none">New</span></td>
70+
{% elif ticket.status == "In Progress" %}
71+
<td><i class="material-icons" data-toggle="tooltip" title="In Progress"
72+
data-placement="right">access_time</i><span class="d-none">In
73+
Progress</span></td>
74+
{% elif ticket.status == "Resolved" %}
75+
<td><i class="material-icons" data-toggle="tooltip" title="Resolved" data-placement="right">done</i><span
76+
class="d-none">Resolved</span></td>
77+
{% elif ticket.status == "Cancelled" %}
78+
<td><i class="material-icons" data-toggle="tooltip" title="Cancelled"
79+
data-placement="right">cancel</i><span class="d-none">Cancelled</span></td>
80+
{% endif %}
81+
<td>{{ ticket.created_date.date }}</td>
82+
<!-- {% if ticket.resolved_date == None %}
83+
<td>--</td>
84+
{% else %}
85+
<td>{{ ticket.resolved_date }}</td>
86+
{% endif %} -->
87+
<td>{{ ticket.age }}</td>
88+
<td>{{ ticket.upvotes }}</td>
5689
</tr>
5790
{% endfor %}
5891
</tbody>
5992
</table>
6093
</div>
6194
</div>
6295
{% endblock %}
96+
{% block scripts %}
97+
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
98+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
99+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
100+
<script type="text/javascript"
101+
src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/cr-1.5.2/r-2.2.3/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
102+
<script>
103+
$(document).ready(function () {
104+
$('#tickets-table').DataTable({
105+
/*
106+
dom: 'Prftip',
107+
layout: 'columns-1',
108+
searchPanes: {
109+
orderable: false,
110+
},
111+
columns: [2]
112+
dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>'
113+
dataLength: 20,
114+
dom: 'Brftip',
115+
pageLength: 20,
116+
responsive: true,
117+
colReorder: true,
118+
"scrollX": true,
119+
buttons: ['copy', 'excel', 'pdf']
120+
*/
121+
});
122+
$('.clickable-row').on("click", function () {
123+
window.location = $(this).data("url");
124+
});
125+
});
126+
</script>
127+
{% endblock %}

0 commit comments

Comments
 (0)