From c5a519a848b6e16a9b5ef3e38a974701c5558cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= <dalibor31@gmail.com>
Date: Wed, 1 Jul 2026 15:41:59 +0200
Subject: [PATCH] =?UTF-8?q?Toast=20obave=C5=A1tenja:=20slaganje=20vi=C5=A1?=
 =?UTF-8?q?e=20toastova,=20ujedna=C4=8Den=20mobilni=20prelom=20sa=20flash?=
 =?UTF-8?q?=20porukama?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

window.ntechToast je crtao svaki novi toast na istoj fiksnoj poziciji pa
su se preklapali kad se više njih pojavi zaredom (npr. auto-snimanje
više polja). Sad se dodaju u zajednički kontejner koji ih slaže jedan
iznad drugog preko flex-a.

Flash poruke su menjale raspored na 480px dok ostatak aplikacije koristi
768px kao mobilni prelom — ujednačeno na 768px.
---
 web/static/css/main.css                    | 28 +++++++++++++++++++++-
 web/templates/teme/podrazumevana/base.html | 18 +++++++++-----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index 376bc3c..ec22f7a 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -862,6 +862,32 @@ select {
 .toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fecaca; }
 .toast-uspeh { background: #f0fdf4; color: #15803d; border: 0.5px solid #86efac; }
 .toast.nestaje { animation: toastOut 0.3s ease forwards; }
+
+/* kontejner za više toastova (window.ntechToast) — slaže ih jedan iznad drugog
+   preko flex-a umesto da se svi iscrtaju na istoj fiksnoj poziciji */
+#ntech-toast-kontejner {
+    position: fixed;
+    bottom: 24px;
+    right: 16px;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: 10px;
+}
+.toast.toast-u-nizu {
+    position: static;
+}
+@media (max-width: 768px) {
+    #ntech-toast-kontejner {
+        right: 12px;
+        left: 12px;
+        align-items: stretch;
+    }
+    .toast.toast-u-nizu {
+        max-width: none;
+    }
+}
 @keyframes toastIn {
     from { opacity: 0; transform: translateY(12px); }
     to { opacity: 1; transform: translateY(0); }
@@ -1525,7 +1551,7 @@ select {
 
 .flash-zatvori:hover { opacity: 1; }
 
-@media (max-width: 480px) {
+@media (max-width: 768px) {
     .flash-toast {
         top: auto;
         bottom: 20px;
diff --git a/web/templates/teme/podrazumevana/base.html b/web/templates/teme/podrazumevana/base.html
index 43a561a..cd97d16 100644
--- a/web/templates/teme/podrazumevana/base.html
+++ b/web/templates/teme/podrazumevana/base.html
@@ -281,10 +281,19 @@
         window._ntechPotvrdi = prikaziModal;
     })();
 
-    // toast obaveštenja — prikazuje poruku u uglu ekrana, nestaje posle 4s
+    // toast obaveštenja — prikazuje poruku u uglu ekrana, nestaje posle 4s.
+    // Više poziva u kratkom vremenu (npr. auto-snimanje više polja zaredom)
+    // slaže toastove jedan iznad drugog preko zajedničkog kontejnera, umesto
+    // da se svi iscrtaju na istoj fiksnoj poziciji jedan preko drugog.
     window.ntechToast = function(tekst, tip) {
+        var kontejner = document.getElementById('ntech-toast-kontejner');
+        if (!kontejner) {
+            kontejner = document.createElement('div');
+            kontejner.id = 'ntech-toast-kontejner';
+            document.body.appendChild(kontejner);
+        }
         var t = document.createElement('div');
-        t.className = 'toast ' + (tip === 'greska' ? 'toast-greska' : 'toast-uspeh');
+        t.className = 'toast toast-u-nizu ' + (tip === 'greska' ? 'toast-greska' : 'toast-uspeh');
         // ikonica
         var svg = tip === 'greska'
             ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>'
@@ -295,10 +304,7 @@
         var tekstSpan = document.createElement('span');
         tekstSpan.textContent = tekst;
         t.appendChild(tekstSpan);
-        // prilagođavamo poziciju za mobilne uređaje
-        t.style.bottom = '24px';
-        t.style.right = '16px';
-        document.body.appendChild(t);
+        kontejner.appendChild(t);
         var ukloni = function() {
             t.classList.add('nestaje');
             setTimeout(function() { if (t.parentNode) t.parentNode.removeChild(t); }, 320);