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

refactor(css): stagger kartica na stranicama profila/podešavanja na jedno mesto

Browse Source 
Isti .animiraj:nth-child stagger (korak 0.06s) bio je dupliran u 7
template <style> blokova (admin_profil, admin_login_istorija, profil_tema,
podesavanja i 3 podstranice). Prebačen u main.css kao
.stranica-stack .animiraj:nth-child(N); descendant selektor čuva isto
ponašanje po neposrednom roditelju, a klasa .stranica-stack sprečava
curenje na ostatak programa. Sad radi i pod HTMX navigacijom, menja se
na jednom mestu.
This commit is contained in:
Dalibor Marković
2026-06-13 08:33:13 +02:00
parent dc6c04cf0a
commit d5b4c820f3
8 changed files with 19 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+10
View File
@@ -1003,6 +1003,16 @@ select {
[class*="-kartice"] > .animiraj:nth-child(4) { animation-delay: 0.22s; }
[class*="-kartice"] > .animiraj:nth-child(5) { animation-delay: 0.28s; }
/* Stagger naslaganih .kartica.animiraj na stranicama podešavanja/profila — JEDNO mesto.
Descendant selektor (razmak, ne >): nth-child se računa po neposrednom roditelju kao i
ranije, a .stranica-stack na wrapperu sprečava da pravilo curi na liste/forme drugih
strana. Mora u main.css jer HTMX navigacija odbacuje <head>. Menjaš na JEDNOM mestu. */
.stranica-stack .animiraj:nth-child(1) { animation-delay: 0.10s; }
.stranica-stack .animiraj:nth-child(2) { animation-delay: 0.16s; }
.stranica-stack .animiraj:nth-child(3) { animation-delay: 0.22s; }
.stranica-stack .animiraj:nth-child(4) { animation-delay: 0.28s; }
.stranica-stack .animiraj:nth-child(5) { animation-delay: 0.34s; }
/* Bedž statusa servisnog naloga — JEDNO mesto za izgled i boje statusa (lista i detalji).
Mora biti u main.css: HTMX navigacija odbacuje <head>, pa page <style> ne bi važio. */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
web/templates/stranice/admin_login_istorija.html
+2 -9
View File
@@ -1,12 +1,5 @@
{{template "base" .}} {{define "naslov"}}Istorija prijava — NTech{{end}} {{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.1s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.animiraj:nth-child(3) { animation-delay: 0.22s; }
.animiraj:nth-child(4) { animation-delay: 0.28s; }
</style>
{{end}} {{define "sadrzaj"}}
<div style="display: flex; flex-direction: column; gap: 16px">
{{template "base" .}} {{define "naslov"}}Istorija prijava — NTech{{end}} {{define "sadrzaj"}}
<div class="stranica-stack" style="display: flex; flex-direction: column; gap: 16px">
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap">
<a href="/admin/korisnici" class="btn-sekundarno">← Nazad</a>
<span style="font-size: 15px; font-weight: 500; color: var(--tekst-glavni)">Istorija prijava — {{.PrikazKorisnik.KorisnickoIme}}</span>
web/templates/stranice/admin_profil.html
+2 -11
View File
@@ -1,15 +1,6 @@
{{ template "base" . }} {{ define "naslov" }}Moj profil — NTech{{ end }}
{{ define "dodatni-css" }}
<style>
.animiraj:nth-child(1) { animation-delay: 0.1s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.animiraj:nth-child(3) { animation-delay: 0.22s; }
.animiraj:nth-child(4) { animation-delay: 0.28s; }
.animiraj:nth-child(5) { animation-delay: 0.34s; }
</style>
{{ end }}
{{ template "base" . }} {{ define "naslov" }}Moj profil — NTech{{ end }}
{{ define "sadrzaj" }}
<div style="display: flex; flex-direction: column; gap: 16px; max-width: 560px">
<div class="stranica-stack" style="display: flex; flex-direction: column; gap: 16px; max-width: 560px">
<!-- promena lozinke -->
<div class="kartica animiraj">
<div style="font-size: 15px; font-weight: 500; color: var(--tekst-glavni); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 0.5px solid var(--ivica)">Promena lozinke</div>
web/templates/stranice/podesavanja.html
+1 -5
View File
@@ -4,10 +4,6 @@
{{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.animiraj:nth-child(3) { animation-delay: 0.22s; }
.animiraj:nth-child(4) { animation-delay: 0.28s; }
.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; }
@@ -15,7 +11,7 @@
{{end}}
{{define "sadrzaj"}}
<div style="width:100%;max-width:100%;">
<div class="stranica-stack" style="width:100%;max-width:100%;">
{{if .Sacuvano}}
<div class="poruka-uspeh">Podešavanja su uspešno sačuvana.</div>
web/templates/stranice/podesavanja_izgled.html
+1 -9
View File
@@ -2,16 +2,8 @@
{{define "naslov"}}Podešavanja — Izgled — NTech{{end}}
{{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.animiraj:nth-child(3) { animation-delay: 0.22s; }
</style>
{{end}}
{{define "sadrzaj"}}
<div style="width:100%;max-width:100%;">
<div class="stranica-stack" style="width:100%;max-width:100%;">
{{if .Sacuvano}}
<div class="poruka-uspeh">Podešavanja su uspešno sačuvana.</div>
web/templates/stranice/podesavanja_opste.html
+1 -8
View File
@@ -2,15 +2,8 @@
{{define "naslov"}}Podešavanja — Opšte — NTech{{end}}
{{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
</style>
{{end}}
{{define "sadrzaj"}}
<div style="width:100%;max-width:100%;">
<div class="stranica-stack" style="width:100%;max-width:100%;">
{{if .Sacuvano}}
<div class="poruka-uspeh">Podešavanja su uspešno sačuvana.</div>
web/templates/stranice/podesavanja_sistem.html
+1 -7
View File
@@ -2,14 +2,8 @@
{{define "naslov"}}Podešavanja — Sistem — NTech{{end}}
{{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
</style>
{{end}}
{{define "sadrzaj"}}
<div style="width:100%;max-width:100%;">
<div class="stranica-stack" style="width:100%;max-width:100%;">
<!-- sistem kartica -->
<div class="kartica animiraj" style="margin-bottom:16px;">
web/templates/stranice/profil_tema.html
+1 -9
View File
@@ -2,16 +2,8 @@
{{define "naslov"}}Moja tema — NTech{{end}}
{{define "dodatni-css"}}
<style>
.animiraj:nth-child(1) { animation-delay: 0.10s; }
.animiraj:nth-child(2) { animation-delay: 0.16s; }
.animiraj:nth-child(3) { animation-delay: 0.22s; }
</style>
{{end}}
{{define "sadrzaj"}}
<div style="width:100%;max-width:100%;">
<div class="stranica-stack" style="width:100%;max-width:100%;">
<!-- kartica: moja tema -->
<div class="kartica animiraj" x-data="profilTemaOdabir" data-tema="{{if .LokalnaTema}}{{.LokalnaTema}}{{else}}tamna{{end}}" style="margin-bottom:16px;">