Skip to content

Commit b795c6b

Browse files
shanavas786shanavas786
committed
Move script and style to external file
1 parent 280d348 commit b795c6b

File tree

3 files changed

+122
-127
lines changed

3 files changed

+122
-127
lines changed

‎mainapp/templates/mainapp/request_list.html‎

Lines changed: 4 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,6 @@
11
{% extends 'base.html' %}
22
{% load bootstrap3 %}
3-
4-
{% block css %}
5-
<style>
6-
.table{
7-
table-layout: fixed;
8-
}
9-
10-
.table td{
11-
word-wrap: break-word;
12-
}
13-
#req-summary { margin-top: 15px; }
14-
.modal-body .row { padding: 5px 0 }
15-
</style>
16-
<style>
17-
@media only screen and (max-width: 800px) {
18-
19-
#requests-table table, thead, tbody, th, td, tr {
20-
display: block;
21-
}
22-
23-
#requests-table thead tr {
24-
position: absolute;
25-
top: -9999px;
26-
left: -9999px;
27-
}
28-
29-
#requests-table tr {
30-
margin: 0 0 1rem 0;
31-
}
32-
33-
#requests-table tr:nth-child(odd) {
34-
background: #ccc;
35-
}
36-
37-
#requests-table td {
38-
/* Behave like a "row" */
39-
border: none;
40-
border-bottom: 1px solid #eee;
41-
position: relative;
42-
padding-left: 50%;
43-
}
44-
45-
#requests-table td:before {
46-
/* Now like a table header */
47-
position: absolute;
48-
/* Top/left values mimic padding */
49-
top: 0;
50-
left: 6px;
51-
width: 45%;
52-
padding-right: 10px;
53-
white-space: normal;
54-
}
55-
#requests-table td:nth-of-type(1):before { content: "Request Number - അപേക്ഷ നമ്പര്‍"; }
56-
#requests-table td:nth-of-type(2):before { content: "District - ജില്ല"; }
57-
#requests-table td:nth-of-type(3):before { content: "Location - സ്ഥലം"; }
58-
#requests-table td:nth-of-type(4):before { content: "Requestee - അപേക്ഷകന്‍റെ പേര്"; }
59-
#requests-table td:nth-of-type(5):before { content: "Phone - ഫോണ്‍ നമ്പര്‍"; }
60-
#requests-table td:nth-of-type(6):before { content: "Date - തീയതി"; }
61-
#requests-table td:nth-of-type(9):before { content: "More details - കൂടുതൽ വിശദാംശങ്ങൾ"; }
62-
}
63-
@media only screen and (max-width: 420px) {
64-
#requests-table td {
65-
min-height: 60px;
66-
}
67-
}
68-
69-
</style>
70-
{% endblock %}
3+
{% load static %}
714

725
{% block content %}
736
<!--Navigation Breadcrumbs-->
@@ -187,64 +120,8 @@ <h3>Summary</h3>
187120

188121
</div>
189122
</div>
123+
{% endblock %}
190124

191-
<script>
192-
const iDist = 1
193-
const iLoc = 2
194-
const iRequestee = 3
195-
const iContact = 4
196-
const iDate = 5
197-
const iGps = 6
198-
const iSummary = 7
199-
200-
window.addEventListener("load", function() {
201-
$("input.search").keyup(search);
202-
$(".show-details").click(showDetails);
203-
})
204-
205-
function showDetails(evt) {
206-
var tds = $(evt.target).parent().siblings()
207-
var dist = tds.eq(iDist).text().toLowerCase()
208-
var loc = tds.eq(iLoc).text().toLowerCase()
209-
var requestee = tds.eq(iRequestee).text().toLowerCase()
210-
var phone = tds.eq(iContact).html()
211-
var date = tds.eq(iDate).text()
212-
var gps = tds.eq(iGps).html()
213-
var summary = tds.eq(iSummary).html()
214-
215-
$("#req-dist").text(dist)
216-
$("#req-loc").text(loc)
217-
$("#req-requestee").text(requestee)
218-
$("#req-contact").html(phone)
219-
$("#req-date").text(date)
220-
$("#req-gps").html(gps)
221-
$("#req-summary").html(summary)
222-
223-
$("#req-details").modal("show")
224-
}
225-
226-
function search() {
227-
$("#req-table").find("tr").each(function(i,el) {
228-
// skip header row
229-
if (i == 0) return
230-
el = $(el)
231-
var tds = el.find("td")
232-
var loc = tds.eq(iLoc).text().toLowerCase()
233-
var requestee = tds.eq(iRequestee).text().toLowerCase()
234-
var phone = tds.eq(iContact).text()
235-
var locKey = $("#search-loc").val().toLowerCase()
236-
var reqKey = $("#search-requestee").val().toLowerCase()
237-
var phoneKey = $("#search-phone").val()
238-
239-
if (loc.includes(locKey) &&
240-
requestee.includes(reqKey) &&
241-
phone.includes(phoneKey))
242-
{
243-
el.show()
244-
} else {
245-
el.hide()
246-
}
247-
})
248-
}
249-
</script>
125+
{% block javascript %}
126+
<script src="{% static 'js/request-list.js' %}" async defer></script>
250127
{% endblock %}

‎static/css/style.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,3 +311,66 @@ table thead tr th {
311311
opacity: 1;
312312
}
313313
}
314+
315+
.table{
316+
table-layout: fixed;
317+
}
318+
319+
.table td{
320+
word-wrap: break-word;
321+
}
322+
#req-summary { margin-top: 15px; }
323+
.modal-body .row { padding: 5px 0 }
324+
325+
326+
@media only screen and (max-width: 800px) {
327+
328+
#requests-table table, thead, tbody, th, td, tr {
329+
display: block;
330+
}
331+
332+
#requests-table thead tr {
333+
position: absolute;
334+
top: -9999px;
335+
left: -9999px;
336+
}
337+
338+
#requests-table tr {
339+
margin: 0 0 1rem 0;
340+
}
341+
342+
#requests-table tr:nth-child(odd) {
343+
background: #ccc;
344+
}
345+
346+
#requests-table td {
347+
/* Behave like a "row" */
348+
border: none;
349+
border-bottom: 1px solid #eee;
350+
position: relative;
351+
padding-left: 50%;
352+
}
353+
354+
#requests-table td:before {
355+
/* Now like a table header */
356+
position: absolute;
357+
/* Top/left values mimic padding */
358+
top: 0;
359+
left: 6px;
360+
width: 45%;
361+
padding-right: 10px;
362+
white-space: normal;
363+
}
364+
#requests-table td:nth-of-type(1):before { content: "Request Number - അപേക്ഷ നമ്പര്‍"; }
365+
#requests-table td:nth-of-type(2):before { content: "District - ജില്ല"; }
366+
#requests-table td:nth-of-type(3):before { content: "Location - സ്ഥലം"; }
367+
#requests-table td:nth-of-type(4):before { content: "Requestee - അപേക്ഷകന്‍റെ പേര്"; }
368+
#requests-table td:nth-of-type(5):before { content: "Phone - ഫോണ്‍ നമ്പര്‍"; }
369+
#requests-table td:nth-of-type(6):before { content: "Date - തീയതി"; }
370+
#requests-table td:nth-of-type(9):before { content: "More details - കൂടുതൽ വിശദാംശങ്ങൾ"; }
371+
}
372+
@media only screen and (max-width: 420px) {
373+
#requests-table td {
374+
min-height: 60px;
375+
}
376+
}

‎static/js/request-list.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const iDist = 1
2+
const iLoc = 2
3+
const iRequestee = 3
4+
const iContact = 4
5+
const iDate = 5
6+
const iGps = 6
7+
const iSummary = 7
8+
9+
$("input.search").keyup(search);
10+
$(".show-details").click(showDetails);
11+
12+
function showDetails(evt) {
13+
var tds = $(evt.target).parent().siblings()
14+
var dist = tds.eq(iDist).text().toLowerCase()
15+
var loc = tds.eq(iLoc).text().toLowerCase()
16+
var requestee = tds.eq(iRequestee).text().toLowerCase()
17+
var phone = tds.eq(iContact).html()
18+
var date = tds.eq(iDate).text()
19+
var gps = tds.eq(iGps).html()
20+
var summary = tds.eq(iSummary).html()
21+
22+
$("#req-dist").text(dist)
23+
$("#req-loc").text(loc)
24+
$("#req-requestee").text(requestee)
25+
$("#req-contact").html(phone)
26+
$("#req-date").text(date)
27+
$("#req-gps").html(gps)
28+
$("#req-summary").html(summary)
29+
30+
$("#req-details").modal("show")
31+
}
32+
33+
function search() {
34+
$("#req-table").find("tr").each(function(i,el) {
35+
// skip header row
36+
if (i == 0) return
37+
el = $(el)
38+
var tds = el.find("td")
39+
var loc = tds.eq(iLoc).text().toLowerCase()
40+
var requestee = tds.eq(iRequestee).text().toLowerCase()
41+
var phone = tds.eq(iContact).text()
42+
var locKey = $("#search-loc").val().toLowerCase()
43+
var reqKey = $("#search-requestee").val().toLowerCase()
44+
var phoneKey = $("#search-phone").val()
45+
46+
if (loc.includes(locKey) &&
47+
requestee.includes(reqKey) &&
48+
phone.includes(phoneKey))
49+
{
50+
el.show()
51+
} else {
52+
el.hide()
53+
}
54+
})
55+
}

0 commit comments

Comments
 (0)