DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
aa2e1a4ae2d7cc1e820f349c692b2ccd7b1ebeae
dogfather-universe/workspace/assets/css/support.css
T
DogFatherGitandClaude Opus 5 9f5dbb42e3 Support: melden mit Bild, und für die Leitung ein Eingang 
Filipe: „da fehlt auch eine support kachel. die jeder sieht. jeder
benutzen kann. jeder kann da probleme von der seite melden und
hinweisen. fotos mit schicken mit einem text. … so einfach wie
möglich, will nichts kompliziertes oder zu viel. kurz und knapp …
bei dogfather und der rechten hand soll die kachel anders gebaut sein
weil die sind die die sich um die probleme kümmern."

WARUM DAS NICHT DER VORHANDENE MELDEWEG IST. Es gibt ihn schon
(hilfe.html) und er sieht aehnlich aus. Drei Unterschiede machen ihn
zu etwas anderem:
  1. Er ist NICHT fuer alle -- in rechte.js steht
     `["gast","hand","admin"]`. Modis, Creator, Scouts, Manager und
     die linke Hand hatten gar keinen Weg, einen kaputten Knopf zu
     melden.
  2. Er kann keine Bilder. Bei „der Knopf tut nichts" ist ein
     Bildschirmfoto die halbe Antwort.
  3. Er ist bewusst schwer: strikter Wechsel, hoechstens drei offene
     Faelle, ein Betreff. Richtig bei einem Vorfall zwischen
     Menschen, zu viel fuer „das Datum steht falsch da".

Deshalb eigen und sehr kurz: EIN Feld, EIN Bild, fertig. Kein
Betreff, keine Kategorie, keine Dringlichkeitsstufe -- wer ein
Formular mit fuenf Feldern sieht, meldet den kleinen Fehler nicht,
und genau die kleinen erfaehrt sonst niemand.

DIE LEITUNG SIEHT ETWAS ANDERES: einen Eingang mit Zahlenband
(neu / in Arbeit / erledigt), drei Filtern und zwei Handgriffen --
„Ich kuemmere mich" und „Erledigt …". Zwei, nicht fuenf; eine
Zuweisung an eine Person und Prioritaeten waeren ein Ticketsystem
fuer zwei Menschen, die nebeneinander sitzen. Das Melde-Feld bleibt
auch fuer sie da, rutscht aber unter den Eingang.

Wer zumacht, schreibt einen Satz dazu -- der Melder sieht nur diesen
Satz, und ohne ihn weiss er nicht, ob etwas behoben wurde oder ob
niemand Zeit hatte. Beide Seiten bekommen eine Benachrichtigung.

UEBERNOMMEN STATT NEU ERFUNDEN:
  * `dateiErkennen` aus workspace-chat.js -- EXPORTIERT, nicht
    abgeschrieben. An ihr haengt die ganze Sicherheit der Uploads
    (der Typ kommt aus den ersten Bytes, nicht aus Name oder
    Content-Type), und eine zweite Fassung waere die, die beim
    naechsten Dateiformat vergessen wird.
  * Die zweigeteilte Sicht und `meldungFuer()` (gibt den Datensatz
    oder null zurueck, nie true/false) aus dem vertraulichen
    Meldeweg.
  * Der Upload-Weg (express.raw, Text im Kopf, Ordner unter
    DATEN_ORDNER, damit die Sicherungspruefung ihn findet).

DIE KACHEL BEKOMMT JEDER -- an EINER Stelle angehaengt: `bereicheFuer`
haengt sie an jede Rollenliste, statt sie in fuenf Listen
einzutragen. Genau so ist heute der Benachrichtigungs-Knopf auf 14
Seiten verschwunden. Dazu der Eintrag in rechte.js (ohne ihn
verschwindet die Kachel lautlos, `nurOffeneKacheln` filtert dagegen)
und in der Browser-Kachelliste fuer die Agentur-Rollen.

TON 44 GERECHNET, NICHT GEWAEHLT -- und dabei zweimal danebengelegen:
  * Ich habe erst einen eigenen Modus in kachel-farben.mjs gebaut.
    `tools/kachel-farbe-einzeln.mjs` gibt es aber seit dem 22.09. fuer
    genau diesen Zweck. Meine Dopplung ist wieder weg.
  * Von Hand hatte ich #bcdbff eingetragen. pruef-kachelfarben lehnte
    es ab (Buntheit 0,060, verlangt sind 0,12) -- und das vorhandene
    Werkzeug verteidigte es trotzdem, weil sein Abstand gut war. Ein
    Werkzeug, das einen regelwidrigen Zustand haelt, weil er zufaellig
    gut misst, behebt genau den Fehler nicht, fuer den es da ist.
    Behoben: Zuerst die Regeln, dann der Abstand. Ergebnis #fd6401,
    Abstand 0,0914 (engstes vorhandenes Paar: 0,0154).

DREI MESSFEHLER VON MIR, die wie schwere Befunde aussahen: `fetch`
verwirft den Host-Kopf (die Community kommt nur auf crew. herein),
die Community bestaetigt ihr Alter (`alter_ok`), und die Startroute
heisst /api/ich. Alle drei stehen in pruef-treff.mjs richtig.

Ein ECHTER Fehler kam dazu: support.html lud bereiche.js nicht, und
kopf.js stuerzte mit „Cannot read properties of undefined (reading
'LEITUNG')" ab -- sichtbar nur in der Browserkonsole. Und
pruef-css-klassen fand sofort, dass auch wahl.js fehlte.

Gemessen: pruef-support 45 Pruefungen, 0 Fehler (alle neun Rollen
kommen herein, jede sieht die Kachel, als Bild getarntes HTML wird
abgelehnt, eine fremde Meldung bleibt fremd, erledigt bleibt
erledigt). Dazu 24 Messungen am Bild in drei Groessen. Gruen:
pruef-kachelfarben (22), pruef-css-klassen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-24 01:32:55 +02:00

218 lines
7.7 KiB
CSS
Raw Blame History

/* ===================================================================
SUPPORT (24.09.2026)
Filipe: „es soll alles hoch profissionell gemacht werden aber so
einfach wie möglich, will nichts kompliziertes oder zu viel. kurz
und knapp und extrem geil."
Deshalb kein eigenes Aussehen: Kästen, Knöpfe und Marken kommen aus
start.css und module.css, so wie auf jeder anderen Seite. Hier steht
nur, was es woanders nicht gibt — das Melde-Feld, die Bildvorschau,
die Karte einer Meldung und das Zahlenband des Eingangs.
Eine eigene Farbwelt hätte die Seite fremd wirken lassen. Wer im
schlechtesten Moment etwas meldet, soll nicht zusätzlich merken,
dass er woanders ist.
=================================================================== */
.s-titel {
font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
margin: 0 0 12px;
}
.s-zahl {
display: inline-block; margin-left: 8px; padding: 1px 9px;
border-radius: 999px; font-size: .8rem; font-weight: 700;
background: color-mix(in srgb, var(--akzent) 15%, transparent);
color: var(--akzent);
}
/* ---------- Melden ------------------------------------------------- */
.s-melden {
background: var(--flaeche);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
padding: 18px 18px 16px;
margin-bottom: 22px;
}
/* Für die Leitung rutscht der Melde-Kasten unter den Eingang.
NICHT ueber `order` (24.09.2026, nachgemessen): `.inhalt` ist in
start.css ein gewoehnlicher Block, kein Flex-Behaelter -- `order`
haette dort gar nichts getan, und die Klasse waere eine Regel
gewesen, die aussieht, als wirke sie. Verschoben wird der Kasten
deshalb im DOM (support.js), und dieser Abstand gilt dann. */
.s-melden--unten { margin-top: 26px; margin-bottom: 0; }
.s-feld { display: block; }
.s-feld__schild {
display: block; margin-bottom: 6px;
font-size: .78rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--text-still);
}
.s-melden textarea {
width: 100%; box-sizing: border-box;
padding: 11px 12px;
font: inherit; font-size: .95rem; line-height: 1.5;
color: var(--text);
background: var(--grund);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
resize: vertical; min-height: 96px;
}
.s-melden textarea:focus {
outline: 2px solid var(--akzent); outline-offset: 1px;
border-color: transparent;
}
.s-bild {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 12px;
}
.s-bild__name { font-size: .8rem; color: var(--text-still); }
.s-vorschau { margin-top: 12px; }
.s-vorschau img {
display: block; max-width: 100%; max-height: 260px;
width: auto; height: auto;
border-radius: var(--radius-klein);
border: 1px solid var(--rand);
}
.s-knopfreihe {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-top: 14px;
}
.s-hinweis { font-size: .83rem; color: var(--text-still); }
/* ---------- Der Eingang -------------------------------------------- */
.s-eingang__kopf {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
/* Das Zahlenband: je Stand eine Zahl gross, das Wort klein darunter.
Dieselbe Bauart wie in den Personenkacheln -- man vergleicht mit dem
Auge, statt eine Zeile zu lesen. */
.s-bilanz { display: flex; gap: 18px; }
.s-bilanz__feld { display: flex; flex-direction: column; gap: 1px; }
.s-bilanz__zahl {
font-size: 1.3rem; font-weight: 700; line-height: 1.1; color: var(--text);
}
.s-bilanz__wort { font-size: .75rem; color: var(--text-still); }
.s-bilanz__feld[data-stand="neu"] .s-bilanz__zahl { color: var(--warn); }
.s-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.s-filter__knopf {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 13px; border-radius: 999px;
font: inherit; font-size: .84rem; font-weight: 600;
color: var(--text-still);
background: transparent;
border: 1px solid var(--rand);
cursor: pointer;
}
.s-filter__knopf:hover { color: var(--text); border-color: var(--akzent); }
.s-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.s-filter__knopf[aria-pressed="true"] {
color: var(--akzent);
border-color: var(--akzent);
background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.s-filter__zahl { font-size: .78rem; opacity: .8; }
/* ---------- Eine Meldung ------------------------------------------- */
.s-karte {
background: var(--flaeche);
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
padding: 15px 16px 14px;
margin-bottom: 12px;
}
/* Ein schmaler Streifen links sagt den Stand, bevor man liest --
gedeckt beigemischt, nicht als Leuchtbalken. */
.s-karte { --s: var(--text-still); border-left: 3px solid color-mix(in srgb, var(--s) 55%, transparent); }
.s-karte[data-stand="neu"] { --s: var(--warn); }
.s-karte[data-stand="in_arbeit"] { --s: var(--akzent); }
/* --k-gut ist die Hausfarbe fuer "passt, erledigt, freigegeben"
(gate.css). Gemessen nachgesehen, nicht geraten: --gut gibt es
nicht, und ein Ersatzwert in Klammern haette hier still eine
sechste Gruenschattierung ins Haus gebracht. */
.s-karte[data-stand="erledigt"] { --s: var(--k-gut); opacity: .82; }
/* Wer aus einer Benachrichtigung kommt, soll sehen, welche gemeint
ist -- ohne Blinken, ohne Bewegung. */
.s-karte[data-hervor="ja"] {
border-color: var(--akzent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.s-karte__kopf {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: 9px;
}
.s-marke {
padding: 2px 10px; border-radius: 999px;
font-size: .75rem; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase;
background: color-mix(in srgb, var(--s) 16%, transparent);
color: var(--s);
}
.s-karte__von { font-size: .88rem; font-weight: 600; color: var(--text); }
.s-karte__zeit { font-size: .78rem; color: var(--text-still); margin-left: auto; }
.s-karte__text {
margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text);
/* Absätze bleiben erhalten. Wer „Schritt 1 … Schritt 2 …"
untereinander schreibt, soll es so wiederfinden. */
white-space: pre-wrap; overflow-wrap: anywhere;
}
.s-karte__wo { margin: 8px 0 0; font-size: .78rem; color: var(--text-still); }
.s-karte__bild { margin-top: 11px; }
.s-karte__bild img {
display: block; max-width: 100%; max-height: 300px;
width: auto; height: auto;
border-radius: var(--radius-klein);
border: 1px solid var(--rand);
}
.s-karte__bild a:focus-visible img { outline: 2px solid var(--akzent); outline-offset: 2px; }
.s-antwort {
margin-top: 12px; padding: 10px 12px;
background: color-mix(in srgb, var(--akzent) 8%, transparent);
border-left: 2px solid color-mix(in srgb, var(--akzent) 50%, transparent);
border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.s-antwort__schild {
display: block; margin-bottom: 4px;
font-size: .75rem; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--akzent);
}
.s-antwort__text {
margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text);
white-space: pre-wrap; overflow-wrap: anywhere;
}
.s-karte__tun { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.s-leer {
padding: 22px 16px; text-align: center;
font-size: .92rem; color: var(--text-still);
background: var(--flaeche);
border: 1px dashed var(--rand);
border-radius: var(--radius-klein);
}
/* ---------- Am Handy ------------------------------------------------ */
@media (max-width: 560px) {
.s-melden { padding: 15px 14px 14px; }
.s-karte { padding: 13px 14px 12px; }
.s-karte__zeit { margin-left: 0; width: 100%; }
.s-bilanz { gap: 14px; }
.s-eingang__kopf { gap: 10px; }
}
Reference in New Issue View Git Blame Copy Permalink