Merge grane feature/refaktor-layout: layout utili .kolona/.red-izmedju

This commit is contained in:
2026-06-13 00:57:07 +02:00
24 changed files with 60 additions and 50 deletions
+10
View File
@@ -737,6 +737,16 @@ select {
gap: 18px;
}
/* layout utili — struktura bez razmaka; gap/margin se daju po instanci */
.kolona {
display: flex;
flex-direction: column;
}
.red-izmedju {
display: flex;
justify-content: space-between;
}
/* grid raspored polja — osnovne (desktop) vrednosti;
responsivni override na uže ekrane je niže u media bloku */
.forma-grid-2 {
+1 -1
View File
@@ -34,7 +34,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:20px;">
<div class="kolona" style="gap:20px;">
<!-- matrica dozvola — editabilna forma -->
<div class="kartica animiraj" style="padding:0;overflow:hidden;">
+1 -1
View File
@@ -22,7 +22,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
<!-- lista korisnika -->
<div class="kartica animiraj" style="padding:0;overflow:hidden;">
+1 -1
View File
@@ -29,7 +29,7 @@
{{end}}
<form method="POST" action="{{if .Izmena}}/dobavljaci/izmeni/{{.Dobavljac.ID}}{{else}}/dobavljaci/novi{{end}}">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<!-- naziv -->
<div>
+3 -3
View File
@@ -24,7 +24,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Dobavljač je uspešno sačuvan.</div>
@@ -104,7 +104,7 @@
<div class="dobavljaci-kartice">
{{range .Dobavljaci}}
<div class="kartica dobavljac-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</span>
<div style="display:flex;gap:8px;flex-shrink:0;">
<a href="/dobavljaci/izmeni/{{.ID}}" class="btn-primarno-malo">
@@ -120,7 +120,7 @@
{{end}}
</div>
</div>
<div style="display:flex;flex-direction:column;gap:6px;">
<div class="kolona" style="gap:6px;">
{{if .KontaktOsoba}}
<div class="pomocni-tekst">
<span style="color:var(--tekst-glavni);font-weight:500;">Kontakt:</span> {{.KontaktOsoba}}
+1 -1
View File
@@ -26,7 +26,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:20px;">
<div class="kolona" style="gap:20px;">
<!-- 1. mesečni prihod -->
<div class="kartica izv-sekcija animiraj">
+2 -2
View File
@@ -18,7 +18,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Kategorija je uspešno sačuvana.</div>
@@ -40,7 +40,7 @@
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Nova kategorija</span>
</div>
<form method="POST" action="/magacin/kategorije/dodaj">
<div style="display:flex;flex-direction:column;gap:12px;">
<div class="kolona" style="gap:12px;">
<div>
<label class="polje-labela">
Naziv <span style="color:#dc2626;">*</span>
+1 -1
View File
@@ -62,7 +62,7 @@
</div>
<!-- sekcija fizičko lice -->
<div id="sec-fizicko" style="display:flex;flex-direction:column;gap:12px;">
<div id="sec-fizicko" class="kolona" style="gap:12px;">
<div class="sekcija-naslov">Ime i prezime</div>
<div class="forma-grid-2">
<div>
+3 -3
View File
@@ -24,7 +24,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Klijent je uspešno sačuvan.</div>
@@ -113,7 +113,7 @@
<div class="klijenti-kartice">
{{range .Klijenti}}
<div class="kartica klijent-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<div>
{{if .NazivFirme}}
<div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.NazivFirme}}</div>
@@ -138,7 +138,7 @@
{{end}}
</div>
</div>
<div style="display:flex;flex-direction:column;gap:6px;">
<div class="kolona" style="gap:6px;">
{{if .Telefon}}
<div class="pomocni-tekst">
<span style="color:var(--tekst-glavni);font-weight:500;">Telefon:</span> {{.Telefon}}
+3 -3
View File
@@ -25,7 +25,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh">Artikal je uspešno sačuvan.</div>
@@ -48,7 +48,7 @@
</div>
<!-- pretraga i filteri -->
<form method="GET" action="/magacin" style="display:flex;flex-direction:column;gap:10px;">
<form method="GET" action="/magacin" class="kolona" style="gap:10px;">
<input type="text" name="pretraga" value="{{.Filter.Pretraga}}"
placeholder="Pretraži artikle..."
style="width:100%;">
@@ -134,7 +134,7 @@
<div class="magacin-kartice">
{{range .Artikli}}
<div class="kartica magacin-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<div>
<div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{.Naziv}}</div>
{{if .KategorijaNaziv}}
+1 -1
View File
@@ -29,7 +29,7 @@
{{end}}
<form method="POST" action="{{if .Izmena}}/magacin/izmeni/{{.Artikal.ID}}{{else}}/magacin/novi{{end}}">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<!-- naziv -->
<div>
+1 -1
View File
@@ -16,7 +16,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
<!-- nazad dugme -->
<a href="/nabavke" class="nazad-link">
+3 -3
View File
@@ -36,7 +36,7 @@
<div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
<span style="font-size:16px;font-weight:500;color:var(--tekst-glavni);">Nova nabavka</span>
</div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div>
<label class="polje-labela">Dobavljač</label>
<select name="dobavljac_id" style="width:100%;">
@@ -142,7 +142,7 @@
Ukloni
</button>
</div>
<div style="display:flex;flex-direction:column;gap:10px;">
<div class="kolona" style="gap:10px;">
<div>
<label style="font-size:12px;color:var(--tekst-sporedni);display:block;margin-bottom:4px;">Artikal</label>
<select :name="'artikal_id[]'" x-model="stavka.artikal_id"
@@ -201,7 +201,7 @@
<div x-show="modalGreska" class="poruka-greska greska-animacija" x-text="modalGreska"></div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div>
<label class="polje-labela">
Naziv <span style="color:#dc2626;">*</span>
+2 -2
View File
@@ -24,7 +24,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Nabavka je uspešno sačuvana.</div>
@@ -98,7 +98,7 @@
<div class="nabavke-kartice">
{{range .Nabavke}}
<div class="kartica nabavka-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<div>
<div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">
{{if .DobavljacNaziv}}{{.DobavljacNaziv}}{{else}}Bez dobavljača{{end}}
+5 -5
View File
@@ -73,7 +73,7 @@
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
</div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div>
<label class="polje-labela">Naziv firme</label>
<input type="text" name="naziv_firme" value="{{.NazivFirme}}"
@@ -210,7 +210,7 @@
<!-- slider: zamućenje pozadine -->
<div style="margin-top:16px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
</div>
@@ -220,7 +220,7 @@
<!-- slider: zamućenje kartice -->
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje kartice (glass)</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
</div>
@@ -230,7 +230,7 @@
<!-- slider: zatamnjivanje pozadine -->
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
</div>
@@ -240,7 +240,7 @@
<!-- slider: zatamnjivanje kartice NTech -->
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje kartice NTech</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
</div>
@@ -80,7 +80,7 @@
</div>
<div style="margin-top:16px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
</div>
@@ -88,7 +88,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje kartice (glass)</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurKartice + 'px'"></span>
</div>
@@ -96,7 +96,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
</div>
@@ -104,7 +104,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje kartice NTech</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="zatamnjenjeKartice + '%'"></span>
</div>
@@ -64,7 +64,7 @@
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Firma</span>
</div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div>
<label class="polje-labela">Naziv firme</label>
<input type="text" name="naziv_firme" value="{{.NazivFirme}}"
+2 -2
View File
@@ -27,7 +27,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Podsetnik je uspešno sačuvan.</div>
@@ -115,7 +115,7 @@
<div class="pod-kartice">
{{range .Podsetnici}}
<div class="kartica pod-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<div>
<div style="font-size:15px;font-weight:500;color:{{if .JePrekoracen}}var(--greska){{else}}var(--tekst-glavni){{end}};">{{.Naslov}}</div>
{{if .Napomena}}
+1 -1
View File
@@ -28,7 +28,7 @@
{{end}}
<form method="POST" action="{{if .Izmena}}/podsetnici/izmeni/{{.Podsetnik.ID}}{{else}}/podsetnici/novi{{end}}">
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
<div>
<label class="polje-labela">
+1 -1
View File
@@ -226,7 +226,7 @@
<!-- storno i brisanje -->
<div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if and (index $.Dozvole "prodaja.storno") (not .Nalog.Stornirano) }}
<div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
+5 -5
View File
@@ -57,7 +57,7 @@
<form method="POST" action="/profil/tema">
<input type="hidden" name="_csrf" value="{{.CsrfToken}}">
<input type="hidden" name="koristi_lokalnu_temu" value="1">
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div style="padding:12px;background:var(--pozadina);border-radius:8px;border:0.5px solid var(--ivica);">
<div style="font-size:13px;color:var(--tekst-sporedni);margin-bottom:10px;">Izaberite temu:</div>
<div style="display:flex;gap:16px;">
@@ -153,7 +153,7 @@
</div>
<div style="margin-top:16px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blurPozadine + 'px'"></span>
</div>
@@ -161,7 +161,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zamućenje stakla</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="blur + 'px'"></span>
</div>
@@ -169,7 +169,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje pozadine</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="opacity + '%'"></span>
</div>
@@ -177,7 +177,7 @@
class="klizac">
</div>
<div style="margin-top:12px;">
<div style="display:flex;justify-content:space-between;margin-bottom:6px;">
<div class="red-izmedju" style="margin-bottom:6px;">
<span class="pomocni-tekst">Zatamnjivanje stakla</span>
<span style="font-size:13px;color:var(--tekst-glavni);font-weight:500;" x-text="glassOpacity + '%'"></span>
</div>
+3 -3
View File
@@ -45,7 +45,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Nalog je uspešno sačuvan.</div>
@@ -55,7 +55,7 @@
{{end}}
<!-- gornja traka: pretraga + dugme nova, ispod toga dugme traži -->
<form method="GET" action="/servis" style="display:flex;flex-direction:column;gap:8px;">
<form method="GET" action="/servis" class="kolona" style="gap:8px;">
<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
<input type="text" name="pretraga" value="{{.Pretraga}}"
placeholder="Pretraži po broju naloga ili uređaju..."
@@ -138,7 +138,7 @@
<div class="servis-kartice">
{{range .Nalozi}}
<div class="kartica servis-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;">
<div class="red-izmedju" style="align-items:flex-start;gap:12px;margin-bottom:10px;">
<div>
<a href="/servis/{{.ID}}"
style="font-size:15px;font-weight:500;color:var(--sb-akcent);text-decoration:none;font-family:monospace;">
+3 -3
View File
@@ -32,7 +32,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">
<div class="kolona" style="gap:16px;">
{{if .Sacuvano}}
<div class="poruka-uspeh poruka-animacija">Nalog je uspešno sačuvan.</div>
@@ -47,7 +47,7 @@
<!-- zaglavlje naloga -->
<div class="kartica detalji-kartica animiraj">
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
<div style="display:flex;flex-direction:column;gap:8px;">
<div class="kolona" style="gap:8px;">
<span style="font-size:20px;font-weight:600;color:var(--tekst-glavni);font-family:monospace;">
{{.Nalog.BrojNaloga}}
</span>
@@ -94,7 +94,7 @@
<div style="margin-bottom:16px;padding-bottom:14px;border-bottom:0.5px solid var(--ivica);">
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Uređaj</span>
</div>
<div style="display:flex;flex-direction:column;gap:14px;">
<div class="kolona" style="gap:14px;">
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));gap:16px;">
<div>
<div style="font-size:12px;color:var(--tekst-sporedni);margin-bottom:4px;">Naziv uređaja</div>
+2 -2
View File
@@ -37,12 +37,12 @@
<!-- broj naloga ide kao hidden — server ga je generisao, vraćamo ga pri POST-u -->
<input type="hidden" name="broj_naloga" value="{{.Nalog.BrojNaloga}}">
<div style="display:flex;flex-direction:column;gap:20px;">
<div class="kolona" style="gap:20px;">
<!-- uređaj -->
<div>
<div class="sekcija-naslov">Uređaj</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<div class="kolona" style="gap:12px;">
<div class="forma-grid-2" style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
<div>
<label class="polje-labela">