Upgrade to Bootstrap 5 (#1105)

## Description of Changes
*This change is cherry-picked from
OrcaCollective#458
Upgrade to Bootstrap 5 in preparation for upcoming changes. Everything
looks slightly different due to changes in the bootstrap framework.

## Notes for Deployment
None

## Screenshots (if appropriate)

![1](https://github.com/lucyparsons/OpenOversight/assets/66500457/f4c167a9-b7f4-43bb-a5d3-c2a3ca3a75fe)


## Tests and Linting
Manually checked that all pages look roughly reasonably similar to the
previous look

 - [x] This branch is up-to-date with the `develop` branch.
 - [x] `pytest` passes on my local development environment.
 - [x] `pre-commit` passes on my local development environment.

OpenOversight/app/__init__.py

@@ -4,7 +4,7 @@
 from logging.handlers import RotatingFileHandler
 
 from flask import Flask, jsonify, render_template, request
-from flask_bootstrap import Bootstrap
+from flask_bootstrap import Bootstrap5
 from flask_compress import Compress
 from flask_limiter import Limiter
 from flask_limiter.util import get_remote_address
@@ -21,7 +21,7 @@
 from OpenOversight.app.utils.constants import MEGABYTE
 
 
-bootstrap = Bootstrap()
+bootstrap = Bootstrap5()
 compress = Compress()
 
 login_manager = LoginManager()

OpenOversight/app/auth/views.py

@@ -60,7 +60,7 @@ def before_request():
         and not current_user.confirmed
         and request.endpoint
         and request.endpoint[:5] != "auth."
-        and request.endpoint != "static"
+        and request.endpoint not in ["static", "bootstrap.static"]
     ):
         return redirect(url_for("auth.unconfirmed"))
 
@@ -69,7 +69,7 @@ def before_request():
 def unconfirmed():
     if current_user.is_anonymous or current_user.confirmed:
         return redirect(url_for("main.index"))
-    if current_app.config["APPROVE_REGISTRATIONS"]:
+    if current_app.config["APPROVE_REGISTRATIONS"] and not current_user.approved:
         return render_template("auth/unapproved.html")
     else:
         return render_template("auth/unconfirmed.html")

OpenOversight/app/filters.py

@@ -40,7 +40,7 @@ def field_in_query(form_data, field) -> str:
     Determine if a field is specified in the form data, and if so return a Bootstrap
     class which will render the field accordion open.
     """
-    return " in " if form_data.get(field) else ""
+    return " show " if form_data.get(field) else ""
 
 
 def markdown(text: str) -> Markup:

OpenOversight/app/models/config.py

@@ -28,6 +28,7 @@
 class BaseConfig:
     def __init__(self):
         # App Settings
+        self.BOOTSTRAP_SERVE_LOCAL = True
         self.DEBUG = False
         self.ENV = os.environ.get(KEY_ENV, KEY_ENV_DEV)
         self.SEED = 666

OpenOversight/app/static/css/openoversight.css

@@ -4,22 +4,15 @@ html {
 }
 body {
   margin-bottom: 100px;
-  padding-top: 65px;
   padding-bottom: 100px;
 }
 
 .footer {
-  position: absolute;
-  bottom: 140px;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 100px;
 }
 
-div[role=main] {
-    padding-bottom: 30px;
-}
-
 .social:hover {
     color: #000000;
      -webkit-transform: scale(1.1);
@@ -72,7 +65,6 @@ div[role=main] {
  }
 
  .theme-showcase {
-     margin-bottom: 40px;
  }
 
  .theme-showcase > p > .btn {
@@ -298,7 +290,6 @@ a > .tutorial{
     color: black;
     border-color: green;
     font-weight: bold;
-    margin-bottom: 3rem;
 }
 
 .btn-success:hover {
@@ -490,15 +481,14 @@ tr:hover .row-actions {
 }
 
 .filter-sidebar .panel-heading .accordion-toggle:after {
-    font-family: 'Glyphicons Halflings';
-    content: "\e252";
+    content: "\25B4";
     float: right;
     font-size: 0.7em;
     padding-top: 0.3em;
 }
 
 .filter-sidebar .panel-heading.collapsed .accordion-toggle:after {
-    content: "\e253";
+    content: "\25BE";
 }
 
 @media all and (min-width: 768px) and (max-width: 991px) {
@@ -555,16 +545,15 @@ tr:hover .row-actions {
     display:none;
 }
 
-.console .done-button:hover ~ .button-explanation .done-button-explanation{
+.console:has(.done-button:hover) .button-explanation .done-button-explanation{
     display:block;
 }
 
-.console .skip-button:hover ~ .button-explanation .skip-button-explanation{
+.console:has(.skip-button:hover) .button-explanation .skip-button-explanation{
     display:block;
 }
 
-
-.console .launchroster-button:hover ~ .button-explanation .launchroster-button-explanation{
+.console:has(.launchroster-button:hover) .input-explanation .launchroster-button-explanation{
     display:block;
 }
 

OpenOversight/app/static/js/contentWarning.js

@@ -2,7 +2,7 @@ function createOverlay(container) {
     const warningText = $(
         "<span><h3>Content Warning</h3><p>This video may be disturbing for some viewers</p></span>"
     )
-    const hide = $('<button type="button" class="btn btn-lg">Show video</button>')
+    const hide = $('<button type="button" class="btn btn-lg btn-light">Show video</button>')
     hide.click(() => overlay.css("display", "none"))
 
     const wrapper = $("<div>")

OpenOversight/app/static/js/find_officer.js

@@ -4,73 +4,38 @@ function buildSelect(name, data_url, dept_id) {
         data: {department_id: dept_id}
     }).done(function(data) {
         const dropdown = $(
-            '<select class="form-control" id="' + name + '" name="' + name + '">'
+            '<select class="form-select" id="' + name + '" name="' + name + '">'
         );
         // Add the null case first
         dropdown.append($('<option value="Not Sure">Not Sure</option>'));
-        for (let i = 0; i < data.length; i++) {
+        for (const item of data) {
             dropdown.append(
-                $('<option></option>').attr('value', data[i][1]).text(data[i][1])
+                $('<option></option>').attr('value', item[1]).text(item[1])
             );
         }
         $('#' + name).replaceWith(dropdown);
     });
 }
 
 $(document).ready(function() {
-    const navListItems = $('ul.setup-panel li a');
-    const navButtons = $('.setup-content a');
-    const allWells = $('.setup-content');
-
-    // If a navigation bar item is clicked and is not disabled, activate the selected panel
-    navListItems.click(function(e) {
-        const $target = $($(this).attr('href'));
-        const $item = $(this).parent();
-
-        if (!$item.hasClass('disabled')) {
-            navListItems.parent().removeClass('active');
-            $item.addClass('active');
-            allWells.addClass("hidden");
-            $target.removeClass("hidden");
-        }
-
-        return false;
-    });
-
-    // When next or previous button is clicked, simulate clicking on navigation bar item
-    navButtons.click(function(e) {
-        const stepId = $(this).attr('href');
-        // Locate the nav bar item for this step
-        const $navItem = $('ul.setup-panel li a[href="' + stepId + '"]');
-
-        $navItem.parent().removeClass('disabled');
-        $navItem.trigger('click');
-
-        return false;
-    })
-
     // Load the department's units and ranks when a new dept is selected
-    $('#dept').on('change', function(e) {
+    $('#dept').on('change', e => {
         const deptId = $('#dept').val();
         const ranksUrl = $('#step-1').data('ranks-url');
         const unitsUrl = $('#step-1').data('units-url');
         buildSelect('rank', ranksUrl, deptId);
         buildSelect('unit', unitsUrl, deptId);
 
         const deptsWithUii = $('#current-uii').data('departments');
-        const targetDept = deptsWithUii.find(function(element) {
-            return element.id == deptId
-        });
+        const targetDept = deptsWithUii.find((element) => element.id == deptId);
 
-        const deptUiidLabel = targetDept.unique_internal_identifier_label
+        const deptUiidLabel = targetDept.unique_internal_identifier_label;
         if (deptUiidLabel) {
             $('#current-uii').text(deptUiidLabel);
+            $('#uii-question').show();
         } else {
             $('#uii-question').hide();
         }
-
-        // Disable later steps if dept changed in case ranks/units have changed
-        $('ul.setup-panel li:not(.active)').addClass('disabled');
     });
 
     // Generate loading notification
@@ -100,7 +65,5 @@ $(document).ready(function() {
     });
 
     // Initialize controls
-    allWells.addClass("hidden");
     $('#dept').trigger('change');
-    $('ul.setup-panel li.active a').trigger('click');
 });

OpenOversight/app/static/js/tagger.js

@@ -69,7 +69,7 @@ $(function () {
 
 
   // Download
-  if (typeof $download[0].download === 'undefined') {
+  if ($download.length && typeof $download[0].download === 'undefined') {
     $download.addClass('disabled');
   }
 

OpenOversight/app/templates/403.html

@@ -3,7 +3,7 @@
   Forbidden
 {% endblock title %}
 {% block content %}
-  <div class="container theme-showcase" role="main">
+  <div class="container theme-showcase py-5" role="main">
     <h1>Forbidden</h1>
     <p>
       You do not have permissions to view this page. <a href="{{ url_for("main.index") }}">Return to homepage</a>.

OpenOversight/app/templates/404.html

@@ -3,7 +3,7 @@
   Page Not Found
 {% endblock title %}
 {% block content %}
-  <div class="container theme-showcase" role="main">
+  <div class="container theme-showcase py-5" role="main">
     <h1>Page Not Found</h1>
     <p>
       We couldn't find the page you are looking for. <a href="{{ url_for("main.index") }}">Return to homepage</a>.

OpenOversight/app/templates/413.html

@@ -3,7 +3,7 @@
   File Too Large
 {% endblock title %}
 {% block content %}
-  <div class="container theme-showcase" role="main">
+  <div class="container theme-showcase py-5" role="main">
     <h1>File Too Large</h1>
     <p>
       The file you are trying to upload is too large. <a href="{{ url_for("main.index") }}">Return to homepage</a>.

OpenOversight/app/templates/429.html

@@ -3,7 +3,7 @@
   Too Many Requests
 {% endblock title %}
 {% block content %}
-  <div class="container theme-showcase" role="main">
+  <div class="container theme-showcase py-5" role="main">
     <h1>Too Many Requests</h1>
     <p>
       You're sending requests too fast. Wait a minute and try again. <a href="{{ url_for("main.index") }}">Return to homepage</a>.

OpenOversight/app/templates/500.html

@@ -3,7 +3,7 @@
   Internal Server Error
 {% endblock title %}
 {% block content %}
-  <div class="container theme-showcase" role="main">
+  <div class="container theme-showcase py-5" role="main">
     <h1>Internal Server Error</h1>
     <p>
       Oops! Something went wrong. <a href="{{ url_for("main.index") }}">Return to homepage</a>.