bootstrap: home carousel jQuery plugin -> react-bootstrap <Carousel>
Second (last) jQuery/BS4 JS blocker to the BS5 CSS swap. Replaces the `bootstrap-carousel-swipe` jQuery plugin + `$(...).carousel()` init with react-bootstrap's <Carousel> (native swipe, no jQuery) for both home carousels. - Preserves the progressive `.lazy` background mechanism (blur -> full image on slide-in): the old `slide.bs.carousel` handler becomes <Carousel onSlide>, which marks the incoming index in component state. - Keeps all per-slide class hooks (carousel-item-N, carousel-snd-item-N). - CSS ports in Index-custom.scss for react-bootstrap's BS5 markup: indicators render as <button> (not <li>), and prev/next labels use .visually-hidden (BS4 had .sr-only) -> add a shim so labels stay hidden on current BS4 CSS. - Drops the now-unused bootstrap-carousel-swipe dependency. Full-app build boots clean. Needs a visual staging check of the home page.
This commit is contained in:
parent
8dead27d22
commit
f775d4ac26
4 changed files with 121 additions and 116 deletions
27
PENDIENTE.md
27
PENDIENTE.md
|
|
@ -67,18 +67,23 @@ React 19: el `<Blaze serverFacts>` de Status.js (`findDOMNode`), solo en `/statu
|
|||
`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`. El salto a Bootstrap 5 npm está diferido
|
||||
porque el carrusel del home (`bootstrap-carousel-swipe`, jQuery/BS4) depende del
|
||||
JS jQuery de BS4 (`data-slide`).
|
||||
- ✅ **Collapse del navbar migrado a React** (`Navigation.js` + `NavItem.js`):
|
||||
el `data-toggle="collapse"` jQuery se sustituyó por estado React (`useState`
|
||||
que alterna `.show`); funciona ya sobre el CSS BS4 y no depende del JS jQuery.
|
||||
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 (<lg): abrir/cerrar y cierre al pulsar un
|
||||
enlace.* Un blocker jQuery menos.
|
||||
- Falta: reescribir el carrusel (BS5 trae swipe nativo → quitar el plugin),
|
||||
importar `bootstrap@5` SCSS+JS, `data-slide`→`data-bs-slide`,
|
||||
`ml-auto`→`ms-auto`, `sr-only`→`visually-hidden`, revisar
|
||||
`new-age.scss`/`custom.scss`/`bootstrap-overrides.scss`.
|
||||
enlace.*
|
||||
- ✅ **Carrusel del home** (`Index.js`): `bootstrap-carousel-swipe` (jQuery) +
|
||||
`$(...).carousel()` → `<Carousel>` 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`.
|
||||
- **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`).
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue