feat(templates): update to bootstrap 5

Closes: #1529
acdh-oeaw · Jan 15, 2025 · bc5d610 · bc5d610
1 parent 577c932
commit bc5d610
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 35 deletions.
diff --git a/apis_core/apis_entities/templates/apis_entities/partials/entity_actions_nav.html b/apis_core/apis_entities/templates/apis_entities/partials/entity_actions_nav.html
@@ -1,8 +1,8 @@
 {% block action-nav %}
   {% if object.get_delete_permission in perms or object_create_perm in perms %}
-    <ul class="nav nav-tabs card-header-tabs float-right">
+    <ul class="nav nav-tabs card-header-tabs float-end">
       <li class="nav-item">
-        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Actions</a>
+        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Actions</a>
         <div class="dropdown-menu">
           {% if object.get_delete_permission in perms %}
             <a class="dropdown-item text-danger" href="{{ object.get_delete_url }}">

diff --git a/apis_core/apis_entities/templates/apis_entities/partials/entity_base_nav.html b/apis_core/apis_entities/templates/apis_entities/partials/entity_base_nav.html
@@ -1,6 +1,6 @@
 {% block base-nav %}
   {% if object.get_change_permission in perms %}
-    <ul class="nav nav-tabs card-header-tabs float-left">
+    <ul class="nav nav-tabs card-header-tabs float-start">
       <li class="nav-item">
         <a class="nav-link text-success {% if request.path == object.get_absolute_url %}active{% endif %} "
            href="{{ object.get_absolute_url }}"><span class="material-symbols-outlined material-symbols-align">visibility</span>View</a>

diff --git a/apis_core/core/static/js/core.js b/apis_core/core/static/js/core.js
@@ -5,7 +5,8 @@ $(document).ready(function() {
         enableFiltering: true,
         enableCaseInsensitiveFiltering: true,
         templates: {
-            filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><input class="form-control multiselect-search" type="text" /></div></div>'
+            filter: '<div class="multiselect-filter"><div class="input-group input-group-sm p-1"><input class="form-control multiselect-search" type="text" /></div></div>',
+            button: '<button type="button" class="multiselect dropdown-toggle form-control" data-bs-toggle="dropdown" aria-expanded="false"><span class="multiselect-selected-text"></span></button>'
         }
     });
 })

diff --git a/apis_core/core/templates/base.html b/apis_core/core/templates/base.html
@@ -50,8 +50,7 @@
       <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
       <link rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-            integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
             crossorigin="anonymous">
       <link href="{% static 'css/override_bootstrap.min.css' %}" rel="stylesheet" />
       <link href="{% static 'css/material-symbols.css' %}" rel="stylesheet" />
@@ -83,23 +82,22 @@
 
           <button class="navbar-toggler"
                   type="button"
-                  data-toggle="collapse"
-                  data-target="#navbarNavDropdown"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarNavDropdown"
                   aria-controls="navbarNavDropdown"
                   aria-expanded="false"
                   aria-label="Toggle navigation">
             <span class="navbar-toggler-icon" />
           </button>
           <!-- Start main menu -->
-          <div class="collapse navbar-collapse justify-content-end"
-               id="navbarNavDropdown">
-            <ul id="main-menu" class="navbar-nav mr-auto">
+          <div class="collapse navbar-collapse" id="navbarNavDropdown">
+            <ul id="main-menu" class="navbar-nav me-auto">
 
               {% block main-menu %}
                 <li class="nav-item dropdown">
                   <a href="#"
                      class="nav-link dropdown-toggle"
-                     data-toggle="dropdown"
+                     data-bs-toggle="dropdown"
                      role="button"
                      aria-haspopup="true"
                      aria-expanded="false">
@@ -120,7 +118,7 @@
                 <li class="nav-item dropdown">
                   <a href="#"
                      class="nav-link dropdown-toggle"
-                     data-toggle="dropdown"
+                     data-bs-toggle="dropdown"
                      role="button"
                      aria-haspopup="true"
                      aria-expanded="false">Relations
@@ -147,7 +145,7 @@
                   <li class="nav-item dropdown ml-auto">
                     <a href=""
                        class="nav-link dropdown-toggle"
-                       data-toggle="dropdown"
+                       data-bs-toggle="dropdown"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false">User: {{ user.get_username }}</a>
@@ -242,8 +240,7 @@
     {% endblock footer %}
 
     {% block scripts %}
-      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-              integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
+      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
               crossorigin="anonymous"></script>
       <script src="https://unpkg.com/[email protected]"></script>
       <script>

diff --git a/apis_core/generic/templates/generic/generic_confirm_delete.html b/apis_core/generic/templates/generic/generic_confirm_delete.html
@@ -1,18 +1,16 @@
 {% extends basetemplate|default:"base.html" %}
 
 {% block content %}
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-body">
-        <form action="" method="post">
-          {% csrf_token %}
-          <h4>Confirm deletion of:</h4>
-          <div class="text-center">
-            <strong>{{ object }}</strong>
-          </div>
-          <input class="btn btn-danger" type="submit" value="Yes, delete" />
-        </form>
-      </div>
+  <div class="container">
+    <div class="text-center">
+      <form action="" method="post">
+        {% csrf_token %}
+        <h4>Confirm deletion of:</h4>
+        <h3>
+          <strong>{{ object }}</strong>
+        </h3>
+        <input class="btn btn-danger" type="submit" value="Yes, delete" />
+      </form>
     </div>
   </div>
 {% endblock content %}
diff --git a/apis_core/generic/templates/generic/generic_list.html b/apis_core/generic/templates/generic/generic_list.html
@@ -12,9 +12,9 @@
           <div class="col">{{ object_list.model|contenttype|model_meta:"verbose_name_plural"|title }}</div>
           <div class="col">
             {% if object_list.model.get_add_permission in perms %}
-              <a class="btn btn-outline-success float-right btn-sm"
+              <a class="btn btn-outline-success float-end btn-sm"
                  href="{{ object_list.model.get_createview_url }}">Create</a>
-              <a class="btn btn-outline-success float-right btn-sm mr-1"
+              <a class="btn btn-outline-success float-end btn-sm me-1"
                  href="{{ object_list.model.get_importview_url }}">Import</a>
             {% endif %}
           </div>

diff --git a/apis_core/relations/templates/relations/list_relations_include_tabs.html b/apis_core/relations/templates/relations/list_relations_include_tabs.html
@@ -6,13 +6,13 @@
       <ul class="nav nav-tabs">
         <li class="nav-item">
           <a class="nav-link active"
-             data-toggle="tab"
+             data-bs-toggle="tab"
              href="#reltab_{{ object.id }}_ALL">All</a>
         </li>
         {% for target in possible_targets %}
           <li class="nav-item">
             <a class="nav-link"
-               data-toggle="tab"
+               data-bs-toggle="tab"
                href="#reltab_{{ object.id }}_{{ target.name }}">{{ target.name | title }}</a>
           </li>
         {% endfor %}

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -29,6 +29,7 @@ apis-override-select2js = ">=0.1,<0.3"
 crispy-bootstrap4 = ">=2023.1,<2025.0"
 django-simple-history = ">=3.6"
 pydot = "^3.0.2"
+crispy-bootstrap5 = "^2024.10"
 
 [tool.poetry.group.docs]
 optional = true

diff --git a/sample_project/settings.py b/sample_project/settings.py
@@ -33,6 +33,7 @@
     # ui stuff used by APIS
     "crispy_forms",
     "crispy_bootstrap4",
+    "crispy_bootstrap5",
     "django_filters",
     "django_tables2",
     "dal",
@@ -103,7 +104,8 @@
     },
 }
 
-CRISPY_TEMPLATE_PACK = "bootstrap4"
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+CRISPY_TEMPLATE_PACK = "bootstrap5"
 DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap4.html"
 
 # for django spectacular to be able to generate the schema, we have to use its view inspector