⬆️ frontend: Upgrade Bootstrap 4.3.1 → 5.3.6

Bootstrap 4 reached end-of-life in 2024 and its JS requires jQuery.
Bootstrap 5 drops the jQuery dependency, uses modern `data-bs-*`
attributes, and aligns with the `crispy-bootstrap5` template pack
already configured.

Replaced `assets/css/bundle.css` (Bootstrap 4.3.1 + Fedora theme +
Font Awesome, 3,688 lines) with the standard Bootstrap 5.3.6 minified
CSS. The Fedora color utilities, border widths, and font size helpers
that were appended to the old bundle are now in a separate
`assets/css/fedora-theme.css` using CSS custom properties. The Font
Awesome icon definitions duplicated in `bundle.css` are already provided
by `assets/css/all.css` and did not need to be ported.

Replaced `assets/bootstrap/js/bootstrap.bundle.min.js` (4.3.1) with the
Bootstrap 5.3.6 bundle (includes Popper).

Template updates across `base.html`, `_pagination.html`, `archive.html`,
and `search.html`:
- `data-toggle` → `data-bs-toggle`
- `data-target` → `data-bs-target`
- `ml-auto` → `ms-auto`
- `font-weight-bold` → `fw-bold`
- `sr-only` → `visually-hidden`
- `form-inline` → `d-flex`

Assisted-by: Claude Opus 4.6 (1M context)
Signed-off-by: Justin Wheeler <jwheel@fedoraproject.org>

assets/css/fedora-theme.css

@@ -0,0 +1,47 @@
+:root {
+  --fedora-blue: #3c6eb4;
+  --fedora-dark-blue: #294172;
+  --fedora-magenta: #db3279;
+  --fedora-orange: #c27c18;
+  --fedora-green: #61b921;
+  --fedora-purple: #a07cbc;
+}
+
+.text-fedora-blue { color: var(--fedora-blue); }
+.bg-fedora-blue { background-color: var(--fedora-blue); }
+.border-fedora-blue { border-color: var(--fedora-blue) !important; }
+.btn-fedora-blue { color: #fff; background-color: var(--fedora-blue); border-color: var(--fedora-blue); }
+.btn-fedora-blue:hover { color: #fff; background-color: #325c97; border-color: #2f578e; }
+
+.text-fedora-dark-blue { color: var(--fedora-dark-blue); }
+.bg-fedora-dark-blue { background-color: var(--fedora-dark-blue); }
+.border-fedora-dark-blue { border-color: var(--fedora-dark-blue) !important; }
+.btn-fedora-dark-blue { color: #fff; background-color: var(--fedora-dark-blue); border-color: var(--fedora-dark-blue); }
+.btn-fedora-dark-blue:hover { color: #fff; background-color: #1f3156; border-color: #1c2c4c; }
+
+.text-fedora-magenta { color: var(--fedora-magenta); }
+.bg-fedora-magenta { background-color: var(--fedora-magenta); }
+.border-fedora-magenta { border-color: var(--fedora-magenta) !important; }
+
+.text-fedora-orange { color: var(--fedora-orange); }
+.bg-fedora-orange { background-color: var(--fedora-orange); }
+.border-fedora-orange { border-color: var(--fedora-orange) !important; }
+
+.text-fedora-green { color: var(--fedora-green); }
+.bg-fedora-green { background-color: var(--fedora-green); }
+.border-fedora-green { border-color: var(--fedora-green) !important; }
+
+.text-fedora-purple { color: var(--fedora-purple); }
+.bg-fedora-purple { background-color: var(--fedora-purple); }
+.border-fedora-purple { border-color: var(--fedora-purple) !important; }
+
+.border-width-2 { border-width: 2px !important; }
+.border-width-3 { border-width: 3px !important; }
+.font-size-80 { font-size: 80% !important; }
+.font-size-90 { font-size: 90% !important; }
+
+code, pre { color: var(--fedora-blue); }
+.footer a { color: #999; }
+.footer .btn-social { padding: 0 5px; }
+
+.bg-none { background-color: transparent !important; }

templates/base.html

@@ -7,6 +7,7 @@
     <link href="{% static 'css/fonts.css' %}" rel="stylesheet">
     <link href="{% static 'css/all.css' %}" rel="stylesheet">
     <link href="{% static 'css/bundle.css' %}" rel="stylesheet">
+    <link href="{% static 'css/fedora-theme.css' %}" rel="stylesheet">
     <link href="{% static 'css/custom.css' %}" rel="stylesheet">
     <link href="{% static 'images/favicon.ico' %}" rel="icon" type="image/x-icon">
     <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}" async defer></script>
@@ -23,8 +24,8 @@
           <button
             class="navbar-toggler collapsed"
             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"
@@ -32,7 +33,7 @@
           <span class="navbar-toggler-icon"></span>
           </button>
           <div class="navbar-collapse collapse" id="navbarNavDropdown" >
-            <ul class="navbar-nav  ml-auto font-size-90 font-weight-bold">
+            <ul class="navbar-nav  ms-auto font-size-90 fw-bold">
               {% url 'messaging:send' as url %}
               <li role="presentation" {% if url in request.path %}class="nav-item"{% endif %}>
               <a class="nav-link" href="{{ url }}">Send Happiness</a>
@@ -56,7 +57,7 @@
                   href="#"
                   id="navbarDropdownMenuLink"
                   role="button"
-                  data-toggle="dropdown"
+                  data-bs-toggle="dropdown"
                   aria-haspopup="true"
                   aria-expanded="false"
                   >

templates/messaging/_pagination.html

@@ -3,7 +3,7 @@
     <li class="page-item">
     <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">
         <span aria-hidden="true">&laquo;</span>
-        <span class="sr-only">Previous</span>
+        <span class="visually-hidden">Previous</span>
     </a>
     </li>
     {% endif %}
@@ -14,7 +14,7 @@
     <li class="page-item">
     <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">
         <span aria-hidden="true">&raquo;</span>
-        <span class="sr-only">Next</span>
+        <span class="visually-hidden">Next</span>
     </a>
     </li>
     {% endif %}

templates/messaging/archive.html

@@ -7,7 +7,7 @@
     <div class="page-header">
         <h2>Happiness Archive</h2>
         {% url 'messaging:search' as url %}
-        <form method="get" class="form-inline" action="{{url}}" style="position: absolute; top: 50px; right: 0px;">
+        <form method="get" class="d-flex" action="{{url}}" style="position: absolute; top: 50px; right: 0px;">
             <div class="form-group" style="font-size: 1.7em;">
                 <input type="search" name="q" id="id_q">
                 <input type="submit" value="Search" class="search">

templates/search/search.html

@@ -7,7 +7,7 @@
 {% if query %}
 <div class="page-header">
     <h3>Results</h3>
-    <form method="get"  class="form-inline" style="position: absolute; top: 40px; right: 0px;">
+    <form method="get"  class="d-flex" style="position: absolute; top: 40px; right: 0px;">
     {% for field in form %}
     <div class="form-group" style="font-size: 1.7em;">
         {{ field.errors }}