Upgrade to (django) bootstrap 5

Bump django-bootstrap to version 5
Exchange bootstrap files (js & css)
Adapt settings
Migrate to new version/resolve breaking changes
Move layout adaptions previously included in bootstrap.css into custom.css

AKDashboard/static/AKDashboard/style.css

@@ -18,7 +18,6 @@
 }
 
 .dashboard-box {
-    display: block;
     padding: 2em;
     margin-right: 1em;
     min-width: 15em;

AKDashboard/templates/AKDashboard/dashboard_row.html

@@ -3,7 +3,7 @@
 {% load fontawesome_5 %}
 
 <h2><a href="{% url 'dashboard:dashboard_event' slug=event.slug %}">{{ event.name }}</a></h2>
-<div class="row">
+<div class="mt-2">
     {% if 'AKSubmission'|check_app_installed %}
         <a class="dashboard-box btn btn-primary"
            href="{% url 'submit:ak_list' event_slug=event.slug %}">
@@ -67,4 +67,3 @@
         </a>
     {% endfor %}
 </div>
-

AKModel/templates/admin/AKModel/action_intermediate.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 
 
@@ -18,7 +18,7 @@
     <form method="post">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <div class="float-right">
+        <div class="float-end">
             <button type="submit" class="save btn btn-success" value="Submit">
                 {% fa5_icon "check" 'fas' %} {% trans "Confirm" %}
             </button>

AKModel/templates/admin/AKModel/default_slot_editor.html

@@ -2,12 +2,13 @@
 {% load tags_AKModel %}
 {% load i18n admin_urls %}
 {% load static %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load tz %}
 
 {% block extrahead %}
     {{ block.super }}
-    {% bootstrap_javascript jquery='slim' %}
+    {% bootstrap_javascript %}
+    <script src="{% static 'common/vendor/jquery/jquery-3.3.1.min.js' %}"></script>
     {% include "AKModel/load_fullcalendar_availabilities.html" %}
 
     <script>

AKModel/templates/admin/AKModel/event_wizard/activate.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 {% load tz %}
 
@@ -22,7 +22,7 @@
     <form method="post">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <div class="float-right">
+        <div class="float-end">
             <button type="submit" class="save btn btn-success" value="Submit">
             {% fa5_icon "check" 'fas' %} {% trans "Finish" %}
         </button>

AKModel/templates/admin/AKModel/event_wizard/created_prepare_import.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 {% load tz %}
 
@@ -34,7 +34,7 @@
     <form method="post">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <div class="float-right">
+        <div class="float-end">
             <a href="{% url 'admin:new_event_wizard_activate' event.slug %}" class="btn btn-info">
                 {% fa5_icon "forward" 'fas' %} {% trans "Skip Import" %}
             </a>

AKModel/templates/admin/AKModel/event_wizard/finish.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 {% load tz %}
 
@@ -17,7 +17,7 @@
 
     <h5>{% trans "Congratulations. Everything is set up!" %}</h5>
 
-    <a href="{% url 'admin:event_status' event.slug %}" class="btn btn-info float-right">
+    <a href="{% url 'admin:event_status' event.slug %}" class="btn btn-info float-end">
             {% fa5_icon "info" 'fas' %}&nbsp;{% trans "Status" %}
     </a>
 

AKModel/templates/admin/AKModel/event_wizard/import.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 {% load tz %}
 
@@ -16,7 +16,7 @@
     <form method="post">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <button type="submit" class="save btn btn-success float-right" value="Submit">
+        <button type="submit" class="save btn btn-success float-end" value="Submit">
             {% fa5_icon "check" 'fas' %} {% trans "Continue" %}
         </button>
 

AKModel/templates/admin/AKModel/event_wizard/settings.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 {% load tz %}
 
@@ -18,7 +18,7 @@
     <form method="post">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <button type="submit" class="save btn btn-success float-right" value="Submit">
+        <button type="submit" class="save btn btn-success float-end" value="Submit">
             {% fa5_icon "check" 'fas' %} {% trans "Continue" %}
         </button>
 

AKModel/templates/admin/AKModel/event_wizard/start.html

@@ -2,7 +2,7 @@
 {% load tags_AKModel %}
 
 {% load i18n %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load fontawesome_5 %}
 
 {% block title %}{% trans "New event wizard" %}: {{ wizard_step_text }}{% endblock %}
@@ -15,7 +15,7 @@
     <form method="post" action="{% url 'admin:new_event_wizard_settings' %}">{% csrf_token %}
         {% bootstrap_form form %}
 
-        <button type="submit" class="save btn btn-success float-right" value="Submit">
+        <button type="submit" class="save btn btn-success float-end" value="Submit">
             {% fa5_icon "check" 'fas' %} {% trans "Continue" %}
         </button>
 

AKModel/templates/admin/AKModel/render_ak_messages.html

 <table class="table table-striped">
 {% for message in ak_messages %}
     <tr><td>
-        <span class="text-secondary float-right">
+        <span class="text-secondary float-end">
             {{ message.timestamp|date:"Y-m-d H:i:s" }}
         </span>
         <h5><a href="{% url 'submit:ak_detail' event_slug=message.ak.event.slug pk=message.ak.pk %}">{{ message.ak }}</a></h5>

AKModel/templates/admin/AKModel/requirements_overview.html

@@ -22,12 +22,12 @@
                             <tr>
                                 <td>{{ ak }}</td>
                                 {% if "AKSubmission"|check_app_installed %}
-                                    <td class="text-right">
-                                        <a href="{% url 'submit:ak_detail' event_slug=ak.event.slug pk=ak.pk %}" data-toggle="tooltip"
+                                    <td class="text-end">
+                                        <a href="{% url 'submit:ak_detail' event_slug=ak.event.slug pk=ak.pk %}" data-bs-toggle="tooltip"
                                            title="{% trans 'Details' %}"
                                            class="btn btn-primary">{% fa5_icon 'info' 'fas' %}</a>
                                         {% if event.active %}
-                                            <a href="{% url 'submit:ak_edit' event_slug=event.slug pk=ak.pk %}" data-toggle="tooltip"
+                                            <a href="{% url 'submit:ak_edit' event_slug=event.slug pk=ak.pk %}" data-bs-toggle="tooltip"
                                                title="{% trans 'Edit' %}"
                                                class="btn btn-success">{% fa5_icon 'pencil-alt' 'fas' %}</a>
                                         {% endif %}

AKModel/templates/admin/AKModel/room_change_form.html

 {% extends "admin/change_form.html" %}
 {% load i18n admin_urls %}
 {% load static %}
-{% load bootstrap4 %}
+{% load django_bootstrap5 %}
 {% load tz %}
 
 {% block extrahead %}
     {{ block.super }}
-    {% bootstrap_javascript jquery='slim' %}
+    {% bootstrap_javascript %}
+    <script src="{% static 'common/vendor/jquery/jquery-3.3.1.min.js' %}"></script>
     {% if original.event %}
         {% include "AKModel/load_fullcalendar_availabilities.html" %}
 

AKModel/templates/admin/AKModel/status.html

@@ -11,11 +11,11 @@
         <h2><a href="{% url 'admin:AKModel_event_change' event.pk %}">{{event}}</a></h2>
         <h5>{{ event.start }} - {{ event.end }}</h5>
 
-        <div class="custom-control custom-switch mt-2 mb-2">
-          <input type="checkbox" class="custom-control-input" id="planPublishedSwitch"
+        <div class="form-check form-switch mt-2 mb-2">
+          <input type="checkbox" class="form-check-input" id="planPublishedSwitch"
                  {% if not event.plan_hidden %}checked{% endif %}
                  onclick="location.href='{% if event.plan_hidden %}{% url 'admin:plan-publish' %}{% else %}{% url 'admin:plan-unpublish' %}{% endif %}?pks={{event.pk}}';">
-          <label class="custom-control-label" for="planPublishedSwitch">{% trans "Plan published?" %}</label>
+          <label class="form-check-label" for="planPublishedSwitch">{% trans "Plan published?" %}</label>
         </div>
 
         <div class="row">
@@ -84,7 +84,7 @@
                        href="{% url 'admin:schedule' event_slug=event.slug %}">{% trans "Scheduling" %}</a>
                     {% if "AKScheduling | is_installed" %}
                         <a class="btn btn-success"
-                            href="{% url 'admin:constraint-violations' slug=event.slug %}">{% trans "Constraint Violations" %} <span class="badge badge-secondary">{{ event.constraintviolation_set.count }}</span></a>
+                            href="{% url 'admin:constraint-violations' slug=event.slug %}">{% trans "Constraint Violations" %} <span class="badge bg-secondary">{{ event.constraintviolation_set.count }}</span></a>
                         <a class="btn btn-success"
                             href="{% url 'admin:special-attention' slug=event.slug %}">{% trans "AKs requiring special attention" %}</a>
                         <a class="btn btn-success"

AKModel/tests.py

@@ -76,9 +76,12 @@ class BasicViewTests:
         self.client.force_login(self.staff_user)
         for view_name in self.VIEWS_STAFF_ONLY:
             view_name_with_prefix, url = self._name_and_url(view_name)
-            response = self.client.get(url)
-            self.assertEqual(response.status_code, 200,
-                             msg=f"{view_name_with_prefix} ({url}) should be accessible for staff (but isn't)")
+            try:
+                response = self.client.get(url)
+                self.assertEqual(response.status_code, 200,
+                                 msg=f"{view_name_with_prefix} ({url}) should be accessible for staff (but isn't)")
+            except Exception as e:
+                self.fail(f"An error occurred during rendering of {view_name_with_prefix} ({url}):\n\n{traceback.format_exc()}")
 
         self.client.force_login(self.deactivated_user)
         for view_name in self.VIEWS_STAFF_ONLY:

AKPlan/templates/AKPlan/plan_akslot.html

@@ -20,7 +20,7 @@
             // No header, not buttons
             headerToolbar: false,
             aspectRatio: 2.5,
-            themeSystem: 'bootstrap',
+            themeSystem: 'bootstrap5',
             // Only show calendar view for the dates of the connected event
             visibleRange: {
                 start: '{{ ak.event.start | timezone:ak.event.timezone | date:"Y-m-d H:i:s" }}',

AKPlan/templates/AKPlan/plan_detail.html

@@ -28,7 +28,7 @@
                         right: ''
                     },
                     aspectRatio: 2,
-                    themeSystem: 'bootstrap',
+                    themeSystem: 'bootstrap5',
                     // Only show calendar view for the dates of the connected event
                     visibleRange: {
                         start: '{{ event.start | timezone:event.timezone | date:"Y-m-d H:i:s" }}',

AKPlan/templates/AKPlan/plan_index.html

@@ -22,7 +22,7 @@
                         center: 'title',
                         right: 'resourceTimelineDay,resourceTimelineEvent'
                     },
-                    themeSystem: 'bootstrap',
+                    themeSystem: 'bootstrap5',
                     // Adapt to user selected locale
 	                locale: '{{ LANGUAGE_CODE }}',
                     initialView: 'resourceTimelineEvent',
@@ -79,11 +79,11 @@
 
 
 {% block content %}
-    <div class="float-right">
+    <div class="float-end">
         <ul class="nav nav-pills">
             {% if rooms|length > 0 %}
                 <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
+                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
                        aria-haspopup="true"
                        aria-expanded="false">{% trans "Rooms" %}</a>
                     <div class="dropdown-menu" style="">
@@ -96,7 +96,7 @@
             {% endif %}
             {% if tracks|length > 0 %}
                 <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
+                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
                        aria-haspopup="true"
                        aria-expanded="false">{% trans "Tracks" %}</a>
                     <div class="dropdown-menu">

AKPlan/templates/AKPlan/plan_room.html

@@ -43,10 +43,10 @@
 
 
 {% block content %}
-    <div class="float-right">
+    <div class="float-end">
         <ul class="nav nav-pills">
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Rooms" %}</a>
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Rooms" %}</a>
             <div class="dropdown-menu" style="">
                 {% for r in event.room_set.all %}
                     <a class="dropdown-item" href="{% url "plan:plan_room" event_slug=event.slug pk=r.pk %}">{{ r }}</a>

AKPlan/templates/AKPlan/plan_track.html

@@ -30,10 +30,10 @@
 
 
 {% block content %}
-    <div class="float-right">
+    <div class="float-end">
         <ul class="nav nav-pills">
           <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Tracks" %}</a>
+            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Tracks" %}</a>
             <div class="dropdown-menu">
                 {% for t in event.aktrack_set.all %}
                     <a class="dropdown-item" href="{% url "plan:plan_track" event_slug=event.slug pk=t.pk %}">{{ t }}</a>