DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a9e0834cfb808a99428075c585b7bae6e894a219
dogfather-universe/workspace/scouting.html
T
DogFatherGit a9e0834cfb Nichts wird mehr nach links oder rechts geschoben 
Filipe, 28.09.2026: "ich will auch nicht dass man sachen nach links
und rechts schieben muss. perfektion das untereinander. ich will
niemals irgendwas nach links oder rechts swippen muessen." Dazu ein
Bildschirmfoto der Tafel "Gestaltung" mit waagerechter Rollleiste.

GEMESSEN, NICHT GERATEN

Ein grep nach `overflow-x` findet nur die absichtlichen Roller. Er
findet nicht die Stelle, an der ein Inhalt breiter ist als sein
Kasten und der Browser von sich aus eine Rollleiste anhaengt -- und
genau das war auf dem Bild zu sehen. `server/mess-quer.mjs` geht
deshalb im echten Browser jedes Element durch, auf fuenf
Bildschirmgroessen, in allen sieben Registern, bei offener und
zugeklappter Regie und in allen fuenf Anordnungen.

Erster Lauf: 78 Stellen. Davon waren 54 KEINE -- `overflow-x: hidden`
ist abgeschnittener Text, dort laesst sich nichts schieben. Die
Messung trennt das jetzt; wer es mitzaehlt, findet die echten nicht
mehr. Uebrig blieben vier Ursachen:

  1. DIE REGISTER rollten absichtlich waagerecht. Auf 412 px standen
     von 605 px Registern 193 rechts ausserhalb -- dass es
     "Gestaltung" und "Spenden" gibt, erfuhr man nur beim Wischen auf
     Verdacht. Sie brechen jetzt um. Das kostet oben rund 45 Pixel
     und bringt Gewissheit dafuer.

  2. `.stufen` STAND ZWEIMAL IN reaktion.css -- einmal fuer die
     Stufenleiter der Spenden (`display: grid`), 600 Zeilen spaeter
     fuer die Chat-Leiste Offen/Team/Zu (`display: flex`). Die
     spaetere gewinnt: Die Stufenleiter stellte ihre drei Stufen
     NEBENEINANDER, 572 Pixel in einer 327 Pixel schmalen Spalte.
     Das ist die Rollleiste auf Filipes Bild. Die Chat-Leiste heisst
     jetzt `.chatstufen` / `.chatstufe`.
     Dritter Fall dieser Art nach `.tafel` und `.stufe-knopf`.

  3. DIE TAFELN KONNTEN NICHT SCHRUMPFEN. Ein Gitterfeld hat von
     sich aus `min-width: auto` und besteht auf seinem unteilbarsten
     Inhalt. Mit `minmax(0, 1fr)` und `min-width: 0` bricht jetzt
     alles um, statt hinauszulaufen.

  4. DIE TRANSPORTLEISTE ragte am Handy 76 Pixel ueber beide Kanten
     ("Naechstes" war nur halb zu sehen). Zwei Gruende: `.transport__teil`
     hatte kein `flex-wrap` (die mittlere Gruppe schon -- zwei Regeln
     fuer dieselbe Sache, eine vergessen), und im Umschalter steht
     ein ganzer Videotitel, der als Flex-Kind auf seiner vollen
     Breite bestand.

NEBENBEFUND: EINE FESTE ZAHL VON GESTERN

Der Saal stand auf `height: calc(100dvh - 69px)` -- 69 war einmal
die gemessene Hoehe der Kopfleiste. Sie ist 73 geworden, und der
Saal endete damit 4 Pixel unter dem Fensterrand: Der Play-Knopf war
nur mit Scrollen zu erreichen. Die Antwort ist keine neue Zahl,
sondern eine Regel, die misst -- der Koerper ist jetzt eine Spalte,
die Kopfleiste nimmt, was sie braucht, der Saal bekommt den Rest.
(Dabei noch ein Spezifitaetsunfall: `.reaktion-seite` (0,1,0)
verliert gegen `body.start` (0,1,1) aus start.css.)

NEUE WACHEN

  - `mess-quer.mjs` mit Gegenprobe (ohne die Reparaturen findet sie
    47 px, mit ihnen nichts).
  - pruef-reaktion: kein absichtliches `overflow-x: auto` mehr; und
    zwei Grundregeln derselben Klasse mit verschiedenem `display`
    sind ein Namensstreit. Der bisherige Waechter verglich nur
    ZWISCHEN Stilvorlagen -- `.stufen` stand zweimal in DERSELBEN.
  - pruef-css-klassen: jede Klammer hat ihr Gegenstueck. Beim
    Umschreiben blieb heute das Ende einer Regel ohne ihren Anfang
    stehen; der Browser wirft die Zeile weg und schliesst dafuer den
    naechsten @media-Block zu frueh. Drei Befunde sahen daraufhin wie
    Programmfehler aus.

MESSUNG NACHGEZOGEN

`mess-reaktion` stammte noch aus der Zeit vor "Regie links" und
"drei Kacheln" und meldete drei Dinge, die keine Fehler waren --
gemessen gegen den Stand von HEAD: identisch rot. Sie misst ausserdem
seit heute mit FINGER statt Mauszeiger; ohne `hasTouch` greift keine
einzige Regel aus `@media (pointer: coarse)`, und dort stehen alle
44-Pixel-Beruehrziele des Hauses.

OFFEN UND AUFGESCHRIEBEN

Am Handy bleibt bei offener Regie vom Bild nichts (0 px). Der Mangel
besteht seit dem Umbau "Regie links"; drei Versuche, ihn heute zu
loesen, haben Knoepfe verdeckt -- und ein verdeckter Knopf ist
schlimmer als ein kleines Bild. Die Versuche und der richtige Weg
(Tempo-Gruppe hinter einen Knopf, wie "Aa" im Chat) stehen in
reaktion.css. `mess-reaktion` meldet ihn als dritten Ausgang: nicht
als Fehler und nicht als bestanden.

GEPRUEFT
  pruef-reaktion     384 / 0   (vorher 379)
  pruef-spenden      172 / 0
  pruef-buehne        36 / 0
  pruef-css-klassen, -tippziele, -struktur, -handy: ohne Befund
  mess-quer          EXIT 0 -- 28 Stellen, fuenf Groessen, nichts rollt
  mess-reaktion      EXIT 0, 1 benannter offener Punkt
  mess-buehne        EXIT 0
2026-09-29 02:34:09 +02:00

187 lines
8.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Scouting · Spicy & Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609290232" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609290232" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609290232" />
<link rel="stylesheet" href="assets/css/start.css?v=202609290232" />
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609290232" />
<link rel="stylesheet" href="assets/css/scouting.css?v=202609290232" />
<link rel="stylesheet" href="assets/css/module.css?v=202609290232" />
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
genau diesen Dateinamen auf crew-haus.css um, und die Seite
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
ohne Umfaerben im Browser, ohne Flackern. -->
<link rel="stylesheet" href="assets/css/haus.css?v=202609290232" />
</head>
<body class="start">
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Scouting</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt inhalt--breit">
<section class="kopf-zeile">
<div>
<p class="marke">Scout-CRM</p>
<h1 class="titel">Pipeline</h1>
<p class="unterzeile" id="unterzeile">Vom ersten Fund bis zur Übergabe – nachvollziehbar statt im Kopf.</p>
</div>
<div class="steuerung">
<div id="scoutwahl-block" hidden>
<label class="feld-schild" for="f-scout">Scout</label>
<select id="f-scout"><option value="">Alle Scouts</option></select>
</div>
<button type="button" class="knopf knopf--klein" id="neu-auf">Neuer Kontakt</button>
</div>
</section>
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- Follow-ups: der Teil, der ohne System am ehesten untergeht. -->
<section class="faellig" id="faellig" hidden>
<p class="faellig__titel">Follow-up fällig</p>
<ul class="faellig__liste" id="faellig-liste"></ul>
</section>
<section class="neu" id="neu-block" hidden>
<h2 class="neu__titel">Neuer Kontakt</h2>
<form id="neu-form">
<div class="neu__raster">
<div class="feld feld--breit">
<label class="feld-schild" for="n-name">Name</label>
<input id="n-name" maxlength="120" required placeholder="Wie heißt die Person?" />
</div>
<div class="feld">
<label class="feld-schild" for="n-plattform">Plattform</label>
<input id="n-plattform" maxlength="60" placeholder="z. B. TikTok" />
</div>
<div class="feld">
<label class="feld-schild" for="n-handle">Profil / Handle</label>
<input id="n-handle" maxlength="120" placeholder="@…" />
</div>
<div class="feld">
<label class="feld-schild" for="n-prio">Priorität</label>
<select id="n-prio">
<option value="hoch">Hoch</option>
<option value="mittel" selected>Mittel</option>
<option value="niedrig">Niedrig</option>
</select>
</div>
<div class="feld" id="n-scout-block" hidden>
<label class="feld-schild" for="n-scout">Scout</label>
<select id="n-scout"><option value="">– niemandem zugeordnet –</option></select>
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-aktivitaet">Aktivität &amp; LIVE-Fokus</label>
<input id="n-aktivitaet" maxlength="3000" placeholder="Wie oft LIVE? Welche Zeiten? Welches Format?" />
</div>
<div class="feld feld--breit">
<label class="feld-schild" for="n-potenzial">Potenzial &amp; Stil</label>
<input id="n-potenzial" maxlength="3000" placeholder="Was macht die Person besonders?" />
</div>
<div class="feld">
<label class="feld-schild" for="n-followup">Nächster Follow-up</label>
<input id="n-followup" type="date" />
</div>
<!-- DIE DREI QUALIFIZIERENDEN FRAGEN (11.09.2026).
Sie stehen schon beim Anlegen da, weil sie sonst nie
gestellt werden: "Schon im Netzwerk?" entscheidet, ob sich
der ganze Rest lohnt, und wer sie erst nach drei Nachrichten
stellt, hat drei Nachrichten zu viel geschrieben.
Alle drei sind freiwillig. Ein Pflichtfeld beim Anlegen
wäre die sichere Art, dafür zu sorgen, dass Kontakte gar
nicht erst eingetragen werden. -->
<div class="feld">
<label class="feld-schild" for="n-netzwerk">Schon im Netzwerk?</label>
<select id="n-netzwerk">
<option value="">– noch nicht gefragt –</option>
<option value="nein">frei</option>
<option value="ja">schon im Netzwerk</option>
<option value="unbekannt">noch nicht gefragt</option>
</select>
</div>
<div class="feld">
<label class="feld-schild" for="n-land">Land</label>
<select id="n-land">
<option value="">– nicht angegeben –</option>
<option value="DE">Deutschland</option>
<option value="AT">Österreich</option>
<option value="CH">Schweiz</option>
<option value="LU">Luxemburg</option>
<option value="andere">anderes Land</option>
</select>
</div>
<div class="feld">
<label class="feld-schild" for="n-follower">Follower</label>
<input id="n-follower" maxlength="14" inputmode="numeric" placeholder="z. B. 12400 oder 12,4k" />
</div>
</div>
<p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
<div class="neu__knoepfe">
<button type="submit" class="knopf knopf--klein" id="n-speichern">Aufnehmen</button>
<button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
</div>
</form>
</section>
<div id="pipeline" aria-busy="true"><p class="leise">Pipeline wird geladen …</p></div>
</main>
<!-- Zugangscode nach dem Onboarding: genau einmal sichtbar. -->
<div class="schleier" id="code-schleier" hidden>
<div class="code-fenster" role="dialog" aria-modal="true" aria-labelledby="code-titel">
<p class="marke">Onboarding gestartet</p>
<h2 class="code-fenster__titel" id="code-titel">Zugangscode</h2>
<p class="code-fenster__text">
Dieser Code wird <strong>genau einmal</strong> angezeigt und ist danach nicht mehr
abrufbar. Gib ihn persönlich weiter, nicht über einen offenen Kanal.
</p>
<p class="code-fenster__code" id="code-wert">—</p>
<div class="neu__knoepfe">
<button type="button" class="knopf knopf--klein" id="code-kopieren">Kopieren</button>
<button type="button" class="knopf-still" id="code-zu">Habe ich notiert</button>
</div>
</div>
</div>
<script src="assets/js/meldung.js?v=202609290232" defer></script>
<script src="assets/js/nachfrage.js?v=202609290232" defer></script>
<script src="assets/js/wahl.js?v=202609290232" defer></script>
<script src="assets/js/bereiche.js?v=202609290232" defer></script>
<script src="assets/js/installieren.js?v=202609290232" defer></script>
<script src="assets/js/kopf.js?v=202609290232" defer></script>
<script src="assets/js/glocke.js?v=202609290232" defer></script>
<script src="assets/js/scouting.js?v=202609290232" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink