mirror of
https://github.com/nottinghamtec/PyRIGS.git
synced 2026-10-03 19:15:39 +00:00
* 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
105 lines
4.3 KiB
JavaScript
105 lines
4.3 KiB
JavaScript
"use strict";
|
|
|
|
var gulp = require('gulp');
|
|
|
|
const terser = require('gulp-uglify');
|
|
const sass = require('gulp-sass')(require('sass'));
|
|
const flatten = require('gulp-flatten');
|
|
const autoprefixer = require('autoprefixer')
|
|
const postcss = require('gulp-postcss')
|
|
const sourcemaps = require('gulp-sourcemaps');
|
|
const browsersync = require('browser-sync').create();
|
|
const { exec } = require("child_process");
|
|
const spawn = require('child_process').spawn;
|
|
const cssnano = require('cssnano');
|
|
const con = require('gulp-concat');
|
|
const gulpif = require('gulp-if');
|
|
|
|
function fonts(done) {
|
|
return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.*', { encoding: false })
|
|
.pipe(gulp.dest('pipeline/built_assets/fonts'))
|
|
.pipe(browsersync.stream());
|
|
}
|
|
|
|
function styles(done) {
|
|
const bs_select = ["tom-select.bootstrap5.css"]
|
|
return gulp.src(['pipeline/source_assets/scss/**/*.scss',
|
|
'node_modules/fullcalendar/main.css',
|
|
'node_modules/tom-select/dist/css/tom-select.bootstrap5.css',
|
|
'node_modules/easymde/dist/easymde.min.css'
|
|
])
|
|
.pipe(sourcemaps.init())
|
|
// Bootstrap 4's SCSS can only be consumed via @import (its partials share global variables),
|
|
// so that one deprecation stays silenced until we move to a Sass-module-aware framework.
|
|
// quietDeps hides the remaining deprecations raised inside third-party stylesheets.
|
|
.pipe(sass({
|
|
loadPaths: ['.'],
|
|
quietDeps: true,
|
|
silenceDeprecations: ['import'],
|
|
}).on('error', sass.logError))
|
|
.pipe(gulpif(function(file) { return bs_select.includes(file.relative);}, con('selects.css')))
|
|
.pipe(postcss([ autoprefixer(), cssnano() ]))
|
|
.pipe(sourcemaps.write())
|
|
.pipe(gulp.dest('pipeline/built_assets/css'))
|
|
.pipe(browsersync.stream());
|
|
}
|
|
|
|
function scripts() {
|
|
const dest = 'pipeline/built_assets/js';
|
|
const base_scripts = ["src.js", "konami.js"];
|
|
const bs_select = ["tom-select.complete.js", "autocompleter.js"]
|
|
const interaction = ["html5sortable.min.js", "interaction.js"]
|
|
return gulp.src([/* Bootstrap bundle includes Popper */
|
|
'node_modules/bootstrap/dist/js/bootstrap.bundle.js',
|
|
|
|
'node_modules/html5sortable/dist/html5sortable.min.js',
|
|
'node_modules/clipboard/dist/clipboard.min.js',
|
|
'node_modules/moment/moment.js',
|
|
'node_modules/fullcalendar/main.js',
|
|
'node_modules/tom-select/dist/js/tom-select.complete.js',
|
|
'node_modules/easymde/dist/easymde.min.js',
|
|
'node_modules/konami/konami.js',
|
|
'pipeline/source_assets/js/**/*.js',])
|
|
.pipe(gulpif(function(file) { return base_scripts.includes(file.relative);}, con('base.js')))
|
|
.pipe(gulpif(function(file) { return bs_select.includes(file.relative);}, con('selects.js')))
|
|
.pipe(gulpif(function(file) { return interaction.includes(file.relative);}, con('interaction.js')))
|
|
.pipe(gulpif(function(file) { return ["bootstrap.bundle.js", "helpers.js"].includes(file.relative);}, con('jpop.js')))
|
|
.pipe(flatten())
|
|
// Only minify if filename does not already denote it as minified
|
|
.pipe(gulpif(function(file) { return file.path.indexOf("min") === -1;},terser()))
|
|
.pipe(gulp.dest(dest))
|
|
.pipe(browsersync.stream());
|
|
}
|
|
|
|
function browserSync(done) {
|
|
spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'});
|
|
browsersync.init({
|
|
notify: true,
|
|
open: false,
|
|
port: 8001,
|
|
proxy: '127.0.0.1:8000'
|
|
});
|
|
done();
|
|
}
|
|
|
|
function browserSyncReload(done) {
|
|
browsersync.reload();
|
|
done();
|
|
}
|
|
|
|
function watchFiles() {
|
|
gulp.watch("pipeline/source_assets/scss/**/*.scss", styles);
|
|
gulp.watch("pipeline/source_assets/js/**/*.js", scripts);
|
|
gulp.watch("**/templates/*.html", browserSyncReload);
|
|
}
|
|
|
|
// Rebuild the bundles when the sources change (used by the `assets` service in compose.override.yml)
|
|
function watchSources() {
|
|
gulp.watch("pipeline/source_assets/scss/**/*.scss", styles);
|
|
gulp.watch("pipeline/source_assets/js/**/*.js", scripts);
|
|
}
|
|
|
|
exports.build = gulp.parallel(styles, scripts, fonts);
|
|
exports.watch = gulp.parallel(watchFiles, browserSync);
|
|
exports.watchAssets = gulp.series(exports.build, watchSources);
|