Layout
Layout-principes
- Shell is heilig. Topbar en sidebar blijven altijd zichtbaar. Content houdt 30px verticaal en 40px horizontaal afstand van de shell.
- Drie layouts, elk met een rol. Overview = browsen, Drawer = peek, Detail = bewerken. Zie het als een progressive escalation.
- A4 als mentaal model. Zowel de drawer als de detail plaatsen het "paper" op max ~794px (A4 @ 96dpi). Dat maakt content voorspelbaar leesbaar en print-vriendelijk.
- Primary + Secondary. Elke detail heeft exact één primaire actie (groen) en één secundaire actie (outline). Overige acties gaan onder een "…" menu.
1 · Overview
De lijst- of bordweergave — het startpunt van elke module. Format (tabel, board, calendar, timeline) is een module-keuze; de afstanden tot de shell zijn hetzelfde.
Wat mag erin? Elk overzichtsformat is toegestaan — table is default, maar een board (kanban), calendar of timeline zijn ook geldig als de content daarom vraagt. Wat níet mag: content laten aanplakken tegen de shell.
Afstand tot shell. 30px verticaal (onder topbar, boven viewport-bodem) en 40px horizontaal (rechts van sidebar, links van viewport-rand). Ook als de content scrollt — de canvas-padding blijft staan.
2 · Drawer
Slide-in overlay over de overview. Voor "even snel kijken" — read-only paper preview zonder de overview te verlaten.
Concrete regel. Drawer = 45% van de viewport-breedte, geclamped tussen 640px (min — anders wordt de A4 te smal) en 900px (max — anders krijg je te veel whitespace op ultra-wide schermen). Formule: width: clamp(640px, 45vw, 900px).
Content = A4. Binnen de drawer zit een A4-paper (max 794px = 210mm @ 96dpi). Dezelfde paper-layout als de detail, maar zonder header-strook en zonder footer — alle record-acties zitten in het "…" menu rechtsboven op het paper.
Overlay. De rest van de viewport (overview) krijgt een glass-blur — de drawer bedekt niét de topbar en sidebar; die blijven interactief.
3 · Detail
Full-bleed editable "paper" canvas. Bewerken, versturen, koppelen — dit is de werksurface.
ondersteunende content
4 · Gebruik in code
Copy-paste-startpunt voor nieuwe modules.
/* Overview canvas */
.page {
padding: 30px 40px; /* 30 vertical · 40 horizontal, vanaf shell */
}
/* Drawer */
.drawer {
position: fixed;
right: 0;
width: clamp(640px, 45vw, 900px);
}
.drawer__paper { max-width: 794px; margin: 0 auto; }
/* Detail */
.detail-header { height: 90px; padding: 0 40px; } /* Terug · Secondary · Primary · … */
.detail-body { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 0 40px 30px; }
.detail-paper { max-width: 794px; }
.detail-side { width: 340px; }