fix: replace deprecated bootstrap things (#5858)

* text-muted -> text-body-secondary * navbar-dark is deprecated * Remove FIXME block, not an issue anymore * Remove `navbar-light`
ietf-tools · Jul 18, 2023 · 9d5d9d5 · 9d5d9d5
1 parent 3f228c7
commit 9d5d9d5
Show file tree

Hide file tree

Showing 204 changed files with 339 additions and 345 deletions.
diff --git a/client/agenda/Agenda.vue b/client/agenda/Agenda.vue
@@ -9,7 +9,7 @@
       span.meeting-warning(v-if='agendaStore.meeting.warningNote') {{agendaStore.meeting.warningNote}}
   h4
     span {{agendaStore.meeting.city}}, {{ meetingDate }}
-    h6.float-end.d-none.d-lg-inline(v-if='meetingUpdated') #[span.text-muted Updated:] {{ meetingUpdated }}
+    h6.float-end.d-none.d-lg-inline(v-if='meetingUpdated') #[span.text-body-secondary Updated:] {{ meetingUpdated }}
 
   .agenda-topnav.my-3
     meeting-navigation
@@ -49,7 +49,7 @@
           n-popover(v-if='!agendaStore.infoNoteShown')
             template(#trigger)
               n-button.ms-2(text, @click='toggleInfoNote')
-                i.bi.bi-info-circle.text-muted
+                i.bi.bi-info-circle.text-body-secondary
             span Show Info Note
         .col-12.col-sm-auto.d-flex.align-items-center
           i.bi.bi-globe.me-2

diff --git a/client/agenda/AgendaQuickAccess.vue b/client/agenda/AgendaQuickAccess.vue
@@ -58,7 +58,7 @@
             )
             i.bi.bi-x-square.me-2
             span Discard
-        n-divider: small.text-muted Calendar
+        n-divider: small.text-body-secondary Calendar
         n-button.mt-2(
           id='agenda-quickaccess-calview-btn'
           block
@@ -86,7 +86,7 @@
             i.bi.bi-calendar-check.me-2
             span {{ shortMode ? '.ics' : 'Add to your calendar...' }}
         template(v-if='agendaStore.meetingDays.length > 0')
-          n-divider: small.text-muted Jump to...
+          n-divider: small.text-body-secondary Jump to...
           ul.nav.nav-pills.flex-column.small.agenda-quickaccess-jumpto
             li.nav-item(v-if='agendaStore.isMeetingLive')
               a.nav-link(

diff --git a/client/agenda/AgendaShareModal.vue b/client/agenda/AgendaShareModal.vue
@@ -20,7 +20,7 @@ n-modal(v-model:show='modalShown')
         i.bi.bi-share
         span Share this view
     .agenda-share-content
-      .text-muted.pb-2 Use the following URL for sharing the current view #[em (including any active filters)] with other users:
+      .text-body-secondary.pb-2 Use the following URL for sharing the current view #[em (including any active filters)] with other users:
       n-input-group
         n-input(
           ref='filteredUrlIpt'

diff --git a/client/components/ChatLog.vue b/client/components/ChatLog.vue
@@ -15,7 +15,7 @@
       )
       template(#default)
         div(v-html='item.text')
-  span.text-muted(v-else)
+  span.text-body-secondary(v-else)
     em No chat log available.
 </template>
 

diff --git a/client/components/Polls.vue b/client/components/Polls.vue
@@ -6,7 +6,7 @@
     :columns='columns'
     striped
     )
-  span.text-muted(v-else)
+  span.text-body-secondary(v-else)
     em No polls available.
 </template>
 

diff --git a/ietf/ietfauth/widgets.py b/ietf/ietfauth/widgets.py
@@ -41,7 +41,7 @@ def render(self, name, value, attrs=None, renderer=None):
             <div class="progress" style="margin-bottom: 10px;">
                 <div class="progress-bar progress-bar-warning password_strength_bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="5" style="width: 0%%"></div>
             </div>
-            <p class="text-muted password_strength_info hidden">
+            <p class="text-body-secondary password_strength_info hidden">
                 <span class="label label-danger">
                     %s
                 </span>
@@ -89,7 +89,7 @@ def render(self, name, value, attrs=None, renderer=None):
 
         confirmation_markup = """
         <div style="margin-top: 10px;" class="hidden password_strength_info">
-            <p class="text-muted">
+            <p class="text-body-secondary">
                 <span class="label label-danger">
                     %s
                 </span>

diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss
@@ -1,11 +1,5 @@
 @use "sass:map";
 
-// FIXME: It's not clear why these three variables remain unset by bs5, but just
-// set them to placeholder values so the CSS embedded in the HTML validates.
-$btn-font-family: inherit !default;
-$nav-link-font-weight: inherit !default;
-$tooltip-margin: inherit !default;
-
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 

diff --git a/ietf/static/js/edit-meeting-schedule.js b/ietf/static/js/edit-meeting-schedule.js
@@ -487,13 +487,13 @@ $(function () {
 
         // Disable a particular swap modal radio input
         let updateSwapRadios = function (labels, radios, disableValue, datePrecision) {
-            labels.removeClass('text-muted');
+            labels.removeClass('text-body-secondary');
             radios.prop('disabled', false);
             radios.prop('checked', false);
             // disable the input requested by value
             let disableInput = radios.filter('[value="' + disableValue + '"]');
             if (disableInput) {
-                disableInput.parent().addClass('text-muted');
+                disableInput.parent().addClass('text-body-secondary');
                 disableInput.prop('disabled', true);
             }
             if (officialSchedule) {
@@ -502,7 +502,7 @@ $(function () {
                 const past_radios = radios.filter(
                     (_, radio) => parseISOTimestamp(radio.closest('*[data-start]').dataset.start).isSameOrBefore(now, datePrecision)
                 );
-                past_radios.parent().addClass('text-muted');
+                past_radios.parent().addClass('text-body-secondary');
                 past_radios.prop('disabled', true);
             }
             return disableInput; // return the input that was specifically disabled, if any
@@ -859,10 +859,10 @@ $(function () {
                 .not('.hidden')
                 .length === 0) {
                 purpose_input.setAttribute('disabled', 'disabled');
-                purpose_input.closest('.session-purpose-toggle').classList.add('text-muted');
+                purpose_input.closest('.session-purpose-toggle').classList.add('text-body-secondary');
             } else {
                 purpose_input.removeAttribute('disabled');
-                purpose_input.closest('.session-purpose-toggle').classList.remove('text-muted');
+                purpose_input.closest('.session-purpose-toggle').classList.remove('text-body-secondary');
             }
         });
     }

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
@@ -184,7 +184,7 @@ $(function () {
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
                      <div id="righthand-panel" class="position-fixed col-xl-2 bg-light d-flex flex-column justify-content-between align-items-start">
-                         <nav id="righthand-nav" class="navbar navbar-light w-100 overflow-auto align-items-start flex-fill"></nav>
+                         <nav id="righthand-nav" class="navbar w-100 overflow-auto align-items-start flex-fill"></nav>
                      </div>
                  </div>
                  `));

diff --git a/ietf/static/js/password_strength.js b/ietf/static/js/password_strength.js
@@ -34,9 +34,9 @@
                 .removeClass("label-danger");
 
             widget
-                .find(".text-muted")
+                .find(".text-body-secondary")
                 .addClass("form-text")
-                .removeClass("text-muted");
+                .removeClass("text-body-secondary");
 
             self.initListeners();
         },

diff --git a/ietf/templates/base.html b/ietf/templates/base.html
@@ -33,7 +33,7 @@
           data-group-menu-data-url="{% url 'ietf.group.views.group_menu_data' %}">
         {% analytical_body_top %}
         <a class="visually-hidden visually-hidden-focusable" href="#content">Skip to main content</a>
-        <nav class="navbar navbar-expand-lg {% if server_mode and server_mode != "production" %} navbar-light bg-warning {% else %} navbar-dark bg-secondary {% endif %}  {% if navbar_mode %} {{ navbar_mode }} {% else %} fixed-top {% endif %}">
+        <nav class="navbar navbar-expand-lg {% if server_mode and server_mode != "production" %} bg-warning {% else %} bg-secondary {% endif %}  {% if navbar_mode %} {{ navbar_mode }} {% else %} fixed-top {% endif %}">
             <div class="container-fluid">
                 <a class="navbar-brand" href="/">
                     <img alt="IETF Logo" class="me-2"
@@ -126,7 +126,7 @@
                 <a href="https://www.rfc-editor.org/" class="p-3 text-nowrap">RFC Editor</a>
                 <a href="https://www.iana.org/" class="p-3">IANA</a>
                 <a href="https://www.ietf.org/privacy-statement/" class="p-3 text-nowrap">Privacy Statement</a>
-                <div class="small text-muted py-3">
+                <div class="small text-body-secondary py-3">
                     {% if version_num %}
                         <a class="mx-2" href="/release/about">About IETF Datatracker</a>
                         <span class="mx-2">

diff --git a/ietf/templates/community/subscription.html b/ietf/templates/community/subscription.html
@@ -32,7 +32,7 @@ <h2>Existing subscriptions</h2>
         </p>
     {% endif %}
     <h2>Add new subscription</h2>
-    <p class="text-muted">
+    <p class="text-body-secondary">
         The email addresses you can choose between are those registered in
         <a href="{% url "ietf.ietfauth.views.profile" %}">your profile</a>.
     </p>

diff --git a/ietf/templates/debug.html b/ietf/templates/debug.html
@@ -103,7 +103,7 @@ <h4 class="modal-title" id="modal-title-{{ forloop.counter }}">QuerySet Origin f
             </div>
         </div>
     {% else %}
-        <small class="text-center text-muted">
+        <small class="text-center text-body-secondary">
             Add <code>ietf.context_processors.sql_debug</code> to <code>settings.DEV_TEMPLATE_CONTEXT_PROCESSORS</code> to turn on the SQL statement table.
         </small>
     {% endif %}

diff --git a/ietf/templates/doc/ad_count.html b/ietf/templates/doc/ad_count.html
@@ -2,7 +2,7 @@
 {% load ietf_filters %}
 
 {% if prev or count %}
-    <span{% if count == 0 %} class="text-muted"{% endif %}>{{ count }}</span>
+    <span{% if count == 0 %} class="text-body-secondary"{% endif %}>{{ count }}</span>
     {% if user|has_role:"Area Director,Secretariat" %}
         <i data-bs-toggle="popover"
             {% if count != prev %}
@@ -21,11 +21,11 @@
             {% endif %}
         {% with label.2 as up_is_good %}
             {% if prev < count %}
-                   class="bi bi-arrow-up-right-circle{% if count %}-fill{% endif %} {{ up_is_good|yesno:'text-success,text-danger,text-muted' }}"
+                   class="bi bi-arrow-up-right-circle{% if count %}-fill{% endif %} {{ up_is_good|yesno:'text-success,text-danger,text-body-secondary' }}"
             {% elif prev > count %}
-                   class="bi bi-arrow-down-right-circle{% if count %}-fill{% endif %} {{ up_is_good|yesno:'text-danger,text-success,text-muted' }}"
+                   class="bi bi-arrow-down-right-circle{% if count %}-fill{% endif %} {{ up_is_good|yesno:'text-danger,text-success,text-body-secondary' }}"
             {% else %}
-                   class="bi bi-arrow-right-circle text-muted"
+                   class="bi bi-arrow-right-circle text-body-secondary"
             {% endif %}
             ></i>
         {% endwith %}

diff --git a/ietf/templates/doc/add_comment.html b/ietf/templates/doc/add_comment.html
@@ -8,7 +8,7 @@
     <h1>
         Add comment
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/add_sessionpresentation.html b/ietf/templates/doc/add_sessionpresentation.html
@@ -8,7 +8,7 @@
     <h1>
         Add document to session
         <br>
-        <small class="text-muted">{{ doc.name }}
+        <small class="text-body-secondary">{{ doc.name }}
             <br>
         {{ doc.title }}</small>
     </h1>

diff --git a/ietf/templates/doc/ballot/approvaltext.html b/ietf/templates/doc/ballot/approvaltext.html
@@ -9,7 +9,7 @@
     <h1>
         Approval announcement writeup
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/approve_ballot.html b/ietf/templates/doc/ballot/approve_ballot.html
@@ -8,7 +8,7 @@
     <h1>
         Approve ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/approve_downrefs.html b/ietf/templates/doc/ballot/approve_downrefs.html
@@ -8,7 +8,7 @@
     <h1>
         Approve downward references
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p>
         The ballot for

diff --git a/ietf/templates/doc/ballot/ballot_issued.html b/ietf/templates/doc/ballot/ballot_issued.html
@@ -7,7 +7,7 @@
     <h1>
         Ballot issued
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p>
         Ballot for

diff --git a/ietf/templates/doc/ballot/clear_ballot.html b/ietf/templates/doc/ballot/clear_ballot.html
@@ -8,7 +8,7 @@
     <h1>
         Clear ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/defer_ballot.html b/ietf/templates/doc/ballot/defer_ballot.html
@@ -8,7 +8,7 @@
     <h1>
         Defer ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/edit_position.html b/ietf/templates/doc/ballot/edit_position.html
@@ -8,7 +8,7 @@
     <h1>
         Change position for {{ balloter.plain_name }}
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     {% if ballot.ballot_type.question %}
         <div class="alert alert-warning my-3">

diff --git a/ietf/templates/doc/ballot/irsg_ballot_approve.html b/ietf/templates/doc/ballot/irsg_ballot_approve.html
@@ -12,7 +12,7 @@
     <h1>
         Issue ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p class="mt-3">
         {{ question }}

diff --git a/ietf/templates/doc/ballot/irsg_ballot_close.html b/ietf/templates/doc/ballot/irsg_ballot_close.html
@@ -8,7 +8,7 @@
     <h1>
         Close ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p>
         {{ question }}

diff --git a/ietf/templates/doc/ballot/lastcalltext.html b/ietf/templates/doc/ballot/lastcalltext.html
@@ -9,7 +9,7 @@
     <h1 class="mb-3">
         Last call text
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/rfceditornote.html b/ietf/templates/doc/ballot/rfceditornote.html
@@ -8,7 +8,7 @@
     <h1 class="mb-3">
         RFC Editor Note
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     {% bootstrap_messages %}
     <form method="post">

diff --git a/ietf/templates/doc/ballot/rsab_ballot_approve.html b/ietf/templates/doc/ballot/rsab_ballot_approve.html
@@ -9,7 +9,7 @@
     <h1>
         Issue ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p class="mt-3">
         {{ question }}

diff --git a/ietf/templates/doc/ballot/rsab_ballot_close.html b/ietf/templates/doc/ballot/rsab_ballot_close.html
@@ -8,7 +8,7 @@
     <h1>
         Close ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <p>
         {{ question }}

diff --git a/ietf/templates/doc/ballot/send_ballot_comment.html b/ietf/templates/doc/ballot/send_ballot_comment.html
@@ -9,7 +9,7 @@
     <h1>
         Send ballot position for {{ balloter }}
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form class="mt-3" method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/undefer_ballot.html b/ietf/templates/doc/ballot/undefer_ballot.html
@@ -8,7 +8,7 @@
     <h1>
         Undefer ballot
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form class="undefer mt-3" method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/ballot/writeupnotes.html b/ietf/templates/doc/ballot/writeupnotes.html
@@ -8,7 +8,7 @@
     <h1>
         Ballot writeup and notes
         <br>
-        <small class="text-muted">{{ doc }}</small>
+        <small class="text-body-secondary">{{ doc }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/bofreq/change_editors.html b/ietf/templates/doc/bofreq/change_editors.html
@@ -9,7 +9,7 @@
     <h1>
         Change editors
         <br>
-        <small class="text-muted">{{ titletext }}</small>
+        <small class="text-body-secondary">{{ titletext }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}

diff --git a/ietf/templates/doc/bofreq/change_responsible.html b/ietf/templates/doc/bofreq/change_responsible.html
@@ -9,7 +9,7 @@
     <h1>
         Change Responsible Leadership
         <br>
-        <small class="text-muted">{{ titletext }}</small>
+        <small class="text-body-secondary">{{ titletext }}</small>
     </h1>
     <form method="post">
         {% csrf_token %}