From f83ccd1755bfc47235752792c485f4eae6ebdc2c Mon Sep 17 00:00:00 2001 From: "Sean R. Abraham" Date: Mon, 18 Nov 2024 12:11:39 -0500 Subject: [PATCH] migrate to Bootstrap 5, implement light/dark mode 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. --- src/ims/application/_external.py | 4 +- src/ims/config/_urls.py | 10 +- src/ims/element/_element.py | 6 +- src/ims/element/admin/events/template.xhtml | 86 ++--- src/ims/element/admin/root/template.xhtml | 49 +-- src/ims/element/admin/streets/template.xhtml | 51 +-- src/ims/element/admin/types/template.xhtml | 66 ++-- .../element/incident/incident/template.xhtml | 27 +- .../incident/incident_template/template.xhtml | 349 +++++++++--------- .../element/incident/incidents/template.xhtml | 30 +- .../incidents_template/template.xhtml | 173 +++++---- .../element/incident/report/template.xhtml | 22 +- .../incident/report_template/template.xhtml | 202 +++++----- .../element/incident/reports/template.xhtml | 20 +- .../incident/reports_template/template.xhtml | 128 ++++--- src/ims/element/login/template.xhtml | 60 +-- src/ims/element/page/_page.py | 11 +- src/ims/element/page/footer/template.xhtml | 5 +- src/ims/element/page/header/template.xhtml | 4 +- src/ims/element/page/nav/template.xhtml | 107 ++++-- src/ims/element/root/template.xhtml | 62 ++-- src/ims/element/static/DataTables-1.10.12.zip | Bin 2346036 -> 0 bytes src/ims/element/static/DataTables-2.1.8.zip | Bin 0 -> 3608992 bytes src/ims/element/static/admin_events.js | 7 +- src/ims/element/static/ims.js | 91 ++++- src/ims/element/static/incident.js | 3 +- src/ims/element/static/incident_report.js | 11 +- src/ims/element/static/incident_reports.js | 6 + src/ims/element/static/incidents.js | 11 +- src/ims/element/static/style.css | 255 ++++++++----- 30 files changed, 1030 insertions(+), 826 deletions(-) delete mode 100644 src/ims/element/static/DataTables-1.10.12.zip create mode 100644 src/ims/element/static/DataTables-2.1.8.zip diff --git a/src/ims/application/_external.py b/src/ims/application/_external.py index 0a293bc2a..a57e72627 100644 --- a/src/ims/application/_external.py +++ b/src/ims/application/_external.py @@ -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" diff --git a/src/ims/config/_urls.py b/src/ims/config/_urls.py index d6eb0061e..4ce7231fd 100644 --- a/src/ims/config/_urls.py +++ b/src/ims/config/_urls.py @@ -80,17 +80,15 @@ class URLs: 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") + 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" - ) + dataTablesJS: ClassVar[URL] = dataTablesBase.child("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") diff --git a/src/ims/element/_element.py b/src/ims/element/_element.py index 22d0805e2..eb43c475a 100644 --- a/src/ims/element/_element.py +++ b/src/ims/element/_element.py @@ -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("", eventID)) + tags.a( + eventID, + href=eventPage.replace("", eventID), + Class="dropdown-item", + ) ) for eventID in eventIDs ) diff --git a/src/ims/element/admin/events/template.xhtml b/src/ims/element/admin/events/template.xhtml index 0b4dd7e41..bc1634b87 100644 --- a/src/ims/element/admin/events/template.xhtml +++ b/src/ims/element/admin/events/template.xhtml @@ -1,58 +1,54 @@ - - - -
- -
- -
- -
-
    -
  • - - - -
  • -
-
- - -
-
-
- -
- -
-
- + + + +
+
+
+
+ +
    +
  • + +
  • +
+
-
- +
+
+
+ + +
+
+
+ - + applyTheme(); + diff --git a/src/ims/element/admin/root/template.xhtml b/src/ims/element/admin/root/template.xhtml index 241285ade..40ef20222 100644 --- a/src/ims/element/admin/root/template.xhtml +++ b/src/ims/element/admin/root/template.xhtml @@ -1,32 +1,33 @@ - + - - - + + + - + applyTheme(); + diff --git a/src/ims/element/admin/streets/template.xhtml b/src/ims/element/admin/streets/template.xhtml index 00c9bf85d..edff286ad 100644 --- a/src/ims/element/admin/streets/template.xhtml +++ b/src/ims/element/admin/streets/template.xhtml @@ -1,45 +1,32 @@ - + - -
-
+ +
+
-
- -
-
    -
  • - - - -
  • -
- -
+
+
+ +
+
    +
  • +
  • +
-
- +
+
+ - + applyTheme(); + diff --git a/src/ims/element/admin/types/template.xhtml b/src/ims/element/admin/types/template.xhtml index d9e5706a5..c8cf0d3b0 100644 --- a/src/ims/element/admin/types/template.xhtml +++ b/src/ims/element/admin/types/template.xhtml @@ -1,45 +1,47 @@ - + - -
-
+ +
+
-
- -
-
    -
  • - - - - - - -
  • -
-
- - -
-
+
+
+ +
    +
  • + + +
  • +
+ -
- +
+
+ - + applyTheme(); + diff --git a/src/ims/element/incident/incident/template.xhtml b/src/ims/element/incident/incident/template.xhtml index c4a07f530..595f2f8fc 100644 --- a/src/ims/element/incident/incident/template.xhtml +++ b/src/ims/element/incident/incident/template.xhtml @@ -1,24 +1,23 @@ - + - + - + initIncidentPage(); + diff --git a/src/ims/element/incident/incident_template/template.xhtml b/src/ims/element/incident/incident_template/template.xhtml index d724803eb..6f948ed62 100644 --- a/src/ims/element/incident/incident_template/template.xhtml +++ b/src/ims/element/incident/incident_template/template.xhtml @@ -7,110 +7,108 @@ -
-
-
- - -
+
+
+
+ +
-
-
- - -
+
+
+
+ +
-
-
- - -
+
+
+
+ +
+
-
-
- - -
+
+ +
-
- -
-
    -
  • - - - +
    +
    + +
      +
    • +
    -
    - +
    -
    - -
    -
      -
    • - - - +
      +
      + +
        +
      • +
      -
      +
      @@ -119,90 +117,94 @@ -
      +
      - -
      -
      -
      - -
      - +
      + +
      + +
      + +
      + +
      -
      -
      - -
      - - : - - @ - +
      + Address: +
      + + : + + @ + +
      -
      -
      - -
      - +
      + +
      + +
      -
      - + +
      -
      +
      - -
      -
        -
      • - - - +
        + +
          +
        • +
        -
        +
        @@ -213,37 +215,38 @@
        - -
        - - -
        -
        -
        -
        +
        + +
        + + +
        +
        +