/* ══════════════════════════════════════════════════════════════════════ fold.css — de vouwbare laag (v0.51.0-Rucellai) Deze laag doet drie dingen, en met opzet niet meer: 1. Ze maakt de VOUWSTAND een CSS-feit. De app zet `data-vouwstand` en `data-scharnier` op plus de scharnierpositie in variabelen. Zonder app bestaan die niet en valt alles terug op schermbreedte — dezelfde progressive enhancement als de telefoon-login in v0.47. 2. Ze geeft één indeling voor alles wat "lijst naast detail" is: `.duo`. Bij een smal scherm één kolom, bij een breed scherm twee, en bij een ZICHTBAAR SCHARNIER valt de goot precies op de vouw. Een scherm dat later bijkomt en dit contract volgt, beweegt mee zonder dat er iets aan de app verandert. Dat is de eis waarvoor deze laag bestaat. 3. Ze maakt brede tabellen leesbaar op een smalle kolom via CONTAINER- QUERIES, niet via schermbreedte. Dat verschil is hier wezenlijk: in twee-paneel-stand is het scherm bréé́d terwijl de lijstkolom smal is. Een media query kijkt naar het verkeerde getal; een container query naar de ruimte die de tabel echt heeft. Het geldt daardoor ook voor tabellen die nog niet bestaan. ═══════════════════════════════════════════════════════════════════ */ :root { /* Door de app gevuld; 0px betekent "geen scharnier bekend". Ze staan hier zodat een berekening nooit op een ontbrekende variabele stukloopt. */ --fold-scharnier-links: 0px; --fold-scharnier-breedte: 0px; /* Sentinel voor fold.js. CSS bepaalt of twee panelen zinnig zijn; JS leest dat hier af in plaats van de drempel te herhalen. Twee plekken die hetzelfde moeten weten is precies waar er op den duur één achterloopt. */ --duo-actief: 0; } /* 600px = de grens die Android zelf voor "past een tweede paneel" hanteert (sw600dp). Het binnenscherm van een Fold zit daar in staande stand ruim boven, een coverscherm er ruim onder. Bewust NIET op een toestelmaat gebaseerd: dan werkt het op precies één telefoon. */ @media (min-width: 600px) { :root { --duo-actief: 1; } } /* Meldt de app een VERTICALE vouw, dan is er fysiek een breed scherm en mogen er twee panelen staan, ongeacht wat de gerapporteerde breedte doet. */ html[data-scharnier="verticaal"] { --duo-actief: 1; } /* ── .duo — lijst naast detail ─────────────────────────────────────── */ .duo { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; } /* In één kolom is het detailpaneel leeg tot er iets in staat; een lege omlijning onder de lijst is dan alleen maar ruis. */ .duo > [data-duo-paneel]:empty { display: none; } @media (min-width: 600px) { /* Opengevouwen toestel: het detail krijgt het ruimste deel, want de lijst staat daar toch als kaarten. */ .duo { grid-template-columns: minmax(260px, 5fr) 6fr; } } @media (min-width: 1024px) { /* Op een echt breed scherm krijgt de lijst voorrang: daar hoort de volledige tabel te blijven staan, zoals altijd. */ .duo { grid-template-columns: minmax(560px, 62fr) 38fr; } /* En de bladbreedte mag ruimer zodra er twee panelen staan. `--wrap-max` (1180px) is gekozen voor de leesbaarheid van ÉÉN kolom. Met een detailpaneel ernaast bleef er 703px voor de lijst over, terwijl de facturentabel er 795 nodig heeft — de Acties-kolom viel daardoor buiten beeld en daarmee verdwenen Versturen, Mailen en Markeren van het scherm. Gemeten, niet vermoed. Alleen wanneer er werkelijk een `.duo` op de pagina staat; alle andere schermen houden hun leesbreedte. */ main.wrap:has(.duo) { max-width: min(1800px, 100%); } } html[data-scharnier="verticaal"] .duo { /* Het scharnier ligt links van de goot; de goot ís de scharnierbreedte. `--fold-scharnier-links` is door fold.js omgerekend naar de afstand binnen déze container, want de container begint niet op x=0. */ grid-template-columns: var(--fold-scharnier-links) 1fr; column-gap: var(--fold-scharnier-breedte); } /* Een horizontale vouw (het toestel als laptopje op tafel) verdeelt niet in kolommen maar in rijen: inhoud boven de vouw, bediening eronder. Twee kolommen zouden hier dwars over de knik lopen. */ html[data-scharnier="horizontaal"] .duo { grid-template-columns: 1fr; row-gap: var(--fold-scharnier-breedte); } /* Het paneel scrollt zelf, zodat de lijst ernaast op zijn plek blijft. */ @media (min-width: 600px) { .duo > [data-duo-lijst], .duo > [data-duo-paneel] { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; } } /* Blijft er een tabel over die net niet past, dan schuift hij binnen zijn eigen kaart. Zonder deze regel valt hij over de rand en is de laatste kolom weg zonder dat iets erop wijst. */ [data-duo-lijst] { overflow-x: auto; } /* Beide panelen zijn een container, zodat tabellen erbinnen op hún breedte reageren en niet op die van het scherm. */ [data-duo-lijst], [data-duo-paneel], main.wrap { container-type: inline-size; } .duo-leeg { color: var(--muted); font-size: 13px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 24px 16px; text-align: center; } /* De rij waar het paneel nu op staat, blijft aanwijsbaar. */ table.list tr[aria-current="true"] > td { background: rgba(91, 214, 255, 0.08); } [data-duo-paneel][aria-busy="true"] { opacity: 0.55; } /* ── Brede tabellen op een smalle kolom ────────────────────────────── */ /* 800px is de breedte waaronder de negen kolommen van de facturenlijst niet meer naast elkaar passen: gemeten is de tabel 795px breed. Onder die grens wordt elke rij een kaart — dat is beter dan een kolom die buiten beeld valt en de actieknoppen meeneemt. De veldnamen komen uit de en worden door fold.js op de cellen gezet — daardoor werkt dit ook voor tabellen die nog geschreven moeten worden. */ @container (max-width: 800px) { table.list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } table.list, table.list tbody { display: block; } table.list tr { display: block; border: 1px solid var(--line); border-radius: 12px; background: rgba(18, 25, 37, 0.45); padding: 6px 10px; margin-bottom: 10px; } table.list td { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(35, 48, 65, 0.6); } table.list tr > td:last-child { border-bottom: none; } table.list td::before { content: attr(data-label); color: var(--muted); font-size: 12px; } /* Het eerste veld is de naam van het ding: een factuurnummer, een debiteur. Dat is de kop van de kaart, geen naam/waarde-paar. Het scheelt een regel én het nummer breekt niet meer middenin af omdat het de halve breedte moest delen met een label dat al duidelijk was. */ table.list tr > td:first-child { display: block; font-size: 15px; padding: 2px 0 8px; } table.list tr > td:first-child::before { content: none; } /* Een cel zonder veldnaam (de actieknoppen) mag de volle breedte hebben. */ table.list td[data-label=""]::before, table.list td:not([data-label])::before { content: none; } table.list td[data-label=""], table.list td:not([data-label]) { display: block; } table.list td.num { text-align: left; } /* Velden die in de detailweergave herhaald worden, vallen weg zodra de kolom smal is. Ze zijn niet onbereikbaar — ze staan één tik verderop, op de factuur zelf. Een kaart van negen regels per factuur is geen lijst meer. */ table.list td[data-prio="2"] { display: none; } } /* ── Navigatie op een smal scherm ──────────────────────────────────── */ /* Acht tabs plus de QR-schakelaar passen tot ongeveer 900px niet op één regel. Ze laten afbreken kost twee of drie regels hoogte, precies bovenaan waar de inhoud hoort te beginnen — op een opengevouwen toestel net zo goed als op een coverscherm. Horizontaal schuiven houdt de kop één regel hoog en laat alles bereikbaar. */ @media (max-width: 900px) { header.app-header .wrap { flex-wrap: wrap; gap: 8px; } nav.tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: 0; width: 100%; padding-bottom: 2px; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs a { flex: 0 0 auto; } } @media (max-width: 560px) { header.app-header .wrap { padding: 10px 12px; } header.app-header h1 { font-size: 16px; } .wrap { padding-left: 12px; padding-right: 12px; } } /* ── Ruimte voor systeembalken in de app ───────────────────────────── */ /* De WebView tekent achter de statusbalk en de navigatiebalk; zonder deze marges valt de bovenste tab onder de klok. Buiten de app zijn deze waarden nul. */ /* v0.64.0 — twee metingen, de grootste wint. * * `env(safe-area-inset-*)` komt van de WebView zelf en staat er al bij de * eerste verf. `--fold-inset-*` komt van de app via de vouwbrug en is * nauwkeuriger (hij telt ook het toetsenbord mee), maar arriveert later — en * bij een toestel dat niet vouwt misschien nooit. * * Alleen op de brug vertrouwen betekende: tot de eerste melding nul onderrand, * en dan valt de inhoud weg achter de navigatiebalk. Dat is wat Christian op * 9-9 meldde. `max()` maakt de late meting een verfijning in plaats van een * voorwaarde. */ html[data-app="horsefacturen"] header.app-header { padding-top: max(var(--fold-inset-boven, 0px), env(safe-area-inset-top, 0px)); } html[data-app="horsefacturen"] body { padding-bottom: max(var(--fold-inset-onder, 0px), env(safe-area-inset-bottom, 0px)); }