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

Paginacija, interaktivna pretraga i optimizacija prikaza

Browse Source 
- Dodata server-side paginacija za magacin (127 artikala) i klijente (1040)
  — Limit/Offset u ArtikalFilter i KlijentFilter, 100 po stranici
  — PrebrojiPoFilteru za izračunavanje ukupnog broja stranica
- Interaktivna pretraga (search-as-you-type) sa HTMX:
  — hx-trigger="keyup changed delay:300ms" na polju pretrage
  — HTMX menja samo #magacin-rezultati / #klijenti-rezultati
  — Polje pretrage ostaje u fokusu tokom osvežavanja
- Popravljena pretraga klijenata po imenu i prezimenu:
  — Dodato (ime || ' ' || prezime) LIKE u sva tri upita
  — "Ivana Lazić" sada pronalazi klijenta
- CSS optimizacije za velike liste:
  — content-visibility: auto na redovima tabela i karticama
  — contain-intrinsic-size za stabilan scroll
  — animation-delay produžen do 20. reda / 10. kartice
This commit is contained in:
Dalibor Marković
2026-06-20 16:19:42 +02:00
parent 064d6dfa2a
commit a8f368ca06
8 changed files with 346 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/css/main.css
+28
View File
@@ -1109,6 +1109,29 @@ select {
.tabela tbody tr:nth-child(8) { animation-delay: 0.32s; }
.tabela tbody tr:nth-child(9) { animation-delay: 0.36s; }
.tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }
.tabela tbody tr:nth-child(11) { animation-delay: 0.44s; }
.tabela tbody tr:nth-child(12) { animation-delay: 0.48s; }
.tabela tbody tr:nth-child(13) { animation-delay: 0.52s; }
.tabela tbody tr:nth-child(14) { animation-delay: 0.56s; }
.tabela tbody tr:nth-child(15) { animation-delay: 0.60s; }
.tabela tbody tr:nth-child(16) { animation-delay: 0.64s; }
.tabela tbody tr:nth-child(17) { animation-delay: 0.68s; }
.tabela tbody tr:nth-child(18) { animation-delay: 0.72s; }
.tabela tbody tr:nth-child(19) { animation-delay: 0.76s; }
.tabela tbody tr:nth-child(20) { animation-delay: 0.80s; }
/* content-visibility: auto – browser preskače render elemenata van viewport-a.
Ovo rešava problem sa 1000+ redova gde skrolovanje postaje prazno
dok browser ne stigne da iscrta sve. */
.tabela tbody tr {
content-visibility: auto;
contain-intrinsic-size: 48px;
}
[class*="-kartice"] > .animiraj,
.klijenti-kartice > .animiraj {
content-visibility: auto;
contain-intrinsic-size: 120px;
}
/* Stagger mobilnih lista-kartica (parnjak gornjeg za tabele). Pogađa kartice
unutar bilo kog .X-kartice kontejnera; ostali tipovi kartica (detalji/forma/
@@ -1118,6 +1141,11 @@ select {
[class*="-kartice"] > .animiraj:nth-child(3) { animation-delay: 0.16s; }
[class*="-kartice"] > .animiraj:nth-child(4) { animation-delay: 0.22s; }
[class*="-kartice"] > .animiraj:nth-child(5) { animation-delay: 0.28s; }
[class*="-kartice"] > .animiraj:nth-child(6) { animation-delay: 0.34s; }
[class*="-kartice"] > .animiraj:nth-child(7) { animation-delay: 0.40s; }
[class*="-kartice"] > .animiraj:nth-child(8) { animation-delay: 0.46s; }
[class*="-kartice"] > .animiraj:nth-child(9) { animation-delay: 0.52s; }
[class*="-kartice"] > .animiraj:nth-child(10) { animation-delay: 0.58s; }
/* 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