Bootstrap 5 & remove jQuery (#661)

* build: move frontend assets to Bootstrap 5.3 and Tom Select

* feat: migrate templates and scripts to Bootstrap 5, dropping jQuery

Templates
- Rename Bootstrap 4 classes and data attributes (data-bs-*, ms-/me-/ps-/pe-,
  text-start/end, form-group -> mb-3, input-group wrappers removed, badges,
  custom controls -> form-check/form-select, media -> d-flex, btn-close, ...)
- Dark mode now uses Bootstrap 5.3 colour modes (data-bs-theme on <html>),
  set from <head> to avoid a flash of the light theme
- Remove the Bootstrap 4 /bootstrap/ demo page
- Contextual table classes (table-success etc.) still work as plain
  backgrounds for the rigboard key

JavaScript
- Remove jQuery: src.js/interaction.js and every inline template script are
  rewritten in plain JS on top of small helpers (helpers.js, bundled with
  Bootstrap into jpop.js so inline scripts can use them)
- Replace bootstrap-select/ajax-bootstrap-select with Tom Select. The remote
  search now sends the `q` parameter and reads `text`, which is what the
  API actually uses (the old picker sent `term` and read `label`)
- HTML fragments are fetched with an X-Requested-With header so views keep
  rendering their modal variants, and fetched scripts are re-executed
- Remove the Bootstrap 4 plugin script includes

* fix: stop rigboard header buttons stretching to full width under Bootstrap 5

* fix: restore dark-mode brand colours and contextual table colours under Bootstrap 5

* fix: brighten dark-mode links and make coloured card outlines visible

* fix: calendar layout and grid borders, navbar search button width, guard missing modal links

* fix: readable text in dark-mode Tom Select inputs and placeholders, restore form-control column widths

* build: split the Dockerfile into cached stages with prod and dev targets

* deploy: make compose.yml development-only with live reload, and document it

* fix: keep badge text colour for links inside badges

* fix: restore table-bordered grid lines in dark mode

* fix: include Bootstrap's progress styles and keep progress labels readable

templates/registration/login_embed.html

@@ -15,15 +15,15 @@
 <div class="col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4">
 
     <form id="loginForm" action="" method="post" role="form" target="_self">{% csrf_token %}
-        <div class="form-group">
+        <div class="mb-3">
             <label for="id_username">{{ form.username.label }}</label>
             {% render_field form.username class+="form-control" placeholder=form.username.label %}
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <label for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
             {% render_field form.password class+="form-control" placeholder=form.password.label %}
         </div>
-        <div class="text-right">
+        <div class="text-end">
             <input type="submit" value="Login" class="btn btn-primary"/>
         </div>
         <input type="hidden" name="next" value="{{ next }}"/>

templates/registration/loginform.html

@@ -7,15 +7,15 @@
 {% endif %}
 <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-4">
     <form action="{% url 'login' %}" method="post" role="form" target="_self">{% csrf_token %}
-        <div class="form-group">
+        <div class="mb-3">
             <label for="id_username">{{ form.username.label }}</label>
             {% render_field form.username class+="form-control" placeholder=form.username.label autofocus="" %}
         </div>
-        <div class="form-group">
+        <div class="mb-3">
             <label for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
             {% render_field form.password class+="form-control" placeholder=form.password.label %}
         </div>
-        <div class="text-right">
+        <div class="text-end">
             <a href="{% url 'registration_register' %}" class="btn">Register</a>
             <a href="{% url 'password_reset' %}" class="btn">Forgotten Password</a>
             <input type="submit" id="id_submit" value="Login" class="btn btn-primary"/>

templates/registration/password_change_form.html

@@ -18,14 +18,14 @@
         <div class="col-sm-8 col-sm-offset-2">
             <form action="" method="post" class="" role="form">{% csrf_token %}
                 {% for field in form %}
-                    <div class="form-group">
+                    <div class="mb-3">
                         <label for="{{ field.id_for_label }}" class="col-form-label col-sm-4">{{ field.label }}</label>
                         <div class="controls col-sm-8">
                             {% render_field field class+="form-control" placeholder=field.label %}
                         </div>
                     </div>
                 {% endfor %}
-                <p><input type="submit" value="Change Password" class="btn btn-primary pull-right"></p>
+                <p><input type="submit" value="Change Password" class="btn btn-primary float-end"></p>
             </form>
         </div>
     </div>

templates/registration/password_reset_confirm.html

@@ -26,21 +26,21 @@
 			{% if form.errors %}
 				{% include 'form_errors.html' %}
 			{% endif %}
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="{{form.new_password1.id_for_label}}" class="col-sm-4 col-form-label">{{form.new_password1.label}}</label>
 				<div class="col-sm-8">
 					{% render_field form.new_password1 class+="form-control" %}
 				</div>
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="{{form.new_password2.id_for_label}}" class="col-sm-4 col-form-label">{{form.new_password2.label}}</label>
 				<div class="col-sm-8">
 					{% render_field form.new_password2 class+="form-control" %}
 				</div>
 			</div>
 			<div class="col-sm-12">
-				<div class="pull-right">
-					<div class="form-group">
+				<div class="float-end">
+					<div class="mb-3">
 						<input type="submit" value="{% trans 'Change my password' %}" class="btn btn-primary" />
 					</div>
 				</div>

templates/registration/password_reset_form.html

@@ -15,17 +15,17 @@
 			{% if form.errors %}
 				{% include 'form_errors.html' %}
 			{% endif %}
-			<div class="form-group">
+			<div class="mb-3">
 				<label for="{{form.email.id_for_label}}" class="col-sm-2 col-form-label">{{form.email.label}}</label>
 				<div class="col-sm-10">
 					{% render_field form.email type="email" class+="form-control" %}
 				</div>
 			</div>
-			<div class="form-group">
+			<div class="mb-3">
 				<div class="col-sm-10 col-md-8 col-md-offset-2">
 					{{ form.captcha }}
 				</div>
-				<div class="col-sm-2 text-right">
+				<div class="col-sm-2 text-end">
 					<input type="submit" value="Submit" class="btn btn-primary" />
 				</div>
 			</div>

templates/registration/registration_form.html

@@ -18,14 +18,14 @@
                     <div class="col-sm-8 col-sm-offset-2">
                         <form method="post" role="form">{% csrf_token %}
                             {% for field in form %}
-                            	<div class="form-group form-row">
+                            	<div class="mb-3 row g-2">
                             		<label for="{{ field.id_for_label }}" class="col-form-label col-sm-4">{{ field.label }}</label>
                             		<div class="controls col-sm-8">
                             			{% render_field field class+="form-control" placeholder=field.label %}
                             		</div>
                             	</div>
                             {% endfor %}
-                            <p><input type="submit" value="Register" class="btn btn-primary pull-right"></p>
+                            <p><input type="submit" value="Register" class="btn btn-primary float-end"></p>
                         </form>
                     </div>
                 </div>