From 8b76cf3b4b41da864458ec771b59165c5a9a3124 Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 16 Jul 2026 07:25:58 +0200 Subject: [PATCH] fix: menubalk past op telefoon - afbeeldingenscherm opent niet meer per ongeluk (v0.3.61-beta) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Op telefoons (≀600px) liep de menubalk 143px over: πŸ’Ύ Opslaan en βš™ Instellingen vielen buiten beeld en πŸ–Ό (afbeeldingscatalogus) zat precies onder de duim, waardoor het schermvullende afbeeldingen/upload-scherm steeds per ongeluk opende - Telefoon-balk toont nu alleen de essentie (πŸ”Š, πŸ“, πŸ’Ύ, βš™); zoom en de catalogusknop verdwijnen daar - afbeeldingen blijven bereikbaar via het οΌ‹-menu - Afbeeldingscatalogus: titelbalk met sluitknop blijft vastgeplakt in beeld tijdens scrollen, en op mobiel 100dvh i.p.v. 100vh zodat er niets achter de browserbalk wegvalt - Geverifieerd in iPhone-emulatie (5 checks): balk past volledig, opslaan/instellingen bereikbaar, sluitknop blijft zichtbaar, catalogus via οΌ‹-menu Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0149FgUQvuwxKKEdvQGmNngF --- VERSION | 2 +- public/css/image-catalog.css | 11 ++++++++--- public/css/teach.css | 10 +++++++++- public/js/core.js | 2 +- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/VERSION b/VERSION index 361cf3e..73f227f 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.3.60-beta +0.3.61-beta diff --git a/public/css/image-catalog.css b/public/css/image-catalog.css index 2995342..ab4ac6f 100644 --- a/public/css/image-catalog.css +++ b/public/css/image-catalog.css @@ -1,5 +1,7 @@ .image-catalog-modal{width:min(1080px,96vw);max-height:94vh} -.ic-tools{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(130px,.8fr)) auto;gap:8px;position:sticky;top:-24px;z-index:3;background:var(--surface);padding:8px 0 10px} +/* titelbalk met βœ• blijft altijd in beeld, ook na scrollen in een lange grid */ +.image-catalog-modal .gallery-head{position:sticky;top:-24px;z-index:4;background:var(--surface);padding:4px 0 8px;margin-top:-4px} +.ic-tools{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(130px,.8fr)) auto;gap:8px;position:sticky;top:12px;z-index:3;background:var(--surface);padding:8px 0 10px} .ic-tools input,.ic-tools select,.ic-add select,.ic-add input,.ic-editor input,.ic-editor select{min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface);color:var(--ink);font:inherit} .ic-quota{padding:8px 12px;margin-bottom:10px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:800} .ic-add{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface-2)} @@ -24,8 +26,11 @@ .img-quota-users{display:flex;flex-direction:column;gap:6px;margin-top:8px} body.hc .ic-card,body.hc .ic-add,body.hc .ic-tools input,body.hc .ic-tools select,body.hc .ic-editor{border-color:#000} @media(max-width:760px){ - .image-catalog-modal{width:100vw;max-height:100vh;height:100vh;border-radius:0;padding:16px} - .ic-tools{top:-16px;grid-template-columns:1fr 1fr;padding-top:4px}.ic-search,.ic-folders{grid-column:1/-1} + /* dvh i.p.v. vh: met een dynamische browserbalk (telefoon) is 100vh hoger + dan het zichtbare scherm, waardoor titel en sluitknop wegvielen */ + .image-catalog-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;padding:16px} + .image-catalog-modal .gallery-head{top:-16px} + .ic-tools{top:20px;grid-template-columns:1fr 1fr;padding-top:4px}.ic-search,.ic-folders{grid-column:1/-1} .ic-add-grid,.ic-editor-grid{grid-template-columns:1fr}.ic-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .ic-choose{grid-template-rows:96px auto auto}.ic-choose img{height:96px} .img-quota-row{grid-template-columns:1fr 1fr}.img-quota-row .am-name{grid-column:1/-1} diff --git a/public/css/teach.css b/public/css/teach.css index f28328c..edd676b 100644 --- a/public/css/teach.css +++ b/public/css/teach.css @@ -1333,10 +1333,18 @@ body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var( /* ---------- telefoon (≀600px) ---------- */ @media (max-width:600px){ - #toolbar{padding:0 8px; gap:6px;} + #toolbar{padding:0 8px; gap:6px; overflow-x:auto;} /* alleen de uil op kleine schermen, woordmerk verdwijnt */ .logo-word{display:none;} .tbtn{padding:0 10px; font-size:13px;} + /* de balk moet Γ©cht passen: zonder dit vielen πŸ’Ύ Opslaan en βš™ Instellingen + buiten beeld en zat πŸ–Ό (afbeeldingscatalogus) precies onder de duim - + elke mis-tik opende dan het schermvullende afbeeldingenscherm. Zoom en + de catalogus zijn op een telefoon niet essentieel (de catalogus blijft + via het οΌ‹-menu β†’ afbeelding bereikbaar), opslaan toont alleen πŸ’Ύ. */ + #btnZoomOut,#zoomPct,#btnZoomIn,#btnImages,#btnFs{display:none;} + #btnSave span{display:none;} + #userLbl{display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;} /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */ .am-row{flex-direction:column; align-items:stretch;} diff --git a/public/js/core.js b/public/js/core.js index 91e10d4..664a102 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version β€” shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.3.60-beta"; +const VERSION = "0.3.61-beta"; (function(){ const tag = document.getElementById("verTag"); tag.textContent = "v"+VERSION;