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.
2026-06-10 00:05:40 +02:00
parent 941399032b
commit 9c32cd71aa
8 changed files with 245 additions and 57 deletions
@@ -20,33 +20,7 @@
    .magacin-kartica:nth-child(4) { animation-delay: 0.22s; }
    .magacin-kartica:nth-child(5) { animation-delay: 0.28s; }

-    /* padajući meni za premeštanje artikla u drugu kategoriju */
-    .premesti-meni summary { list-style: none; }
-    .premesti-meni summary::-webkit-details-marker { display: none; }
-    .premesti-meni .premesti-panel {
-        margin-top: 6px;
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        background: var(--pozadina);
-        border: 0.5px solid var(--ivica);
-        border-radius: 8px;
-        padding: 4px;
-        min-width: 150px;
-    }
-    .premesti-opcija {
-        text-align: left;
-        padding: 7px 10px;
-        background: none;
-        border: none;
-        border-radius: 6px;
-        color: var(--tekst-glavni);
-        font-size: 13px;
-        cursor: pointer;
-        white-space: nowrap;
-    }
-    .premesti-opcija:hover { background: var(--pozadina-hover); }
-    .premesti-opcija-prazno { color: var(--tekst-sporedni); border-top: 0.5px solid var(--ivica); }
+    /* CSS modala „premesti" je u main.css — mora preživeti HTMX swap (header se ne menja) */
 </style>
 {{end}}

@@ -209,13 +183,20 @@

 {{/* padajući meni za premeštanje artikla — prima dict {ID, Kategorije}; koristi se i u tabeli i u mobilnoj kartici */}}
 {{define "premestiMeni"}}
-<details class="premesti-meni" style="align-self:center;">
-    <summary class="btn-primarno-malo" style="cursor:pointer;">Premesti</summary>
+<button type="button" class="btn-primarno-malo" style="cursor:pointer;align-self:center;"
+        onclick="document.getElementById('premesti-{{.ID}}').showModal()">Premesti</button>
+{{/* nativni modal — showModal() ga stavlja u „top layer", pa je uvek iznad svega bez obzira na z-index/overflow */}}
+<dialog id="premesti-{{.ID}}" class="premesti-modal" onclick="if(event.target===this)this.close()">
+    {{/* zaglavlje sa dugmetom za zatvaranje; method="dialog" zatvara modal bez slanja */}}
+    <form method="dialog" class="premesti-zaglavlje">
+        <h3>Premesti artikal</h3>
+        <button type="submit" class="premesti-zatvori" aria-label="Zatvori">&times;</button>
+    </form>
    <form method="POST" action="/magacin/premesti/{{.ID}}" class="premesti-panel">
        {{range .Kategorije}}
        <button type="submit" name="kategorija_id" value="{{.ID}}" class="premesti-opcija">{{.Naziv}}</button>
        {{end}}
        <button type="submit" name="kategorija_id" value="" class="premesti-opcija premesti-opcija-prazno">Bez kategorije</button>
    </form>
-</details>
+</dialog>
 {{end}}
@@ -47,8 +47,14 @@
            </div>
            {{end}}
            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
-                <input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg"
-                    style="flex:1;min-width:200px;font-size:13px;color:var(--tekst-sporedni);">
+                <input type="file" id="logo-file" name="logo" accept=".png,.jpg,.jpeg,.svg"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('logo-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="logo-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="logo-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -161,9 +167,15 @@
        {{end}}
        <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;gap:8px;align-items:center;">
-                <input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="font-size:13px;color:var(--tekst-sporedni);">
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="login-pozadina-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="login-pozadina-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -203,7 +215,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>

            <!-- slider: zamućenje kartice -->
@@ -213,7 +225,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>

            <!-- slider: zatamnjivanje pozadine -->
@@ -223,7 +235,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                </div>
                <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>

            <!-- slider: zatamnjivanje kartice NTech -->
@@ -233,7 +245,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                </div>
                <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>

            <!-- forma za čuvanje stilova -->
@@ -40,9 +40,15 @@
        {{end}}
        <form method="POST" action="/podesavanja/login-pozadina" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;gap:8px;align-items:center;">
-                <input type="file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="font-size:13px;color:var(--tekst-sporedni);">
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input type="file" id="login-pozadina-file" name="login_pozadina" accept=".jpg,.jpeg,.png,.webp"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('login-pozadina-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="login-pozadina-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="login-pozadina-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;flex-shrink:0;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -79,7 +85,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -87,7 +93,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurKartice" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -95,7 +101,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                </div>
                <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -103,7 +109,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
                </div>
                <input type="range" x-model.number="zatamnjenjeKartice" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <form method="POST" action="/podesavanja/login-pozadina/stilovi" style="margin-top:16px;">
                <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
@@ -37,8 +37,14 @@
            </div>
            {{end}}
            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
-                <input type="file" name="logo" accept=".png,.jpg,.jpeg,.svg"
-                    style="flex:1;min-width:200px;font-size:13px;color:var(--tekst-sporedni);">
+                <input type="file" id="logo-file" name="logo" accept=".png,.jpg,.jpeg,.svg"
+                    style="display:none;"
+                    onchange="var s=document.getElementById('logo-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
+                <label for="logo-file"
+                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;font-weight:500;">
+                    Izaberi fajl
+                </label>
+                <span id="logo-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-aktivan);color:var(--tekst-jak);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;transition:opacity 0.2s;"
                    onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">
@@ -106,13 +106,15 @@

        <form method="POST" action="/profil/pozadina" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
-            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+            <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;">
                <input type="file" id="lok-bg-file" name="lokalna_pozadina" accept=".jpg,.jpeg,.png,.webp"
-                    style="display:none;">
+                    style="display:none;"
+                    onchange="var s=document.getElementById('lok-bg-ime');s.textContent=this.files[0]?this.files[0].name:'Nijedan fajl nije izabran'">
                <label for="lok-bg-file"
-                    style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:8px;font-size:13px;color:var(--tekst-sporedni);cursor:pointer;user-select:none;">
-                    Odaberi sliku
+                    style="display:inline-flex;align-items:center;padding:8px 14px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;cursor:pointer;user-select:none;font-weight:500;">
+                    Izaberi fajl
                </label>
+                <span id="lok-bg-ime" style="font-size:13px;color:var(--tekst-sporedni);">Nijedan fajl nije izabran</span>
                <button type="submit"
                    style="padding:8px 16px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;">
                    Otpremi sliku
@@ -156,7 +158,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
                </div>
                <input type="range" x-model.number="blurPozadine" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -164,7 +166,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blur + 'px'"></span>
                </div>
                <input type="range" x-model.number="blur" min="0" max="20" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -172,7 +174,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
                </div>
                <input type="range" x-model.number="opacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <div style="margin-top:12px;">
                <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
@@ -180,7 +182,7 @@
                    <span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
                </div>
                <input type="range" x-model.number="glassOpacity" min="0" max="80" step="1"
-                    style="width:100%;accent-color:var(--sb-akcent);cursor:pointer;">
+                    class="klizac">
            </div>
            <form method="POST" action="/profil/pozadina/stilovi" style="margin-top:16px;">
                <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
@@ -54,8 +54,11 @@
      .sidebar .nav-stavka svg { color: rgba(255,255,255,0.95) !important; stroke: rgba(255,255,255,0.95) !important; }
      .sidebar .nav-oznaka { text-shadow: 0 1px 3px rgba(0,0,0,0.8); color: rgba(255,255,255,0.7) !important; }
      .topbar { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
-      .kartica { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border: 1px solid rgba(255,255,255,0.12) !important; }
+      .kartica, .premesti-modal { background: rgba(0,0,0,{{if .AppPozadinaGlassOpacity}}{{.AppPozadinaGlassOpacity}}%{{else}}0.08{{end}}) !important; backdrop-filter: blur({{.AppPozadinaBlur}}px); -webkit-backdrop-filter: blur({{.AppPozadinaBlur}}px); border: 1px solid rgba(255,255,255,0.12) !important; }
      .kartica p, .kartica span, .kartica h1, .kartica h2, .kartica h3, .kartica h4, .kartica label, .kartica td, .kartica th, .kartica li, .kartica a { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
+      /* modal nasleđuje glass izgled od kartica: providno staklo, beli tekst, lakše zatamnjenje da se slika nazire */
+      .premesti-modal h3, .premesti-modal .premesti-opcija, .premesti-modal .premesti-zatvori { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
+      .premesti-modal[open]::backdrop { background: rgba(0,0,0,0.45) !important; }
      table, th, td { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
      tr { background: rgba(0,0,0,0.2); }
      tr:hover { background: rgba(0,0,0,0.35); }