diff --git a/Docs/CHANGELOG-electrum-gate.md b/Docs/CHANGELOG-electrum-gate.md index 68dd1b7..519af1d 100644 --- a/Docs/CHANGELOG-electrum-gate.md +++ b/Docs/CHANGELOG-electrum-gate.md @@ -8,6 +8,48 @@ Wat er nog moet gebeuren staat **niet** hier maar in de plannen; zie [CONTINUE_H Een lijst met geplande features op twee plekken loopt uit elkaar, en dan is geen van beide meer te vertrouwen. +## [0.0.17] - 2026-08-27 + +### Changed + +- **De tweede indeling: vijf kleine widgets op de bovenste rij.** Electrum-server, blokhoogte, + reactietijd, certificaat en de zelfcontrole uit 0.0.16, die daarmee eindelijk ergens te zien is. + Opgegeven door de gebruiker; ontwerp in het plan **Webinterface**, `PLAN.md` §4a2. + + Dit is minder mechaniek dan er stond, niet meer. Twee koppelingen vervallen die er alleen waren omdat + kaders naast elkaar stonden: de tegels hoefden niet meer mee te rekken met de hoogte van hun buur, en + het logblok en de certificaatlijst hoefden niet meer samen te groeien en te krimpen. Dat laatste was de + hele inhoud van 0.0.13. + + Vijf past niet in het twaalfkolomsraster, dus die rij heeft een eigen raster van vijf. De stappen bij + het versmallen staan expliciet in de CSS en zijn niet aan `auto-fit` overgelaten: met vijf items levert + elke stap een ongelijke laatste rij op, en dan wil je zelf bepalen welke widget alleen komt te staan. + +- **Kiezen, uploaden en de certificaatdetails naar een dialoog** achter een menu rechtsboven, samen met de + licht/donker-schakelaar. Het menu toont drie punten en geen hamburger, op aanwijzing van de gebruiker: + dat is wat umbrelOS bij zijn eigen apps doet. + + **De eis die dat oproept staat in de code en niet alleen in het plan.** Een verse installatie heeft geen + certificaat, en de pagina is de enige plek waar je er een kiest; dat achter een menu verstoppen is de + klem van 0.0.3 in een andere vorm. De foutmelding bovenaan blijft daarom staan en heeft nu een knop die + de dialoog opent. Het menu is de weg terug voor later, die knop is de weg erheen nu. + +- **Het activiteitenlog over de volle breedte**, en `Setting up your wallet` dichtgeklapt en compacter. + Twee kopieerknoppen in plaats van één per wallet: er zijn feitelijk maar twee vormen van hetzelfde + adres, dus tien knoppen waren negen keer dezelfde handeling. Dat draait een besluit van 19-08-2026 + terug, met één voorwaarde die in het plan staat: de wallets blijven gegroepeerd onder de vorm die ze + vragen, want zonder die groepering staat er wel een adres maar niet meer waar het bij hoort. + +- **De licht/donker-regel toont de huidige stand en niet de handeling.** Als losse knop stond er "Light" + terwijl de pagina donker was, en dát klopte: een knop belooft wat er gebeurt als je hem indrukt. Als + menuregel met een waarde erachter leest dezelfde tekst als een bewering over hoe het nu staat, en dan is + hij fout. + +### Removed + +- `.col-5` en `.col-7` uit de CSS. Er is geen rij meer die in tweeën valt, en een ongebruikte klasse + nodigt uit tot een indeling die er niet meer is. + ## [0.0.16] - 2026-08-27 ### Added diff --git a/Docs/CONTINUE_HERE.md b/Docs/CONTINUE_HERE.md index 1b4d21c..81a0f9b 100644 --- a/Docs/CONTINUE_HERE.md +++ b/Docs/CONTINUE_HERE.md @@ -23,7 +23,7 @@ | Plan | App | Volgende stap | Status | |-|-|-|-| -| [Webinterface](Plannen/Actief/005-Webinterface/TAKEN.md) | Gate | **Fase 6, de tweede indeling** (opgegeven 27-08-2026): vijf kleine widgets op de bovenste rij, de certificaatkeuze naar een dialoog achter een menu, log over de volle breedte, en het instelkader dichtgeklapt en compacter. De zelfcontrole eronder is gebouwd in 0.0.16 (27-08-2026), dus wat er nu ligt is de verbouwing zelf | 🔶 | +| [Webinterface](Plannen/Actief/005-Webinterface/TAKEN.md) | Gate | **Fase 6 is gebouwd en uitgerold als 0.0.17 (27-08-2026), maar in geen enkele browser gezien.** Nakijken op een breed scherm én op een telefoon is nu de volgende stap: de bovenste rij gaat van vijf naar drie naar twee kolommen, en de certificaatdialoog is nieuw. Daarna resteert alleen nog het uploaden op het niet-gelukkige pad | 🔶 | | [Umbrelapp](Plannen/Actief/008-Umbrelapp/TAKEN.md) | Relay | **Hij draait sinds 25-08-2026, maar kan in de kern niet werken.** Uit de broncode van Suite: bij een eigen relay-URL registreert de cliënt geen eigenaar, terwijl Trezor's relay iedereen zonder limietenrij weigert. Volgende stap is de kále Evolu-relay proberen (`docker.io/evoluhq/relay:latest`, één container, gepubliceerde image) en waarschijnlijk daarnaartoe verbouwen. Zie open punt 6 | 🔶 | | [Proefopstelling](Plannen/Actief/007-Proefopstelling/TAKEN.md) | Relay | **Eerst beslissen of dit plan nog bestaansrecht heeft.** Fase 1 is af, maar fase 2 en 3 zijn ingehaald: het pakket draait al op de Umbrel, dus een lokale opstelling ernaast meet minder en kost meer. Wat overblijft zijn twee vragen die al als blokkade in **Umbrelapp** staan, en die horen op één plek | 🔶 | diff --git a/Docs/Plannen/Actief/005-Webinterface/PLAN.md b/Docs/Plannen/Actief/005-Webinterface/PLAN.md index 21122b9..2671db9 100644 --- a/Docs/Plannen/Actief/005-Webinterface/PLAN.md +++ b/Docs/Plannen/Actief/005-Webinterface/PLAN.md @@ -243,11 +243,20 @@ Twee dingen gaan tegen een eerder besluit in. Ze staan hier opgeschreven zodat e **gegroepeerd onder de twee vormen** te staan, elk met zijn eigen kopieerknop, en niet als één platte lijst wallets naast twee losse knoppen. Anders staat er wel een adres om te kopiëren maar niet meer bij welke wallet welk adres hoort, en dat is precies wat dit kader moet vertellen. -2. **De certificaatlijst verhuist naar een dialoog.** Op 19-08-2026 is een dropdown afgewezen omdat je bron, - naam en resterende dagen naast elkaar moet kunnen vergelijken en een verlopen certificaat rood moet - kunnen zijn. **Die reden verbiedt een dialoog niet, hij verbiedt een dropdown**, en een dialoog geeft - meer ruimte dan het kader had. De lijst blijft dus een lijst, nu in de dialoog. Vervang hem daar niet - alsnog door een dropdown omdat het in een dialoog netjes zou staan. +2. **De certificaatkeuze verhuist naar een dialoog.** Op 19-08-2026 is een dropdown afgewezen omdat je + bron, naam en resterende dagen naast elkaar moet kunnen vergelijken en een verlopen certificaat rood + moet kunnen zijn. Die reden verbood een dropdown, geen dialoog, en een dialoog geeft meer ruimte dan + het kader had. + + **Bijgesteld bij het bouwen op 27-08-2026: het ís al een dropdown.** Hier stond "de lijst blijft dus + een lijst", en dat klopte niet meer. Op 20-08-2026 bleken het veertien certificaten op de Umbrel van de + gebruiker, en toen sloeg het argument om: veertien rijen in een scrollend vak maken van de keuze het + drukste onderdeel van de pagina, terwijl je er precies één keer iets mee doet. Alles wat de kleur zou + zeggen staat sindsdien in de tekst van de optie zelf, inclusief `expired` en `in use`, en dat leest ook + voor wie de kleur niet ziet. + + De dropdown is dus ongewijzigd meeverhuisd. Wat blijft gelden is de reden eronder: wie hem ooit terug + wil veranderen, moet de vergelijkbaarheid oplossen en niet alleen de ruimte. #### De eis die deze indeling zelf oproept diff --git a/Docs/Plannen/Actief/005-Webinterface/PROGRESS.md b/Docs/Plannen/Actief/005-Webinterface/PROGRESS.md index c954d27..aa62a0f 100644 --- a/Docs/Plannen/Actief/005-Webinterface/PROGRESS.md +++ b/Docs/Plannen/Actief/005-Webinterface/PROGRESS.md @@ -1,5 +1,28 @@ # Voortgang - Webinterface +## 27-08-2026 - de tweede indeling gebouwd, en er ging meer weg dan erbij kwam + +Fase 6 in één keer gebouwd, uitgeleverd als 0.0.17: vijf widgets op de bovenste rij, de certificaatkeuze +in een dialoog achter een puntjesmenu, het log vol breed, en het instelkader dichtgeklapt met twee +kopieerknoppen. De zelfcontrole uit 0.0.16 heeft daarmee eindelijk een plek om te verschijnen. + +**Wat opvalt aan deze verbouwing is wat er verdween.** Twee mechanismen bestonden alleen omdat er kaders +naast elkaar stonden: het meerekken van de tegels met de hoogte van hun buur, en het samen groeien en +krimpen van log en certificaatkader. Dat tweede was de hele inhoud van 0.0.13. Vijf gelijke widgets en een +vol breed log hebben geen buur, dus beide zijn weg, net als `.col-5` en `.col-7`. + +**Twee dingen zijn onderweg bijgestuurd.** Het menu werd drie punten in plaats van een hamburger, op +aanwijzing van de gebruiker: dat is wat umbrelOS bij zijn eigen apps toont. En het ontwerp beweerde dat de +certificaatlijst een lijst was; dat was op 20-08-2026 al een dropdown geworden. Die is ongewijzigd +meeverhuisd naar de dialoog. + +De harde eis uit §4a2 staat in de code en niet alleen in het plan: de foutmelding "geen certificaat in +gebruik" heeft de knop die de dialoog opent, want een verse installatie moet die keuze kunnen vinden. + +**Geraakt:** `index.html.template` (kop, meldingen, hele raster, dialoog, script), `umbrel-app.yml` +(0.0.17), dit plan, de changelog. **Tests:** 39, 32, 54 en 22 goed, 0 fout. **Niet geverifieerd:** niets +hiervan is in een browser gezien, op geen enkele schermbreedte. + ## 27-08-2026 - de app kijkt eindelijk naar zijn eigen voordeur, en meet minder dan beloofd Open punt 5 is goedgekeurd en gebouwd in 0.0.16. De agent verbindt met de eigen TLS-poort, maakt de diff --git a/Docs/Plannen/Actief/005-Webinterface/TAKEN.md b/Docs/Plannen/Actief/005-Webinterface/TAKEN.md index 760c8dc..94f639b 100644 --- a/Docs/Plannen/Actief/005-Webinterface/TAKEN.md +++ b/Docs/Plannen/Actief/005-Webinterface/TAKEN.md @@ -52,9 +52,9 @@ alleen tegen tijdelijke bestanden getoetst, niet tegen een echte wallet. **Loopt sinds 27-08-2026 bij de gebruiker; hij kijkt er na een etmaal naar. Eigenaar: gebruiker** -- [ ] **Fase 6, de tweede indeling.** Opgegeven door de gebruiker op 27-08-2026 en het grootste blok werk - dat er in dit plan nog ligt. Begint met de zelfcontrole, want dat is het enige echte nieuwe werk en - het levert de vijfde widget van de bovenste rij +- [x] **Fase 6, de tweede indeling, gebouwd in 0.0.17 (27-08-2026).** Alles uit de opdracht zit erin; wat + er nog staat is het nakijken in een browser, en dat is de helft van de verificatie bij een + verbouwing van deze omvang. Zie de fase zelf voor wat er per punt gedaan is Daarna, en niet eerder: @@ -245,28 +245,31 @@ de vijfde widget; de rest is de pagina verbouwen om wat er dan staat. Getest in `tests/test_agent_zelfcontrole.py`, 22 toetsen, met de nadruk op de niet-gelukkige paden: geen certificaat, dichte poort, iets dat luistert maar geen TLS spreekt, en een ander certificaat aan de lijn. Alle vier de beslissende regels zijn mutatie-getest -- [ ] Rij 1 wordt vijf gelijke widgets: Electrum-server, blokhoogte, reactietijd, certificaat, zelfcontrole -- [ ] Een eigen raster van vijf kolommen voor die rij, en beslissen wat er tussen "vijf naast elkaar" en - "gestapeld op mobiel" gebeurt. Vijf valt niet netjes in twaalf kolommen; dit is nieuw werk -- [ ] De Electrum-serverwidget kleiner, met minder onderteksten -- [ ] De certificaatwidget toont het gekozen certificaat: naam en dagen tot vernieuwing. Niet de keuze -- [ ] Kiezen, uploaden en afhandelen naar een dialoog achter een hamburger- of puntjesmenu rechtsboven. - Met het `dialog`-element, want focus en Escape zitten erin. De lijst blijft een lijst, zie §4a2 -- [ ] **De licht/donker-schakelaar het menu in** (27-08-2026). Staat nu als losse knop rechtsboven. Let op - de vorm: in een menu hoort de huidige stand te staan en niet de handeling, dus niet het label "Light" - overnemen terwijl de pagina licht is. Zie §4a2 -- [ ] **De foutmelding "geen certificaat actief" blijft bovenaan staan en krijgt de knop die de dialoog - opent.** Dit is de harde eis van deze indeling: een verse installatie heeft geen certificaat, en de - pagina is de enige plek waar je er een kiest. Zie §4a2 en de klem van 0.0.3 -- [ ] Het activiteitenlog over de volle breedte -- [ ] "Setting up your wallet" dichtgeklapt met `details`/`summary`, en compacter -- [ ] Twee kopieerknoppen in plaats van één per clientregel, **met de wallets gegroepeerd onder de vorm die - ze willen.** Niet één platte lijst naast twee losse knoppen: dan is het adres er nog wel, maar niet - meer bij welke wallet welk adres hoort. Bron blijft `Referenties/Clients.md` §4 -- [ ] Opruimen wat vervalt: de statustegels hoeven niet meer mee te rekken met hun buur, en het logblok en - de certificaatlijst hoeven niet meer samen te groeien. Dat laatste was de hele inhoud van 0.0.13 -- [ ] Na afloop op mobiel nakijken, net als bij 0.0.10. De leesvolgorde in de HTML blijft de bedoelde - volgorde, zonder `order` in de CSS +- [x] Rij 1 is vijf gelijke widgets: Electrum-server, blokhoogte, reactietijd, certificaat, zelfcontrole +- [x] **Een eigen raster van vijf kolommen, met expliciete stappen** (5 → 3 → 2 → 1). Niet aan `auto-fit` + overgelaten: met vijf items levert elke stap een ongelijke laatste rij op, en dan wil je zelf bepalen + wélke widget alleen komt te staan. Dat is steeds de laatste, de zelfcontrole, want die is als enige + te begrijpen zonder buur +- [x] De Electrum-serverwidget kleiner: de naam als waarde, het adres als onderregel. "Last checked" is + eruit, want dat stond al onder de blokhoogte als "as of ... ago" +- [x] De certificaatwidget toont de dagen tot vernieuwing, met de naam als onderregel. Bij een verlopen + certificaat staat er `expired` in het rood, en zonder keuze `none` en niet `unknown`: er is niets + onbekends aan +- [x] Kiezen, uploaden en de details naar een dialoog achter het menu, met het `dialog`-element +- [x] **De licht/donker-schakelaar het menu in, met de huidige stand als waarde.** Het menu toont drie + punten en geen hamburger, op aanwijzing van de gebruiker: dat is wat umbrelOS bij zijn eigen apps + doet. Als tekst en niet als SVG, zodat hij meeschaalt met de lettergrootte +- [x] **De foutmelding "geen certificaat actief" heeft de knop die de dialoog opent.** De harde eis van + deze indeling, en hij staat als zodanig in de code +- [x] Het activiteitenlog over de volle breedte +- [x] "Setting up your wallet" dichtgeklapt met `details`/`summary`, en compacter +- [x] Twee kopieerknoppen, met de wallets gegroepeerd onder de vorm die ze vragen +- [x] Opgeruimd wat vervalt: de hoogtekoppeling van log en certificaatkader, het meerekken van de tegels, + en `.col-5` en `.col-7` uit de CSS +- [ ] **Na afloop op mobiel nakijken, net als bij 0.0.10.** Niets van deze indeling is in een browser + gezien, en dat is bij een verbouwing van deze omvang de helft van de verificatie. Let vooral op de + stap van vijf naar drie naar twee kolommen, en op de dialoog op een smal scherm. + **Eigenaar: gebruiker** ## Geblokkeerd / wacht op diff --git a/whatsnext-electrum-gate/index.html.template b/whatsnext-electrum-gate/index.html.template index c468163..3fefee5 100644 --- a/whatsnext-electrum-gate/index.html.template +++ b/whatsnext-electrum-gate/index.html.template @@ -107,7 +107,7 @@ body { hebben 1,8rem ruimte binnenin en een radius van 28 pixels; met 1rem ertussen is de ruimte tússen twee kaders kleiner dan de ruimte erbinnen, en dan gaan ze aan elkaar plakken. De maat hoort eerder groter dan de binnenruimte te zijn - dan kleiner. Zelfde waarde in .stat-grid hieronder, anders valt de rij tegels + dan kleiner. Zelfde waarde in .row1 hieronder, anders valt de rij widgets uit de toon met de rij eronder. */ gap: 1.5rem; /* stretch en niet start: twee kaders naast elkaar horen even hoog te zijn, en @@ -118,16 +118,14 @@ body { } .grid > * { min-width: 0; } .grid > .card { display: flex; flex-direction: column; } -.col-5 { grid-column: span 5; } -.col-7 { grid-column: span 7; } +/* Hier stonden ook .col-5 en .col-7, met een mediaregel die ze onder 1100px vol + breed maakte. Sinds de tweede indeling (27-08-2026) is er geen rij meer die in + tweeën valt: de bovenste rij heeft zijn eigen raster van vijf, en het log en het + instelkader zijn allebei vol breed. Weggehaald in plaats van laten staan, want + ongebruikte klassen nodigen uit tot een indeling die er niet meer is. */ .col-full { grid-column: 1 / -1; } .grid .card { margin-bottom: 0; } -/* Onder deze breedte is naast elkaar geen winst meer maar gedrang. */ -@media (max-width: 1100px) { - .col-5, .col-7 { grid-column: 1 / -1; } -} - /* ── Typografie ─────────────────────────────────────────────────────────── */ .t-h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } .t-h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } @@ -183,23 +181,35 @@ body { [data-theme="light"] .card { box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 6px 24px rgba(0,0,0,0.04); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } -/* Drie kolommen, en de reactietijd neemt er twee. Er stonden drie tegels van - gelijke breedte; de derde was de resterende geldigheid van het certificaat, en - die is er op 20-08-2026 uit omdat de kaart eronder hetzelfde zegt met een datum - erbij. De ruimte gaat naar de sparkline, want dat is het enige hier dat - daadwerkelijk breedte nodig heeft. */ -.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } -.stat-wide { grid-column: span 2; } +/* ── De bovenste rij ──────────────────────────────────────────────────────── + Vijf gelijke widgets (27-08-2026). Hier stond een raster van drie tegels waarvan + de reactietijd er twee nam, naast een kader met lijstregels; dat vroeg twee + kunstjes die nu weg zijn, namelijk meerekken met de hoogte van de buur en een + dubbele kolom voor de sparkline. -/* De drie tegels staan naast een kader met drie lijstregels en zijn van zichzelf - lager, wat een gat rechtsboven oplevert. Ze zetten hun getal dus onderaan, zodat - de drie getallen onderling op één lijn staan én op de laatste regel van het kader - ernaast. In de gestapelde weergave doet dit niets, want daar is geen buur om je - aan te meten. */ -@media (min-width: 1101px) { - .stat-grid .card { display: flex; flex-direction: column; } - .stat-grid .stat-body { margin-top: auto; } + Een eigen raster en geen deling van de twaalf kolommen hierboven, want vijf + past daar niet in. Dat is nieuw op deze pagina: elke andere rij viel in tweeën. + + Wat er bij het versmallen gebeurt, is daarom expliciet en niet aan auto-fit + overgelaten. Met vijf items levert elke stap een ongelijke laatste rij op, en + dan wil je zelf bepalen wélke widget alleen komt te staan. Dat is steeds de + laatste, de zelfcontrole, en die is als enige begrijpelijk zonder buur. */ +.row1 { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 1.5rem; } +/* Onder deze breedte wordt een widget van een vijfde te smal voor "Wrong + certificate" of een blokhoogte met scheidingstekens. Drie plus twee. */ +@media (max-width: 1400px) { .row1 { grid-template-columns: repeat(3, 1fr); } } +@media (max-width: 900px) { .row1 { grid-template-columns: repeat(2, 1fr); } } +@media (max-width: 560px) { .row1 { grid-template-columns: 1fr; } } + +/* De widgets zetten hun waarde onderaan, zodat de vijf getallen op één lijn + staan ook als de ene titel over twee regels valt en de andere niet. */ +.row1 .card { display: flex; flex-direction: column; } +.row1 .stat-body { margin-top: auto; } /* De twee clientlijsten naast elkaar zodra er ruimte is; het zijn twee losse lijsten en geen vervolg op elkaar, dus onder elkaar is verspilde breedte. */ @@ -211,6 +221,15 @@ body { .clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1.2rem 2.4rem; } .stat-val { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat-val.unknown { color: var(--text-ter); font-size: 1.5rem; } +/* Twee widgets tonen een woord in plaats van een getal, en op 1,9rem loopt + "Wrong certificate" over drie regels. Kleiner, en met een afbreekpunt, want + afkappen met puntjes zou hier de betekenis wegnemen. */ +.stat-val.text { font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; } +/* Rood is voor het geval waar je iets aan moet doen. Bewust niet voor "off": geen + certificaat gekozen is de normale begintoestand van een verse installatie, en + daar staat de melding bovenaan al voor. */ +.stat-val.bad { color: var(--neg); } +.stat-sub.mono { font-family: var(--font-mono); overflow-wrap: anywhere; } /* Even hoog als de sparkline hieronder, en met dezelfde bovenmarge. Anders staat het getal van "Backend response" hoger dan de andere twee, want daar hangt een grafiekje onder in plaats van een regel tekst. */ @@ -317,24 +336,20 @@ body { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.9; - /* flex-basis 0 en niet auto, en dát is de hele hoogtekwestie van 20-08-2026. - Met basis auto telt de inhoud van dit blok mee voor de natuurlijke hoogte van - zijn kader, en dan duwt een log met tien regels de rij hoger dan het - certificaatkader ernaast nodig heeft. Het gevolg zag je aan de andere kant: - leegte onder de knop "Use this certificate", die precies verdween als je het - uploadblok uitklapte. + /* Sinds 27-08-2026 neemt dit blok gewoon zijn eigen hoogte. Hier stond + flex: 1 1 0, en dat was de oplossing voor een probleem dat niet meer bestaat: + het log stond naast het certificaatkader en die twee moesten samen groeien en + krimpen, anders viel er leegte onder de knop "Use this certificate" zodra je + het uploadblok uitklapte. Dat was de hele inhoud van 0.0.13. - Met basis 0 draagt dit blok niets bij aan die natuurlijke hoogte. Het - certificaatkader bepaalt de rij, dit blok groeit ernaartoe, en uitklappen laat - dus beide kaders meegroeien. Wat er niet in past, scrolt hier, en dat is waar - een log voor gemaakt is. - - Geen max-height meer: de rij is nu begrensd door het kader ernaast, dus een - eigen plafond zou alleen weer leegte onderaan opleveren. */ - flex: 1 1 0; - /* De bodem voor het geval het certificaatkader ooit korter is dan dit, zoals - wanneer er geen enkel certificaat gevonden is. Er passen vier regels in. */ + De certificaatkeuze zit nu in een dialoog en dit kader is vol breed, dus er is + geen buur meer om je aan te meten. Wat overblijft is een plafond, want een + etmaal aan regels zou anders één lange pagina worden; daarboven scrolt het + blok zelf, en dat is waar een log voor gemaakt is. */ + flex: 0 0 auto; + /* Er passen vier regels in; dat is de bodem voor een leeg of net gestart log. */ min-height: 110px; + max-height: 60vh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; @@ -385,6 +400,103 @@ body { /* ── Grafieken ──────────────────────────────────────────────────────────── */ .spark { width: 100%; height: 34px; display: block; margin-top: 0.5rem; overflow: visible; } +/* ── Het menu rechtsboven ───────────────────────────────────────────────── */ +.menu { position: relative; flex-shrink: 0; } +/* Het driehoekje van summary weg, in twee vormen: WebKit heeft zijn eigen + pseudo-element en de rest gaat via list-style. */ +/* Alleen het driehoekje weg en de cursor; de maatvoering staat hieronder bij + .menu-button, want twee regels die allebei padding zetten laten de meest + specifieke winnen en dat is deze. */ +.menu > summary { list-style: none; cursor: pointer; } +.menu > summary::-webkit-details-marker { display: none; } +.menu > summary::marker { content: ''; } +/* Flink, want drie punten op de gewone knopgrootte van 0,75rem zijn nauwelijks + te zien en al helemaal niet te raken. De letterafstand zet ze uit elkaar, + anders plakken ze in de meeste letterfamilies aan elkaar. De vaste hoogte en + line-height houden de knop even hoog als hij met tekst erin zou zijn. */ +.menu-button { + font-size: 1.4rem; + line-height: 1; + letter-spacing: 0.08em; + padding: 0.3rem 0.7rem 0.5rem; + min-height: 2rem; +} +.menu-panel { + position: absolute; right: 0; top: calc(100% + 0.4rem); + z-index: 20; min-width: 15rem; + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-md); + padding: 0.35rem; + box-shadow: 0 8px 30px rgba(0,0,0,0.18); +} +.menu-item { + display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; + width: 100%; text-align: left; + font-family: inherit; font-size: 0.82rem; color: var(--text-primary); + background: transparent; border: 0; border-radius: var(--radius-sm); + padding: 0.55rem 0.65rem; cursor: pointer; +} +.menu-item:hover { background: var(--neutral-bg); } +.menu-meta { font-size: 0.75rem; color: var(--text-sec); } + +/* ── De dialoog ─────────────────────────────────────────────────────────── */ +/* Breder dan het kader waar deze inhoud uit komt, en dat mag: een dialoog leent + geen hoogte van een buur, dus de keuzelijst en het uploadblok kunnen hier + gewoon staan zonder dat er elders leegte ontstaat. */ +.sheet { + /* Alleen van belang in de terugvalroute zonder showModal; zie de HTML. */ + grid-column: 1 / -1; + width: min(46rem, calc(100vw - 2rem)); + max-height: min(44rem, calc(100vh - 4rem)); + padding: 0; + color: var(--text-primary); + background: var(--bg-elevated); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + overflow: hidden; +} +.sheet::backdrop { background: rgba(0,0,0,0.55); } +.sheet-head { + display: flex; align-items: center; justify-content: space-between; gap: 1rem; + padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--border); +} +/* Alleen dit deel scrollt, zodat de sluitknop in beeld blijft bij twintig + certificaten. */ +.sheet-body { + padding: 0.4rem 1.5rem 1.5rem; + overflow: auto; + max-height: calc(min(44rem, 100vh - 4rem) - 5rem); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar) transparent; +} + +/* De knop in de foutmelding "geen certificaat in gebruik". Op een eigen regel, + want in de melding staat een zin die je eerst leest. */ +.alert-action { margin-top: 0.7rem; } + +/* ── Het instelkader ────────────────────────────────────────────────────── */ +.setup > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; } +.setup > summary::-webkit-details-marker { display: none; } +.setup > summary::marker { content: ''; } +/* Een chevron die meedraait, want zonder het driehoekje van de browser is er + verder niets dat zegt dat dit open kan. */ +.setup > summary::after { + content: ''; margin-left: auto; width: 0.5rem; height: 0.5rem; + border-right: 2px solid var(--text-sec); border-bottom: 2px solid var(--text-sec); + transform: rotate(45deg); transition: transform 0.2s var(--ease-out); +} +.setup[open] > summary::after { transform: rotate(-135deg); } +.setup-form { min-width: 0; } +.setup-value { + display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; + margin: 0.45rem 0 0.55rem; +} +/* De wallets onder de vorm die ze vragen. Naam en vindplaats op één regel, want + het gaat om het herkennen van je eigen wallet en niet om een handleiding. */ +.setup-wallets { font-size: 0.75rem; line-height: 1.7; color: var(--text-sec); } +.setup-wallets strong { color: var(--text-primary); font-weight: 600; } + .hidden { display: none !important; } /* Onder deze breedte past een regel niet meer naast zijn label. Alles wat op een @@ -413,14 +525,9 @@ body { .log-event { width: auto; } .log-detail { flex-basis: 100%; } - /* Op één kolom staat er geen kader meer naast om de hoogte van te lenen, dus - hier neemt het log wél zijn eigen hoogte. Met een plafond, want anders wordt - een etmaal aan regels één lange pagina; daarboven scrolt het blok zelf. */ - .log { flex: 0 0 auto; min-height: 0; max-height: 60vh; } - - /* De tegels op elkaar, en dan neemt de reactietijd geen twee kolommen meer. */ - .stat-grid { grid-template-columns: 1fr; } - .stat-wide { grid-column: auto; } + /* Het plafond blijft, de bodem niet: op een telefoon is 110 pixels aan lege + loghoogte zonde van het scherm. */ + .log { min-height: 0; } } @media (max-width: 560px) { @@ -456,9 +563,41 @@ body { tests/test_server_start_zonder_certificaat.py houdt ze gelijk. -->
Your own node from anywhere, without waiting for Tor v${APP_VERSION}
- + + @@ -499,6 +638,13 @@ body { No certificate in use, so TLS is not running + + @@ -510,38 +656,34 @@ body { schermen stapelt hij precies zo. -->- Use SSL as the connection type. If you connect from outside your own network, your - router may forward a different external port to this one. -
+ Er staan nu twee kopieerknoppen in plaats van één per wallet. Dat draait + een besluit van 19-08-2026 terug, en dat is opgeschreven in PLAN.md 4a2 + zodat het niet per ongeluk hersteld wordt: er zijn feitelijk maar twee + vormen van hetzelfde adres, dus tien knoppen waren negen keer dezelfde + handeling. -+ Use SSL as the connection type. If you connect from outside your own network, your + router may forward a different external port to this one. +
+ +- Wasabi and Samourai use their own backend and do not speak the Electrum protocol. Specter Desktop - talks to Bitcoin Core directly. Hardware wallets connect through one of the apps above rather than - on their own. -
++ Wasabi and Samourai use their own backend and do not speak the Electrum protocol. Specter Desktop + talks to Bitcoin Core directly. Hardware wallets connect through one of the apps above rather than + on their own. +
+