R-65 Actualizar Bootstrap a la versión 5

pasosdeJesus / sip

Motor para desarrollar y actualizar Sistemas de Información al estilo Pasos de Jesús

ISC License

6 stars 8 forks source link

R-65 Actualizar Bootstrap a la versión 5 #65

Closed vtamara closed 3 years ago

vtamara commented 3 years ago

Aprovechar operación de webpacker 6 con webpack 5 y prueba que se hizo en rama dk de cor1440

vtamara commented 3 years ago

En cada motor (directorio test/dummy) y en cada aplicación se debe:

Aumentar versión de bootstrap en package.json a ^5.1.0
Asegurar que package.json tiene "popper.js": "^2.0.0-next.4"
Ejecutar
```
y add @popperjs/core 
```
Agregar a app/packs/entrypoints/application.js
```
import * as bootstrap from 'bootstrap'
```

vtamara commented 3 years ago

Hay cambios importantes por lo menos en:

Alertas, el botón de cerrar ahora es un SVG --antes era un caracter UTF-8.
Tablas que separan con una línea encabezado de cuerpo
Acordeones, ahora es mediante iconos es más explicito que se trata de secciones colapsables y su estado (colapsado o expandido)
Pestañas ahora son más accesibles.
Ya no operan algunas cajas de verificación que tenían clases legadas, se requieren clases de bootstrap 5

Esos cambios requieren cambiar estructura HTML de:

Menús
Alertas
Acordeones
Pestañas
Cajas de verificación con clases legadas

vtamara commented 3 years ago

Para facilitar el cambio, se han mejorado e implementado en sip funciones auxiliares para Bootstrap (ver app/helpers/sip/bootstrap_helper.rb) se implementaron estos cambios:

se actualizaron auxiliares para manejar menús barra_navegacion, despliega_abajo y opcion_menu
se actualizó el botón para cerrar alertas en anuncios_bootstrap
se creó función auxiliar para cada item de un acordeon: item_acordeon_bs
se crearon funciones auxiliares para formulario en pestañas, uno para cada título item_nav_pestaña_bs y otro para el contenido de cada pestaña contenido_pestaña_bs.
se creó función auxiliar para presentar cajas de verificación caja_de_verificacion_bs con nuevas clases requeridas por bootstrap 5, se mantiene funcionalidad tipo rails i.e enviar el valor 0 de las cajas de verificación no marcadas (y 'on' en las marcadas). Esto a diferencia del comportamiento estándar que es no incluir entre los parametros los id de las cajas no marcadas.

vtamara commented 3 years ago

Hay un problema en bootstrap 5 con cajas de verificación que tengan la clase form-control, como se reportó en https://github.com/twbs/bootstrap/issues/34873.

Se trata de un problema en bootstrap que no será resuelto por sus desarrolladores, por lo que en formularios que tengan cajas de verificación con clase form-control es mejor quitarla.

Como poniamos esa clase por omisión con sip 2.0b11 hemos tenido que seguir un camino largo para resolver la situación, ver https://gitlab.com/pasosdeJesus/si_jrscol/-/issues/408, pero nos parece resuelto.