From 4fbe6bc026c8709e0e200e207c9286cbb2dc3489 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 29 Oct 2026 18:38:38 +0000 Subject: [PATCH] Kundenansicht neu: Wasser-Leiste etwas tiefer, Seitenrand gleich Abstand nach unten MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wunsch vom 29.10.: Die Pille steht etwas tiefer (iPhone: Safe-Area minus 6 px, rund 28 px statt 40 px; ohne Home-Balken 18 px) und hält zu den Seiten denselben Abstand wie nach unten (statt 12 px). Die 52 px hohen Knöpfe liegen weiter über dem Wisch-Balken. Co-Authored-By: Claude Opus 5.5 --- public/neu/wasser-leiste.css | 8 ++++---- test/knWasserLeiste.test.js | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/public/neu/wasser-leiste.css b/public/neu/wasser-leiste.css index 6d939d4..60309e0 100644 --- a/public/neu/wasser-leiste.css +++ b/public/neu/wasser-leiste.css @@ -81,13 +81,13 @@ .kn-wl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---------- Einbau in die Hülle (Handy) ---------- - Die Pille schwebt mit --kn-wl-luft Abstand über dem unteren Rand: auf dem iPhone ganz über dem Wisch-Balken (Safe-Area plus 6 px), sonst 14 px. - Darüber 10 px Luft zum Inhalt. --kn-wl-zone ist die Höhe dieser Zone; --kn-unten (Blatt, Chat) und der Abstand unter dem Inhalt rechnen damit. */ + Die Pille schwebt mit --kn-wl-luft Abstand über dem unteren Rand und hält denselben Abstand zu den Seiten (Wunsch 29.10.): auf dem iPhone + Safe-Area minus 6 px (rund 28 px; die 52 px hohen Knöpfe liegen trotzdem über dem Wisch-Balken), sonst 18 px. Darüber 10 px Luft zum Inhalt. --kn-wl-zone ist die Höhe dieser Zone; --kn-unten (Blatt, Chat) und der Abstand unter dem Inhalt rechnen damit. */ .kn { --kn-wl-h: 64px; } @media (max-width: 880px), (pointer: coarse) and (max-height: 500px) { - .kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(14px, calc(env(safe-area-inset-bottom) + 6px)); --kn-wl-zone: calc(var(--kn-zeile-h) + var(--kn-wl-luft)); --kn-unten: var(--kn-wl-zone); } + .kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(18px, calc(env(safe-area-inset-bottom) - 6px)); --kn-wl-zone: calc(var(--kn-zeile-h) + var(--kn-wl-luft)); --kn-unten: var(--kn-wl-zone); } .kn.kn-hat-streifen { --kn-unten: calc(var(--kn-wl-zone) + 44px); } .kn.kn-tastatur { --kn-unten: 0px; } @@ -98,7 +98,7 @@ .kn-leiste { border-top: 0; background: none; padding-bottom: var(--kn-wl-luft); pointer-events: none; } .kn-leiste-reel { position: relative; overflow: visible; } .kn-leiste .kn-rw { - position: absolute; right: 12px; bottom: 0; left: 12px; max-width: 480px; height: var(--kn-wl-h); margin: 0 auto; padding: 0; align-items: flex-end; + position: absolute; right: max(var(--kn-wl-luft), env(safe-area-inset-right)); bottom: 0; left: max(var(--kn-wl-luft), env(safe-area-inset-left)); max-width: 480px; height: var(--kn-wl-h); margin: 0 auto; padding: 0; align-items: flex-end; pointer-events: none; transition: transform 450ms var(--kn-feder), opacity 250ms ease, visibility 0s; } .kn-leiste .kn-rw > * { pointer-events: auto; } diff --git a/test/knWasserLeiste.test.js b/test/knWasserLeiste.test.js index 67dbfcd..5da931d 100644 --- a/test/knWasserLeiste.test.js +++ b/test/knWasserLeiste.test.js @@ -119,11 +119,12 @@ test('wasser-leiste.css: Pille wie die Vorlage, am Handy schwebend über dem Inh assert.match(css, /\.kn-wl\[data-art="reiter"\]\[data-eng\] \.kn-wl-item\s*\{[^}]*font-size:\s*12px/) for (const fx of ['pop', 'plane', 'drop', 'spin', 'glow', 'wave']) assert.match(css, new RegExp(`\\.kn-wl-ico\\[data-fx="${fx}"\\] svg\\s*\\{[^}]*animation:`)) assert.ok(handy.startsWith(HANDY)) - assert.match(handy, /\.kn\s*\{[^}]*--kn-wl-luft:\s*max\(14px, calc\(env\(safe-area-inset-bottom\) \+ 6px\)\)[^}]*--kn-unten:\s*var\(--kn-wl-zone\)/s) // ganz über dem Wisch-Balken des iPhones + assert.match(handy, /\.kn\s*\{[^}]*--kn-wl-luft:\s*max\(18px, calc\(env\(safe-area-inset-bottom\) - 6px\)\)[^}]*--kn-unten:\s*var\(--kn-wl-zone\)/s) // iPhone rund 28 px über dem Rand assert.match(handy, /\.kn\.kn-hat-streifen\s*\{\s*--kn-unten:\s*calc\(var\(--kn-wl-zone\) \+ 44px\)/) assert.ok(handy.indexOf('.kn.kn-tastatur') > handy.indexOf('.kn.kn-hat-streifen')) // Tastatur schlägt den Streifen assert.match(handy, /\.kn-leiste\s*\{[^}]*background:\s*none[^}]*pointer-events:\s*none/s) - assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*right:\s*12px;[^}]*left:\s*12px;[^}]*max-width:\s*480px/s) // breit: Rand 12 px, höchstens 480 px + assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*right:\s*max\(var\(--kn-wl-luft\), env\(safe-area-inset-right\)\);[^}]*left:\s*max\(var\(--kn-wl-luft\), env\(safe-area-inset-left\)\);[^}]*max-width:\s*480px/s) // seitlich derselbe Abstand wie unten, höchstens 480 px breit + assert.match(handy, /\.kn-leiste\s*\{[^}]*padding-bottom:\s*var\(--kn-wl-luft\)/) assert.match(handy, /\.kn-leiste \.kn-wl\s*\{\s*display:\s*flex;\s*width:\s*100%/) assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*pointer-events:\s*none/s); assert.match(handy, /\.kn-leiste \.kn-rw > \*\s*\{\s*pointer-events:\s*auto/) assert.match(css, /@media \(prefers-reduced-motion: reduce\)\s*\{[^@]*animation:\s*none !important/s)