refactor(css): stagger animacija redova tabela na jedno mesto u main.css
Svaka lista-strana je imala identičan tbody tr:nth-child stagger (0.04s korak do 10), samo sa drugim prefiksom klase (.prodaja-tabela, .servis-tabela...). Uvedeno JEDNO univerzalno pravilo .tabela tbody tr:nth-child(1..10) u main.css (sve tabele već imaju .tabela, redovi .animiraj). Uklonjeni per-page blokovi iz 10 strana (uklj. duplikat .dozvole-tabela iz admin_dozvole — kopija ostaje u main.css). Pogađa samo redove koji se animiraju; nije bilo HTML izmena. Bonus: sada radi i pod HTMX navigacijom (page <style> blokovi se odbacuju sa <head>, main.css ostaje). Animacija redova se sada menja na JEDNOM mestu. Mobilni card stagger (.X-kartica:nth-child) je zaseban — ostaje za sledeći korak.
This commit is contained in:
@@ -4,11 +4,6 @@
|
||||
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
.dozvole-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.dozvole-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.dozvole-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.dozvole-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.dozvole-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
|
||||
/* zaglavlja modula — providna staklena traka sa akcentnom levom ivicom.
|
||||
Bez sopstvenog backdrop-filter-a: kartica već zamućuje pozadinu, pa traka
|
||||
|
||||
@@ -5,16 +5,6 @@
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
|
||||
.korisnici-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.korisnici-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.korisnici-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.korisnici-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.korisnici-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.korisnici-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.korisnici-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.korisnici-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.korisnici-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.korisnici-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
|
||||
.nova-forma-kartica { animation-delay: 0.30s; }
|
||||
</style>
|
||||
|
||||
@@ -4,16 +4,6 @@
|
||||
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
.dobavljaci-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.dobavljaci-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
.dobavljac-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.dobavljac-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
.dobavljac-kartica:nth-child(3) { animation-delay: 0.16s; }
|
||||
|
||||
@@ -4,16 +4,6 @@
|
||||
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
.klijenti-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.klijenti-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.klijenti-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.klijenti-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.klijenti-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.klijenti-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.klijenti-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.klijenti-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.klijenti-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.klijenti-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
.klijent-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.klijent-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
.klijent-kartica:nth-child(3) { animation-delay: 0.16s; }
|
||||
|
||||
@@ -4,16 +4,6 @@
|
||||
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
.magacin-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.magacin-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.magacin-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.magacin-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.magacin-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.magacin-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.magacin-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.magacin-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.magacin-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.magacin-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
.magacin-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.magacin-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
.magacin-kartica:nth-child(3) { animation-delay: 0.16s; }
|
||||
|
||||
@@ -7,11 +7,6 @@
|
||||
.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; }
|
||||
.stavke-tabela tbody tr:nth-child(1) { animation-delay: 0.16s; }
|
||||
.stavke-tabela tbody tr:nth-child(2) { animation-delay: 0.20s; }
|
||||
.stavke-tabela tbody tr:nth-child(3) { animation-delay: 0.24s; }
|
||||
.stavke-tabela tbody tr:nth-child(4) { animation-delay: 0.28s; }
|
||||
.stavke-tabela tbody tr:nth-child(5) { animation-delay: 0.32s; }
|
||||
</style>
|
||||
{{end}}
|
||||
|
||||
|
||||
@@ -4,16 +4,6 @@
|
||||
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
.nabavke-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.nabavke-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.nabavke-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.nabavke-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.nabavke-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.nabavke-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.nabavke-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.nabavke-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.nabavke-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.nabavke-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
.nabavka-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.nabavka-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
.nabavka-kartica:nth-child(3) { animation-delay: 0.16s; }
|
||||
|
||||
@@ -5,16 +5,6 @@
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
|
||||
.pod-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.pod-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.pod-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.pod-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.pod-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.pod-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.pod-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.pod-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.pod-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.pod-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
|
||||
.pod-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.pod-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
|
||||
@@ -1,15 +1,5 @@
|
||||
{{template "base" .}} {{define "naslov"}}Prodaja — NTech{{end}} {{define "dodatni-css"}}
|
||||
<style>
|
||||
.prodaja-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.prodaja-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.prodaja-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.prodaja-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.prodaja-tabela tbody tr:nth-child(5) { animation-delay: 0.2s; }
|
||||
.prodaja-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.prodaja-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.prodaja-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.prodaja-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.prodaja-tabela tbody tr:nth-child(10) { animation-delay: 0.4s; }
|
||||
.prodaja-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.prodaja-kartica:nth-child(2) { animation-delay: 0.1s; }
|
||||
.prodaja-kartica:nth-child(3) { animation-delay: 0.16s; }
|
||||
|
||||
@@ -5,16 +5,6 @@
|
||||
{{define "dodatni-css"}}
|
||||
<style>
|
||||
|
||||
.servis-tabela tbody tr:nth-child(1) { animation-delay: 0.04s; }
|
||||
.servis-tabela tbody tr:nth-child(2) { animation-delay: 0.08s; }
|
||||
.servis-tabela tbody tr:nth-child(3) { animation-delay: 0.12s; }
|
||||
.servis-tabela tbody tr:nth-child(4) { animation-delay: 0.16s; }
|
||||
.servis-tabela tbody tr:nth-child(5) { animation-delay: 0.20s; }
|
||||
.servis-tabela tbody tr:nth-child(6) { animation-delay: 0.24s; }
|
||||
.servis-tabela tbody tr:nth-child(7) { animation-delay: 0.28s; }
|
||||
.servis-tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
|
||||
.servis-tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
|
||||
.servis-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
|
||||
|
||||
.servis-kartica:nth-child(1) { animation-delay: 0.04s; }
|
||||
.servis-kartica:nth-child(2) { animation-delay: 0.10s; }
|
||||
|
||||
Reference in New Issue
Block a user