From d93625439a51faf0575f245b6a14f10d24462e17 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Sat, 22 Aug 2026 21:42:15 +0200 Subject: [PATCH] Verwaltung: mehr Information pro Zeile statt leerer Flaeche Rueckmeldung 22.08.2026 mit Bildschirmfoto: die Anfragenliste wirkte blass und leer. Zu Recht -- sie zeigte Nummer, Name, Paket, Status, Datum. Das ist korrekt, beantwortet aber nicht die Fragen, die man beim Draufschauen WIRKLICH hat. Jetzt steht in jeder Zeile: * E-Mail direkt sichtbar (vorher musste man die Anfrage dafuer oeffnen) * Paket, Budgetrahmen, Wunschtermin als eigene Marken * Sprache, falls es NICHT Deutsch ist -- dann antwortet man auch in der richtigen Sprache * ob daraus schon ein Kunde geworden ist Statt eines Datums steht dort "vor 3 Tagen". Beim Datum muss man selbst rechnen, wie lange jemand schon wartet -- und genau das ist die Frage, die zaehlt. Ab sieben Tagen ohne Bearbeitung wird die Angabe rot: eine Anfrage, die eine Woche liegt, ist ein verlorener Kunde. Ein farbiger Streifen links codiert den Status zusaetzlich zur Textmarke. Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine Information -- zusammen mit dem Text ist sie ein schneller Anker beim Ueberfliegen. Der leere Zustand stellt nicht mehr nur fest, dass nichts da ist, sondern erklaert, WO Anfragen herkommen, und legt den Link zum Formular gleich daneben. Co-Authored-By: Claude Opus 5 --- webdesign/verwaltung.html | 109 ++++++++++++++++++++++++++++++++++---- 1 file changed, 100 insertions(+), 9 deletions(-) diff --git a/webdesign/verwaltung.html b/webdesign/verwaltung.html index 47220936..6714b2b0 100644 --- a/webdesign/verwaltung.html +++ b/webdesign/verwaltung.html @@ -74,7 +74,7 @@ } .vw-karte:hover { border-color: var(--wd-rand-stark); background: rgba(127,208,232,.05); } .vw-karte-nr { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--wd-blau); white-space: nowrap; } - .vw-karte-mitte { min-width: 0; } + .vw-karte-mitte { min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .vw-karte-name { font-weight: 700; color: var(--wd-text); } .vw-karte-info { font-size: .87rem; color: var(--wd-text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-karte-rechts { text-align: right; white-space: nowrap; } @@ -144,6 +144,49 @@ display: block; word-break: break-all; margin: .6rem 0; font-size: .84rem; color: var(--wd-gold); line-height: 1.5; } + + /* ---------- Anfragekarte, gehobene Fassung ---------- + Die erste Fassung zeigte Nummer, Name, Paket, Status, Datum. Das ist + korrekt, aber es beantwortet nicht die Fragen, die man beim + Draufschauen WIRKLICH hat: Wie dringend ist das? Wie viel Geld steckt + drin? Wie lange liegt es schon? Genau die stehen jetzt drin. + + Ein farbiger Streifen links codiert den Status zusaetzlich zur + Textmarke โ€” Farbe ALLEIN waere fuer farbfehlsichtige Menschen keine + Information, zusammen mit dem Text ist sie ein schneller Anker. */ + .vw-karte { + position: relative; + overflow: hidden; + padding-left: 1.5rem; + } + .vw-karte::before { + content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; + background: var(--wd-rand-stark); + } + .vw-karte--neu::before { background: var(--wd-gold); } + .vw-karte--pruefung::before, + .vw-karte--angebot::before { background: var(--wd-blau); } + .vw-karte--rueckfrage::before { background: var(--wd-lila); } + .vw-karte--angenommen::before, + .vw-karte--abgeschlossen::before { background: var(--wd-ok); } + .vw-karte--abgelehnt::before { background: var(--wd-fehler); } + + .vw-karte-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; } + .vw-mini { + font-size: .74rem; font-weight: 600; padding: .15rem .5rem; + border-radius: 6px; background: rgba(127,208,232,.09); + color: var(--wd-text-mid); border: 1px solid var(--wd-rand); + white-space: nowrap; + } + .vw-mini--geld { color: var(--wd-gold); border-color: rgba(232,200,119,.3); background: rgba(232,200,119,.07); } + .vw-mini--alt { color: var(--wd-fehler); border-color: rgba(255,157,157,.3); background: rgba(255,157,157,.06); } + + /* Leerer Zustand โ€” auch hier fuehren statt nur feststellen. */ + .vw-leer-gross { text-align: center; padding: clamp(2rem,6vw,3.5rem) 1.5rem; } + .vw-leer-gross-symbol { font-size: 2.6rem; opacity: .45; margin-bottom: .6rem; } + .vw-leer-gross h3 { margin-bottom: .3em; } + .vw-leer-gross p { max-width: 46ch; margin-left: auto; margin-right: auto; } + .vw-leer-hinweis { text-align: center; padding: 3rem 1rem; color: var(--wd-text-soft); } .vw-laedt { text-align: center; padding: 2.5rem 1rem; color: var(--wd-text-soft); } @@ -448,6 +491,29 @@ }); } + + /* Ganze Tage seit einem Zeitpunkt. Bewusst ueber den Kalendertag + gerechnet, nicht ueber 24-Stunden-Bloecke: eine Anfrage von gestern + 23:50 Uhr ist umgangssprachlich "gestern", nicht "vor 0 Tagen". */ + function tageSeit(zeit) { + if (!zeit) return 0; + var dann = new Date(zeit); + if (isNaN(dann.getTime())) return 0; + var a = new Date(dann.getFullYear(), dann.getMonth(), dann.getDate()); + var heute = new Date(); + var b = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate()); + return Math.round((b - a) / 86400000); + } + + function zeitText(tage) { + if (tage <= 0) return "heute"; + if (tage === 1) return "gestern"; + if (tage < 7) return "vor " + tage + " Tagen"; + if (tage < 14) return "vor einer Woche"; + if (tage < 31) return "vor " + Math.floor(tage / 7) + " Wochen"; + return "vor " + Math.floor(tage / 30) + " Monaten"; + } + function zeichneListe() { var liste = document.getElementById("vw-liste"); var gefiltert = alleAnfragen.filter(function (a) { @@ -460,23 +526,48 @@ }); if (!gefiltert.length) { - liste.innerHTML = '
' + - (alleAnfragen.length ? "Keine Anfrage passt zu diesem Filter." : - filterArchiv ? "Im Archiv liegt noch nichts." : "Noch keine Anfragen eingegangen.") + "
"; + /* Auch hier fuehren statt nur feststellen: Wer keine Anfragen hat, + soll wissen, WO sie herkommen -- und den Link gleich griffbereit + haben. */ + liste.innerHTML = alleAnfragen.length + ? '
Keine Anfrage passt zu diesem Filter.
' + : filterArchiv + ? '
Im Archiv liegt noch nichts. Archivierte Anfragen bleiben vollstaendig erhalten und lassen sich jederzeit zurueckholen.
' + : '
' + + '' + + "

Noch keine Anfragen

" + + '

Sobald jemand das Formular ausfuellt, landet die Anfrage hier โ€” mit allem, was er angegeben hat, und du bekommst eine Benachrichtigung.

' + + '
' + + 'Formular ansehen' + + 'Zur Seite' + + "
"; return; } liste.innerHTML = gefiltert.map(function (a) { - return '"; }).join("");