Layouty stránek

Čtyři tvary, do kterých padne skoro každá obrazovka administrace — jak jsou široké, v jakém pořadí se skládají a co ukazují, dokud data nejsou.

Šířka stránky

Šířka stránky je rozhodnutí, které se dělá jednou a pak se jmenuje. Když jméno chybí, sáhne každá obrazovka po nejbližším čísle — a dvě obrazovky se stejnou náplní pak měří jinak, aniž by to někdo rozhodl.

Šířky stránky
ŠířkaTokenNa co
full--frameSeznamy a tabulky. Sloupec ukousnutý z tabulky je sloupec, který v ní chybí.
wide--page-wideDetail, který se čte: fakta ve dvou sloupcích, panely. Blok roztažený na celý rám přestává být jeden předmět.
reading--page-readingFormulář, dlouhé nastavení, text. Řádek přes celý monitor se nečte, ale přelétá.
card--page-cardCelá obrazovka je jedna krabička: přihlášení, potvrzení, modul, ve kterém ještě nic není. Jediná šířka, která se sama vystředí.

Jméno se vybírá podle toho, co stránka JE, ne podle toho, jak zrovna vypadá dobře. To je celý rozdíl mezi rozhodnutím a odhadem.

full

wide

reading

card

Mřížka uvnitř bloku

Šířka je rám stránky; tohle je vnitřek bloku. Dvě různá rozhodnutí, a plete se to snadno: mřížka nemá vědět, jak široká je stránka, na které stojí.

  • columns 2, 3 nebo 4 — kolik jich je, jakmile je na ně místo. Tři a čtyři jdou dolů přes dva, ne rovnou na jeden.
  • minItemWidth pro dlaždice: řekne se nejužší buňka a řádek jich pojme, kolik se vejde.
  • gap je krok škály prostoru, ne číslo. Mezera, kterou jde minout o dva pixely, přestává být škálou.

Sloupec 1

Sloupec 2

Sloupec 3

Sloupec 4

Dlaždice 1

Dlaždice 2

Dlaždice 3

Dlaždice 4

Dlaždice 5

Dlaždice 6

Seznam

Nejčastější obrazovka administrace: záznamy se stejnou sadou sloupců. Bere celou šířku rámu, protože sloupec ukousnutý z tabulky je sloupec, který v ní chybí.

  1. IngotPageHeader — název modulu a akce, kterou sem uživatel přišel udělat.
  2. IngotToolbar — hledání a filtry. Nad daty, ne vedle nich.
  3. IngotTable — záznamy; řádkové akce má tabulka jako poslední sloupec.
  4. IngotPagination — stránkování pod seznamem.

Zakázky

Co je rozpracované a co má termín tento týden.

Zakázky ve výrobě
ČísloZákazníkStavTermín
ZAK-2026-0179Kovo SedlčanyPo termínu2. 9. 2026
ZAK-2026-0184Strojírny BenešVe výrobě12. 9. 2026
ZAK-2026-0185Zámečnictví HrubýVe frontě18. 9. 2026

Prázdno je součást téhle obrazovky, ne výjimka z ní: vyfiltruj stav, který tu není, a místo řádků stojí věta, která říká proč. Prázdná tabulka bez věty vypadá jako rozbité načítání.

Detail záznamu

Jeden záznam se vším, co o něm platí. Čte se, ale formulář to není — proto wide: fakta se čtou ve dvou sloupcích a text zůstane v dosahu jednoho pohledu.

ZAK-2026-0184

Ve výrobě

Příruba DN80 · 120 ks

Fakta

Zákazník
Strojírny Beneš
Číslo
ZAK-2026-0184
Termín
12. 9. 2026
Obsluha
J. Marek

Postup

Blok, jehož data ještě nedorazila, drží místo skeletonem. Ne prázdnem: obrazovka, ze které bloky doskakují, vypadá pokaždé jinak a čtenář nepozná, jestli je hotová.

Nastavení

Obrazovka, která se vyplňuje. Sloupec na čtení, sekce po skupinách polí a lišta akcí na konci — aby Uložit bylo v dosahu i po devátém poli.

Profil firmy

Údaje, které se propisují na doklady a veřejné stránky.

Identifikace

Uloženo

Zkus přepsat název: lišta začne říkat, že jsou neuložené změny. Stav vedle akce je to, proč tam ta akce pořád je.

Prázdný modul

Modul, ve kterém ještě nic není, je stránka, kterou uživatel vidí jako první — a nejčastěji jediná, na které se rozhodne, jestli tu vůbec něco založí. Není to chybový stav, je to úvod.

Zatím žádné zakázky

Zakázka drží pohromadě výrobek, termín a zákazníka. První se dá založit ručně, další už chodí z objednávek.

  • Řekni, co ta věc je, ne že tu není. „Žádná data“ je konstatování, ne pomoc.
  • Jedna akce, ta pravděpodobná. Prázdná obrazovka se třemi tlačítky je rozcestník, ne úvod.
  • Šířka card: text i akce zůstanou pohromadě uprostřed. Roztažené přes 1 440 px vypadají jako zbytek stránky, který se nenačetl.