Skip to content

Commit

Permalink
migrate to Bootstrap 5, implement light/dark mode
Browse files Browse the repository at this point in the history 
The main reason to upgrade was to allow dark mode, which is something
various nighttime Operators have been requesting for a while. This
upgrade forced various other smaller changes too. The pages all look
a bit different, but hopefully mostly for the better.

I had to upgrade DataTables to get to a Bootstrap 5-compatible version.

One other tweak in this PR is that the instructions on the Field Report
page are turned into an accordion (a Bootstrap 5 thing), so that they
can be hidden by default.
  • Loading branch information
@srabraham
srabraham committed Dec 10, 2024
1 parent 8e14f72 commit f655834
Show file tree
Hide file tree
Showing 30 changed files with 1,040 additions and 825 deletions.
4 changes: 2 additions & 2 deletions src/ims/application/_external.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -670,9 +670,9 @@ class ExternalApplication:

config: Configuration

bootstrapVersionNumber = "3.3.7"
bootstrapVersionNumber = "5.3.3"
jqueryVersionNumber = "3.1.0"
dataTablesVersionNumber = "1.10.12"
dataTablesVersionNumber = "2.1.8"
lscacheVersionNumber = "1.0.5"

bootstrapVersion = f"bootstrap-{bootstrapVersionNumber}-dist"
Expand Down
14 changes: 9 additions & 5 deletions src/ims/config/_urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,18 +79,22 @@ class URLs:
jqueryMap: ClassVar[URL] = jqueryBase.child("jquery.min.map")

bootstrapBase: ClassVar[URL] = external.child("bootstrap").child("")
bootstrapCSS: ClassVar[URL] = bootstrapBase.child("css", "bootstrap.min.css")
bootstrapJS: ClassVar[URL] = bootstrapBase.child("js", "bootstrap.min.js")
bootstrapCSS: ClassVar[URL] = bootstrapBase.child(
"css", "bootstrap.min.css"
)
bootstrapJS: ClassVar[URL] = bootstrapBase.child(
"js", "bootstrap.bundle.min.js"
)

dataTablesBase: ClassVar[URL] = external.child("datatables").child("")
dataTablesJS: ClassVar[URL] = dataTablesBase.child(
"media", "js", "jquery.dataTables.min.js"
"js", "dataTables.min.js"
)
dataTablesBootstrapCSS: ClassVar[URL] = dataTablesBase.child(
"media", "css", "dataTables.bootstrap.min.css"
"css", "dataTables.bootstrap5.min.css"
)
dataTablesBootstrapJS: ClassVar[URL] = dataTablesBase.child(
"media", "js", "dataTables.bootstrap.min.js"
"js", "dataTables.bootstrap5.min.js"
)

lscacheJS: ClassVar[URL] = external.child("lscache.min.js")
Expand Down
6 changes: 5 additions & 1 deletion src/ims/element/_element.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,11 @@ def order(i: Iterable[str]) -> Iterable[str]:
eventPage = self.config.urls.viewEvent.asText()
return (
tag.clone()(
tags.a(eventID, href=eventPage.replace("<event_id>", eventID))
tags.a(
eventID,
href=eventPage.replace("<event_id>", eventID),
Class="dropdown-item",
)
)
for eventID in eventIDs
)
Expand Down
90 changes: 44 additions & 46 deletions src/ims/element/admin/events/template.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,56 @@
<!DOCTYPE html>
<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="root">

<head t:render="head" imports="ims,adminEvents" />

<body>
<div t:render="container">

<div class="row" id="event_access_container">

<div class="col-sm-12 event_access">
<label>Access for <span class="event_name" /> (<span class="access_mode" />):</label>
<div class="well well-sm">
<ul class="list-group list-group-small">
<li class="list-group-item">
<span class="badge remove-badge" onclick="removeAccess(this)">
<span class="glyphicon glyphicon-remove" />
</span>
</li>
</ul>
<div>
<label>Add:</label>
<input
id="access_add"
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="person:Tool"
onchange="addAccess(this)"
/>
</div>
<head t:render="head" imports="ims,adminEvents"/>

<body>
<div t:render="container">
<div class="row" id="event_access_container">
<div class="col-sm-12 py-1 event_access">
<div class="card">
<label class="card-header">Access for <span class="event_name"/> (<span class="access_mode"/>):</label>
<div class="card-body">
<ul class="list-group list-group-small list-group-flush">
<li class="list-group-item">
<button class="badge btn btn-danger remove-badge float-end" onclick="removeAccess(this)">
X
</button>
</li>
</ul>
<div class="card-footer">
<label for="access_add">Add:</label>
<input
id="access_add"
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="person:Tool"
onchange="addAccess(this)"
/>
</div>
</div>

</div>

<div class="row" id="event_new_container">
<div class="col-sm-12 event_access">
<label>Create New Event:</label>
<input
id="event_add"
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="Burn-A-Matic 3000"
onchange="addEvent(this)"
/>
</div>
</div>

</div>
</body>
</div>
<div class="row" id="event_new_container">
<div class="col-sm-12 event_access">
<label>Create New Event:</label>
<input
id="event_add"
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="Burn-A-Matic 3000"
onchange="addEvent(this)"
/>
</div>
</div>
</div>
</body>

<script>
var events = <json t:render="events_list" />;
<script>
var events = <json t:render="events_list"/>;

initPage();
</script>
applyTheme();
</script>

</html>
49 changes: 25 additions & 24 deletions src/ims/element/admin/root/template.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,33 @@
<!DOCTYPE html>
<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="root">

<head t:render="head" imports="ims,admin" />
<head t:render="head" imports="ims,admin"/>

<body>
<div t:render="container">
<ul>
<li>
<a t:render="url" url="adminIncidentTypes">
Incident Types
</a>
</li>
<li>
<a t:render="url" url="adminEvents">
Events
</a>
</li>
<li>
<a t:render="url" url="adminStreets">
Event Concentric Streets
</a>
</li>
</ul>
</div>
</body>
<body>
<div t:render="container">
<ul>
<li>
<a t:render="url" url="adminIncidentTypes">
Incident Types
</a>
</li>
<li>
<a t:render="url" url="adminEvents">
Events
</a>
</li>
<li>
<a t:render="url" url="adminStreets">
Event Concentric Streets
</a>
</li>
</ul>
</div>
</body>

<script>
<script>
initPage();
</script>
applyTheme();
</script>

</html>
51 changes: 19 additions & 32 deletions src/ims/element/admin/streets/template.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,32 @@
<!DOCTYPE html>
<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="root">

<head t:render="head" imports="ims,adminStreets" />
<head t:render="head" imports="ims,adminStreets"/>

<body>
<div t:render="container">
<div class="row" id="event_streets_container">
<body>
<div t:render="container">
<div class="row" id="event_streets_container">

<div class="col-sm-12 event_streets">
<label>Concentric streets for <span class="event_name" />:</label>
<div class="well well-sm">
<ul class="list-group list-group-small">
<li class="list-group-item">
<span class="badge remove-badge" onclick="removeStreet(this)">
<span class="glyphicon glyphicon-remove" />
</span>
</li>
</ul>
<!--
<div>
<label>Add:</label>
<input
id="access_add"
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="??????"
onchange="addStreet(this)"
/>
</div>
-->
</div>
<div class="col-sm-12 event_streets">
<div class="card">
<label class="card-header">Concentric streets for <span class="event_name"/>:</label>
<div class="card-body">
<ul class="list-group list-group-small">
<li class="list-group-item">
</li>
</ul>
</div>

</div>
</div>
</body>
</div>
</div>
</body>

<script>
var events = <json t:render="events_list" />;
<script>
var events = <json t:render="events_list"/>;

initPage();
</script>
applyTheme();
</script>

</html>
66 changes: 35 additions & 31 deletions src/ims/element/admin/types/template.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,49 @@
<!DOCTYPE html>
<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="root">

<head t:render="head" imports="ims,adminIncidentTypes" />
<head t:render="head" imports="ims,adminIncidentTypes"/>

<body>
<div t:render="container">
<div class="row" id="incident_types_container">
<body>
<div t:render="container">
<div class="row" id="incident_types_container">

<div id="incident_types" class="col-sm-12 incident_types">
<label>Incident types:</label>
<div class="well well-sm">
<ul class="list-group list-group-small">
<li class="list-group-item">
<span class="badge badge-visible" onclick="hideIncidentType(this)">
<span class="glyphicon glyphicon-eye-open" />
</span>
<span class="badge badge-hidden" onclick="showIncidentType(this)">
<span class="glyphicon glyphicon-eye-close" />
</span>
</li>
</ul>
<div>
<label>Add:</label>
<input
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="Chooch"
onchange="addIncidentType(this)"
/>
</div>
<div id="incident_types" class="col-sm-12 incident_types">
<div class="card">
<label class="card-header">Incident types</label>
<div class="card-body">
<ul class="list-group list-group-small">
<li class="list-group-item">
<button class="badge btn btn-primary float-end badge-visible"
onclick="hideIncidentType(this)">
Active
</button>
<button class="badge btn btn-warning float-end badge-hidden"
onclick="showIncidentType(this)">
Hidden
</button>
</li>
</ul>
<div class="card-footer">
<label>Add:</label>
<input
class="form-control input-sm auto-width"
type="text" inputmode="verbatim"
placeholder="Chooch"
onchange="addIncidentType(this)"
/>
</div>
</div>

</div>
</div>
</body>
</div>
</div>
</body>

<script>
var events = <json t:render="events_list" />;
<script>
var events = <json t:render="events_list"/>;

initPage();
</script>
applyTheme();
</script>

</html>
27 changes: 13 additions & 14 deletions src/ims/element/incident/incident/template.xhtml
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
<!DOCTYPE html>
<html xmlns:t="http://twistedmatrix.com/ns/twisted.web.template/0.1" t:render="root">

<head t:render="head" imports="lscache,ims,viewIncident"
/>
<head t:render="head" imports="lscache,ims,viewIncident"/>

<body />
<body/>

<script>
<!-- FIXME: figure out how to move this to / include from incident.js -->
var editingAllowed = <json t:render="editing_allowed" />;
var eventID = <json t:render="event_id" />;
var incidentNumber = <json t:render="incident_number" />;
<script>
<!-- FIXME: figure out how to move this to / include from incident.js -->
var editingAllowed = <json t:render="editing_allowed"/>;
var eventID = <json t:render="event_id"/>;
var incidentNumber = <json t:render="incident_number"/>;

var pageTemplateURL = url_viewIncidentTemplate;
var incidentsURL = urlReplace(url_incidents);
var viewIncidentsURL = urlReplace(url_viewIncidents);
var pageTemplateURL = url_viewIncidentTemplate;
var incidentsURL = urlReplace(url_incidents);
var viewIncidentsURL = urlReplace(url_viewIncidents);

var concentricStreetNameByID = <json t:render="concentric_street_name_by_id" />;
var concentricStreetNameByID = <json t:render="concentric_street_name_by_id"/>;

initIncidentPage();
</script>
initIncidentPage();
</script>

</html>
Loading

0 comments on commit f655834

Please sign in to comment.