Kundenansicht neu (Aufträge): Rückfrage-Zeile als ganze Link-Zeile, Einklappen ohne verschachtelte Regel, Balken im Pseudo-Element
- Die Zeile "Wir brauchen eine Info von dir · Im Chat antworten" ist ein Link (#chat) mit großer Tippfläche am Handy; unterstrichen ist nur der zweite Teil. - Browserlauf: .kn-einklappbar:not(.is-open) [data-extra] verbarg die Zeilen einer aufgeklappten Zeitleiste, wenn der äußere Wrapper zu war. Die Wrapper haben jetzt eigene Klassen und Regeln nur für direkte Kinder (mit Regressionstest). - Die Fläche der Balken-Abschnitte liegt im Pseudo-Element, der Lesetext darunter bleibt auf Weiß (Gate low-contrast). - Das Modul steht in den Listen der Quelltext- und Stil-Tests der Ansicht-Module. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
2064bddba6
commit
d62f8b805e
5 files changed
+56
-13
No files matched your search
@@ -119,7 +119,8 @@ export function zeitleistenZeilen(auftrag, jetzt = new Date()) {
|
||||
const LEER = 'Es wurden noch keine Arbeiten dokumentiert.'
|
||||
const KEINE_EINTRAEGE = 'Noch keine Arbeiten dokumentiert.'
|
||||
|
||||
/** Knopf, der den nächsten Wrapper [data-einklappbar] auf- und zuklappt (is-open); die Zeilen dahinter tragen [data-extra]. */
|
||||
/** Knopf, der den nächsten Wrapper [data-einklappbar] auf- und zuklappt (is-open); die Zeilen dahinter tragen [data-extra]. Die CSS-Regeln dazu gelten nur für
|
||||
direkte Kinder (ansichten.css, .kn-az-…): die allgemeine Regel .kn-einklappbar würde bei verschachtelten Wrappern auch offene Zeilen verbergen. */
|
||||
function umschalter({ attribut, klasse, mehr, weniger }) {
|
||||
const knopf = h('button', { type: 'button', class: klasse, [attribut]: true, 'aria-expanded': 'false' }, mehr)
|
||||
knopf.addEventListener('click', () => {
|
||||
@@ -146,7 +147,7 @@ function baueZeitleiste(zeilen) {
|
||||
const zeile = (z, extra) => h('li', { 'data-extra': extra },
|
||||
z.datum ? h('time', { class: 'kn-az-datum', datetime: z.iso || null }, z.datum) : h('span', { class: 'kn-az-datum', 'aria-hidden': 'true' }),
|
||||
h('span', { class: 'kn-az-text' }, z.text))
|
||||
return h('div', { class: 'kn-az-zeitleiste kn-einklappbar', 'data-einklappbar': true },
|
||||
return h('div', { class: 'kn-az-zeitleiste', 'data-einklappbar': true },
|
||||
h('ol', { class: 'kn-az-zeilen' }, sichtbar.map((z) => zeile(z, false)), rest.map((z) => zeile(z, true))),
|
||||
rest.length ? umschalter({ attribut: 'data-mehr', klasse: 'kn-textknopf kn-az-mehr', mehr: 'mehr anzeigen', weniger: 'weniger anzeigen' }) : null)
|
||||
}
|
||||
@@ -158,7 +159,8 @@ function baueAuftragsBlock(auftrag, jetzt, extra) {
|
||||
h('div', { class: 'kn-az-kopf' },
|
||||
h('h3', { class: 'kn-az-titel' }, auftrag.topic || 'Dein Auftrag'),
|
||||
status.label ? h('span', { class: K.pille[statusTon(status.tone)] }, status.label) : null),
|
||||
braucheInfo(auftrag) ? h('p', { class: 'kn-az-info' }, 'Wir brauchen eine Info von dir · ', h('a', zuAnsicht('chat'), 'Im Chat antworten')) : null,
|
||||
// Die ganze Zeile führt in den Chat (große Tippfläche am Handy); unterstrichen ist nur „Im Chat antworten“
|
||||
braucheInfo(auftrag) ? h('p', { class: 'kn-az-info' }, h('a', zuAnsicht('chat'), 'Wir brauchen eine Info von dir · ', h('span', { class: 'kn-az-info-link' }, 'Im Chat antworten'))) : null,
|
||||
baueBalken(status),
|
||||
zeilen.length ? baueZeitleiste(zeilen) : h('p', { class: 'kn-az-leer' }, KEINE_EINTRAEGE))
|
||||
}
|
||||
@@ -167,7 +169,7 @@ function baueAuftragsBlock(auftrag, jetzt, extra) {
|
||||
export function baueAktivitaet(tickets, jetzt = new Date()) {
|
||||
const { sichtbar, aeltere } = gruppiereAuftraege(tickets)
|
||||
if (!sichtbar.length) return h('p', { class: 'kn-hinweis' }, LEER)
|
||||
return h('div', { class: 'kn-az-liste kn-einklappbar', 'data-einklappbar': true },
|
||||
return h('div', { class: 'kn-az-liste', 'data-einklappbar': true },
|
||||
h('ul', { class: 'kn-az-auftraege' }, sichtbar.map((a) => baueAuftragsBlock(a, jetzt, false)), aeltere.map((a) => baueAuftragsBlock(a, jetzt, true))),
|
||||
aeltere.length ? umschalter({ attribut: 'data-aeltere', klasse: 'kn-knopf kn-az-aeltere', mehr: 'Ältere Aufträge anzeigen', weniger: 'Weniger anzeigen' }) : null)
|
||||
}
|
||||
Reference in new issue
Block a user