bootstrap: Switch to Bootstrap 5

- Fix "Login" menu dropdown location (`dropdown-menu-right` is now `dropdown-menu-end`) - Also, it looks like the recommended markup is <ul> not <div>, so switch that - The `sr-only` (screenreader-only) class is now `visually-hidden` - Bootstrap data attributes are now `data-bs-` not just `data-` - Handle dismissible alerts better - Add the `alert-dismissible` class -- I think maybe we were just wrong before - `close` is now `btn-close` See also https://getbootstrap.com/docs/5.3/migration/, though I didn't read through all of that, just used it as a reference.
tech-squares · Jul 14, 2024 · 8372df8 · 8372df8
1 parent 565de09
commit 8372df8
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 38 deletions.
diff --git a/setup.py b/setup.py
@@ -11,7 +11,8 @@
         "pytz", # timezone support TODO: confirm works
         "social-auth-core[saml]>=3.0",
         "social-auth-app-django",
-        "django-bootstrap-static<5"
+        #"django-bootstrap-static>=4,<5"
+        "django-bootstrap-static>=5,<6"
     ],
 
     extras_require={

diff --git a/squaresdb/gate/templates/gate/paper_gate.html b/squaresdb/gate/templates/gate/paper_gate.html
@@ -66,8 +66,8 @@ <h3>Attends: {{person.frequency.name|capfirst}}</h3>
   {% endifchanged %}
     <tr>
         <th scope='row'>{{person}}
-          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='sr-only'>(MIT student)</span>{%endif%}
-          {% if person.fee_cat.slug == "student" %}&#x1F4D6;<span class='sr-only'>(student)</span>{%endif%}
+          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='visually-hidden'>(MIT student)</span>{%endif%}
+          {% if person.fee_cat.slug == "student" %}&#x1F4D6;<span class='visually-hidden'>(student)</span>{%endif%}
         </th>
         {% for code, sub in person.dance_list %}
         <td data-sub="{{sub}}" data-code="{{code}}">{{code}}</td>

diff --git a/squaresdb/gate/templates/gate/signin.html b/squaresdb/gate/templates/gate/signin.html
@@ -69,11 +69,10 @@ <h2>Attendance</h2>
   // Warning: no payment (unexpected), not present
   function addPaymentMessage(type, name, message) {
     var html = `
-      <div class="payment-message alert alert-${type}" role="alert">
+      <div class="payment-message alert alert-${type} alert-dismissible" role="alert">
           <strong>${name}</strong> <span class='verb'>is being</span> marked as ${message}.
           <!--<button type="button" class="btn btn-dark btn-sm">Undo</button>-->
-	  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-	      <span aria-hidden="true">&times;</span>
+	  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
 	  </button>
       </div>
     `;
@@ -130,9 +129,7 @@ <h2>Attendance</h2>
     <div class="toast-header">
       <strong class="mr-auto"></strong>
       <small class="text-muted"></small>
-      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button>
+      <button type="button" class="ml-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
     </div>
     <div class="toast-body">
     </div>
@@ -393,9 +390,7 @@ <h2>Attendance</h2>
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="subscriptionModalLabel">Buy Subscription</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <form id="subscriptionForm">
@@ -452,7 +447,7 @@ <h5 class="modal-title" id="subscriptionModalLabel">Buy Subscription</h5>
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
         <button type="submit" class="btn btn-primary" form='subscriptionForm'>Buy</button>
       </div>
     </div>
@@ -541,9 +536,7 @@ <h5 class="modal-title" id="subscriptionModalLabel">Buy Subscription</h5>
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="danceModalLabel">Dance payment</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <form id="danceForm">
@@ -622,7 +615,7 @@ <h5 class="modal-title" id="danceModalLabel">Dance payment</h5>
         </form>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
         <button type="submit" class="btn btn-primary" form="danceForm">Buy</button>
       </div>
     </div>
@@ -728,33 +721,33 @@ <h3>Attends: {{person.frequency.name|capfirst}}</h3>
   {% if person.fee_cat.slug == "mit-student" or person.pk in subscribers %}
     <div class='btn-group sqdb-person-btn' data-name="{{person.name}}" data-id="{{person.id}}" data-price-low="{{dance_price_low}}" data-price-high="{{dance_price_high}}" data-fee-cat="{{person.fee_cat.slug}}">
         <button type="button" class="btn {{person.button_class|default:"btn-success"}}" onclick="markPresentOnlyExpected(this)">{{person.name}}
-          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='sr-only'>(MIT student)</span>{%endif%}
-          {% if person.pk in subscribers %}&#x1F39F;<span class='sr-only'>(subscriber)</span>{%endif%}
+          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='visually-hidden'>(MIT student)</span>{%endif%}
+          {% if person.pk in subscribers %}&#x1F39F;<span class='visually-hidden'>(subscriber)</span>{%endif%}
         </button>
-        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr-only">Toggle Dropdown</span></button>
+        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="visually-hidden">Toggle Dropdown</span></button>
 
         <div class="dropdown-menu">
             <span class='dropdown-item disabled'>Fee category: {{person.fee_cat.name}}</span>
 	    <button class="dropdown-item" onclick="processCashPayment(this, {{dance_price_low}})">Paid ${{dance_price_low}} cash</button>
             {% if dance_price_low < dance_price_high %}
 	    <button class="dropdown-item" onclick="processCashPayment(this, {{dance_price_high}})">Paid ${{dance_price_high}} cash</button>
             {% endif %}
-            <button class="dropdown-item" type="button" data-toggle="modal" data-target="#subscriptionModal" data-id="{{person.id}}">Bought subscription</button>
-            <button class="dropdown-item" type="button" data-toggle="modal" data-target="#danceModal" data-id="{{person.id}}">Paid other amount or mechanism</button>
+            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#subscriptionModal" data-id="{{person.id}}">Bought subscription</button>
+            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#danceModal" data-id="{{person.id}}">Paid other amount or mechanism</button>
         </div>
     </div>
   {% else %}
     <span class='dropdown sqdb-person-btn' data-name="{{person.name}}" data-id="{{person.id}}" data-price-low="{{dance_price_low}}" data-price-high="{{dance_price_high}}" data-fee-cat="{{person.fee_cat.slug}}">
-        <button type="button" class="btn {{person.button_class|default:"btn-secondary"}} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{person.name}}</button>
+        <button type="button" class="btn {{person.button_class|default:"btn-secondary"}} dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{person.name}}</button>
 
         <div class="dropdown-menu">
             <span class='dropdown-item disabled'>Fee category: {{person.fee_cat.name}}</span>
 	    <button class="dropdown-item" onclick="processCashPayment(this, {{dance_price_low}})">Paid ${{dance_price_low}} cash</button>
             {% if dance_price_low < dance_price_high %}
 	    <button class="dropdown-item" onclick="processCashPayment(this, {{dance_price_high}})">Paid ${{dance_price_high}} cash</button>
             {% endif %}
-            <button class="dropdown-item" type="button" data-toggle="modal" data-target="#subscriptionModal" data-id="{{person.id}}">Bought subscription</button>
-            <button class="dropdown-item" type="button" data-toggle="modal" data-target="#danceModal" data-id="{{person.id}}">Paid other amount or mechanism</button>
+            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#subscriptionModal" data-id="{{person.id}}">Bought subscription</button>
+            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#danceModal" data-id="{{person.id}}">Paid other amount or mechanism</button>
             <button class="dropdown-item" onclick="markPresentOnlyUnexpected(this)">Present but didn't pay</button>
         </div>
     </span>

diff --git a/squaresdb/gate/templates/gate/voting.html b/squaresdb/gate/templates/gate/voting.html
@@ -31,8 +31,8 @@ <h1>Voting members</h1>
 {% if person.attend %}
     <tr>
         <th scope='row'>{{person}}
-          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='sr-only'>(MIT student)</span>{%endif%}
-          {% if person.fee_cat.slug == "student" %}&#x1F4D6;<span class='sr-only'>(student)</span>{%endif%}
+          {% if person.fee_cat.slug == "mit-student" %}&#x1F393;<span class='visually-hidden'>(MIT student)</span>{%endif%}
+          {% if person.fee_cat.slug == "student" %}&#x1F4D6;<span class='visually-hidden'>(student)</span>{%endif%}
         </th>
         <td>{{person.dance_len}}</td>
         {% for code, sub in person.dance_list %}

diff --git a/squaresdb/templates/base.html b/squaresdb/templates/base.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <!-- Bootstrap CSS -->
+    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
     <!-- jquery from CDN
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
@@ -48,7 +49,7 @@
 
   <body>
     <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
@@ -92,15 +93,15 @@
         {% if user.is_authenticated %}
         <ul class='nav nav-pills justify-content-end curuser'>
           <li class='navbar-text dropdown'>
-            <span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            <span class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
               Welcome,
               {% if user.first_name and user.last_name %}
                 {{user.first_name}} {{user.last_name}} &lt;<span class='username'>{{user.username}}</span>&gt;
               {% else %}
                 <span class='username'>{{user.username}}</span>
               {% endif %}
             </span>
-            <div class='dropdown-menu'>
+            <div class='dropdown-menu dropdown-menu-end'>
               <p>Connected providers:</p>
               <ul>
               {% for back in backends.associated %}
@@ -116,13 +117,13 @@
         {% else %}
         <ul class='nav nav-pills justify-content-end curuser'>
           <li class='navbar-text dropdown'>
-            <span class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login</span>
-            <div class='dropdown-menu dropdown-menu-right'>
-              <a class='dropdown-item' href="{% url "login" %}">Password</a>
-              <a class='dropdown-item' href="{% url "social:begin" "google-oauth2" %}">Google</a>
-              {%comment%}<a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=testshib">TestShib</a>{%endcomment%}
-              <a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=mit">MIT</a>
-              <a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=tscollab">Touchstone Collab</a>
+            <span class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login</span>
+            <ul class='dropdown-menu dropdown-menu-end'>
+             <li><a class='dropdown-item' href="{% url "login" %}">Password</a></li>
+              <li><a class='dropdown-item' href="{% url "social:begin" "google-oauth2" %}">Google</a></li>
+              {%comment%}<li><a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=testshib">TestShib</a></li>{%endcomment%}
+              <li><a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=mit">MIT</a></li>
+             <li><a class='dropdown-item' href="{% url "social:begin" "saml" %}?idp=tscollab">Touchstone Collab</a></li>
             </ul>
           </li>
         </div>
@@ -135,7 +136,6 @@
     </div>
     <!-- django-bootstrap-static
     -->
-    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
     <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}"></script>
     <!-- Local
     <script src="{% static "libs/popper.js/umd/popper.min.js" %}"></script>