DataGrid: adaptivity

Nazaj: predstavitveni pregled

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 pozna prelomnih točk — sledi širini svojega podokna, ne glede na to, ali širino podokna spreminja okno brskalnika, rob stranske vrstice, povlečen s resize, ali stanje skrčitve.

/** @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).

Za mreže v ozkih podoknih (npr. mobilni auxbar, razdeljen pogled), ki naj bi izgubile posamezne stolpce namesto drsenja:

• 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.
• 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]],
]);

• Skrčitev pod prelomno točko hkrati skrije vse navedene prednostne stolpce (en sam prag, ne postopno merjenje širine po stolpcu) — vrstni red priority določa vrstni red v vrstici podrobnosti.
• Č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