Mentor nikdy nenaviguje
Všechno přijde jako notifikace, která se vyřeší jedním klepnutím.
Zapojení
Tři stylopisy v tomhle pořadí, bez build stepu. Funguje to pod PHP, Go i čímkoli dalším — jsou to statické soubory. Písmo i ikony jsou hostované lokálně, takže aplikace nic nenahrává z cizí domény.
v <head>
<script src="/design-system/js/ep-theme.js"></script> <link rel="stylesheet" href="/design-system/css/tokens.css"> <link rel="stylesheet" href="/design-system/css/base.css"> <link rel="stylesheet" href="/design-system/css/components.css">
Pravidlo, které drží systém pohromadě
V kódu obrazovek používejte jen sémantické tokeny (--ep-action, --ep-surface, --ep-ok…), nikdy značkové primitivy (--ep-brand-red, --ep-dk-*). Tmavý režim pak funguje sám, bez jediného dalšího pravidla.
Barvy
Značkové hodnoty jsou doslova z logomanuálu 2. LF UK. Kontrasty neodhadujeme — ověřuje je node design-system/tools/check-contrast.mjs, který hlídá i to, aby se oba bloky tmavého režimu nerozešly.
Identita versus akce — nejdůležitější rozdíl v celém systému
--ep-identity je základní fakultní červená #ED1C29 s kontrastem 4,38:1. Na bílé neprojde AA pro běžný text, takže patří jen na plochy, pruhy, ukazatele a logo.
--ep-action je #C01A23 (6,15:1) a nese odkazy, drobný text a výplně tlačítek s bílým popisem. Záměna těchto dvou je chyba, kterou tu lze udělat nejsnáz.
Základní barvy vizuálního stylu — logomanuál
Sémantické tokeny — mění se s režimem, přepněte si ho nahoře
Sekvenční škála pro kapacitní matici — --ep-ramp-0 … --ep-ramp-4
volno
plno
Jeden odstín, monotónně se měnící světlost. V tmavém režimu má vlastní kroky a stoupá — na černém podkladu znamená „plno“ světlejší, ne tmavší.
Typografie
Noto Sans, stejné písmo jako na webu fakulty. Logomanuál povoluje bezpatkové nezdobné fonty, patkové zakazuje a kurzivu nedoporučuje — proto tu žádná není. Velikosti jsou v rem, aby respektovaly nastavení uživatele.
Příjezd na oddělení
.ep-display · 40 px · Noto Sans Display 700Žádost o náhradní termín
.ep-h1 · 30 pxChirurgická klinika, 2. patro
.ep-h2 · 21 pxPotvrzení docházky
.ep-h3 · 18 pxČeká na potvrzení
.ep-eyebrow · 12 px · prostrkaná kapitálkaPříšerně žluťoučký kůň úpěl ďábelské ódy. Čeština potřebuje háčky, čárky i kroužek — a Noto Sans je má v dobré kvalitě i ve 13 px na telefonu v ruce na chodbě.
základní text · 16 px
182,5 h 1 240 Kč 4,6★
.ep-num · tabular-nums, čísla stojí pod sebouIkony
Jeden sprite assets/icons.svg, obrysové, mřížka 24×24. Barvu i velikost dědí z textu. Ikona, která stojí sama bez popisu, potřebuje role="img" a aria-label; ikona u textu dostane aria-hidden="true".
Tlačítka
Dotykové cíle nejméně 44 px, hlavní akce na mobilu 52 px. Mentor klepe na tlačítka ve spěchu, někdy v rukavicích. Prstenec focus je modrý, aby byl vidět i na červeném tlačítku.
.ep-btn + --primary --secondary --quiet --bare
velikosti a jen ikona — .ep-btn--lg .ep-btn--sm .ep-btn--icon
stepper logbooku — .ep-btngroup + .ep-stepper-value
3
0
Stavové odznaky
Každý odznak nese ikonu i slovní popis. Není to ozdoba: zelená a oranžová jsou si barevně blízké (odstup ΔE 14,1 pro běžné vidění, 5,2 při deuteranopii), takže bez druhého kanálu by je část uživatelů nerozlišila. Stav se proto nikdy nekóduje jen barvou.
.ep-chip + --ok --wait --alert --info
Potvrzeno
Čeká na mentora
Neomluveno
Omluveno
Plánováno
.ep-chip--label — nadřazený popisek karty ve frontě mentora
Docházka · dnes
Logbook · týden 47
Hodnocení · do 27. 11.
.ep-tick — splněná a nesplněná podmínka zápočtu
Prázdné kolečko má přerušovaný obrys, ne jinou barvu.
Formuláře
Každé pole má skutečný <label>. Chyba nese ikonu i text, nikdy jen červený rámeček. Volby, u kterých jde o rozhodnutí (náhradní termín, formát exportu), jsou celé klikatelné karty.
U hodnocení pod 3★ je slovní zdůvodnění povinné.
.ep-choice — volba jako karta
.ep-seg — segmentový přepínač
Hodnocení hvězdičkami
Skutečné <input type="radio">, takže to funguje bez JavaScriptu a obslouží se klávesnicí. Zkuste dát dvě hvězdičky — otevře se povinné zdůvodnění. V provozu to musí vynutit i server, tady je jen náhled chování.
.ep-stars--static — zobrazení přijatého hodnocení, vyplněné nese .is-on
4,0
Karty a upozornění
Karta má volitelný horní pruh v základní červené (plocha, ne text — kontrast tu nehraje roli) nebo levý pruh pro zdůraznění v seznamu.
Chirurgická klinika
Potvrzeno
7:04 – 15:28 · 8,0 h
Petr Hájek
Bez příchodu a bez omluvy, 2 h 12 min.
.ep-note + --ok --wait --alert --info
Den potvrzen — 8,0 h
Potvrdila Bc. Jana Dvořáková v 15:31.
Příchod 7:04 — čeká na mentorku
Poloha se nepotvrdila, uvnitř budovy je slabý signál. Na vašem záznamu to nic nemění.
Potvrzením se měsíc uzamkne
Docházku už nikdo nezmění a vznikne pokyn k výplatě z DPP/DPČ.
.ep-quote — slovní hodnocení mentora
„Velmi samostatná, kanylace zvládá bez dohledu. Doporučuji zaměřit se na komunikaci s rodinou pacienta.“
Čísla a ukazatele
Ukazatel plnění je vždy doplněný číslem — šířka pruhu sama není dost přesná informace, zvlášť když se z hodin počítá odměna.
.ep-stats-grid + .ep-stat
Na praxi dnes
127
Čeká na mentora
18
Výstrahy
3
Splňuje vše
118
.ep-meter a .ep-meter-row
Chirurgie — splněno
104 / 160 h
Odběry krve
24/30
EKG
0/10
Tabulky
Čísla doprava a pod sebe (.ep-td-num). Široká tabulka jde do .ep-table-wrap, který se posouvá vodorovně, aby se na telefonu nerozbila stránka.
| Student | Hodiny | Logbook | Hodnocení | Zápočet |
|---|---|---|---|---|
| Kratochvílová Anna | 320 / 320 | Lze udělit | ||
| Novák Jan | 320 / 320 | Čeká | ||
| Hájek Petr | 288 / 320 | Čeká |
Kapacitní matice
Obsazenost oddělení po týdnech. Hodnota je v každé buňce — barva jen pomáhá hledat, informaci nenese. Překročená kapacita má kromě nejtmavšího kroku i ikonu.
.ep-matrix + .ep-cell--0…4 --over
volno
plno
| Oddělení | T45 | T46 | T47 | T48 | T49 | T50 |
|---|---|---|---|---|---|---|
| Chirurgie — JIP | 4/4 | 4/4 | 3/4 | 2/4 | 4/4 | 0/4 |
| Interna — 3A | 5/5 | 5/5 | 6/5 | 5/5 | 4/5 | 3/5 |
| Neurologie | 2/4 | 3/4 | 4/4 | 4/4 | 3/4 | 0/4 |
Dialog
Pro potvrzení nevratných akcí. Staví na nativním <dialog>, takže past na fokus, klávesu Esc i vrstvení řeší prohlížeč. Dialog nemá odrazovat od práce — má říct, co se stane a co už nepůjde vzít zpět, a to konkrétně, s čísly. Proto .ep-dialog__effects, ne jen věta „Opravdu?“.
Dvě věci, které tu dělají tu práci
Zrušit je v DOM první a má autofocus, takže Enter spustí tu bezpečnou akci; vizuálně stojí stejně vlevo od potvrzení, protože patička zarovnává doprava.
Brána zaškrtnutím (data-ep-dialog-gate) drží potvrzení zakázané, dokud ji uživatel nezaškrtne — má smysl tam, kde akce posílá peníze, ne u všeho. Potvrzovací okno, které lidé odklikávají mechanicky, nechrání před ničím.
Programově — epDialog.confirm() vrací Promise<boolean>, žádný markup se nepíše
const ok = await epDialog.confirm({
tone: 'danger',
title: 'Uzamknout listopad 2026?',
text: 'Po uzamčení už částku nikdo neopraví bez nového dokladu.',
effects: [
{ icon: 'money', html: 'Vznikne pokyn k výplatě <strong>50 880 Kč</strong>.' },
{ icon: 'lock', text: 'Docházku za listopad už nezmění nikdo.' }
],
gate: 'Rozumím, že se měsíc uzamkne a vznikne pokyn k výplatě.',
confirm: 'Uzamknout listopad'
});
Deklarativně — pro dialogy vykreslené serverem
Toast
Krátké hlášení o výsledku akce. Je to potvrzení, ne jediné místo pro důležitou informaci — zmizí a nejde vyvolat zpátky. Co si uživatel musí přečíst nebo potvrdit, patří do dialogu nebo na stránku.
Čtečky obrazovky a čas
Kontejner je aria-live="polite", takže hlášení nepřeruší rozdělanou práci.
Tón alert dostane navíc role="alert" a nemizí sám — chybu, která zmizí po pěti vteřinách, uživatel s pomalejším čtením nebo ovládáním klávesnicí nestihne.
Odpočet se zastaví, když je na toastu myš nebo fokus, a zavřít jde vždy.
epToast.ok() · .info() · .alert() · .show({ action })
Nabídka a relace
Rozbalovací nabídka je místo, odkud se uživatel odhlásí. Není to dialog — patří do ní jen to, co se dá vzít zpět nebo co jen někam vede. Hlídání relace je u ní, protože obojí řeší totéž: kdo je přihlášený a jak dlouho.
Odhlášení z aplikace neodhlásí z Univerzity Karlovy
Kdo přišel přes Shibboleth, má po odhlášení z portfolia pořád aktivní přihlášení u UK — kdo si sedne po něm, projde zpátky na jedno klepnutí. Na sesterně je to reálný problém, proto to dialog říká nahlas a doporučí zavřít prohlížeč. Úplné odhlášení (Single Logout) musí obsloužit server proti odhlašovacímu bodu UK.
.ep-menu — šipky procházejí položky, Esc zavře a vrátí fokus na spouštěč
epSession.start() — varování před vypršením, zkráceno na pár vteřin
epSession.start({
duration: 30 * 60 * 1000, // bez činnosti
warnBefore: 2 * 60 * 1000,
loginUrl: '/screens/prihlaseni.html',
onExtend: () => fetch('/api/session/ping', { method: 'POST' })
});
Zapíná se jen u rolí, které pracují s osobními a mzdovými údaji — koordinátorky a mzdová účtárna. Student na telefonu ani mentor na oddělení hlídanou relaci nemají; krátký limit by tam nic nechránil a jen otravoval.
Aplikační rám
Jedna PWA, dvě podoby. Student a mentor dostanou mobilní plochu s dolní navigací, koordinátor a mzdy desktop s levým menu. Desktopové menu je součástí zalamovaného řádku, takže se na telefonu samo přesune nad obsah — bez position: sticky a bez 100vh.