/* ══════════════════════════════════════════════════════════════════════ HDG-UI — de vormtaal van HD-Gabion Control Center ────────────────────────────────────────────────────────────────────── Eén manier per ding, door de hele app. Wie hiervan afwijkt, schrijft het argument op in docs/ui-standaard.md. Alles hieronder is een keuze uit wat er al was, niet iets nieuws: - het rood is het rood van de merkbalk en van de klanttekening - de maten volgen het ritme van 4 dat de meeste schermen al aanhouden - de vormen komen uit viewer_sjabloon.html, het enige scherm dat af is Zie docs/ui-richtlijn.md voor de korte versie van één bladzijde. ══════════════════════════════════════════════════════════════════════ */ /* ══ DE LETTER WORDT MEEGELEVERD ════════════════════════════════════ `Inter` stond in de vormtaal, maar hij stond nergens op de computers — dus viel elk scherm terug op wat de browser toevallig had. Op de ene machine Segoe UI, op de andere iets anders, en op een scherm zonder opgegeven letter zelfs Times New Roman. Dat laatste zag Reinier meteen: *"in keermuren heb je een vervelend lettertype gebruikt."* Nu ligt de letter bij ons op de server, in vier gewichten, teruggesneden tot de tekens die we werkelijk gebruiken (latijn, Pools, maat- en pijltekens). Samen 220 kB, één keer laden en daarna uit het geheugen. Niet van Google: de app moet ook werken als het internet hapert. `font-display:swap` zorgt dat je meteen tekst ziet in de systeemletter, en dat Inter er overheen komt zodra hij binnen is. 25 augustus 2026. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/inter-400.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/inter-500.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/inter-600.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/inter-700.woff2") format("woff2"); } :root{ /* ── merk ───────────────────────────────────────────────────────── Rood is de MERKkleur en de hoofdactie. Nooit de foutkleur: staat de knop waar je op moet drukken in dezelfde kleur als de melding dat er iets fout is, dan zegt rood niets meer. */ --hdg-red: #E4002B; /* merkbalk, hoofdactie — 4,85:1 op wit */ --hdg-red-dark: #B80023; /* aanwijzen, indrukken, kleine rode tekst — 6,86:1, dus ook goed voor kleine tekst */ --hdg-red-tint: #FDF2F4; /* zachte rode achtergrond */ /* ── tekst ──────────────────────────────────────────────────────── Drie tinten, alle drie boven de contrasteis van 4,5:1 op wit. Zeven bijna-gelijke grijzen waren er; dit zijn er drie. */ --ink: #262626; /* gewone tekst 15,3:1 */ --ink-2: #545454; /* labels, tweede rang 7,4:1 */ --ink-3: #6E6E6E; /* bijschrift, hulptekst 5,1:1 */ /* ── vlakken en lijnen ────────────────────────────────────────── */ --surface: #FFFFFF; --surface-2: #FAF9F8; /* zebrarij, kaartachtergrond */ --surface-3: #F1EFED; /* invulblok, uitgeschakeld */ --line: #E6E4E1; --line-2: #CFCBC6; /* randen van invulvelden */ /* ── één uitzondering: het blauw van "offerteregel toevoegen" ───── Blauw hoort niet in de huisstijl en komt nergens anders voor. Deze ene knop houdt het omdat Reinier er al jaren op mikt: *"ben al zo gewend aan dat blauw voor offerlijnen toevoegen, mag ik die houden."* Wel een tint dieper dan het was — wit op het oude blauw haalde 3,7:1, dit haalt 5,8. */ --hdg-blauw: #1565C0; --hdg-blauw-dark: #0D47A1; /* ── status — nadrukkelijk NIET de merkkleur ───────────────────── En kleur draagt nooit in zijn eentje de betekenis: er hoort altijd een pictogram én tekst bij. */ --ok: #1B7F4B; --warn: #A3660C; --error: #8F1E18; --ok-tint: #F0F8F3; --warn-tint: #FDF7EC; --error-tint: #FCF1F0; /* ── letters ────────────────────────────────────────────────────── Eén familie. Inter als hij er is, anders wat het systeem heeft. Cijfers altijd op vaste breedte, zodat bedragen onder elkaar uitlijnen. */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── maten ──────────────────────────────────────────────────────── Zeven groottes voor de hele app. Er waren er 44. */ --t-titel: 24px; /* paginatitel */ --t-sectie: 18px; /* sectiekop */ --t-kaart: 15px; /* subkop, kaartkop */ --t-tekst: 14px; /* tekst, veld, knop */ --t-label: 13px; /* label, tabelkop */ --t-klein: 12px; /* bijschrift */ --t-mini: 11px; /* alleen voetnoten */ /* ── ruimte ─────────────────────────────────────────────────────── Veelvouden van 4. Geen 7, geen 13, geen 18. Er waren 22 waarden die er net naast zaten; dat is de grootste onbenoembare bron van "het ziet er niet af uit". */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; /* ── vorm ─────────────────────────────────────────────────────── */ --rond: 6px; /* overal 6; tabel en merkbalk hebben er 0 */ --schaduw-kaart: 0 1px 2px rgba(15,22,38,.06), 0 2px 8px rgba(15,22,38,.06); --schaduw-dialoog:0 8px 32px rgba(15,22,38,.20); /* ── beweging ───────────────────────────────────────────────────── Twee snelheden. Er waren er twaalf. */ --snel: .15s ease; /* wat direct reageert: knop, veld, rij */ --traag: .25s ease; /* wat in- en uitschuift: paneel, dialoog */ /* ── vaste maten ────────────────────────────────────────────────── */ --hoogte-veld: 36px; /* knop én invulveld, overal hetzelfde */ --hoogte-balk: 56px; /* merkbalk */ } /* ══ grondslag ══════════════════════════════════════════════════════ */ .hdg-ui, .hdg-ui *{ box-sizing: border-box; } .hdg-ui{ margin: 0; font-family: var(--font); font-size: var(--t-tekst); line-height: 1.55; color: var(--ink); background: var(--surface-2); -webkit-font-smoothing: antialiased; } .hdg-ui h1, .hdg-ui h2, .hdg-ui h3, .hdg-ui h4{ margin: 0; font-weight: 600; } .hdg-ui h1{ font-size: var(--t-titel); } .hdg-ui h2{ font-size: var(--t-sectie); } .hdg-ui h3{ font-size: var(--t-kaart); } /* KNOPPEN, VELDEN EN TEKENINGEN ERVEN DE LETTER NIET VANZELF. De browser geeft een knop zijn eigen letter, en tekst binnen een SVG-tekening pakt de standaardletter van het besturingssysteem. Zolang de app in Arial stond viel dat niet op; op Inter stonden er ineens Arial-knoppen en Helvetica-maatvoering tussen. Reinier zag het meteen: *"in keermuren heb je een vervelend lettertype gebruikt."* 25 augustus 2026. */ .hdg-ui button, .hdg-ui input, .hdg-ui select, .hdg-ui textarea, .hdg-ui optgroup{ font-family: inherit; } /* Ook de maatvoering in een tekening. Een schrijfwijze in de SVG zelf (`font-family="sans-serif"`) verliest van deze regel — een kenmerk in de opmaakcode weegt lichter dan een stijlregel. */ .hdg-ui svg text, .hdg-ui svg tspan{ font-family: var(--font); } .hdg-ui svg text.mono, .hdg-ui svg .mono{ font-family: var(--font-mono); } /* Getallen lijnen altijd uit. Bedragen onder elkaar in een tabel die springt, is het verschil tussen boekhouding en een lijstje. */ .hdg-ui .getal, .hdg-ui td.getal, .hdg-ui th.getal, .hdg-ui input[type=number]{ font-variant-numeric: tabular-nums; } .hdg-ui .getal, .hdg-ui td.getal{ text-align: right; } /* Lopende tekst nooit breder dan je prettig leest. */ .hdg-ui .lees{ max-width: 72ch; } /* Een zichtbare focusring op alles. Nooit outline:none zonder vervanging: wie met het toetsenbord werkt, is anders blind. */ .hdg-ui :focus-visible{ outline: 2px solid var(--hdg-red); outline-offset: 2px; border-radius: var(--rond); } /* ══ merkbalk ═══════════════════════════════════════════════════════ Vast bovenin, over de volle breedte, geen afronding. Links het merk, rechts de taal en de gebruiker. Dit hoort ook boven de schermen te staan die in een eigen venster opengaan — die verloren tot nu toe hun taalkeuze. */ .hdg-balk{ display: flex; align-items: center; justify-content: space-between; gap: var(--s4); height: var(--hoogte-balk); padding: 0 var(--s6); background: var(--hdg-red); color: #fff; /* Blijft staan als je scrolt. Reinier, 25 augustus 2026: *"alles onder de titel en de 3D-knop moet scrollen zodat het bovenste stuk altijd in beeld is."* Klopt: waar je bent, in welke taal je kijkt en de knop waar het scherm voor bestaat horen niet weg te zakken zodra je één tabel verder kijkt. */ position: sticky; top: 0; z-index: 120; } .hdg-balk .merk{ display: flex; align-items: center; gap: var(--s3); min-width: 0; } .hdg-balk .merk b{ font-size: var(--t-sectie); font-weight: 700; letter-spacing: .2px; } .hdg-balk .merk span{ font-size: var(--t-klein); color: rgba(255,255,255,.88); } /* HET LOGO. Reinier, 25 augustus 2026: *"is er nog ergens plek in dit ontwerp voor ons logo?"* Ja — hier, en alleen hier. Uit zijn eigen map (Bureaublad › HD Gabion › Logo › package_highres) komt het merkteken uitgeknipt en in het wit: `hdg_logo_wit.png`. Dat kan rechtstreeks op het rood, zonder wit tegeltje eromheen. Voor een lichte ondergrond staat `hdg_logo_kleur.png` klaar, in de merkkleur. Uit datzelfde bestand komt trouwens ook de merkkleur zelf: het logo is #E4002B. Daar is `--hdg-red` op gezet, zodat het scherm letterlijk de kleur van het merk heeft en niet een benadering ervan. LET OP: het VOLLEDIGE logo, niet de icon-versie. In de logomap staan beide, en ze zijn niet hetzelfde: de icon-variant is een uitgeklede tekening waarin alleen het middenstuk overblijft. Reinier zag dat meteen — *"het is alleen het midden stuk van onze logo dat zichtbaar is."* De bestanden komen dus uit `full/`, niet uit `icon/`. Eén maat: 40 px hoog, met 8 px vrije ruimte boven en onder (de balk is 56). Veertig en niet tweeëndertig, omdat ons logo een zegel is met een ring tekst eromheen; kleiner wordt dat een vlekje. Het bestand is 160 px, dus vier keer zo groot als hij getoond wordt: scherp op een scherm met hoge resolutie. */ .hdg-balk .merk img{ height: 40px; width: auto; flex: 0 0 auto; } /* Op een smal scherm blijft het logo staan en verdwijnt de ondertitel: het merk is het laatste wat weggaat. */ @media (max-width: 640px){ .hdg-balk{ padding: 0 var(--s3); } .hdg-balk .merk span{ display: none; } } .hdg-balk .rechts{ display: flex; align-items: center; gap: var(--s2); } /* De taalkeuze. Eén stuks, hier, en nergens anders in de app. */ .hdg-taal{ display: flex; border: 1px solid rgba(255,255,255,.45); border-radius: var(--rond); overflow: hidden; } .hdg-taal button{ min-width: 44px; height: var(--hoogte-veld); border: 0; background: transparent; color: #fff; font: 600 var(--t-label)/1 var(--font); cursor: pointer; transition: background var(--snel); } .hdg-taal button:hover{ background: rgba(255,255,255,.18); } .hdg-taal button[aria-pressed="true"]{ background: #fff; color: var(--hdg-red-dark); } /* ══ paginakop ══════════════════════════════════════════════════════ Dit ontbrak in de hele app, en dat is de kern van het probleem: er was geen plek waar de titel hoort, dus heeft elk scherm zijn eigen plek bedacht voor de knoppen. Daarom stond de 3D-knop op zes plekken. Titel links, hulpknoppen (waaronder 3D) direct rechts daarvan, de ENE hoofdactie helemaal rechts. */ .hdg-kop{ display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s6); background: var(--surface); border-bottom: 1px solid var(--line); /* Plakt onder de merkbalk vast, zodat de titel, de 3D-knop en de hoofdactie altijd in beeld blijven. De schaduw komt er pas bij zodra je gescrold hebt — anders zweeft de kop ook als er niets onder zit. */ position: sticky; top: var(--hoogte-balk); z-index: 110; } .hdg-kop.los{ box-shadow: 0 2px 8px rgba(15,22,38,.08); } /* Een anker of een sprong binnen de bladzijde mag niet onder de vaste koppen verdwijnen. */ .hdg-ui [id]{ scroll-margin-top: calc(var(--hoogte-balk) + 84px); } .hdg-kop .titel{ min-width: 0; } .hdg-kop .titel h1{ font-size: var(--t-titel); line-height: 1.2; } .hdg-kop .titel .onder{ font-size: var(--t-klein); color: var(--ink-3); margin-top: 2px; } .hdg-kop .bij{ display: flex; gap: var(--s2); margin-left: var(--s2); } .hdg-kop .hoofd{ margin-left: auto; display: flex; gap: var(--s2); align-items: center; } /* ══ knoppen — precies drie soorten ═════════════════════════════════ Primair: maximaal ÉÉN per scherm en per dialoog. Secundair: alternatieven, en Annuleren. Tertiair: ondergeschikt. */ .hdg-knop{ display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--hoogte-veld); min-width: var(--hoogte-veld); padding: 0 var(--s4); border: 1px solid transparent; border-radius: var(--rond); font: 500 var(--t-tekst)/1 var(--font); cursor: pointer; white-space: nowrap; transition: background var(--snel), border-color var(--snel), color var(--snel); } /* Uitgeschakeld hoort gedempt te zijn, niet onleesbaar. Alleen de dekking omlaag zetten maakt witte tekst op een lichte knop onzichtbaar; daarom een eigen kleurstelling die zelf nog 4,5:1 haalt. */ .hdg-knop:disabled{ background: var(--surface-3) !important; color: var(--ink-3) !important; border-color: var(--line) !important; cursor: not-allowed; } .hdg-knop--primair{ background: var(--hdg-red); color: #fff; } .hdg-knop--primair:hover:not(:disabled){ background: var(--hdg-red-dark); } .hdg-knop--secundair{ background: var(--surface); color: var(--ink); border-color: var(--line-2); } .hdg-knop--secundair:hover:not(:disabled){ background: var(--surface-3); border-color: var(--ink-3); } .hdg-knop--tertiair{ background: transparent; color: var(--ink-2); padding: 0 var(--s2); } .hdg-knop--tertiair:hover:not(:disabled){ background: var(--surface-3); color: var(--ink); } /* Weggooien is tertiair in de foutkleur, en altijd met een bevestiging waarin de knop het werkwoord noemt — niet "OK". */ .hdg-knop--weg{ background: transparent; color: var(--error); } .hdg-knop--weg:hover:not(:disabled){ background: var(--error-tint); } /* Een knop met alleen een pictogram is vierkant en heeft ALTIJD een aria-label en een title. Een blind kruisje is een doodlopende weg. */ .hdg-knop--pictogram{ width: var(--hoogte-veld); padding: 0; } /* ══ keuzestrook ════════════════════════════════════════════════════ Hier ging het mis: keuzes waren als losse gevulde knoppen getekend, dus zagen ze eruit als negentien acties. Een keuze is één omlijnd blok met vakjes erin, waarvan er één ingekleurd is. */ .hdg-keuze{ display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--rond); overflow: hidden; background: var(--surface); } .hdg-keuze button{ height: var(--hoogte-veld); padding: 0 var(--s3); border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 500 var(--t-label)/1 var(--font); cursor: pointer; transition: background var(--snel), color var(--snel); } .hdg-keuze button:first-child{ border-left: 0; } .hdg-keuze button:hover{ background: var(--surface-3); } .hdg-keuze button.aan, .hdg-keuze button[aria-pressed="true"]{ background: var(--hdg-red); color: #fff; } /* ══ velden ═════════════════════════════════════════════════════════ Label boven het veld, eenheid in het label, hulptekst eronder, fout eronder met pictogram én rand. Alle velden even hoog als de knoppen. */ .hdg-veld{ display: flex; flex-direction: column; gap: var(--s1); } .hdg-veld > label{ font-size: var(--t-label); font-weight: 500; color: var(--ink-2); } .hdg-veld > label .eenheid{ color: var(--ink-3); font-weight: 400; } .hdg-veld input, .hdg-veld select, .hdg-veld textarea{ height: var(--hoogte-veld); padding: 0 var(--s3); border: 1px solid var(--line-2); border-radius: var(--rond); background: var(--surface); color: var(--ink); font: 400 var(--t-tekst)/1 var(--font); transition: border-color var(--snel); } .hdg-veld textarea{ height: auto; padding: var(--s2) var(--s3); line-height: 1.5; } .hdg-veld input:hover, .hdg-veld select:hover{ border-color: var(--ink-3); } .hdg-veld input:disabled, .hdg-veld select:disabled{ background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; } .hdg-veld .hulp{ font-size: var(--t-klein); color: var(--ink-3); } .hdg-veld .fout{ font-size: var(--t-klein); color: var(--error); font-weight: 500; } .hdg-veld.is-fout input, .hdg-veld.is-fout select{ border-color: var(--error); } /* ══ kaart ══════════════════════════════════════════════════════════ */ .hdg-kaart{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--rond); box-shadow: var(--schaduw-kaart); padding: var(--s4) var(--s4) var(--s4); } .hdg-kaart > h3{ margin-bottom: var(--s3); } /* ══ tabel ══════════════════════════════════════════════════════════ Kop in de merkkleur met witte tekst, zebrarijen, getallen rechts en op vaste cijferbreedte, eenheid in de kop. Geen afronding. */ .hdg-tabel{ width: 100%; border-collapse: collapse; font-size: var(--t-tekst); } .hdg-tabel th{ background: var(--hdg-red); color: #fff; font-size: var(--t-label); font-weight: 600; text-align: left; padding: var(--s2) var(--s3); white-space: nowrap; } .hdg-tabel th.getal{ text-align: right; } .hdg-tabel td{ padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); } .hdg-tabel tbody tr:nth-child(even){ background: var(--surface-2); } .hdg-tabel tbody tr:hover{ background: var(--hdg-red-tint); } /* ══ meldingen in de bladzijde ══════════════════════════════════════ Altijd een pictogram én tekst, zodat de kleur nooit in zijn eentje de boodschap draagt. */ .hdg-melding{ display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--rond); font-size: var(--t-tekst); } .hdg-melding--ok { background: var(--ok-tint); border-left-color: var(--ok); color: var(--ink); } .hdg-melding--let { background: var(--warn-tint); border-left-color: var(--warn); color: var(--ink); } .hdg-melding--fout { background: var(--error-tint); border-left-color: var(--error); color: var(--ink); } .hdg-melding .teken{ flex: 0 0 auto; font-weight: 700; } /* ══ de drie toestanden van een gegevensscherm ══════════════════════ Laden, leeg, mislukt. Verplicht op elk scherm dat een lijst toont: een leeg wit vlak zegt niet of er niets is, of dat het nog laadt. */ .hdg-toestand{ display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s12) var(--s6); text-align: center; color: var(--ink-3); } .hdg-toestand b{ color: var(--ink); font-size: var(--t-kaart); } .hdg-toestand .hdg-knop{ margin-top: var(--s2); } /* ══ dialoog ════════════════════════════════════════════════════════ Eén component voor de hele app. Er waren er drie, met drie breedtes, drie rondingen en twee lettertypes. Kop: titel links, kruisje rechtsboven. Voet: rechts uitgelijnd, [Annuleren] [Primair]. Zowel het kruisje ALS een knop Annuleren — allebei, altijd. Esc sluit. Klikken buiten sluit niet als er iets ingevuld is. */ .hdg-laag{ position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--s6); background: rgba(15,22,38,.55); } .hdg-dialoog{ width: 100%; max-width: 520px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--rond); box-shadow: var(--schaduw-dialoog); font-family: var(--font); } .hdg-dialoog > header{ display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); } .hdg-dialoog > header h2{ font-size: var(--t-sectie); } .hdg-dialoog > header .hdg-knop{ margin-left: auto; } .hdg-dialoog > .inhoud{ padding: var(--s4); overflow: auto; } .hdg-dialoog > footer{ display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--line); } /* ══ bericht rechtsboven ════════════════════════════════════════════ Eén component, rechtsboven, vier seconden, met een kruisje. Nooit alert(). */ .hdg-berichten{ position: fixed; top: var(--s4); right: var(--s4); z-index: 9500; display: flex; flex-direction: column; gap: var(--s2); } .hdg-bericht{ display: flex; gap: var(--s2); align-items: flex-start; min-width: 280px; max-width: 420px; padding: var(--s3); border-radius: var(--rond); background: var(--surface); border: 1px solid var(--line); border-left-width: 3px; box-shadow: var(--schaduw-dialoog); font-size: var(--t-tekst); animation: hdg-in var(--traag); } @keyframes hdg-in{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } } /* ══ DE HAL — werkplaats, verzinkerij en transport op de kiosk ══════ Reinier, 25 augustus 2026: die drie schermen komen op een iiyama ProLite TW1623AS-B3P, 15,6 inch, 1920 × 1080, Android met Chrome, bediend met een latexhandschoen aan. Op 141 beeldpunten per inch is één pixel 0,18 mm. Een knop van 36 px is dan 6,5 mm; een handschoenvinger is 10 tot 12 mm breed. Vandaar: alles één trap groter, en raakvlakken van minstens 56 px (10,1 mm). Aanzetten met de klasse `hdg-ui--hal` op de bladzijde. Zie docs/ui-kiosk.md. Het kantoor merkt hier niets van: alles hieronder hangt aan die ene klasse. */ .hdg-ui--hal{ --t-titel: 28px; --t-sectie: 22px; --t-kaart: 18px; --t-tekst: 16px; /* was 14 */ --t-label: 14px; /* was 13 */ --t-klein: 13px; /* was 12 — en niets gaat hieronder */ --t-mini: 13px; --hoogte-veld: 56px; /* 10,1 mm — Reinier heeft het met de handschoen aan gevoeld */ --hoogte-balk: 64px; } /* Knoppen naast elkaar krijgen lucht, anders raakt één brede vingerafdruk er twee tegelijk. */ .hdg-ui--hal .hdg-kop .bij, .hdg-ui--hal .hdg-kop .hoofd{ gap: var(--s2); } .hdg-ui--hal .hdg-knop{ padding: 0 var(--s6); font-size: var(--t-tekst); } .hdg-ui--hal .hdg-knop--pictogram{ width: var(--hoogte-veld); } /* Een keuzestrook wordt ook met de hand bediend. */ .hdg-ui--hal .hdg-keuze button{ height: var(--hoogte-veld); padding: 0 var(--s4); font-size: var(--t-tekst); } /* Op een aanraakscherm bestaat aanwijzen niet. Alles wat pas verschijnt als je er met de muis overheen gaat, moet er gewoon staan. Deze regel maakt dat zichtbaar tijdens het bouwen: wie iets achter :hover verstopt, ziet het hier permanent staan en merkt dus dat het niet kan. */ @media (hover: none){ .hdg-ui--hal [data-alleen-bij-aanwijzen]{ display: revert !important; opacity: 1 !important; } } /* Eén kolom. Bij 2× schaal is het venster 960 px breed; daar past geen tabel van acht kolommen naast elkaar. Een order is een kaart, met één knop. */ .hdg-ui--hal .hdg-tabel{ font-size: var(--t-tekst); } .hdg-ui--hal .hdg-tabel th, .hdg-ui--hal .hdg-tabel td{ padding: var(--s3) var(--s4); } .hdg-ui--hal .hdg-kaart{ padding: var(--s4) var(--s6); } /* Een melding op de kiosk blijft staan tot iemand hem wegtikt: de gebruiker loopt weg van het scherm en komt na vier seconden pas terug. */ .hdg-ui--hal .hdg-bericht{ min-width: 360px; font-size: var(--t-tekst); } /* Het toetsenbord van Android neemt de onderste helft van het scherm. Wat ingevuld moet worden, hoort in de bovenste helft te staan. */ .hdg-ui--hal .hdg-dialoog{ max-height: 50vh; align-self: flex-start; margin-top: var(--s6); } /* ══ wie minder beweging wil, krijgt minder beweging ════════════════ */ @media (prefers-reduced-motion: reduce){ .hdg-ui *, .hdg-ui *::before, .hdg-ui *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Even rekenen zonder offerte ───────────────────────────────────────────── Het dashboard opent een rekenscherm met ?los=1 om snel een prijs na te kijken. Er is dan geen offerte, dus de knop "Naar de offerte" hoort er niet te staan. Zie js/hdg_los.js. Een stijlregel in plaats van een knop op naam verbergen: schermen die hun knop later alsnog tonen, krijgen hem zo niet terug. */ .hdg-los .hdg-kop .hoofd{ display:none !important; } .hdg-los-uitleg{ color:var(--ink-3); } .hdg-los-balk{ position:fixed; left:0; right:0; bottom:0; z-index:9999; padding:7px 14px; text-align:center; font-size:var(--t-klein); background:var(--surface-3); color:var(--ink-2); border-top:1px solid var(--line); } /* ── De laagverdeling ──────────────────────────────────────────────────────── Reinier, 25 augustus 2026: *"ik ben offer 197 aan het aanpassen. Waarom kan ik de offerlijn niet verwijderen. Help help."* Dat was mijn fout van diezelfde dag. Bij het gelijktrekken van de dialoogvensters kwam de dialooglaag op 9000 te staan, terwijl het offertevenster in de app op 99999 staat. Het venster verscheen dus wél, maar erachter: je zag de vraag niet en je klik kwam niet bij de knop. Dat gold niet alleen voor het verwijderen van een offerteregel maar voor élk venster in de nieuwe vormtaal dat je vanuit een offerte opent. Daarom staat de ladder hier nu op één plek, en hoort een nieuw venster zich hieraan te houden in plaats van zelf een getal te verzinnen: 110 de paginakop 120 de merkbalk 99999 de vensters van de app zelf (#offerModal en gelijken) 200001 het keuzelijstje bij "offerlijn toevoegen" 200100 élk dialoogvenster — het hoort boven alles wat het bevraagt 200200 meldingen; die moeten ook over een dialoogvenster heen kunnen Gemeten met elementFromPoint op het midden van de knop: staat er iets anders bovenop, dan is de knop niet te raken, hoe goed het venster er ook uitziet. */ :root{ --laag-dialoog: 200100; --laag-melding: 200200; } .hdg-laag{ z-index: var(--laag-dialoog) !important; } .hdg-berichten{ z-index: var(--laag-melding) !important; } /* Het oudere bevestigingsvenster van de app hoort in dezelfde laag. Vóór de opmaakronde stond het op 99999 en won het van het offertevenster doordat het er later bij kwam; dat was toeval, geen afspraak. Nu staat het er echt boven. */ #hdgConfirmOverlay, #hdgAcceptedWarningOverlay, #hdgOpBedrijfOverlay{ z-index: var(--laag-dialoog) !important; } /* ── Eén scherm, geen menu ──────────────────────────────────────────────────── Een kiosk in de hal logt in met de rol werkplaats, verzinkerij of transport, en die ziet precies één menu-item. Dan is de menubalk geen menu meer maar een strook verspilde ruimte — op 15,6 inch aan de muur is dat een derde van je breedte. Reinier, 26 augustus 2026: *"er komen alleen functies als werkplaats, verzinkerij en transport op."* */ body.hdg-een-scherm .sidebar{ display: none !important; } /* De bladzijde is een raster van twee kolommen: de menubalk en de inhoud. Verberg je alleen de eerste kolom, dan schuift de inhoud dáárin — en die is 285 px breed. Op de schermafdruk was dat meteen te zien: alles geperst in een strook links, de rest wit. Dus ook het raster terug naar één kolom. 26 augustus 2026; gevonden door te kijken, niet door te rekenen. */ body.hdg-een-scherm .app{ grid-template-columns: 1fr !important; } /* ── De hal: alles een maat groter ─────────────────────────────────────────── Reinier heeft het scherm opgemeten, 26 augustus 2026: het venster is **1920 beeldpunten** breed. Android schaalt dus niet, en op 15,6 inch is één beeldpunt 0,18 mm — daarmee is een gewone knop van 40 px maar 7 mm. En hij heeft de maten met een werkhandschoen aan betikt: *"volgens mij is 56 goed."* 56 beeldpunten is 10,1 mm, en dát is de maat waar we op mikken. Eerst probeerde ik de hele bladzijde 1,3 keer te vergroten met `zoom`. Dat werkte niet: de indeling van deze schermen rekent met vaste breedtes en die klapte in elkaar — alles geperst in een strook links, de rest wit. Op de schermafdruk meteen te zien, en dat is precies waarom ik naar het beeld kijk en niet alleen naar getallen. De goede manier is het scherm laten dóén alsof het smaller is. Zeg je tegen Android dat het venster 1320 beeldpunten breed is, dan verdeelt hij die over de volle 1920 van het paneel: alles wordt 1,45 keer groter, en de indeling merkt er niets van want die rekent gewoon met 1320. Dat gebeurt in js/app.js, alleen in de halstand. Wat er dan nog overblijft zijn de knopjes die zelfs dan te klein zijn — de kruisjes van 19 px worden 7 mm. Die krijgen hieronder een ondergrens van 40 beeldpunten, wat op dat scherm 10,5 mm is. */ /* 40 css-beeldpunten × 1,45 = 58 op het paneel = 10,5 mm. Met !important, want een paar knoppen in index.html zetten hun hoogte zelf vast met !important. */ body.hdg-ui--hal button, body.hdg-ui--hal .button, body.hdg-ui--hal .card-button, body.hdg-ui--hal .btn, body.hdg-ui--hal .tab, body.hdg-ui--hal .nav-btn, body.hdg-ui--hal .modal-close, body.hdg-ui--hal .line-edit-btn, body.hdg-ui--hal .line-delete-btn, body.hdg-ui--hal select, body.hdg-ui--hal input:not([type=checkbox]):not([type=radio]), body.hdg-ui--hal a.button{ min-height: 40px !important; min-width: 40px !important; } /* Een aankruisvakje kan niet groeien zonder scheef te trekken; die krijgt zijn raakvlak van de regel eromheen. */ body.hdg-ui--hal input[type=checkbox], body.hdg-ui--hal input[type=radio]{ width:20px; height:20px; }