mirror of
https://github.com/nottinghamtec/PyRIGS.git
synced 2026-10-07 13:05:33 +00:00
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
This commit is contained in:
Joe Banks
@@ -1,20 +1,20 @@
|
||||
<li class="nav-item dropdown align-self-end" id="user">
|
||||
{% if user.is_authenticated %}
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Hi {{ user.first_name }}
|
||||
</a>
|
||||
<ul class="dropdown-menu clearfix" id="userdropdown">
|
||||
<li class="media">
|
||||
<li class="d-flex">
|
||||
<a href="{% url 'profile_detail' %}">
|
||||
<img src="{{ request.user.profile_picture }}" class="media-object float-left pr-2"/>
|
||||
<div class="media-body">
|
||||
<img src="{{ request.user.profile_picture }}" class="media-object float-start pe-2"/>
|
||||
<div class="flex-grow-1">
|
||||
<b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
|
||||
<p class="text-muted">{{ request.user.email }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<div class="dropdown-divider"></div>
|
||||
<li class="float-right">
|
||||
<li class="float-end">
|
||||
<form method="post" action="{% url 'logout' %}" class="d-inline">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-sign-out-alt"></i> Logout</button>
|
||||
|
||||
@@ -4,37 +4,38 @@
|
||||
{% load linkornone from filters %}
|
||||
|
||||
{% block js %}
|
||||
<script src="{% static 'js/tooltip.js' %}"></script>
|
||||
<script src="{% static 'js/popover.js' %}"></script>
|
||||
<script src="{% static 'js/clipboard.min.js' %}"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#urlParamForm').change(function(){
|
||||
url = "?";
|
||||
$('#urlParamForm *').filter(':input').each(function(index, value){
|
||||
defaultVal = $(value).data('default');
|
||||
param = $(value).val();
|
||||
val = $(value).prop('checked');
|
||||
|
||||
ready(function() {
|
||||
var form = document.getElementById('urlParamForm');
|
||||
if (!form) { return; }
|
||||
function updateUrls() {
|
||||
var calUrl = document.getElementById('cal-url');
|
||||
if (!calUrl) { return; }
|
||||
var url = "?";
|
||||
form.querySelectorAll('input, select, textarea').forEach(function(input){
|
||||
var defaultVal = input.dataset.default;
|
||||
// jQuery used to parse data-default into a boolean
|
||||
if (defaultVal === 'true') { defaultVal = true; } else if (defaultVal === 'false') { defaultVal = false; }
|
||||
var param = input.value;
|
||||
var val = input.checked;
|
||||
if(val !== defaultVal){
|
||||
url = url+param+"="+val+"&";
|
||||
}
|
||||
});
|
||||
ics_url = $('#cal-url').data('url') + url.substring(0, url.length - 1);
|
||||
$('#cal-url').text(ics_url);
|
||||
|
||||
gcal_url = $('#gcal-link').data('url') + encodeURIComponent(url.substring(0, url.length - 1));
|
||||
$('#gcal-link').attr('href',gcal_url);
|
||||
});
|
||||
|
||||
$('#urlParamForm').change(); //Do the initial setting
|
||||
var ics_url = document.getElementById('cal-url').dataset.url + url.substring(0, url.length - 1);
|
||||
document.getElementById('cal-url').textContent = ics_url;
|
||||
var gcal_url = document.getElementById('gcal-link').dataset.url + encodeURIComponent(url.substring(0, url.length - 1));
|
||||
document.getElementById('gcal-link').setAttribute('href', gcal_url);
|
||||
}
|
||||
form.addEventListener('change', updateUrls);
|
||||
updateUrls(); //Do the initial setting
|
||||
});
|
||||
|
||||
var clipboard = new ClipboardJS('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
$(e.trigger).popover('show');
|
||||
window.setTimeout(function () {$(e.trigger).popover('hide')}, 3000);
|
||||
var popover = bootstrap.Popover.getOrCreateInstance(e.trigger, {trigger: 'manual'});
|
||||
popover.show();
|
||||
window.setTimeout(function () {popover.hide()}, 3000);
|
||||
e.clearSelection();
|
||||
});
|
||||
</script>
|
||||
@@ -43,7 +44,7 @@
|
||||
{% block content %}
|
||||
{% if not is_ajax and object.pk == user.pk %}
|
||||
<div class="row py-3">
|
||||
<div class="col text-right">
|
||||
<div class="col text-end">
|
||||
<div class="btn-group">
|
||||
<a href="{% url 'profile_update_self' %}" class="btn btn-warning">
|
||||
Edit Profile <span class="fas fa-edit"></span>
|
||||
@@ -95,11 +96,11 @@
|
||||
<dd class="col-8">
|
||||
{% if user.api_key %}
|
||||
<code id="api-key">{{user.api_key}}</code>
|
||||
<button class="btn btn-secondary align-middle pr-1 btn-sm" data-clipboard-target="#api-key" data-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
|
||||
<button class="btn btn-secondary align-middle pe-1 btn-sm" data-clipboard-target="#api-key" data-bs-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
|
||||
{% else %}
|
||||
<span id="api-key">No API Key Generated</span>
|
||||
{% endif %}
|
||||
<a href="{% url 'reset_api_key' %}" class="btn btn-secondary align-middle pr-1">
|
||||
<a href="{% url 'reset_api_key' %}" class="btn btn-secondary align-middle pe-1">
|
||||
{% if user.api_key %}Reset API Key{% else %}Generate API Key{% endif %}
|
||||
<span class="fas fa-redo"></span>
|
||||
</a>
|
||||
@@ -107,8 +108,8 @@
|
||||
<dt class="col-4">Calendar Options</dt>
|
||||
<dd class="col-8">
|
||||
<form id="urlParamForm">
|
||||
<div class="form-group d-flex flex-column flex-lg-row">
|
||||
<label class="checkbox-inline mr-lg-2">
|
||||
<div class="mb-3 d-flex flex-column flex-lg-row">
|
||||
<label class="checkbox-inline me-lg-2">
|
||||
<input type="checkbox" value="rig" data-default="true" checked> Rigs
|
||||
</label>
|
||||
<label class="checkbox-inline mx-lg-2">
|
||||
@@ -123,10 +124,10 @@
|
||||
<label class="checkbox-inline mx-lg-2">
|
||||
<input type="checkbox" value="provisional" data-default="true" checked> Provisional
|
||||
</label>
|
||||
<label class="checkbox-inline ml-lg-2">
|
||||
<label class="checkbox-inline ms-lg-2">
|
||||
<input type="checkbox" value="confirmed" data-default="true" checked> Confirmed/Booked
|
||||
</label>
|
||||
<label class="checkbox-inline ml-lg-2">
|
||||
<label class="checkbox-inline ms-lg-2">
|
||||
<input type="checkbox" value="only_mic" data-default="false" > Only MIC
|
||||
</label>
|
||||
</div>
|
||||
@@ -136,7 +137,7 @@
|
||||
<dd class="col-8">
|
||||
{% if user.api_key %}
|
||||
<code id="cal-url" data-url="http{{ request.is_secure|yesno:"s,"}}://{{ request.get_host }}{% url 'ics_calendar' api_pk=user.pk api_key=user.api_key %}"></code>
|
||||
<button class="btn btn-secondary align-middle btn-sm pr-1" data-clipboard-target="#cal-url" data-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
|
||||
<button class="btn btn-secondary align-middle btn-sm pe-1" data-clipboard-target="#cal-url" data-bs-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
|
||||
<br>
|
||||
<small><a id="gcal-link" data-url="https://support.google.com/calendar/answer/37100" href="">Click here</a> for instructions on adding to google calendar.<br/>
|
||||
To sync from Google Calendar to mobile device, visit <a href="https://www.google.com/calendar/syncselect" target="_blank">this page</a> on your device and tick "RIGS Calendar".</small>
|
||||
|
||||
@@ -19,29 +19,29 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<form action="{{form.action|default:request.path}}" method="post">{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
{% include 'partials/form_field.html' with field=form.first_name %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
{% include 'partials/form_field.html' with field=form.last_name %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<label for="{{form.email.id_for_label}}" class="col-form-label">{{form.email.label}}</label>
|
||||
{% render_field form.email type="email" class+="form-control" placeholder=form.email.label %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
{% include 'partials/form_field.html' with field=form.initials %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<label for="{{form.phone.id_for_label}}" class="col-form-label">{{form.phone.label}}</label>
|
||||
{% render_field form.phone type="tel" class+="form-control" placeholder=form.phone.label %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="mb-3">
|
||||
<label for="{{ form.dark_theme.id_for_label }}">Enable Dark Theme?</label>
|
||||
{% render_field form.dark_theme %}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="btn btn-primary float-right" type="submit"/>
|
||||
<div class="mb-3">
|
||||
<input class="btn btn-primary float-end" type="submit"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user