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

fix(css): hover lift na svim karticama + animiraj na nabavka-detalji karticama

Browse Source 
Hover lift (.kartica:hover translateY) nije radio na karticama sa .animiraj
jer je fadeInUp imao fill-mode both, koji forwards zaključa transform i
nadjača hover. Prebačeno na backwards: i dalje nema treperenja na ulazu, a
hover sad radi na svim karticama u programu.

Kartice „Stavke nabavke" i „Brisanje nabavke" u nabavka_detalji nisu imale
.animiraj (previd — stagger u <style> je predviđao tri kartice). Dodato, i
stagger pomeren na nth-child(2-4) jer je prvi child .kolone „Nazad" link.
This commit is contained in:
Dalibor Marković
2026-06-13 09:21:28 +02:00
parent 85ce46bb16
commit 62d786d86c
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+3 -1
View File
@@ -974,8 +974,10 @@ select {
.poruka-animacija { animation: slideDown 0.3s ease forwards; }
.greska-animacija { animation: shake 0.4s ease; }
/* backwards (ne both): drži početni frame tokom stagger-delay-a da nema treperenja,
ali NE zaključava krajnji transform — pa .kartica:hover lift radi i na .animiraj karticama */
.animiraj {
animation: fadeInUp 0.2s ease both;
animation: fadeInUp 0.2s ease backwards;
}
/* Stepenasta (stagger) animacija redova u svim listama — JEDNO mesto za sve tabele.
web/templates/stranice/nabavka_detalji.html
+6 -5
View File
@@ -4,9 +4,10 @@
{{define "dodatni-css"}}
<style>
.detalji-kartica:nth-child(1) { animation-delay: 0.04s; }
.detalji-kartica:nth-child(2) { animation-delay: 0.12s; }
.detalji-kartica:nth-child(3) { animation-delay: 0.20s; }
/* prvi child .kolone je „Nazad" link, pa su kartice na pozicijama 2–4 */
.detalji-kartica:nth-child(2) { animation-delay: 0.04s; }
.detalji-kartica:nth-child(3) { animation-delay: 0.12s; }
.detalji-kartica:nth-child(4) { animation-delay: 0.20s; }
</style>
{{end}}
@@ -49,7 +50,7 @@
</div>
<!-- stavke -->
<div class="kartica detalji-kartica" style="padding:0;overflow:hidden;">
<div class="kartica detalji-kartica animiraj" style="padding:0;overflow:hidden;">
<div style="padding:14px 16px;border-bottom:0.5px solid var(--ivica);">
<span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Stavke nabavke</span>
</div>
@@ -122,7 +123,7 @@
</div>
<!-- zona za brisanje -->
<div class="kartica detalji-kartica" style="border-color:#dc262633;">
<div class="kartica detalji-kartica animiraj" style="border-color:#dc262633;">
<div style="display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;">
<div style="flex:1;min-width:200px;">
<div style="font-size:14px;font-weight:500;color:#dc2626;margin-bottom:4px;">Brisanje nabavke</div>