manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ (bootsier): Añade componentes esenciales

Browse source 
- Añade Dialog como modal de Bootstrap, con el JS de soporte para
  `htmx:confirm` y el saneado de su posición fija.
- Adapta Nav, Navbar y Dropdown al reuso de los tipos movidos al core, y
  traduce BootsierColors/Intent en Button y Badge, con soporte para
  Light/Dark vía with_color().
- Reexporta en el tema los componentes de PageTop que faltaban: Block,
  Breadcrumb, Messages, Pager, Table y form::Number.
This commit is contained in:
Manuel Cillero 2026-08-28 19:46:56 +02:00
parent eb63a7ef37
commit c0a5a8c3ab
47 changed files with 2135 additions and 1818 deletions
Download patch file Download diff file Expand all files Collapse all files

18
extensions/pagetop-bootsier/assets/bootsier.dialog.js Normal file
View file

@ -0,0 +1,18 @@
(function () {
'use strict';
// Bootstrap's `.modal` is a plain `position: fixed` element: it never leaves the CSS stacking
// context of whatever ancestor it was rendered inside. If any ancestor sets its own `z-index`
// (e.g. pagetop's `Intro` component, for its decorative layering), the modal's `z-index` only
// ranks it among the elements of *that* ancestor's context, so `.modal-backdrop` -always a
// direct child of `<body>`, added by Bootstrap itself- can end up rendering above it and
// swallowing every click, even though `.modal`'s own `z-index` is numerically higher. Basic's
// native `<dialog>` escapes this for free via the browser's "top layer"; Bootsier's `.modal`
// does not, so it is moved to `<body>` here, exactly like Bootstrap already does with its own
// backdrop.
document.querySelectorAll('.modal.dialog').forEach(function (modal) {
if (modal.parentElement !== document.body) {
document.body.appendChild(modal);
}
});
}());