From 8e349f6ecade5f2368b96acac870a72136469467 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 16 Oct 2026 21:30:45 +0000 Subject: [PATCH] =?UTF-8?q?Kundenansicht=20neu=20E-Fix=20F3c:=2044-px-Tipp?= =?UTF-8?q?fl=C3=A4che=20f=C3=BCr=20K=C3=BCndigen,=20Widerrufen,=20Vertrag?= =?UTF-8?q?sbedingungen=20und=20Zahlen=20am=20Handy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "Verträge hier kündigen", "Vertrag widerrufen", die Vertragsbedingungen und das "Zahlen" der Zeile "Rechnung offen" waren 14-px-Textlinks von etwa 16 px Höhe. Am Handy jetzt inline-flex mit 44 px Mindesthöhe; das "Zahlen" steht rechts in der Zeile (der Trenner davor ist ein eigenes Element und am Handy ausgeblendet, textContent unverändert). Pin in test/knEfixCss.test.js, Tippflächen-Prüfung in den Werkzeug-Ansichten kn-p2-abo-privat und kn-p2-website-rechnung. Co-Authored-By: Claude Sonnet 5.5 --- public/neu/ansichten.css | 6 ++++++ public/neu/rechnung-offen.js | 3 ++- test/knEfixCss.test.js | 7 ++++++- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/public/neu/ansichten.css b/public/neu/ansichten.css index beb5817..675d9b1 100644 --- a/public/neu/ansichten.css +++ b/public/neu/ansichten.css @@ -67,6 +67,7 @@ /* ------------------------------------------------------------------ Website --- */ .kn-rechnung-offen { margin: 0 0 16px; padding: 8px 12px; border-radius: var(--kn-radius); background: var(--kn-orange-bg); color: var(--kn-orange-fg); font-weight: 500; } .kn-rechnung-offen a { text-decoration-color: currentColor; } +.kn-rechnung-offen .kn-rechnung-text { min-width: 0; } .kn-install-platz:empty { display: none; } .kn-install { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 0; border-top: 1px solid var(--kn-line); border-bottom: 1px solid var(--kn-line); } .kn-install-text { flex: 1; min-width: 0; } @@ -353,6 +354,11 @@ .kn-abo-karten { grid-template-columns: minmax(0, 1fr); gap: 8px; } .kn-statistik { grid-template-columns: minmax(0, 1fr); gap: 0; } .kn-zeilenlink { display: inline-flex; align-items: center; min-height: 44px; } + /* Pflicht- und Zahlungslinks (E-Fix F3): Verträge hier kündigen, Vertrag widerrufen, Vertragsbedingungen, Zahlen in der Zeile „Rechnung offen“ */ + .kn-kuendigen a, .kn-widerruf a, .kn-links a, .kn-rechnung-offen a { display: inline-flex; align-items: center; min-height: 44px; } + .kn-rechnung-offen { display: flex; align-items: center; justify-content: space-between; gap: 12px; } + .kn-rechnung-offen .kn-trenner { display: none; } + .kn-rechnung-offen a { flex: none; font-weight: 600; } .kn-pw { max-width: none; } .kn-tk-feld input:not([type="checkbox"]):not([type="file"]) { height: 44px; font-size: 16px; } .kn-stepper .kn-knopf { min-width: 44px; } diff --git a/public/neu/rechnung-offen.js b/public/neu/rechnung-offen.js index 5d1030a..6386384 100644 --- a/public/neu/rechnung-offen.js +++ b/public/neu/rechnung-offen.js @@ -32,5 +32,6 @@ export function rechnungOffenZeile(offen) { const teile = einzel ? ['Rechnung offen', einzel.number, fmtEuro(summe)] : [`${offen.length} Rechnungen offen`, fmtEuro(summe)] - return h('p', { class: 'kn-rechnung-offen' }, `${teile.filter(Boolean).join(' · ')} · `, link) + // Der Trenner vor dem Link ist ein eigenes Element: am Handy steht das „Zahlen“ rechts in der Zeile ohne hängenden Punkt (textContent bleibt gleich) + return h('p', { class: 'kn-rechnung-offen' }, h('span', { class: 'kn-rechnung-text' }, teile.filter(Boolean).join(' · ')), h('span', { class: 'kn-trenner' }, ' · '), link) } diff --git a/test/knEfixCss.test.js b/test/knEfixCss.test.js index d0f0c15..2b21e99 100644 --- a/test/knEfixCss.test.js +++ b/test/knEfixCss.test.js @@ -1,6 +1,6 @@ import { test } from 'node:test' import assert from 'node:assert/strict' -import { lies } from './support/knHuelle.js' +import { lies, handyTeil } from './support/knHuelle.js' // Abschlussprüfung Phase E (Fix-Welle): Pins für die CSS-Befunde der neuen Seite. Sie lesen nur Quelltext, kein Browser. const HUELLE = lies('huelle.css') @@ -35,3 +35,8 @@ test('F3: Fokusring der Shell-Reiter liegt innen (Spezifität über .kn [tabinde // der aktive Reiter liegt auf dem schwarzen Gleiter: heller Innenring dort assert.match(HUELLE, /\.kn \.kn-balken:has\(\.kn-t:focus-visible\) \.kn-gleiter\s*\{[^}]*outline:\s*2px solid #fff[^}]*outline-offset:\s*-3px/) }) + +test('F3: Pflicht- und Zahlungslinks haben am Handy eine Tippfläche von 44 px', () => { + const handy = handyTeil(lies('ansichten.css')) + assert.match(handy, /\.kn-kuendigen a,\s*\.kn-widerruf a,\s*\.kn-links a,\s*\.kn-rechnung-offen a\s*\{[^}]*display:\s*inline-flex[^}]*min-height:\s*44px/) +})