Merge pull request #651 from drnlm/feature/bootstrap_5_support

Feature/bootstrap 5 support

package.json

@@ -4,9 +4,8 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-free": "6.2.x",
-    "bootstrap": "^4.0.0",
-    "jquery": ">=1.9.1",
-    "popper.js": "1.16.x"
+    "bootstrap": "^5.2.0",
+    "jquery": ">=1.9.1"
   },
   "scripts": {
     "postinstall": "rsync -a --delete node_modules/ wafer/static/vendor/"

setup.py

@@ -7,6 +7,7 @@
     'Django>=2.2,<5',
     'bleach',
     'bleach-allowlist',
+    'crispy-bootstrap5',
     'diff-match-patch',
     'django-bakery>=0.13.0',
     'django-crispy-forms',

wafer/schedule/templates/wafer.schedule/current.html

@@ -95,10 +95,10 @@ <h1>{% trans "Happening now" %}</h1>
         },
         'error': function(jqXHR, textStatus, errorThrown) {
           var errors = $('div.wafer_schedule .timestamp .errors');
-          var count = errors.attr('data-count') || 0;
+          var count = errors.attr('data-bs-count') || 0;
           count++;
           errors.text('Failed updates: ' + count);
-          errors.attr('data-count', count);
+          errors.attr('data-bs-count', count);
         },
       });
     }

wafer/schedule/templates/wafer.schedule/edit_schedule.html

@@ -17,9 +17,9 @@
     {% endif %}
   </div>
   <div class="col-md-8">
-    <div class="dropdown float-right">
+    <div class="dropdown float-end">
       <button class="btn btn-secondary dropdown-toggle" type="button"
-              data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+              data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
         {{ this_block }} {% blocktrans with block_id=this_block.id %}(Block {{ block_id }}){% endblocktrans %}
       </button>
       <div class="dropdown-menu">
@@ -86,19 +86,19 @@ <h2>{% trans 'Bucket' %}</h2>
           <a href="#unassignedTalks"
              class="active"
              aria-controls="unassignedTalks" role="tab"
-             data-toggle="tab">
+             data-bs-toggle="tab">
             {% trans 'Unassigned Talks' %}
           </a>
         </li>
         <li role="presentation">
           <a href="#allTalks"
              aria-controls="allTalks" role="tab"
-             data-toggle="tab">
+             data-bs-toggle="tab">
             {% trans 'All Talks' %}
           </a>
         </li>
         <li role="presentation">
-          <a href="#pages" aria-controls="pages" role="tab" data-toggle="tab">
+          <a href="#pages" aria-controls="pages" role="tab" data-bs-toggle="tab">
             {% trans 'Pages' %}
           </a>
         </li>
@@ -110,15 +110,15 @@ <h2>{% trans 'Bucket' %}</h2>
           {% regroup talks_all by talk_type.name as grouped_talks %}
           {% for type, talks in grouped_talks %}
             {% if type %}
-              <div draggable="false" class="badge badge-secondary">
+              <div draggable="false" class="badge bg-secondary">
                 {{ type }}
               </div>
             {% endif %}
             {% for talk in talks %}
               <div draggable="true"
-                    class="badge badge-success draggable"
+                    class="badge bg-success draggable"
                     id="talk{{ talk.talk_id }}"
-                    data-toggle="tooltip" data-placement="left"
+                    data-bs-toggle="tooltip" data-bs-placement="left"
                     title="{{ talk.title }}"
                     {% if talk not in talks_unassigned %}
                       hidden
@@ -140,14 +140,14 @@ <h2>{% trans 'Bucket' %}</h2>
           {% regroup talks_all by talk_type.name as grouped_talks %}
           {% for type, talks in grouped_talks %}
             {% if type %}
-            <div draggable="false" class="badge badge-secondary">
+            <div draggable="false" class="badge bg-secondary">
               {{ type }}
             </div>
             {% endif %}
             {% for talk in talks %}
-              <div draggable="true" class="badge badge-warning draggable"
+              <div draggable="true" class="badge bg-warning draggable"
                     class="talk{{ talk.talk_id }}"
-                    data-toggle="tooltip" data-placement="left"
+                    data-bs-toggle="tooltip" data-bs-placement="left"
                     title="{{ talk.title }}"
                     data-type="talk" data-talk-id="{{ talk.talk_id }}">
                 {% if not talk.cancelled %}
@@ -163,9 +163,9 @@ <h2>{% trans 'Bucket' %}</h2>
         </div>
         <div role="tabpanel" class="tab-pane row" id="pages">
           {% for page in pages %}
-            <div draggable="true" class="badge badge-info draggable"
+            <div draggable="true" class="badge bg-info draggable"
                   id="page{{ page.id }}"
-                  data-toggle="tooltip" data-placement="left"
+                  data-bs-toggle="tooltip" data-bs-placement="left"
                   title="{{ page.name }}" data-type="page" data-page-id="{{ page.id }}">
               {{ page.name }}
             </div>

wafer/schedule/templates/wafer.schedule/full_schedule.html

@@ -4,7 +4,7 @@
 {% block content %}
 <section class="wafer wafer-schedule">
   {% if user.is_authenticated and user.is_staff %}
-    <div class="float-right d-print-none">
+    <div class="float-end d-print-none">
       <a class="btn btn-secondary"
          href="{% url 'admin:schedule_editor' %}">
         {% trans "Edit schedule" %}
@@ -26,11 +26,11 @@ <h1>
           {% url 'wafer_full_schedule' as schedule_url %}
           {% if prev_block %}
             <a href="{{ schedule_url }}?block={{ prev_block.id }}"
-               class="float-left btn btn-secondary btn-lg">{% trans "Previous" %} &mdash; {{ prev_block }}</a>
+               class="float-start btn btn-secondary btn-lg">{% trans "Previous" %} &mdash; {{ prev_block }}</a>
           {% endif %}
           {% if next_block %}
             <a href="{{ schedule_url }}?block={{ next_block.id }}"
-               class="float-right btn btn-secondary btn-lg">{% trans "Next" %} &mdash; {{ next_block }}</a>
+               class="float-end btn btn-secondary btn-lg">{% trans "Next" %} &mdash; {{ next_block }}</a>
           {% endif %}
         </div>
       {% endif %}

wafer/settings.py

@@ -148,6 +148,7 @@
     'reversion',
     'bakery',
     'crispy_forms',
+    'crispy_bootstrap5',
     'rest_framework',
     'django_select2',
     'wafer',
@@ -201,7 +202,8 @@
 REGISTRATION_FORM = 'wafer.registration.forms.WaferRegistrationForm'
 
 # Forms:
-CRISPY_TEMPLATE_PACK = 'bootstrap4'
+CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+CRISPY_TEMPLATE_PACK = 'bootstrap5'
 
 # Wafer cache settings
 # We assume that the WAFER_CACHE is cross-process

wafer/static/css/wafer.css

@@ -102,3 +102,18 @@ label.requiredField {
   border: 1px solid #cccccf;
   vertical-align: top;
 }
+
+/* This is a copy of the navbar-dark style, but we do it
+ * using explicit css to make it possible to style without needing to
+ * fiddle with the template */
+.navbar {
+   --bs-navbar-color: rgba(255, 255, 255, 0.55);
+   background-color: rgba(0, 0, 0, 1);
+   --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
+   --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
+   --bs-navbar-active-color: #fff;
+   --bs-navbar-brand-color: #fff;
+   --bs-navbar-brand-hover-color: #fff;
+   --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
+   --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}

wafer/talks/templates/wafer.talks/reviewed-badge.html

@@ -2,12 +2,12 @@
 {% spaceless %}
   {% if reviewed %}
     {% if review_is_current %}
-      <span class="badge badge-success"
+      <span class="badge bg-success"
             title="{% trans 'Reviewed' %}">
         R: <i class="fas fa-check"></i>
       </span>
     {% else %}
-      <span class="badge badge-info"
+      <span class="badge bg-info"
             title="{% trans 'Reviewed, but outdated (modified since last review)' %}">
         R: <i class="fas fa-clock"></i>
       </span>

wafer/talks/templates/wafer.talks/talk.html

@@ -15,14 +15,14 @@ <h1>
     {{ object.title }}
     {% if can_edit %}
       <a href="{% url 'wafer_talk_edit' object.pk %}"
-         class="float-right btn btn-secondary btn-lg d-print-none">{% trans 'Edit' %}</a>
+         class="float-end btn btn-secondary btn-lg d-print-none">{% trans 'Edit' %}</a>
       {% if user.is_staff %}
         <a href="{% url 'admin:talks_talk_change' object.pk %}"
-           class="float-right btn btn-secondary btn-lg d-print-none">{% trans 'Admin' %}</a>
+           class="float-end btn btn-secondary btn-lg d-print-none">{% trans 'Admin' %}</a>
       {% endif %}
     {% endif %}
     {% if can_review %}
-      <a href="#review" class="float-right btn btn-secondary btn-lg" data-toggle="collapse" data-target="#review">{% trans 'Review' %}</a>
+      <a href="#review" class="float-end btn btn-secondary btn-lg" data-bs=toggle="collapse" data-bs-target="#review">{% trans 'Review' %}</a>
     {% endif %}
   </h1>
   <div>
@@ -103,27 +103,27 @@ <h1>
         {% trans 'Submission:' %}
         {{ object.submission_time }}
         {% if object.is_late_submission %}
-          <span class="badge badge-warning ">{% blocktrans trimmed %}Late submission{% endblocktrans %}</span>
+          <span class="badge bg-warning ">{% blocktrans trimmed %}Late submission{% endblocktrans %}</span>
         {% endif %}
       </p>
     </div>
     <div>
       <p>
         {% trans 'Status:' %}
         {% if object.submitted %}
-          <span class="badge badge-info">{% trans 'Submitted' %}</span>
+          <span class="badge bg-info">{% trans 'Submitted' %}</span>
         {% elif object.under_consideration %}
-          <span class="badge badge-info">{% trans 'Under consideration' %}</span>
+          <span class="badge bg-info">{% trans 'Under consideration' %}</span>
         {% elif object.provisional %}
-          <span class="badge badge-success">{% trans 'Provisionally Accepted' %}</span>
+          <span class="badge bg-success">{% trans 'Provisionally Accepted' %}</span>
         {% elif object.accepted %}
-          <span class="badge badge-success">{% trans 'Accepted' %}</span>
+          <span class="badge bg-success">{% trans 'Accepted' %}</span>
         {% elif object.cancelled %}
-          <span class="badge badge-warning">{% trans 'Cancelled' %}</span>
+          <span class="badge bg-warning">{% trans 'Cancelled' %}</span>
         {% elif object.withdrawn %}
-          <span class="badge badge-warning ">{% trans 'Withdrawn' %}</span>
+          <span class="badge bg-warning ">{% trans 'Withdrawn' %}</span>
         {% else %}
-          <span class="badge badge-danger">{% trans 'Not accepted' %}</span>
+          <span class="badge bg-danger">{% trans 'Not accepted' %}</span>
         {% endif %}
       </p>
     </div>

wafer/talks/templates/wafer.talks/talks.html

@@ -25,18 +25,18 @@
           <tr>
             <td>
               {% if not talk.cancelled and not talk.accepted and talk.is_late_submission %}
-                <span class="badge badge-warning" title="{% trans 'Late submission' %}">L</span>
+                <span class="badge bg-warning" title="{% trans 'Late submission' %}">L</span>
               {% endif %}
               {% if talk.submitted %}
-                <span class="badge badge-info" title="{% trans 'Submitted' %}">{{ talk.status }}</span>
+                <span class="badge bg-info" title="{% trans 'Submitted' %}">{{ talk.status }}</span>
               {% elif talk.under_consideration %}
-                <span class="badge badge-info" title="{% trans 'Under consideration' %}">{{ talk.status }}</span>
+                <span class="badge bg-info" title="{% trans 'Under consideration' %}">{{ talk.status }}</span>
               {% elif talk.reject %}
-                <span class="badge badge-danger" title="{% trans 'Not accepted' %}">{{ talk.status }}</span>
+                <span class="badge bg-danger" title="{% trans 'Not accepted' %}">{{ talk.status }}</span>
               {% elif talk.cancelled %}
-                <span class="badge badge-warning" title="{% trans 'Talk Cancelled' %}">{{ talk.status }}</span>
+                <span class="badge bg-warning" title="{% trans 'Talk Cancelled' %}">{{ talk.status }}</span>
               {% elif talk.provisional %}
-                <span class="badge badge-success" title="{% trans 'Provisionally Accepted' %}">{{ talk.status }}</span>
+                <span class="badge bg-success" title="{% trans 'Provisionally Accepted' %}">{{ talk.status }}</span>
               {% endif %}
               {% reviewed_badge user talk %}
               {% if talk.withdrawn %}

wafer/templates/wafer/base.html

@@ -40,8 +40,7 @@ <h1>{{ WAFER_CONFERENCE_NAME }}</h1>
   {% endblock %}
   {% block wafer_js %}
   <script src="{% static 'vendor/jquery/dist/jquery.min.js' %}"></script>
-  <script src="{% static 'vendor/popper.js/dist/umd/popper.min.js' %}"></script>
-  <script src="{% static 'vendor/bootstrap/dist/js/bootstrap.min.js' %}"></script>
+  <script src="{% static 'vendor/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>
   {% endblock %}
   {% block extra_foot %}{% endblock %}
 </body>

wafer/templates/wafer/nav.html

@@ -2,8 +2,8 @@
 <nav class="navbar navbar-expand-sm d-print-none {{ WAFER_NAVIGATION_VISIBILITY }}">
   <div class="container">
     {% block navtogglebutton %}
-      <button type="button" class="navbar-toggler navbar-toggler-right"
-              data-toggle="collapse" data-target="#wafer-navbar-collapse"
+      <button type="button" class="navbar-toggler"
+              data-bs-toggle="collapse" data-bs-target="#wafer-navbar-collapse"
               aria-controls="wafer-navbar-collapse" aria-expanded="false"
               aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
@@ -30,7 +30,7 @@
               </a></li>
             {% else %}
               <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
+                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                   {{ item.label }}
                 </a>
                 <ul class="dropdown-menu">
@@ -46,14 +46,14 @@
         </ul>
       {% endblock navmenulist %}
       {% block navauthmenu %}
-        <ul class="navbar-nav float-md-right">
+        <ul class="navbar-nav float-md-end">
           {% if user.is_authenticated %}
             {% block navauthenticated %}
               <li class="nav-item dropdown">
-                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
+                <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
                   {{ user.username }}
                 </a>
-                <ul class="dropdown-menu dropdown-menu-right">
+                <ul class="dropdown-menu dropdown-menu-end">
                   <li><a class="dropdown-item" href="{% url 'wafer_user_profile' username=user.username %}">
                     {% blocktrans trimmed with name=user.userprofile.display_name %}
                     {{ name }}'s profile

wafer/users/templates/wafer.users/profile.html

@@ -13,9 +13,9 @@
           {% endif %}
         {% endwith %}
         {% if can_edit %}
-          <a class="btn btn-secondary btn-sm" href="#" rel="popover" data-toggle="popover"
-              data-title="{% trans 'Changing your mugshot' %}" data-html="true"
-              data-placement="bottom">{% trans 'Edit Mugshot' %}</a>
+          <a class="btn btn-secondary btn-sm" href="#" rel="popover" data-bs-toggle="popover"
+              data-bs-title="{% trans 'Changing your mugshot' %}" data-bs-html="true"
+              data-bs-placement="bottom">{% trans 'Edit Mugshot' %}</a>
           <div class="popover-contents">
             {% blocktrans trimmed %}
               Pictures provided by <a href="https://www.libravatar.org/">libravatar</a>
@@ -27,7 +27,7 @@
       </div>
       <div class="col-md-10">
         {% if can_edit %}
-          <ul class="float-right btn-group btn-group-vertical profile-links">
+          <ul class="float-end btn-group btn-group-vertical profile-links">
             <li><a href="{% url 'wafer_user_edit' object.username %}" class="btn btn-secondary">{% trans 'Edit Account' %}</a></li>
             <li><a href="{% url 'wafer_user_edit_profile' object.username %}" class="btn btn-secondary">{% trans 'Edit Profile' %}</a></li>
             {% if WAFER_REGISTRATION_OPEN %}
@@ -58,7 +58,7 @@ <h1>
         </h1>
         {% if profile.twitter_handle %}
           <p>
-            <a href="https://twitter.com/{{ profile.twitter_handle }}" class="twitter-follow-button" data-show-count="false">
+            <a href="https://twitter.com/{{ profile.twitter_handle }}" class="twitter-follow-button" data-bs-show-count="false">
               {% blocktrans with handle=profile.twitter_handle %}Follow @{{ handle }}{% endblocktrans %}
             </a>
           </p>
@@ -159,7 +159,7 @@ <h2>{% trans 'Submitted or Under Consideration Talks:' %}</h2>
                 permissions, but we accept that tradeoff for simplicity here.
               {% endcomment %}
               <a href="{% url 'wafer_talk_edit' talk.pk %}"
-                 class="float-right btn btn-secondary btn-lg">
+                 class="float-end btn btn-secondary btn-lg">
                 {% trans 'Edit' %}
               </a>
               <h3 class="card-title">
@@ -191,7 +191,7 @@ <h3 class="card-title">
     }(document, "script", "twitter-wjs");
   {% endif %}
 
-  $("#profile-avatar [rel=popover]").attr("data-content", $("#profile-avatar .popover-contents").html());
+  $("#profile-avatar [rel=popover]").attr("data-bs-content", $("#profile-avatar .popover-contents").html());
   $("a[rel=popover]").popover();
 </script>
 {% endblock %}