From 880456a5baebf1b234b220444ffd57cde62eaf61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dalibor=20Markovi=C4=87?= <dalibor31@gmail.com>
Date: Sat, 20 Jun 2026 01:38:42 +0200
Subject: [PATCH] UI: toast notifikacije umesto zelene kartice na vrhu stranice
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Poruke o uspehu (.poruka-uspeh) konvertuju se u toast obaveštenje
u donjem desnom uglu — animacija ulaska, nestaje posle 4 sekunde,
klik za brže zatvaranje; JS sakriva original odmah pri učitavanju
---
 web/static/css/main.css                    |  7 +++--
 web/templates/teme/podrazumevana/base.html | 35 ++++++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/web/static/css/main.css b/web/static/css/main.css
index 895f197..1974eab 100644
--- a/web/static/css/main.css
+++ b/web/static/css/main.css
@@ -752,6 +752,9 @@ select {
     min-width: 0;
 }
 
+/* kad JS radi, .poruka-uspeh se konvertuje u toast — sakrivamo odmah da ne treptne */
+.js-on .poruka-uspeh { display: none !important; }
+
 /* poruka o uspehu — konzistentna za sve teme */
 .poruka-uspeh {
     background: var(--poruka-uspeh-bg);
@@ -790,8 +793,8 @@ select {
     animation: toastIn 0.3s ease forwards;
     max-width: 340px;
 }
-.toast-greska { background: #fef2f2; color: #dc2626; border: 0.5px solid #fca5a5; }
-.toast-uspeh { background: #f0fdf4; color: #16a34a; border: 0.5px solid #86efac; }
+.toast-greska { background: rgba(207, 87, 87, 0.12); color: var(--greska); border: 0.5px solid var(--greska); }
+.toast-uspeh { background: var(--poruka-uspeh-bg); color: var(--poruka-uspeh-boja); border: 0.5px solid var(--poruka-uspeh-boja); }
 .toast.nestaje { animation: toastOut 0.3s ease forwards; }
 @keyframes toastIn {
     from { opacity: 0; transform: translateY(12px); }
diff --git a/web/templates/teme/podrazumevana/base.html b/web/templates/teme/podrazumevana/base.html
index 753c19e..a920c54 100644
--- a/web/templates/teme/podrazumevana/base.html
+++ b/web/templates/teme/podrazumevana/base.html
@@ -12,6 +12,8 @@
     if (window.innerWidth > 768 && localStorage.getItem('sidebar-skupljen') === 'true') {
         document.documentElement.classList.add('sidebar-init-skupljen');
     }
+    // sakriva poruke-uspeha odmah da ne trepnu pre toast konverzije
+    document.documentElement.classList.add('js-on');
     </script>
 
     <!-- tema — učitava se prva -->
@@ -271,7 +273,40 @@
         window._ntechPotvrdi = prikaziModal;
     })();
 
+    // toast obaveštenja — prikazuje poruku u uglu ekrana, nestaje posle 4s
+    window.ntechToast = function(tekst, tip) {
+        var t = document.createElement('div');
+        t.className = 'toast ' + (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>'
+            : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
+        t.innerHTML = svg + '<span>' + tekst + '</span>';
+        // prilagođavamo poziciju za mobilne uređaje
+        t.style.bottom = '24px';
+        t.style.right = '16px';
+        document.body.appendChild(t);
+        var ukloni = function() {
+            t.classList.add('nestaje');
+            setTimeout(function() { if (t.parentNode) t.parentNode.removeChild(t); }, 320);
+        };
+        t.addEventListener('click', ukloni);
+        setTimeout(ukloni, 4000);
+    };
+
+    // konvertuje sve .poruka-uspeh u toast i sklanja original
+    function ntechKonvertujPoruke() {
+        document.querySelectorAll('.poruka-uspeh').forEach(function(el) {
+            if (el.dataset.toastPrikazan) return;
+            el.dataset.toastPrikazan = '1';
+            var tekst = el.textContent.trim();
+            el.style.display = 'none';
+            if (tekst) window.ntechToast(tekst, 'uspeh');
+        });
+    }
+
     function ntechInicijalizuj() {
+        ntechKonvertujPoruke();
         var m = document.querySelector('meta[name="csrf-token"]');
         if (m && m.content) {
             document.querySelectorAll('form[method="POST"],form[method="post"]').forEach(function(f) {