From bddfb392c14e93349b0a276ba13d37f3196e08ca Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 22 Jul 2026 05:55:34 +0200 Subject: [PATCH] bootstrap: swap BS4 (alexwine) CSS for bootstrap@5 npm MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Completes the Bootstrap 4->5 migration now that every jQuery/BS4 widget is React (navbar, carousel, dropdowns) — plus the feedback toggle here (Feedback.js: global `$('#feedback-form').toggle()` -> React state). - Load Bootstrap 5 CSS from the `bootstrap` npm package in client/index.js (imported first so app + component styles and react-bootstrap override it). - Remove the `alexwine:bootstrap-4` meteor package (BS4 CSS + jQuery + BS4 JS). jQuery for jquery-validation still comes from the npm `jquery` dep. - Utility renames to BS5: ml-auto->ms-auto, float-right->float-end, btn-block->w-100, data-toggle->data-bs-toggle (FromNow tooltip). - forms.scss `.form-label` is no longer a shim (BS5 ships it); comment updated. Full-app build boots clean; server suite 36 passing. Needs a visual staging pass across all pages (BS4->5 shifts grid gutters/typography); forms should improve since react-bootstrap v2 already emitted BS5 markup. --- .meteor/packages | 5 ++- .meteor/versions | 1 - PENDIENTE.md | 40 ++++++++++--------- imports/startup/client/index.js | 4 ++ imports/ui/components/Feedback/Feedback.js | 9 +++-- imports/ui/components/FromNow/FromNow.js | 2 +- .../ui/components/Navigation/Navigation.js | 2 +- .../OAuthLoginButton/OAuthLoginButton.js | 2 +- imports/ui/pages/Signup/Signup.js | 2 +- imports/ui/stylesheets/forms.scss | 9 ++--- package-lock.json | 24 ++++++++--- package.json | 1 + 12 files changed, 63 insertions(+), 38 deletions(-) diff --git a/.meteor/packages b/.meteor/packages index ad5927c..b651f13 100644 --- a/.meteor/packages +++ b/.meteor/packages @@ -30,7 +30,6 @@ audit-argument-checks@1.0.8 ddp-rate-limiter@1.2.2 dynamic-import@0.7.4 static-html@1.4.0 -alexwine:bootstrap-4 gadicc:blaze-react-component # Add braze to react 255kb:meteor-status # Connect status @@ -45,6 +44,10 @@ ostrio:meteor-root aldeed:schema-deny dburles:collection-helpers reywood:publish-composite +# Bootstrap CSS/JS now comes from the `bootstrap` npm package (BS5), imported in +# imports/startup/client/index.js. The old alexwine:bootstrap-4 package (BS4 CSS + +# jQuery + BS4 JS) was removed after the navbar/carousel/dropdown/feedback widgets +# were migrated off jQuery. facts-base@1.0.2 nspangler:autoreconnect quave:synced-cron diff --git a/.meteor/versions b/.meteor/versions index 276b578..a70d819 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -8,7 +8,6 @@ accounts-password@3.0.3 aldeed:collection2@4.2.0 aldeed:schema-deny@4.0.2 aldeed:simple-schema@1.13.1 -alexwine:bootstrap-4@4.1.0 allow-deny@2.0.0 audit-argument-checks@1.0.8 autoupdate@2.0.0 diff --git a/PENDIENTE.md b/PENDIENTE.md index 7d5f445..144e6a7 100644 --- a/PENDIENTE.md +++ b/PENDIENTE.md @@ -65,25 +65,27 @@ React 19: el `` de Status.js (`findDOMNode`), solo en `/statu - ✅ **`meteor-accounts-t9n` actualizado** a `^2.6.0` (es/en OK). El paquete sigue sin build gallego (`gl`), así que se mantiene el fallback gl→es documentado en `i18n.js`. Traducción gallega de la app (`gl/common.json`): 0 claves faltantes. -- **Salto Bootstrap 4→5 (CSS/JS) pendiente:** react-bootstrap ya está en v2 y - corre sobre el CSS Bootstrap 4 actual (`alexwine:bootstrap-4`) con un único - shim `.form-label` en `forms.scss`. **Ya no quedan dependencias del JS jQuery de - BS4** — los dos blockers se migraron a React: - - ✅ **Collapse del navbar** (`Navigation.js` + `NavItem.js`): `data-toggle= - "collapse"` jQuery → estado React (`useState` que alterna `.show`). - *Verificar en staging el menú móvil (` de react-bootstrap con swipe nativo; se - conserva el mecanismo `.lazy` de fondos (blur→full) vía `onSlide`. Dep - `bootstrap-carousel-swipe` eliminada. Ports de CSS en `Index-custom.scss`: - indicadores `li`→`button` (markup BS5) y shim `.visually-hidden`. - *Verificar en staging el home: transiciones, swipe, indicadores, prev/next y - carga progresiva de las imágenes de fondo.* - - Falta (el salto de CSS en sí, ya sin bloqueos de JS): importar `bootstrap@5` - SCSS+JS, `ml-auto`→`ms-auto` (y demás utilidades direccionales), revisar - `new-age.scss`/`custom.scss`/`bootstrap-overrides.scss` y retirar - `alexwine:bootstrap-4`. +- ✅ **Salto Bootstrap 4→5 (CSS/JS) hecho** — react-bootstrap v2 ahora corre sobre + su CSS nativo (BS5). **Compila y arranca; falta SOLO verificación visual en + staging** (BS4→5 cambia sutilezas de grid/gutters/tipografía en todas las páginas). + - Widgets jQuery/BS4 migrados a React (los blockers): navbar collapse + (`Navigation.js`/`NavItem.js`), carrusel del home (`Index.js` → ``, + conserva `.lazy` vía `onSlide`), dropdowns de idioma/tipo (`Profile.js`/ + `Fires.js` → ``), y toggle del feedback (`Feedback.js` → estado React). + Deps `bootstrap-carousel-swipe` y `alexwine:bootstrap-4` eliminadas; jQuery + global ya no se usa (solo `jquery`+`jquery-validation` vía npm en `validate.js`). + - CSS: `bootstrap@5` npm importado en `imports/startup/client/index.js` (antes + que `app.scss`, para que los overrides ganen). Renombres de utilidades: + `ml-auto`→`ms-auto`, `float-right`→`float-end`, `btn-block`→`w-100`, + `data-toggle`→`data-bs-toggle`, `sr-only`→`.visually-hidden` (shim). + - **QA visual pendiente en staging (todas las páginas):** formularios (react- + bootstrap ya emite markup BS5 → deberían mejorar), navbar, botones, modales, + cards, grid/gutters, y los widgets migrados (menú móvil, carrusel, dropdowns, + feedback). Alertas de `themeteorchef:bert` (comprobar que siguen bien sin el + jQuery de alexwine). + - Menor: `popper.js@1` en `package.json` es legacy sin uso (react-bootstrap trae + `@popperjs/core@2`) → se puede quitar. El bloque `.form-label` de `forms.scss` + ya es redundante (BS5 lo trae) salvo por el `display:block` explícito. - **Limpieza menor:** migración 217 `// TODO remove falsepositives lowercase collection`; `prerender.js` gating comentado; sección per-fire del sitemap eliminada (era código muerto tras `firesMapEnabled=false`). diff --git a/imports/startup/client/index.js b/imports/startup/client/index.js index f5dd1e2..4b474be 100644 --- a/imports/startup/client/index.js +++ b/imports/startup/client/index.js @@ -1,4 +1,8 @@ /* global */ +// Bootstrap 5 CSS (npm) replaces the old `alexwine:bootstrap-4` meteor package. +// Import it first so the app + component stylesheets below (and react-bootstrap, +// which targets BS5) override it. +import 'bootstrap/dist/css/bootstrap.css'; import React from 'react'; import { createRoot } from 'react-dom/client'; import { HelmetProvider } from 'react-helmet-async'; diff --git a/imports/ui/components/Feedback/Feedback.js b/imports/ui/components/Feedback/Feedback.js index 8e47f71..d4da8e2 100644 --- a/imports/ui/components/Feedback/Feedback.js +++ b/imports/ui/components/Feedback/Feedback.js @@ -18,6 +18,7 @@ import './Feedback.scss'; class Feedback extends Component { constructor(props) { super(props); + this.state = { open: false }; this.handleSubmit = this.handleSubmit.bind(this); this.onTabClick = this.onTabClick.bind(this); } @@ -50,7 +51,9 @@ class Feedback extends Component { } onTabClick() { - $('#feedback-form').toggle('slide'); + // Was `$('#feedback-form').toggle('slide')` — global jQuery from the BS4 + // meteor package. React state instead, so nothing depends on that global. + this.setState(s => ({ open: !s.open })); } handleSubmit() { @@ -76,7 +79,7 @@ class Feedback extends Component {
{ !this.props.isHome &&
-
(this.formdiv = formdiv)} style={{ display: 'none' }} className="card"> +
(this.formdiv = formdiv)} style={{ display: this.state.open ? 'block' : 'none' }} className="card">
(this.form = form)} className="form card-body" @@ -109,7 +112,7 @@ class Feedback extends Component { /> - diff --git a/imports/ui/components/FromNow/FromNow.js b/imports/ui/components/FromNow/FromNow.js index 68afa23..dd385e2 100644 --- a/imports/ui/components/FromNow/FromNow.js +++ b/imports/ui/components/FromNow/FromNow.js @@ -33,7 +33,7 @@ class FromNow extends Component { render() { return ( - {this.state.when} + {this.state.when} ); } } diff --git a/imports/ui/components/Navigation/Navigation.js b/imports/ui/components/Navigation/Navigation.js index 599b92c..606f74a 100644 --- a/imports/ui/components/Navigation/Navigation.js +++ b/imports/ui/components/Navigation/Navigation.js @@ -37,7 +37,7 @@ const Navigation = ({ name = '', ...props }) => {