Changeset 9ef3c56 in Klonkt

Timestamp:

06/19/2026 11:50:23 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

4ad669a

Parents:

a0bff44

Message:

fix(mobile): hide fixed bottom bars when the keyboard is open

Site-wide: body.kb-open (set via visualViewport when the keyboard opens +
an input field has focus) hides the bottom tab + mini player, so they no
longer float over or overlap input fields while typing. style.css?v=12.

Co-Authored-By: Claude <noreply@…>

Files:

• CHANGELOG.md (modified) (1 diff)
• src/assets/css/style.css (modified) (1 diff)
• src/views/shell.ejs (modified) (2 diffs)

CHANGELOG.md

@@ -15 +15 @@
 
 ### Opgelost
+- Mobiel toetsenbord vs. layout (site-breed): zodra het toetsenbord opent tijdens
+  het typen, verbergen de vaste onderbalken (bottom-tab + mini-speler) zich, zodat
+  ze niet meer over het invoerveld zweven of het overlappen. Ze komen terug zodra
+  het toetsenbord sluit. (Detectie via visualViewport → `body.kb-open`.)
 - Post bewerken op mobiel opende niet meer meteen het toetsenbord: de titel kreeg
   niet langer automatisch focus (`autofocus` weg). Op desktop focust de titel nog wel.

src/assets/css/style.css

@@ -620 +620 @@
 .pcms-main { padding-bottom: 5.5rem; }
 body.has-audio-player .pcms-main { padding-bottom: 5.5rem; }
+
+/* Mobiel toetsenbord open (body.kb-open, gezet via visualViewport in shell.ejs):
+   verberg de vaste onderbalken — anders zweven de bottom-tab + mini-speler boven
+   het toetsenbord of overlappen ze het invoerveld. Ze komen terug zodra het
+   toetsenbord sluit. De extra clearance onderaan is dan ook niet meer nodig. */
+body.kb-open .bottom-tab,
+body.kb-open .audio-player { display: none !important; }
+body.kb-open .pcms-main { padding-bottom: 1rem; }
 
 /* ============================================================

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=11">
+<link rel="stylesheet" href="/assets/css/style.css?v=12">
 
 <!-- Audio player styles: loaded on every page so the mini-player works
@@ -528 +528 @@
 </script>
 
+<!-- Mobiel toetsenbord vs. site-layout: zet body.kb-open zodra het toetsenbord
+     open is (visual viewport fors korter dan het venster) ÉN er een invoerveld
+     focus heeft. CSS verbergt dan de vaste onderbalken (bottom-tab + mini-speler)
+     zodat ze niet over het invoerveld zweven. -->
+<script>
+(function () {
+  var vv = window.visualViewport;
+  if (!vv) return;
+  function isField(el) {
+    if (!el) return false;
+    var t = el.tagName;
+    return t === 'INPUT' || t === 'TEXTAREA' || el.isContentEditable;
+  }
+  function update() {
+    var open = (window.innerHeight - vv.height) > 150 && isField(document.activeElement);
+    document.body.classList.toggle('kb-open', open);
+  }
+  vv.addEventListener('resize', update);
+  vv.addEventListener('scroll', update);
+  document.addEventListener('focusin', function () { setTimeout(update, 60); });
+  document.addEventListener('focusout', function () { setTimeout(update, 60); });
+})();
+</script>
+
 <!-- PWA install prompt — show button when browser fires beforeinstallprompt -->
 <script>