knso/Webklar-Kundenbereich
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Kundenansicht neu: Wasser-Leiste etwas tiefer, Seitenrand gleich Abstand nach unten

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-10-29 18:38:38 +00:00
1 parent 1f350ca432
commit 4fbe6bc026
2 files changed
+7 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

test/knWasserLeiste.test.js
+3 -2
View File
@@ -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)