From e37f6c3f27309fcdaf39e24e8f059b77a3448c98 Mon Sep 17 00:00:00 2001 From: "depfu[bot]" <23717796+depfu[bot]@users.noreply.github.com> Date: Fri, 27 Feb 2026 19:00:19 +0000 Subject: [PATCH 1/3] Update formtastic to version 6.0.0 --- Gemfile.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index e5f70abc1..1460f693f 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -259,8 +259,8 @@ GEM rack-protection (>= 1.5.3, < 5.0.0) rack-session (>= 1.0.2, < 3.0.0) sanitize (< 8) - formtastic (5.0.0) - actionpack (>= 6.0.0) + formtastic (6.0.0) + actionpack (>= 7.2.0) globalid (1.3.0) activesupport (>= 6.1) haml (6.3.0) From 6a54cf1ffa5adbf3c844d8a3433d4bb63d13c7ee Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Fri, 13 Mar 2026 10:39:32 +0000 Subject: [PATCH 2/3] fix: generate formtastic stylesheet from gem --- app/frontend/stylesheets/all/formtastic.css | 276 ++++++++++++++++++++ app/frontend/stylesheets/application.scss | 2 +- config/vite.rb | 5 - vite.config.js | 3 - 4 files changed, 277 insertions(+), 9 deletions(-) create mode 100644 app/frontend/stylesheets/all/formtastic.css delete mode 100644 config/vite.rb diff --git a/app/frontend/stylesheets/all/formtastic.css b/app/frontend/stylesheets/all/formtastic.css new file mode 100644 index 000000000..d0a265bb4 --- /dev/null +++ b/app/frontend/stylesheets/all/formtastic.css @@ -0,0 +1,276 @@ +/* ------------------------------------------------------------------------------------------------- + +It's *strongly* suggested that you don't modify this file. Instead, load a new stylesheet after +this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs. +This will allow you to update formtastic.css with new releases without clobbering your own changes. + +This stylesheet forms part of the Formtastic Rails gem and was generated with: + ./bin/rails generate formtastic:stylesheets +(c) Justin French + +--------------------------------------------------------------------------------------------------*/ + +/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just .formtastic +--------------------------------------------------------------------------------------------------*/ +.formtastic, +.formtastic ul, +.formtastic ol, +.formtastic li, +.formtastic fieldset, +.formtastic legend, +.formtastic input, +.formtastic button, +.formtastic textarea, +.formtastic select, +.formtastic p { + margin: 0; + padding: 0; +} + +.formtastic fieldset { + border: 0; +} + +.formtastic em, +.formtastic strong { + font-style: normal; + font-weight: normal; +} + +.formtastic ol, +.formtastic ul { + list-style: none; +} + +.formtastic abbr, +.formtastic acronym { + border: 0; + font-variant: normal; +} + +.formtastic input, +.formtastic button, +.formtastic textarea { + font-family: sans-serif; + font-size: inherit; + font-weight: inherit; +} + +.formtastic input, +.formtastic textarea, +.formtastic select { + font-size: 100%; +} + +.formtastic legend { + white-space: normal; + color: #000; +} + +/* SEMANTIC ERRORS +--------------------------------------------------------------------------------------------------*/ +.formtastic .errors { + color: #cc0000; + margin: 0.5em 0 1.5em 25%; + list-style: square; +} + +.formtastic .errors li { + padding: 0; + border: none; + display: list-item; +} + +/* BUTTONS & ACTIONS +--------------------------------------------------------------------------------------------------*/ +.formtastic .buttons, +.formtastic .actions { + overflow: hidden; /* clear containing floats */ + padding-left: 25%; +} + +.formtastic .button, +.formtastic .action { + float: left; + padding-right: 0.5em; +} + +.formtastic .button_action button { + padding: 3px 8px; +} + +.formtastic .link_action a { + display: block; + padding: 3px 0; +} + +/* INPUTS +--------------------------------------------------------------------------------------------------*/ +.formtastic .inputs { + overflow: hidden; /* clear containing floats */ +} + +.formtastic .input { + overflow: hidden; /* clear containing floats */ + padding: 0.5em 0; /* padding and negative margin juggling is for Firefox */ + margin-top: -0.5em; + margin-bottom: 1em; +} + +/* LEFT ALIGNED LABELS +--------------------------------------------------------------------------------------------------*/ +.formtastic .input .label { + display: block; + width: 25%; + float: left; + padding-top: 0.2em; +} + +.formtastic .fragments .label, +.formtastic .choices .label { + position: absolute; + width: 95%; + left: 0px; +} + +.formtastic .fragments .label label, +.formtastic .choices .label label { + position: absolute; +} + +/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets) +--------------------------------------------------------------------------------------------------*/ +.formtastic .choices { + position: relative; +} + +.formtastic .choices-group { + float: left; + width: 74%; + margin: 0; + padding: 0 0 0 25%; +} + +.formtastic .choice { + padding: 0; + border: 0; +} + +/* INLINE HINTS +--------------------------------------------------------------------------------------------------*/ +.formtastic .input .inline-hints { + color: #666; + margin: 0.5em 0 0 25%; +} + +/* INLINE ERRORS +--------------------------------------------------------------------------------------------------*/ +.formtastic .inline-errors { + color: #cc0000; + margin: 0.5em 0 0 25%; +} + +.formtastic .errors { + color: #cc0000; + margin: 0.5em 0 0 25%; + list-style: square; +} + +.formtastic .errors li { + padding: 0; + border: none; + display: list-item; +} + +/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE, SEARCH (ETC) OVERRIDES +--------------------------------------------------------------------------------------------------*/ +.formtastic .stringish input { + width: 72%; +} + +.formtastic .stringish input[size], +.formtastic .stringish input[max] { + width: auto; + max-width: 72%; +} + +/* TEXTAREA OVERRIDES +--------------------------------------------------------------------------------------------------*/ +.formtastic .text textarea { + width: 72%; +} + +.formtastic .text textarea[cols] { + width: auto; + max-width: 72%; +} + +/* HIDDEN OVERRIDES +--------------------------------------------------------------------------------------------------*/ +.formtastic .hidden { + display: none; +} + +/* BOOLEAN LABELS +--------------------------------------------------------------------------------------------------*/ +.formtastic .boolean label { + margin-left: 25%; + display: block; +} + +/* CHOICE GROUPS +--------------------------------------------------------------------------------------------------*/ +.formtastic .choices-group { + margin-bottom: -0.5em; +} + +.formtastic .choice { + margin: 0.1em 0 0.5em 0; +} + +.formtastic .choice label { + float: none; + width: 100%; + line-height: 100%; + padding-top: 0; + margin-bottom: 0.6em; +} + +/* ADJUSTMENTS FOR INPUTS INSIDE LABELS (boolean input, radio input, check_boxes input) +--------------------------------------------------------------------------------------------------*/ +.formtastic .choice label input, +.formtastic .boolean label input { + margin: 0 0.3em 0 0.1em; + line-height: 100%; +} + +/* FRAGMENTED INPUTS (DATE/TIME/DATETIME) +--------------------------------------------------------------------------------------------------*/ +.formtastic .fragments { + position: relative; +} + +.formtastic .fragments-group { + float: left; + width: 74%; + margin: 0; + padding: 0 0 0 25%; +} + +.formtastic .fragment { + float: left; + width: auto; + margin: 0 0.3em 0 0; + padding: 0; + border: 0; +} + +.formtastic .fragment label { + display: none; +} + +.formtastic .fragment label input { + display: inline; + margin: 0; + padding: 0; +} diff --git a/app/frontend/stylesheets/application.scss b/app/frontend/stylesheets/application.scss index 88669f30a..6a18afb26 100644 --- a/app/frontend/stylesheets/application.scss +++ b/app/frontend/stylesheets/application.scss @@ -11,7 +11,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts"; @import "all/bootstrap_variables"; @import "all/datatables-bootstrap"; @import "bootstrap"; -@import "@formtastic/formtastic"; +@import "all/formtastic"; @import "all/sequencescape"; @import "all/colours"; @import "all/header"; diff --git a/config/vite.rb b/config/vite.rb deleted file mode 100644 index 354ca63f4..000000000 --- a/config/vite.rb +++ /dev/null @@ -1,5 +0,0 @@ -# frozen_string_literal: true - -# Import the routes to our external gemfiles, we'll subsequently use these in -# vite.config.ts to setup useful aliases -ViteRuby.env['FORMTASTIC_STYLESHEET_PATH'] = "#{Gem.loaded_specs['formtastic'].full_gem_path}/app/assets/stylesheets" diff --git a/vite.config.js b/vite.config.js index 081d681f9..4b32124c2 100644 --- a/vite.config.js +++ b/vite.config.js @@ -22,9 +22,6 @@ export default defineConfig({ alias: { "@": resolve(join(projectRoot, "app/frontend")), "@images": resolve(join(projectRoot, "app/frontend/images")), - // See config/vite.rb for where these are set - // https://vite-ruby.netlify.app/config/#ruby-configuration-file-💎 - "@formtastic": process.env.FORMTASTIC_STYLESHEET_PATH, }, }, test: { From ec9491ee8b8cf79440e3145ff12a6811c03376f2 Mon Sep 17 00:00:00 2001 From: Stephen Hulme Date: Fri, 13 Mar 2026 11:06:27 +0000 Subject: [PATCH 3/3] refactor: group stylesheets more logically What does all represent? --- app/frontend/stylesheets/application.scss | 11 ++++++----- .../{all => packages}/bootstrap_variables.scss | 0 .../{all => packages}/datatables-bootstrap.scss | 0 .../stylesheets/{all => packages}/floating-labels.css | 0 .../stylesheets/{all => packages}/formtastic.css | 0 .../formtastic_changes.css} | 5 ----- app/frontend/stylesheets/packages/select2_changes.css | 8 ++++++++ 7 files changed, 14 insertions(+), 10 deletions(-) rename app/frontend/stylesheets/{all => packages}/bootstrap_variables.scss (100%) rename app/frontend/stylesheets/{all => packages}/datatables-bootstrap.scss (100%) rename app/frontend/stylesheets/{all => packages}/floating-labels.css (100%) rename app/frontend/stylesheets/{all => packages}/formtastic.css (100%) rename app/frontend/stylesheets/{all/page_specific_hacks.css => packages/formtastic_changes.css} (77%) create mode 100644 app/frontend/stylesheets/packages/select2_changes.css diff --git a/app/frontend/stylesheets/application.scss b/app/frontend/stylesheets/application.scss index 6a18afb26..86925a966 100644 --- a/app/frontend/stylesheets/application.scss +++ b/app/frontend/stylesheets/application.scss @@ -8,17 +8,18 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts"; @import "@fortawesome/fontawesome-free"; @import "@fortawesome/fontawesome-free/scss/solid.scss"; @import "@fortawesome/fontawesome-free/scss/regular.scss"; -@import "all/bootstrap_variables"; -@import "all/datatables-bootstrap"; +@import "packages/bootstrap_variables"; +@import "packages/datatables-bootstrap"; @import "bootstrap"; -@import "all/formtastic"; +@import "packages/formtastic"; +@import "packages/formtastic_changes"; +@import "packages/select2_changes"; @import "all/sequencescape"; @import "all/colours"; @import "all/header"; @import "all/footer"; @import "all/sidebar"; @import "all/search"; -@import "all/page_specific_hacks"; @import "all/sessions"; @import "all/misc_buttons"; @import "all/pipelines_pages"; @@ -27,7 +28,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts"; @import "all/comments_box"; @import "all/tag-substitutions"; @import "all/asset_audits"; -@import "all/floating-labels"; +@import "packages/floating-labels"; @import "codemirror/lib/codemirror"; @import "codemirror/theme/eclipse"; @import "all/robot_behaviours"; diff --git a/app/frontend/stylesheets/all/bootstrap_variables.scss b/app/frontend/stylesheets/packages/bootstrap_variables.scss similarity index 100% rename from app/frontend/stylesheets/all/bootstrap_variables.scss rename to app/frontend/stylesheets/packages/bootstrap_variables.scss diff --git a/app/frontend/stylesheets/all/datatables-bootstrap.scss b/app/frontend/stylesheets/packages/datatables-bootstrap.scss similarity index 100% rename from app/frontend/stylesheets/all/datatables-bootstrap.scss rename to app/frontend/stylesheets/packages/datatables-bootstrap.scss diff --git a/app/frontend/stylesheets/all/floating-labels.css b/app/frontend/stylesheets/packages/floating-labels.css similarity index 100% rename from app/frontend/stylesheets/all/floating-labels.css rename to app/frontend/stylesheets/packages/floating-labels.css diff --git a/app/frontend/stylesheets/all/formtastic.css b/app/frontend/stylesheets/packages/formtastic.css similarity index 100% rename from app/frontend/stylesheets/all/formtastic.css rename to app/frontend/stylesheets/packages/formtastic.css diff --git a/app/frontend/stylesheets/all/page_specific_hacks.css b/app/frontend/stylesheets/packages/formtastic_changes.css similarity index 77% rename from app/frontend/stylesheets/all/page_specific_hacks.css rename to app/frontend/stylesheets/packages/formtastic_changes.css index c818260e1..d9a7f87f0 100644 --- a/app/frontend/stylesheets/all/page_specific_hacks.css +++ b/app/frontend/stylesheets/packages/formtastic_changes.css @@ -9,8 +9,3 @@ .formtastic.plates .text textarea { width: 100%; } - -#select2-plates_dilution_factor-results li:first-child { - background-color: green; - color: white; -} diff --git a/app/frontend/stylesheets/packages/select2_changes.css b/app/frontend/stylesheets/packages/select2_changes.css new file mode 100644 index 000000000..57a9368a1 --- /dev/null +++ b/app/frontend/stylesheets/packages/select2_changes.css @@ -0,0 +1,8 @@ +/* This is a collection of styles to help override some of the automatic rules, in specific cases. + * Ideally we fish to eliminate as many of these as possible. + */ + +#select2-plates_dilution_factor-results li:first-child { + background-color: green; + color: white; +}