Designrichtlijnen

Kleuren

/* Clubkleur instellen, bijv. voor de sponsorenwidget */
.lisa-sp { --lisa-sp-accent: #0a7d4f; }

Gedeelde patronen (één keer gebouwd, in alle widgets)

• Categorie-tabs (gedeeld: tabs): één navigatielaag. Bij tabs geen sectiekoppen en geen inklapbare secties. Op mobiel scrollen de tabs horizontaal met een vervaagde rand rechts (en links zodra je gescrold hebt). Geldt voor FAQ, Documenten, Contributie, Teams en Sponsoren.
• Organisatie: één weergave-wisselaar links (Kaarten / Lijst / Organogram); rechts alleen het filter "Alleen vacatures" met badge "1 vacature" / "n vacatures". Organogram scrollt horizontaal binnen de widget met schaduw aan de rand.
• Uitslagen opent op de laatste dag met gespeelde wedstrijden. Nog niet gespeelde wedstrijden krijgen geen label per rij; er staat één melding bovenaan.
• Afgelastingen: elke rij heeft het label "Afgelast"; de reden staat op mobiel altijd onder de teamregel. Zonder afgelastingen vandaag toont de widget een melding met knop naar de eerstvolgende dag.
• Filters en sorteren (gedeeld: filter-bar): bestaande keuzes en instellingen blijven intact. Desktop en tablet tonen icoon met tekst; mobiel bundelt de filterkeuzes in één knop Filters. Sorteren staat apart als Sorteer op …; categorie-tabs en Geschiedenis-chips blijven zichtbaar.
• Legenda (gedeeld: legend): onder Teams en Standaard teams staat laatste 5: W G V met uitleg; Jongste Jeugd toont geen bolletjes. Contributie gebruikt Populair in plaats van een ster. Organisatie toont het aantal vacatures in woorden.
• Uitklaprij (gedeeld: expand-row): Trainingsschema en Diensten hebben altijd een chevron en een detailvak; ontbreekt toelichting, dan staat er Geen extra informatie.
• Nieuws en Teams (gedeeld: deeplink en modal): ?lisa-nieuws=<id> en ?lisa-team=<id> openen direct het juiste item. Sluiten verwijdert alleen die parameter. Tab blijft in de pop-up, Escape sluit en de focus gaat terug naar de opener.
• Trainingsschema opent op een week met ma t/m zo als dagtabs; Dag blijft beschikbaar. Dezelfde publieke trainingsroute haalt het gekozen datumbereik in één aanvraag op.
• Agenda opent bij een eerste bezoek op mobiel op Lijst, tenzij een weergave expliciet in Duda is gekozen; een keuze van de bezoeker blijft behouden.
• Diensten toont Alle / Open / Vol, de bezetting ook op mobiel en Aanmelden via de ClubApp bij open diensten. De Nu-lijn blijft afwezig.
• Sponsorcarrousel pauzeert bij hover en focus, respecteert minder beweging en linkt beschikbare sponsorwebsites. Nieuws home verbergt de afgelastingenbalk zodra Afgelastingen home op dezelfde pagina staat.
• Weergavenamen (gedeeld: view-switch): Lijst / Kaarten. Rooster, Kalender, Tijdlijn en Verhaal blijven bij wezenlijk verschillende vormen; bestaande instellingen houden dezelfde waarden.
• Datums (gedeeld: format-date): dinsdag 20 oktober of di 20 okt, in het Nederlands altijd kleine letters. Geschiedenis toont het jaar eenmaal in de tijdlijn en het icoon op mobiel binnen de kaart.
• Hall of Fame: Kaarten is een raster; rijen zonder extra handeling krijgen geen klik-hover. Gouden categorie-iconen en het overleden-kruisje blijven behouden.
• Scheidsrechters heeft geen geslachtsfilter; mobiel heet zoeken Zoek team of scheidsrechter… FAQ toont geen beheerdatums, het bijlagefilter zit op mobiel in Filters. Documenten openen in een nieuw tabblad.
• Sponsoren toont geen categoriebadge op kaarten; de hoofdsponsor krijgt een grotere kaart.
• Contributie toont het seizoen alleen wanneer dat door de openbare gegevens wordt meegegeven; er wordt geen seizoen verzonnen.
• Baanbezetting tennis: sporttabs, Rooster/Lijst, datumkeuze en een legenda Vrij/Bezet/Gesloten/Onbekend. Het rooster scrollt uitsluitend binnen de widget. Vrij wordt alleen afgeleid van complete daginformatie; reserveren gebeurt buiten de widget in KNLTB.club of de KNLTB app. Clubkleur blijft een zachte tint in de actieve sporttab, niet in de beschikbaarheidskleuren.

Basis

• Buitenkant van de widget is transparant, zonder marge of padding: de widget smelt samen met de clubsite.
• Alleen knoppen, zoekveld, panelen en kaarten hebben een wit vlak.
• Lettertype wordt overgenomen van de website (font-family: inherit).
• Neutraal kleurenpalet, geen clubkleuren standaard. Een club past de accentkleur aan met één regel CSS.

Weergaven (tabs) en standaardweergave

• Heeft een widget meerdere weergaven (bv. Kaarten/Lijst, Lijst/Rooster, Lijst/Kalender of Kaarten/Lijst/Organogram), dan kiest de club in LISA onder Clubinstellingen → Website welke weergave standaard opent.
• Die keuze komt mee in het API-antwoord als default_view (en bij Organisatie ook default_layout). Alleen toegestane waarden worden doorgegeven; anders valt de widget terug op zijn eigen standaard.
• Volgorde: 1) een weergave die expliciet in het Duda-veld is gekozen, 2) de LISA-instelling van de club, 3) de ingebouwde standaard van de widget. Laat het Duda-veld leeg om de LISA-instelling te volgen.
• De standaardweergave wordt alleen bij het eerste laden toegepast; kiest de bezoeker zelf een andere weergave, dan blijft die staan (ook bij bladeren tussen datums).
• Een wijziging in LISA is binnen vijf minuten zichtbaar op de website.
• Iedere nieuwe widget met meerdere weergaven krijgt een eigen regel in LISA (Clubinstellingen → Website → Standaardweergave).

Simulatiebalk op de voorbeeldpagina (/duda/…)

• Iedere voorbeeldpagina toont bovenaan de simulatiebalk "Simulatie · LISA Clubinstellingen → Website", zodat je kunt klikken en direct ziet wat een clubinstelling doet.
• Altijd aanwezig: de publicatieschakelaar van het onderdeel. Staat die uit, dan blijft de widget helemaal leeg (zoals op de clubwebsite).
• Heeft de widget meerdere weergaven, dan krijgt de balk een keuzelijst Standaardweergave (bij Organisatie ook Standaardtab).
• Hoort bij de widget een extra LISA-instelling (bv. Uitslagen bij het Wedstrijdschema), dan komt die als extra schakelaar in de balk.
• Rechtsboven wissel je tussen Desktop (volle breedte), Tablet (820px) en Mobiel (390px) om alle schermformaten te controleren.
• De balk slaat niets op; hij geeft de keuze via de adresregel door aan de testpagina (off=1, view, layout, results=0), waarna de widget opnieuw laadt.
• Nieuwe widget: laat de voorbeeldpagina de gedeelde simulatiebalk gebruiken en laat de testpagina van de widget off=1 (niets tonen) en de extra instellingen uit de adresregel lezen.

Typografie

• Basistekst 14px (0.875rem), regelhoogte 1.4.
• Knoppen en labels 13px (0.8125rem); badges en tellers ~11px.
• Groepskoppen 18px (1.125rem), vetgedrukt, letter-spacing -0.01em.
• Lange namen breken netjes af en lopen nooit buiten een kaart.
• Persoonsnamen (scheidsrechters, trainers) altijd als naamlabel: één label per persoon, alleen voornaam, ronde pil met lichtgrijze achtergrond en dunne rand, 12px, 0.3rem ruimte tussen labels. Nooit als komma-gescheiden tekst.

Bovenkant van een widget (referentie: Wedstrijdschema)

• Het Wedstrijdschema is leidend. Elke widget met bediening bovenaan gebruikt dezelfde opbouw, maten, lettertypes en afstanden — ook als de opties per widget verschillen.
• Rij 1 — links de weergavekeuze (bv. Lijst/Kaarten, Lijst/Rooster, Kalender/Lijst); rechts de datum- of periodenavigatie ‹ [datum ▾] › met eventueel de Vandaag-chip.
• Rij 2 — links het zoekveld over de volle resterende breedte; rechts filterkeuzes met icoon en tekstlabel en een aparte keuze Sorteer op ….
• Heeft een widget geen weergavekeuze of datum, dan blijft die plek leeg; de indeling verschuift niet.

Maten en lettertype bovenkant

• Lettertype: dat van de website (font-family: inherit).
• Segment (pil): achtergrond rgba(16,32,48,0.07), 3px binnenruimte, 2px tussen knoppen, afronding 999px. Actieve knop: wit vlak met zachte schaduw.
• Weergaveknoppen: 30px hoog, 13px (0.8125rem), gewicht 500, links/rechts 0.95rem, icoon + tekst met 0.4rem tussenruimte.
• Datumsegment: ‹ en › 30px hoog; witte datumknop 30px hoog, 13px medium, lange notatie met hoofdletters (bv. 'Vrijdag 2 Oktober') en ▾.
• Vandaag-chip: staat ín het datumsegment na ›, alleen zichtbaar als je niet op vandaag (of de huidige maand) staat; 12px semibold met een stip ervoor. Mobiel: alleen een rond knopje met stip.
• Filterkeuzes tonen op desktop/tablet tekst naast het icoon; de breedte volgt het label. Sorteren heeft een afzonderlijke Sorteer op …-keuze.
• Filter-knop (alleen waar segmenten niet passen): 30px hoog, 13px medium, wit met dunne rand.
• Zoekveld: pilvorm, 36px hoog, 14px tekst, zoekicoon links, subtiele gloed bij focus.
• Afstanden: 12px (0.75rem) tussen rij 1 en rij 2, 8px (0.5rem) tussen elementen in een rij, 12px onder de bediening tot de inhoud.

Desktop, tablet en mobiel

• Desktop (> 900px): twee rijen zoals hierboven; weergaveknoppen met icoon + tekst.
• Tablet (561–900px, voorbeeld 820px): dezelfde twee rijen als desktop; weergaveknoppen met icoon + tekst.
• Mobiel (≤ 720px weergaveknoppen; ≤ 560px indeling, voorbeeld 390px): weergaveknoppen alleen icoon (tekst in aria-label).
• Mobiel rij 1: weergave-iconen links, datumsegment vult de rest; datum blijft de lange notatie op één regel.
• Mobiel rij 2: één knop Filters met paneel en daarnaast een afzonderlijke Sorteer op …-keuze; primaire categorie-tabs blijven horizontaal scrollbaar.
• Mobiel rij 3: zoekveld over de volle breedte. Er loopt nooit iets buiten de breedte.
• Controleer elke wijziging in de voorbeeldpagina met de knoppen Desktop / Tablet / Mobiel rechtsboven in de simulatiebalk.

Datumpaneel

• Vorige/volgende springen naar de vorige of volgende dag mét activiteit; uitgeschakeld (lichter) als er niets is.
• Klik op de datumknop opent een wit paneel met alleen dagen waarop iets is, per maand gegroepeerd, ✓ bij de gekozen dag en een grijs aantal rechts.
• De widget opent altijd op de actieve dag (vandaag); is er niets, dan meldt de widget dat met een knop naar de eerstvolgende dag.

Kaarten en rijen

• Wit, afgeronde hoeken (~10px), dunne lichtgrijze rand, subtiele schaduw bij hover.
• Geen gekleurde balk bovenaan.
• Vaste opbouw zodat scheidingslijnen in een rij op dezelfde hoogte staan, ook bij ontbrekende gegevens.
• Evenveel ruimte boven als onder een scheidingslijn.
• Aantal kolommen past zich aan de beschikbare breedte aan (1, 2 of 3 naast elkaar).
• Bijzondere kaarten (bijv. vacatures) blijven wit, onderscheiden met gestippelde rand en subtiel patroon.

Groepskoppen

• Transparant, naam ~18px, klein telbadge, dunne lijn tot de rand, chevron om in en uit te klappen.
• Geen grijze balken over de volle breedte.
• Subcategorieën ingesprongen met verticale lijn, zodat duidelijk is waar ze onder vallen.

Panelen

• Filter- en datumpanelen delen één stijl: witte achtergrond, rand, afgeronde hoeken, schaduw, kop met scheidingslijn en een 'Wis'-link.

Toegankelijkheid en gedrag

• Zichtbare focusrand bij toetsenbordbediening.
• Animaties uit bij prefers-reduced-motion.
• Laadtekst tijdens ophalen; bij een fout toont de widget niets (geen foutmelding op de clubsite).
• Alle klassen hebben een eigen voorvoegsel (lisa-sd-, lisa-sp-, …); geen inline styles.