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:
2026-06-10 00:05:40 +02:00
parent 941399032b
commit 9c32cd71aa
8 changed files with 245 additions and 57 deletions
+27
View File
@@ -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)
})()