Magacin: modal za premeštanje + ujednačen slajder na svim brauzerima
Premeštanje artikla:
- Padajući <details> meni zamenjen nativnim <dialog> modalom (showModal),
koji ide u „top layer" pa je uvek iznad svega bez obzira na z-index/overflow.
- Dodato zatamnjenje pozadine (::backdrop) i fade in/out animacije
(@starting-style + transition-behavior: allow-discrete).
- Klik van modala, × dugme i Escape zatvaraju; klik na kategoriju i dalje
odmah premešta artikal.
Tema i HTMX:
- CSS modala premešten iz magacin.html (dodatni-css u headeru) u main.css,
jer se header ne menja pri HTMX navigaciji (hx-select=#glavni-sadrzaj),
pa je stil sada uvek prisutan.
- Modal prati svetlu/tamnu temu preko CSS promenljivih; kad je aktivna
pozadinska slika, glass-override u base.html ga čini providnim i zamućenim
kao kartice.
- Modal centriran (margin:auto, jer reset gazi UA podrazumevano) i pojačana senka.
Slajder (input[type=range]):
- Dodata zajednička klasa .klizac sa ručnim stilom za oba motora
(::-webkit-slider-* i ::-moz-range-*), da svuda izgleda kao u Firefox-u.
- Plava popunjenost pre glave: Firefox preko ::-moz-range-progress, Chromium
preko gradijenta i CSS promenljive --popunjeno koju postavlja JS.
- Svih 12 slajdera (profil_tema, podesavanja_izgled, podesavanja) prešlo sa
inline accent-color stila na klasu .klizac.
This commit is contained in:
@@ -257,3 +257,30 @@ document.addEventListener('alpine:init', () => {
|
||||
// za prvo učitavanje (defer script) — sprečava animaciju podmenia koji su inicijalno otvoreni
|
||||
ntechInicijalizujPodmeni()
|
||||
ntechDodajPodmeniListenere()
|
||||
|
||||
// klizač (input[type=range].klizac): popunjava plavom deo pre glave u Chromium-u
|
||||
// preko CSS promenljive --popunjeno. Firefox to radi sam (::-moz-range-progress).
|
||||
function ntechAzurirajKlizac(el) {
|
||||
var min = parseFloat(el.min) || 0
|
||||
var max = parseFloat(el.max)
|
||||
if (isNaN(max)) max = 100
|
||||
var v = parseFloat(el.value) || 0
|
||||
var procenat = max > min ? ((v - min) / (max - min)) * 100 : 0
|
||||
el.style.setProperty('--popunjeno', procenat + '%')
|
||||
}
|
||||
function ntechInicijalizujKlizace() {
|
||||
document.querySelectorAll('input[type="range"].klizac').forEach(ntechAzurirajKlizac)
|
||||
}
|
||||
(function() {
|
||||
if (window._ntechKlizacDodato) return
|
||||
window._ntechKlizacDodato = true
|
||||
// delegirani listener — hvata i klizače ubačene kasnije (HTMX swap)
|
||||
document.addEventListener('input', function(e) {
|
||||
var t = e.target
|
||||
if (t && t.classList && t.classList.contains('klizac')) ntechAzurirajKlizac(t)
|
||||
})
|
||||
// početno popunjavanje: posle učitavanja, posle HTMX swap-a i kad Alpine postavi vrednosti
|
||||
document.addEventListener('DOMContentLoaded', ntechInicijalizujKlizace)
|
||||
document.addEventListener('htmx:afterSettle', ntechInicijalizujKlizace)
|
||||
document.addEventListener('alpine:initialized', ntechInicijalizujKlizace)
|
||||
})()
|
||||
|
||||
Reference in New Issue
Block a user