DataGrid: adaptivity

Nazaj: predstavitveni pregled

Kaj mreža naredi, ko prostora zmanjka: stolpci se glede na prelomno točko umaknejo v razširljivo vrstico s podrobnostmi, namesto da bi se tabela pomikala vodoravno.

Stanje: povsem [Live] – obnašanje zapolnjevanja podokna plus prilagodljiva skrčitev stolpcev pri prelomni točki. Referenca: DevExpress ASPxGridView »Adaptive Layout« – v ozkih podoknih se posamezni stolpci premaknejo v razširljivo vrstico podrobnosti (odsek 8).

• Razumljena osnovna pogodba dataGrid().
• Za recept CSS: nadzor nad obdajajočim vsebnikom lupine (.wkq-shell ali ustreznico).

»Prilagodljivo« pri dataGrid() pomeni vodeno z vsebnikom, ne vodeno z vidnim poljem: mreža ne gleda okna brskalnika, temveč meri širino svojega podokna – ne glede na to, ali jo spremeni okno, rob stranske vrstice, povlečen s resize, ali stanje skrčitve. Tudi njena prelomna točka (odsek 8) se nanaša na to širino podokna.

/** @var helper_plugin_wkfluentui_widgets $widgets */
$widgets = plugin_load('helper', 'wkfluentui_widgets');
?>
<div class="wkq-shell">
  <div class="wkq-shell__body">
    <?php echo $widgets->dataGrid($columns, $rows, ['persistKey' => 'mojmodul:rezultati']); ?>
  </div>
  <div class="wkq-shell__statusbar"><?php echo hsc(count($rows) . ' vrstic'); ?></div>
</div>

Napačno: nastaviti overflow: auto na sami .wkq-shell namesto na .wk-datagrid__body. Tedaj drsi cela lupina, vključno z vrstico stanja – vrstica stanja izgine iz vidnega polja namesto da bi ostala fiksirana (s tem je 4. sestavina spodaj brez učinka).

Pet sestavin – vse podprte z dejansko kodo (wksqliteds/screen.css, .wkq-shell):

Vezava višine lupine (smernica – zaželeno): pet sestavin deluje navpično šele, ko ima lupina sama omejitev višine – sicer vrstica minmax(0,1fr) preprosto raste z vsebino in stran drsi čez spodnji rob okna (resnična ugotovitev uporabnika). Zaželen, za prevajalnik varen vzorec: okvir strani je stolpec flex z min-height: 100vh, topbar/noga naravne višine, lupina med njima z flex: 1 1 auto; min-height: 0 – brez calc() z mešanimi enotami. Kot smernica, ne strogo pravilo: statično rastoči zasloni ostajajo dovoljeni (admin-layout → zavezujoča pravila UX).

Opozorilo: uporabljajte minmax() le z eno enoto na argument – prevajalnik CSS DokuWiki se pri min()/calc() z mešanimi enotami usodno sesuje za celotno spletno mesto (dokumentirano v admin-layout).

Mreže z več kot tremi stolpci v ozkih podoknih (npr. mobilni auxbar, razdeljen pogled) stolpce zložijo, namesto da bi drsele – klicatelju za to ni treba ničesar nastaviti:

• Privzeto: Brez možnosti adaptive dobi vsak stolpec od tretjega naprej prednost, najprej skrajno desni. Izvzeta sta stolpec, ki poimenuje vrstico (primary), in vsak stolpec s kontrolniki. Prelomna točka je pri 640 px širine podokna. 'adaptive' => false zlaganje izklopi.
• Druga stopnja: Če vsebina pod prelomno točko tudi brez prednostnih stolpcev ne gre v podokno, mreža zlaga nadaljnje podatkovne stolpce od desne, dokler ne gre – nikoli stolpca primary, stolpcev za izbiro, dejanja ali pregledovalnik in nobenega stolpca s kontrolniki. Ko se podokno spet razširi, se ti stolpci vrnejo.

• Ključ $opts 'adaptive' => ['breakpoint' => int, 'priority' => [key => int]]: pod breakpoint (širina podokna v pikslih, merjena z ResizeObserver v scripts/datagrid.js) se stolpci, navedeni v priority, skrijejo (celice glave in podatkov dobijo hidden); vsaka vrstica podatkov dobi fokusirljiv gumb stikala (.wk-datagrid__detailtoggle, aria-expanded), ki razširi vrstico podrobnosti (.wk-datagrid__detail) s skritimi pari oznaka/vrednost kot <dl> – vsebina celic se pri tem prevzame kot pravi HTML, povezave ostanejo klikljive (analogija: DevExpress Adaptive Detail Row).
• Skriti stolpci s tem ostanejo v celoti dostopni – vrstica podrobnosti je fokusirljiva zamenjava, ne vizualno krajšanje.
• Če ima mreža pregledovalnik, gumba stikala ni: podokno pregledovalnika že pokaže vse vrednosti vrstice, tudi zložene.
• Brez JavaScripta: vsi stolpci ostanejo vidni, mreža drsi vodoravno v .wk-datagrid__body kot v obnašanju [Live] – skrčitev je čista postopna nadgradnja, ne zamenjava za osnovo prilagodljivosti vsebnika.

echo $widgets->dataGrid($columns, $rows, [
    'adaptive' => ['breakpoint' => 640, 'priority' => ['info' => 1, 'status' => 2]],
]);

• Pod prelomno točko skrčitev naenkrat skrije vse prednostne stolpce; šele nato druga stopnja izmeri dejansko širino in zloži dodatne stolpce posamično. Vrstni red priority določa vrstni red v vrstici podrobnosti, stolpci druge stopnje sledijo za njimi.
• Druga stopnja predpostavlja prednostne stolpce: mreža z največ tremi stolpci ali z 'adaptive' => false drsi vodoravno.
• Gumb stikala vrstice je v prvi vidni podatkovni celici – nikoli v celici izbire (.wk-datagrid__checkcell) ali celici pregledovalnika (.wk-datagrid__inspectcell), v katerih ozkem stolpcu bi zakril potrditveno polje. Če je prvi vidni podatkovni stolpec sam ozek (npr. sličica predogleda), gumba in vsebine ne sprejme – take stolpce prav tako navedite v priority.
• Če skrita celica vsebuje elemente z atributi id, v razširjeni vrstici podrobnosti nastanejo klonirani duplikati teh ID-jev – takih stolpcev ne navajajte za skrčitev.
• Vezava višine (odsek 7) je smernica, ne strogo pravilo – statično rastoči zasloni ostajajo dovoljeni.

• Z vsebnikom vodena prilagodljivost ne zahteva prilagoditve ARIA – spremeni le postavitev, ne semantike.
• Združljivost brskalnikov: osnovna podpora za CSS Grid + lastnost resize (vsi trenutni brskalniki).

Simptom: cela stran drsi čez spodnji rob okna, čeprav bi morala mreža drseti navznoter.

Vzrok: lupina nima omejitve višine – vrstica minmax(0,1fr) raste z vsebino (glej odsek 7).

Rešitev: uporabite vzorec vezave višine iz odseka 7 (min-height: 100vh na okviru strani, flex: 1 1 auto; min-height: 0 na lupini).

Simptom: prevajalnik CSS DokuWiki se sesuje za celotno spletno mesto, potem ko je bila prilagojena vrednost recepta CSS.

Vzrok: minmax()/calc() z mešanimi enotami (glej odsek 7, opozorilo).

Rešitev: uporabite le eno enoto na argument minmax().

• predstavitveni pregled – vse kategorije
• DataGrid: osnove – osnovna pogodba dataGrid()
• FluentUI: skrbniško območje podrobno – vezava višine lupine, pasti prevajalnika CSS