Update to Bootstrap 5

AIPscan/Reporter/templates/aips.html

@@ -10,7 +10,7 @@
 
 {% if storage_services %}
 
-  <div class="float-right">
+  <div class="float-end">
     <form action="{{ url_for('reporter.view_aips') }}" method="GET" class="pr-3" id="queryform">
       <i class="fas fa-search"></i> Search <input name="query" id="query"/><input type="submit" hidden/>
     </form>

AIPscan/static/css/custom.css

@@ -56,3 +56,10 @@ body {
 .table-header {
   background-color: #ccc !important;
 }
+
+/* Use Bootstrap 4 look of button */
+.btn-info {
+  color: #fff;
+  background-color: #17a2b8;
+  border-color: #17a2b8;
+}

AIPscan/templates/partials/navbar.html

@@ -1,18 +1,20 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <a class="navbar-brand" href="/">AIPscan</a>
-  <div class="navbar-collapse" id="navbarNavDropdown">
-    <ul class="navbar-nav">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/">AIPscan</a>
+    <div class="navbar-collapse" id="navbarNavDropdown">
+      <ul class="navbar-nav">
+
+        {% for section in navbar.sections %}
+          <li class="nav-item">
+            <a class="nav-link {{ 'active fw-bold' if section.is_active(request) else '' }}" href="{{ section.get_url() }}">{{ section.label }}</a>
+          </li>
+        {% endfor %}
 
-      {% for section in navbar.sections %}
         <li class="nav-item">
-          <a class="nav-link {{ 'active fw-bold' if section.is_active(request) else '' }}" href="{{ section.get_url() }}">{{ section.label }}</a>
+          <a class="nav-link" href="{{ url_for('api.doc') }}" target="apiframe">API</a>
         </li>
-      {% endfor %}
-
-      <li class="nav-item">
-        <a class="nav-link" href="{{ url_for('api.doc') }}" target="apiframe">API</a>
-      </li>
-    </ul>
+      </ul>
+    </div>
+    <span style="font-style: italic" class="navbar-text">Crawl Archivematica AIPs to provide repository-wide reporting</span>
   </div>
-  <span style="font-style: italic" class="navbar-text">Crawl Archivematica AIPs to provide repository-wide reporting</span>
 </nav>

build_config/entry/chart_formats_count.entry.js

@@ -6,7 +6,6 @@ window.$ = $;
 window.jQuery = $;
 
 import bootstrap from "bootstrap";
-window.bootstrap = bootstrap;
 
 import Chart from "chart.js/auto";
 window.Chart = Chart;

build_config/entry/shared/base_shared.js

@@ -8,6 +8,5 @@ import "jquery-ui-dist/jquery-ui.min.js";
 window.$ = window.jQuery = $;
 
 import bootstrap from "bootstrap";
-window.bootstrap = bootstrap;
 
 import "/AIPscan/static/css/custom.css";

package.json

@@ -8,7 +8,7 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@rollup/plugin-inject": "^5.0.5",
-    "bootstrap": "^4.6.2",
+    "bootstrap": "^5.3.3",
     "chart.js": "^4.4.1",
     "jquery": "^3.7.1",
     "jquery-ui-dist": "^1.13.2",