fix(ui): mobilne ispravke u prikazu i čitljivosti preko slike
- magacin: dugme Premesti na mobilnom — dialog je imao duplirani id (tabela i kartica), pa je getElementById otvarao skriveni tabelarni modal; id sada nosi prefiks tab/kart - kategorije: „Nazad na magacin" koristi klasu .nazad-link (vidljiv, i preko slike dobija glass podlogu + belu boju + senku) - nabavka: „+ Dodaj stavku" na mobilnom — inline display:none je gazio @media, pa mobilne kartice stavki nisu prikazane; display sada kontroliše samo CSS klasa - podsetnici: prazno stanje (mobilni) umotano u .kartica da bude čitljivo preko slike - base: jača podloga topbara i senka naslova preko svetle slike na mobilnom
This commit is contained in:
@@ -27,7 +27,7 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
|
|
||||||
<!-- nazad dugme -->
|
<!-- nazad dugme -->
|
||||||
<a href="/magacin" style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tekst-sporedni);text-decoration:none;">
|
<a href="/magacin" class="nazad-link">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||||
Nazad na magacin
|
Nazad na magacin
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -85,7 +85,7 @@
|
|||||||
</a>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if index $.Dozvole "artikal.premesti"}}{{if $.Kategorije}}
|
{{if index $.Dozvole "artikal.premesti"}}{{if $.Kategorije}}
|
||||||
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije)}}
|
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije "Prefiks" "tab")}}
|
||||||
{{end}}{{end}}
|
{{end}}{{end}}
|
||||||
{{if index $.Dozvole "artikal.obrisi"}}
|
{{if index $.Dozvole "artikal.obrisi"}}
|
||||||
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
|
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
<a href="/magacin/izmeni/{{.ID}}" class="btn-primarno-malo">Izmeni</a>
|
<a href="/magacin/izmeni/{{.ID}}" class="btn-primarno-malo">Izmeni</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{if index $.Dozvole "artikal.premesti"}}{{if $.Kategorije}}
|
{{if index $.Dozvole "artikal.premesti"}}{{if $.Kategorije}}
|
||||||
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije)}}
|
{{template "premestiMeni" (dict "ID" .ID "Kategorije" $.Kategorije "Prefiks" "kart")}}
|
||||||
{{end}}{{end}}
|
{{end}}{{end}}
|
||||||
{{if index $.Dozvole "artikal.obrisi"}}
|
{{if index $.Dozvole "artikal.obrisi"}}
|
||||||
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
|
<a href="/magacin/obrisi/{{.ID}}" class="btn-obrisi-malo"
|
||||||
@@ -162,9 +162,10 @@
|
|||||||
{{/* padajući meni za premeštanje artikla — prima dict {ID, Kategorije}; koristi se i u tabeli i u mobilnoj kartici */}}
|
{{/* padajući meni za premeštanje artikla — prima dict {ID, Kategorije}; koristi se i u tabeli i u mobilnoj kartici */}}
|
||||||
{{define "premestiMeni"}}
|
{{define "premestiMeni"}}
|
||||||
<button type="button" class="btn-primarno-malo" style="align-self:center;"
|
<button type="button" class="btn-primarno-malo" style="align-self:center;"
|
||||||
onclick="document.getElementById('premesti-{{.ID}}').showModal()">Premesti</button>
|
onclick="document.getElementById('premesti-{{.Prefiks}}-{{.ID}}').showModal()">Premesti</button>
|
||||||
{{/* nativni modal — showModal() ga stavlja u „top layer", pa je uvek iznad svega bez obzira na z-index/overflow */}}
|
{{/* 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()">
|
Prefiks (tab/kart) čini id jedinstvenim — isti artikal se renderuje i u tabeli i u mobilnoj kartici. */}}
|
||||||
|
<dialog id="premesti-{{.Prefiks}}-{{.ID}}" class="premesti-modal" onclick="if(event.target===this)this.close()">
|
||||||
{{/* zaglavlje sa dugmetom za zatvaranje; method="dialog" zatvara modal bez slanja */}}
|
{{/* zaglavlje sa dugmetom za zatvaranje; method="dialog" zatvara modal bez slanja */}}
|
||||||
<form method="dialog" class="premesti-zaglavlje">
|
<form method="dialog" class="premesti-zaglavlje">
|
||||||
<h3>Premesti artikal</h3>
|
<h3>Premesti artikal</h3>
|
||||||
|
|||||||
@@ -128,8 +128,9 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- mobilne kartice stavki -->
|
<!-- mobilne kartice stavki (display kontroliše .stavke-kartice: none na desktopu,
|
||||||
<div class="stavke-kartice" style="display:none;flex-direction:column;gap:10px;">
|
flex na mobilnom @media — inline display:none bi pobedio @media, zato ga NEMA) -->
|
||||||
|
<div class="stavke-kartice">
|
||||||
<template x-for="(stavka, i) in stavke" :key="i">
|
<template x-for="(stavka, i) in stavke" :key="i">
|
||||||
<div style="border:0.5px solid var(--ivica);border-radius:8px;padding:12px;">
|
<div style="border:0.5px solid var(--ivica);border-radius:8px;padding:12px;">
|
||||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
|
||||||
|
|||||||
@@ -135,7 +135,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
|
<div class="kartica" style="padding:32px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
|
||||||
Nema podsetnika. <a href="/podsetnici/novi" style="color:var(--sb-akcent);">Dodaj prvi podsetnik.</a>
|
Nema podsetnika. <a href="/podsetnici/novi" style="color:var(--sb-akcent);">Dodaj prvi podsetnik.</a>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
@@ -85,6 +85,15 @@
|
|||||||
.naslov-traka { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.25); }
|
.naslov-traka { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.25); }
|
||||||
/* info-banner u kartici: tekst je goli <div> koji glass override ne dohvata — ciljano mu damo svetli tekst + senku */
|
/* info-banner u kartici: tekst je goli <div> koji glass override ne dohvata — ciljano mu damo svetli tekst + senku */
|
||||||
.info-banner div { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); }
|
.info-banner div { color: rgba(255,255,255,0.95) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.55); }
|
||||||
|
/* Mobilni: backdrop-filter blur preko fiksne pozadinske slike često NE radi na
|
||||||
|
telefonima (iOS/Android), pa glass topbar propušta svetlu sliku i beli naslov se
|
||||||
|
gubi. Zato ne računamo na blur — dajemo čvrstu poluprovidnu podlogu i jaču senku. */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.topbar { background: rgba(0,0,0,0.5) !important; }
|
||||||
|
.topbar-naslov { text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.85); }
|
||||||
|
.naslov-traka { text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.9), 0 2px 16px rgba(0,0,0,0.4); }
|
||||||
|
.pomocni-tekst { text-shadow: 0 1px 3px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.85); }
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user