Dasko/GoNtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(css): toast sistem iz dupliranih <style> blokova u main.css

Browse Source 
Toast obaveštenja (.toast, .toast-greska, .toast-uspeh, .toast.nestaje,
@keyframes toastIn/Out) bila su identično duplirana u podesavanja.html i
podesavanja_opste.html. Izdvojeno jednom u main.css; uklonjeno iz oba <style>
bloka. Obe strane idu kroz base.html (učitavaju main.css), pa rade nepromenjeno.

Standalone .greska (prijava/totp_provera/setup) NAMERNO ostavljene — te strane
ne učitavaju main.css (samostalne, minimalne).
This commit is contained in:
Dalibor Marković
2026-06-13 01:07:03 +02:00
parent 490078164d
commit ca6cd95c52
3 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+29
View File
@@ -723,6 +723,35 @@ select {
color: var(--greska);
}
/* toast obaveštenja (npr. povratna informacija posle upload-a) */
.toast {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
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.nestaje { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(12px); }
}
/* ============================================================
Komponente forme i tabela — zamena za ponavljane inline stilove.
Cilj: čitljiviji template, jedno mesto istine za izgled.
web/templates/stranice/podesavanja.html
-6
View File
@@ -11,12 +11,6 @@
.custom-file-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--pozadina); border: 0.5px solid var(--ivica); border-radius: 8px; font-size: 13px; color: var(--tekst-sporedni); cursor: pointer; transition: border-color 0.2s; min-width: 0; overflow: hidden; }
.custom-file-label:hover { border-color: var(--sb-akcent); color: var(--tekst-glavni); }
.custom-file-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.15); 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; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }
.toast.nestaje { animation: toastOut 0.3s ease forwards; }
</style>
{{end}}
web/templates/stranice/podesavanja_opste.html
-7
View File
@@ -6,13 +6,6 @@
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.15); 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; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(12px); } }
.toast.nestaje { animation: toastOut 0.3s ease forwards; }
</style>
{{end}}