Dizajn zoraďovania dát v tabuľke
Na tejto prednáške si troška zmeníme dizajn našej tabuľky upravením najmä hlavičky. Teraz nám napríklad nadpis stĺpca Priezvisko odskakuje, resp. nám šírka bunky nestačí na jej obsah. Text zasahuje mimo bunky, pretože sme zvýšili počet stĺpcov a tým sa zmenšila šírka všetkých stĺpcov. Okrem toho sme z textu dvoch buniek v hlavičke spravili odkazy, pre ktoré nemáme nastavený dizajn, takže sa nám zobrazujú modrou farbou. Tieto veci by sme mali upraviť, aby to nejako vyzeralo a ešte k tomu sa naučíme jednu novú vec z jazyka CSS, ktorá sa nám v tomto prípade úplne hodí. Poďme teda na to.
V prvom rade upravíme presahovanie textu v hlavičke. Keď sa nad tým zamyslíte, úplne rýchlo to môžeme opraviť dvomi spôsobmi, resp. zmenami nastavení, ktoré nám to zapríčiňujú. Ak si všimnete, všetky stĺpce sú rovnako široké, aj keď to nie je treba, napríklad stĺpec ID je zbytočne taký široký, keďže bude obsahovať vždy iba krátke číslo (aspoň teraz v tomto prípade). Mohli by sme teda zmeniť pravidlo table-layout: fixed, ktoré nám zapríčiňuje rovnakú šírku stĺpcov. Druhé pravidlo, ktoré nám spôsobuje vyčnievanie textu je padding buniek v hlavičke a tabuľke (th, td), ktoré máme nastavené na 15 pixelov, čo je tiež pomerne veľa. My si teda vypneme vlastnosť table-layout a taktiež zmenšíme padding na 10 pixelov.
global.css (len kód, resp. triedy, kde sa niečo zmenilo):
...
/**********PERSONS***********/
.persons{
width: 100%;
font-family: Arial;
}
...
.persons TH, .persons TD{
padding: 10px;
}
...
Text už nepresahuje a šírka buniek je teraz v poriadku. Poďme nejako upraviť odkazy v hlavičke. Štandardný text v hlavičke je biely, takže by sme mali farbu dať rovnakú, aby to veľmi nekričalo. Aby sme nejako odlíšili názvy stĺpcov, podľa ktorých je možné dáta zoraďovať, necháme tieto nadpisy podčiarknuté a pri stave hover im zmeníme farbu, ako je každý druhý riadok tabuľky, aby si používateľ všimol, že je možné na ne kliknúť. Musíme teda pridať triedu pre konkrétne odkazy, bude sa volať sortable a následne nastaviť dizajn v css. Kód by mohol vyzerať takto:
index.php (len pridaná trieda pre odkazy cez ktoré sa sortuje):
…
echo '<th><a class="sortable" href="index.php?sort_by=user_name';
…
echo '<th><a class="sortable" href="index.php?sort_by=user_surname';
...global.css (len pridaný kód):
.persons TH A.sortable{
color: #FFFFFF;
}
.persons TH A.sortable:HOVER{
color: #D9E4E6;
}
Teraz už naša hlavička vyzerá celkom v pohode, nič nevytŕča kde nemá a máme graficky odlíšené názvy stĺpcov, podľa ktorých sa dá zoraďovať. Ostalo nám spraviť ešte jednu vec, ktorá je celkom dôležitá a to je moment, kedy je podľa nejakého stĺpca naozaj niečo zoradené. Ak teraz klikneme na jeden z dvoch stĺpcov a dáta sa príslušne zoradia, používateľ nemá graficky znázornené, podľa ktorého stĺpca má dáta zoradené a obzvlášť, ktorým spôsobom (asc alebo desc). V praxi sa práve toto zvykne nejako zvýrazňovať, aby bolo v každom momente jasné, podľa ktorého stĺpca a akým spôsobom sú dáta zoradené.
Preto si tento moment musíme v kóde odchytiť. Síce sa nám tým kód odkazu pre zoradenie ešte viac roztriešti na viac ifov (už teraz tam testujeme parametre pre spôsov zoradenia), ale to nás nemusí trápiť, hlavne, že to bude vyzerať tak, ako chceme. Čo teda musíme odchytiť? Musíme pridať nejakú triedu odkazu, ak je podľa neho práve v tom momente tabuľka zoradené. To by nemal byť problém, to máme v premennej sort_by. My to ale spravíme rovno tak, že v prípade vzostupného zoradenia pridáme odkazu triedu s názvom asc a v prípade zostupného desc. Pretože pre obe tieto triedy by sme mali mať rôzny dizajn, aby používateľ jednoznačne vedel, podľa čoho a akým spôsobom sú dáta zoradené.
Musíme si kód pri definovaní atribútu class rozdeliť a medzi neho vložiť ešte podmienku, ktorá nám za triedu sortable v prípade zoradenia podľa daného stĺpca pridá ďalšiu triedu, ktorá bude indikovať práve triedenie daným spôsobom. Kód by mal teda vyzerať takto:
index.php (iba okdazy pre zoraďovanie):
…
echo '<th><a class="sortable';
if($sort_by == 'user_name'){
if($sort_type == 'ASC'){
echo ' asc';
}else{
echo ' desc';
}
}
echo '" href="index.php?sort_by=user_name';
…
echo '<th><a class="sortable';
if($sort_by == 'user_surname'){
if($sort_type == 'ASC'){
echo ' asc';
}else{
echo ' desc';
}
}
echo '" href="index.php?sort_by=user_surname';
...
Ako vidíte v kóde, za triedu sortable si pridávame v prípade, že je práve podľa daného stĺpca nastavené triedenie, triedu s názvom daného spôsobu triedenia (vzostupne/zostupne). Skúste si poklikať na odkazy a sledujte pomocou nástrojov vývojára, že sa pri odkaze dané triedy skutočne nachádzajú. Keď už sa nám triedy správne priraďujú, mohli by sme teraz nastaviť obidvom triedam nejaký dizajn, ktorý by určoval, že podľa daného stĺpca sú dáta práve zoradené. Mohli by sme pre vzostupné použiť jednu farbu a pre zostupné druhú farbu.
My si ale vyskúšame niečo iné a krajšie. Predstavme si, že by sme chceli dať pred odkaz znázornenie pre smer zoradenia. Vzostupné by mohlo mať [a-z] a zostupné [z-a]. Možno vám došlo, ak to ideme dávať ako text, prečo sme to jednoducho nevypísali cez echo v PHP a bolo by. Áno, mohli by sme. Takéto niečo je ale možné aj pomocou jazyka CSS a práve to si teraz ukážeme, lebo sa to dá použiť viacerými spôsobmi.
V jazyku CSS existuje špeciálny selector, ktorý môžeme pridať za nami zadaný selector (niečo ako stav hover pri odkaze) s názvom :before (pred) alebo :after (za). Tento špeciálny selector slúži na vloženie obsahu (textového), ktorý sa definuje vlastnosťou content (obsah) buď pred obsah daného elementu alebo za obsah daného elementu. V našom prípade bude teda hodnota vlastnosti content práve vyššie definovaný text ([a-z] alebo [z-a]) a selector použijeme before, aby to bolo na začiatku. Okrem toho môžeme nastaviť aj štýl vkladané obsahu pri danom selectore. Náš kód by mohol teda vyzerať nasledovne:
global.css (len pridaný kód):
...
.persons TH A.sortable.asc:before{
content: '[a-z] ';
}
.persons TH A.sortable.desc:before{
content: '[z-a] ';
}
...
Keď si tento kód vyskúšate, skutočne sa nám pridá pred text v odkaze nami zadaný string vo vlastnosti content. Len pre pripomenutie, text A.sortable.asc je selector pre odkaz, ktorý obsahuje triedu sortable a aj asc. Keby bola medzi tým medzera, tak by to už musela byť trieda elementu, ktorý sa nachádza v odkaze, pretože ako vieme, každá medzera určuje ďalšiu úroveň v hierarchii elementov...
Na záver si to už len troška zmeníme. V praxi sa samozrejme zvykne pred takýto odkaz dávať grafický objekt – obrázok šípky hore alebo dole, tým sa ale nejdeme teraz zaťažovať. Do obsahu vlastnosti content teda môžeme pridať akýkoľvek text. Medzi tento text patrí aj množstvo špeciálnych znakov, ktoré je možné vložiť do obsahu kodu webstránky, resp. ktoré stránky korektne zobrazujú ako text (ako znak – akokeby písmeno alebo číslicu). K zoznamom takýchto znakov, ktoré môžete použiť a k teórii okolo toho sa dostaneme troška neskôr, nateraz si použijeme čiarkovanú šípku hore a dole, ktorú si môžete skopírovať zatiaľ z ukážky kódu. Náš kód by mohol teda vyzerať takto:
global.css:
...
.persons TH A.sortable.asc:before{
content: '⇡ ';
}
.persons TH A.sortable.desc:before{
content: '⇣ ';
}
...
Ako vidíte, teraz to už naozaj používateľovi niečo vraví, ak má zoradené podľa jedného z našich dvoch stĺpcov, indikuje mu to šípka, ktorá aj popisuje daný smer zoradenia. Pekné nie? Teraz to už vyzerá oveľa lepšie, ako v predošlej kapitole:)