From fedd4b5d60cd0013eb0b51e1875e97f5d902639f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= <dalibor31@gmail.com>
Date: Wed, 1 Jul 2026 17:10:30 +0200
Subject: [PATCH] Prodaja: uklopljen mobilni raspored filter trake
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Traka za pretragu/filtere na telefonu je bila samo flex-wrap red koji se
zbijao nezgodno. Sada: '+ Nova prodaja' preko cele širine na vrhu, pretraga
preko cele širine u svom redu, Od/Do datum jedan pored drugog, a dugmad
(Stornirano/Prikaži/Resetuj/Ovaj mesec) se sam uklapa po dva u red.
---
 web/static/css/main.css             | 12 +++++++++
 web/templates/stranice/prodaja.html | 42 ++++++++++++++++-------------
 2 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index 59e2e19..81493da 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -1109,6 +1109,18 @@ select {
     .magacin-traka form select,
     .magacin-traka form button,
     .magacin-traka form label { width: 100%; justify-content: flex-start; }
+
+    /* prodaja traka — na telefonu: dugme preko cele širine, pretraga preko cele
+       širine, Od/Do datum jedan pored drugog (po pola širine), dugmad akcija
+       (Stornirano/Prikaži/Resetuj/Ovaj mesec) u redu koji se sam uklapa po dva */
+    .prodaja-traka { flex-direction: column; align-items: stretch; }
+    .prodaja-traka-novo { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
+    .prodaja-traka-forma { flex-direction: column; align-items: stretch; }
+    .prodaja-traka-pretraga { width: 100%; }
+    .prodaja-traka-datumi { width: 100%; }
+    .prodaja-traka-datumi > div { flex: 1; min-width: 0; }
+    .prodaja-traka-akcije { width: 100%; }
+    .prodaja-traka-akcije > * { flex: 1 1 calc(50% - 5px); min-width: 120px; box-sizing: border-box; justify-content: center; text-align: center; }
 }
 
 /* tačkice za teme */
diff --git a/web/templates/stranice/prodaja.html b/web/templates/stranice/prodaja.html
index 85af280..c8ad519 100644
--- a/web/templates/stranice/prodaja.html
+++ b/web/templates/stranice/prodaja.html
@@ -7,30 +7,34 @@
     {{end}}
 
     <!-- zaglavlje sa pretragom, filterima i dugmetom -->
-    <div style="display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap">
-        <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/nova" class="btn-primarno">+ Nova prodaja</a>
-        <form method="GET" action="/prodaja" style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1">
-            <div style="flex: 1; min-width: 180px">
+    <div class="prodaja-traka" style="display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap">
+        <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja/nova" class="btn-primarno prodaja-traka-novo">+ Nova prodaja</a>
+        <form method="GET" action="/prodaja" class="prodaja-traka-forma" style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; flex: 1">
+            <div class="prodaja-traka-pretraga" style="flex: 1; min-width: 180px">
                 <label class="polje-labela">Pretraga</label>
                 <input type="text" name="pretraga" value="{{.Pretraga}}" placeholder="Broj naloga, klijent, napomena..." style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
             </div>
-            <div>
-                <label class="polje-labela">Od datuma</label>
-                <input type="date" name="od" value="{{.Od}}" style="padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
+            <div class="prodaja-traka-datumi" style="display: flex; gap: 10px">
+                <div>
+                    <label class="polje-labela">Od datuma</label>
+                    <input type="date" name="od" value="{{.Od}}" style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
+                </div>
+                <div>
+                    <label class="polje-labela">Do datuma</label>
+                    <input type="date" name="do" value="{{.Do}}" style="width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
+                </div>
             </div>
-            <div>
-                <label class="polje-labela">Do datuma</label>
-                <input type="date" name="do" value="{{.Do}}" style="padding: 8px 10px; border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; background: var(--pozadina); color: var(--tekst-glavni); outline: none" />
+            <div class="prodaja-traka-akcije" style="display: flex; gap: 10px; flex-wrap: wrap">
+                <label class="dugme-prekidac">
+                    <input type="checkbox" name="stornirano" value="1" {{if .SamoStornirano}}checked{{end}} />
+                    Samo stornirano
+                </label>
+                <button type="submit" class="btn-sekundarno" style="white-space: nowrap">Prikaži</button>
+                {{if or .Pretraga .Od .Do .SamoStornirano}}
+                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja" class="btn-sekundarno" style="white-space: nowrap">✕ Resetuj</a>
+                {{end}}
+                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja?{{if .Pretraga}}pretraga={{.Pretraga}}&{{end}}od={{.OvajMesecOd}}&do={{.OvajMesecDo}}{{if .SamoStornirano}}&stornirano=1{{end}}" class="btn-sekundarno" style="white-space: nowrap">Ovaj mesec</a>
             </div>
-            <label class="dugme-prekidac">
-                <input type="checkbox" name="stornirano" value="1" {{if .SamoStornirano}}checked{{end}} />
-                Samo stornirano
-            </label>
-            <button type="submit" class="btn-sekundarno" style="white-space: nowrap">Prikaži</button>
-            {{if or .Pretraga .Od .Do .SamoStornirano}}
-            <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja" class="btn-sekundarno" style="white-space: nowrap">✕ Resetuj</a>
-            {{end}}
-            <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/prodaja?{{if .Pretraga}}pretraga={{.Pretraga}}&{{end}}od={{.OvajMesecOd}}&do={{.OvajMesecDo}}{{if .SamoStornirano}}&stornirano=1{{end}}" class="btn-sekundarno" style="white-space: nowrap">Ovaj mesec</a>
         </form>
     </div>