DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Der Regieplatz sind jetzt Kacheln

Browse Source 
Filipe, 28.09.2026, zum ersten Versuch: "ich wollte was hoch
professionelles wo rechts links und unten kacheln sind wo alles drin
ist, schoen verteilt. wieso so einen kleinen scheiss."

Er hat recht, und es steht auf seinem Bildschirmfoto:

  DIE LINKE SPALTE WAR LEER. "Was laeuft" zeigte nur einen Titel --
  und wenn nichts laeuft, steht dort nichts. Ein grosses schwarzes
  Loch neben einer vollen Spalte sieht nicht nach Aufteilung aus,
  sondern nach Fehler.

  ES WAREN KEINE KACHELN. Zwei Spalten mit einer Trennlinie sind eine
  Teilung, keine Gliederung. Ohne Rahmen, ohne Kopf, ohne eigenen
  Grund fehlt genau das, was eine Flaeche aufgeraeumt aussehen
  laesst.

  DIE LEISTE WAR EIN KASTEN MIT LUFT. `1fr auto 1fr` schiebt drei
  kleine Knopfgruppen an die Raender eines 1400 Pixel breiten
  Kastens. Leere zwischen Knoepfen liest sich als "hier fehlt noch
  etwas".

WAS JETZT DASTEHT

  LINKS   Eine Kachel "Was laeuft" mit VORSCHAUBILD -- damit ist sie
          immer gefuellt. Ohne Video steht der Satz darin, der sagt,
          was zu tun ist; ein leerer Kasten sagt nur, dass etwas
          fehlt. Sie geht ueber beide Zeilen der rechten Seite,
          sonst franste eine Seite unten aus.
  RECHTS  Zwei Kacheln: "Die Sendung" (Titel, YouTube, Beginn) und
          "Bereitlegen" (zweites Video, Vorschaubild, Zuruecksetzen).
  UNTEN   Die Transportleiste, dichter: jede Gruppe beschriftet
          ("Tempo", "Weiter"), und der Umschalter ist aus der linken
          Kachel hierher gewandert. Er ist ein Handgriff IM Live wie
          "Naechstes" -- und fuellt die rechte Seite, die vorher leer
          war.

Das Vorschaubild nimmt ein eigenes, wenn eines eingetragen ist, sonst
YouTubes. Laedt keines, tritt der Platzhaltersatz ein: Ein Bild, das
404 antwortet, steht genauso im Dokument wie eines, das laedt -- auf
dem Bildschirm ist an seiner Stelle nichts.

UND EIN FUND DER HAUSPRUEFUNG: `kachel` gibt es bereits in start.css
und module.css. Ein Namensstreit ueber Stilblaetter hinweg ist genau
die Sorte Fehler, die spaeter irgendwo ganz anders etwas verschiebt
-- und den niemand dort suchen wuerde. Heisst jetzt `regiekachel`.

pruef-reaktion 369/0 - pruef-css-klassen ok - pruef-tippziele 11/0

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-28 20:12:21 +02:00
co-authored by Claude Opus 5
parent 99e62eebbe
commit 6033d1b6f2
48 changed files with 870 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/reaktion.html
+89 -77
View File
@@ -7,14 +7,14 @@
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609282002" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609282002" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/start.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/module.css?v=202609282002" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609282002" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609282012" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609282012" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609282012" />
<link rel="stylesheet" href="assets/css/start.css?v=202609282012" />
<link rel="stylesheet" href="assets/css/reaktion.css?v=202609282012" />
<link rel="stylesheet" href="assets/css/spendenkarte.css?v=202609282012" />
<link rel="stylesheet" href="assets/css/module.css?v=202609282012" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609282012" />
</head>
<body class="start reaktion-seite" data-stand="laedt">
@@ -429,87 +429,96 @@
und er liegt deshalb immer an derselben Stelle. -->
<div class="regieplatz">
<!-- ---- LINKS: was läuft ---------------------------- -->
<div class="regieplatz__seite">
<h4 class="regieplatz__ueber">Was läuft</h4>
<div class="spur" id="spur">
<div class="spur__kopf">
<span class="spur__marke" id="spur-marke">Läuft</span>
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
</div>
<!-- Der Umschalter steht bei dem, was läuft, und nicht
bei den Feldern: Er ist eine Entscheidung im Live,
keine Eintragung davor. -->
<button type="button" class="spur__knopf spur__knopf--tausch" id="v-tauschen"
hidden title="Zwischen den beiden Videos wechseln (T)">
Wechseln zu <span id="v-tausch-titel">…</span>
</button>
<!-- ==== LINKS: DIE KACHEL „WAS LÄUFT" =================
Sie geht über die ganze Höhe der rechten Seite und
trägt ein VORSCHAUBILD. Damit ist sie immer gefüllt --
auch bevor etwas eingetragen ist. Vorher stand hier
nur ein Titel, und wenn keiner da war, ein schwarzes
Loch neben einer vollen Spalte. -->
<section class="regiekachel kachel--laeuft" id="spur">
<div class="regieregiekachel__kopf">
<h4 class="regieregiekachel__ueber">Was läuft</h4>
<span class="spur__marke" id="spur-marke">Läuft</span>
</div>
<!-- ==== DAS ZWEITE VIDEO ==========================
Nicht die Warteschlange: Die ist eine Reihenfolge,
eins nach dem anderen, und das Gespielte ist danach
heraus. Hier stehen ZWEI nebeneinander, und jedes
merkt sich seine Stelle. -->
<label class="pult__feld">
<span>Zweites Video (zum Hin- und Herschalten)</span>
<input type="text" id="p-zweit" placeholder="YouTube-Adresse — leer lassen räumt es weg" />
</label>
<div class="pult__zeile">
<button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
<div class="laufbild" id="laufbild">
<img id="spur-bild" alt="" />
<span class="laufbild__leer" id="laufbild-leer">
Noch kein Video — trag rechts eine YouTube-Adresse ein.
</span>
</div>
<strong class="spur__titel" id="spur-titel">Noch kein Video eingetragen</strong>
<p class="pult__klein" id="zweit-hinweis">
Beide merken sich, wo sie stehen. Du kannst also mitten
im einen wegschalten und später genau dort weitermachen.
Zwei Videos merken sich beide ihre Stelle — du kannst
mitten im einen wegschalten und später dort weitermachen.
</p>
</div>
<!-- ---- RECHTS: einrichten -------------------------- -->
<div class="regieplatz__seite regieplatz__seite--rechts">
<h4 class="regieplatz__ueber">Einrichten</h4>
</section>
<!-- ==== RECHTS OBEN: DIE SENDUNG ==================== -->
<section class="regiekachel kachel--sendung">
<div class="regieregiekachel__kopf">
<h4 class="regieregiekachel__ueber">Die Sendung</h4>
</div>
<label class="pult__feld">
<span>Titel der Sendung</span>
<input type="text" id="p-titel" maxlength="120" placeholder="Worum geht es?" />
</label>
<label class="pult__feld">
<span>YouTube</span>
<input type="text" id="p-video" placeholder="Adresse oder Kennung einfügen" />
</label>
<label class="pult__feld">
<span>Vorschaubild</span>
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes (freiwillig)" />
</label>
<div class="pult__zeile">
<div class="regieregiekachel__paar">
<label class="pult__feld">
<span>YouTube</span>
<input type="text" id="p-video" placeholder="Adresse oder Kennung" />
</label>
<label class="pult__feld pult__feld--kurz">
<span>Beginn</span>
<input type="datetime-local" id="p-beginn" />
</label>
</div>
<div class="pult__zeile pult__zeile--ende">
<button type="button" class="knopf-still knopf-still--haupt"
id="p-sichern">Übernehmen</button>
</div>
</section>
<!-- ==== ALLES ZURÜCKSETZEN ========================
Filipe: „brauch ich auch noch einen button wo ich
alles easy zurücksetzen kann."
Er steht unten in der Spalte, in der eingetragen
wird — und bewusst ruhig: Er gehört hierher, aber er
ist nicht das, was man sucht. Was er leert und was
er stehen lässt, sagt er vorher. -->
<!-- ==== RECHTS UNTEN: BEREITLEGEN =================== -->
<section class="regiekachel kachel--bereit">
<div class="regieregiekachel__kopf">
<h4 class="regieregiekachel__ueber">Bereitlegen</h4>
</div>
<div class="regieregiekachel__paar">
<label class="pult__feld">
<span>Zweites Video</span>
<input type="text" id="p-zweit" placeholder="Adresse — leer räumt es weg" />
</label>
<label class="pult__feld">
<span>Vorschaubild</span>
<input type="text" id="p-vorschau" placeholder="Adresse eines Bildes" />
</label>
</div>
<div class="pult__zeile pult__zeile--ende">
<button type="button" class="knopf-still" id="p-zweit-sichern">Bereitlegen</button>
<!-- ==== ALLES ZURÜCKSETZEN ====================
Filipe: „brauch ich auch noch einen button wo ich
alles easy zurücksetzen kann."
Bewusst ruhig: Er gehört hierher, ist aber nicht
das, was man sucht. Was er leert und was er
stehen lässt, sagt er vorher. -->
<button type="button" class="knopf-still knopf-still--leise"
id="p-zuruecksetzen">Alles zurücksetzen</button>
<span class="pult__klein" id="zurueck-hinweis"></span>
</div>
</div>
<p class="pult__klein" id="zurueck-hinweis"></p>
</section>
<!-- ---- UNTEN MITTIG: die Transportleiste -----------
Aufgebaut wie jeder Videospieler, den man kennt:
<!-- ==== UNTEN: DIE TRANSPORTLEISTE ==================
Schiene über die ganze Breite, darunter eine Reihe mit
dem Transport in der Mitte. Eine Anordnung, die man
schon kennt, muss man nicht lernen. -->
dem Transport in der Mitte — der Aufbau jedes
Videospielers, den man kennt.
Jede Gruppe ist BESCHRIFTET und der Umschalter liegt
jetzt hier: Vorher standen drei kleine Knopfgruppen in
einem 1400 Pixel breiten Kasten, und dazwischen war
Luft. Leere zwischen Knöpfen liest sich als „hier
fehlt noch etwas". -->
<div class="transport">
<div class="transport__schiene">
<input type="range" class="spur__schiene" id="v-band" min="0" max="1000" value="0"
@@ -518,10 +527,8 @@
</div>
<div class="transport__reihe">
<!-- Links die Geschwindigkeit: Sie wird selten
angefasst und darf nicht neben dem Play-Knopf
liegen, wo man im Live hinfasst. -->
<div class="transport__teil">
<span class="transport__wort">Tempo</span>
<div class="tempo" id="tempo" role="group" aria-label="Geschwindigkeit"></div>
</div>
@@ -537,6 +544,11 @@
</div>
<div class="transport__teil transport__teil--rechts">
<span class="transport__wort">Weiter</span>
<button type="button" class="spur__knopf spur__knopf--tausch" id="v-tauschen"
hidden title="Zwischen den beiden Videos wechseln (T)">
Wechseln zu <span id="v-tausch-titel">…</span>
</button>
<button type="button" class="spur__knopf spur__knopf--weiter" id="v-naechstes"
title="Nächstes Video aus der Warteschlange">Nächstes</button>
</div>
@@ -764,14 +776,14 @@
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
liest daraus die Leitungsrollen. -->
<script src="assets/js/bereiche.js?v=202609282002" defer></script>
<script src="assets/js/wahl.js?v=202609282002" defer></script>
<script src="assets/js/nachfrage.js?v=202609282002" defer></script>
<script src="assets/js/meldung.js?v=202609282002" defer></script>
<script src="assets/js/installieren.js?v=202609282002" defer></script>
<script src="assets/js/kopf.js?v=202609282002" defer></script>
<script src="assets/js/glocke.js?v=202609282002" defer></script>
<script src="assets/js/spendenkarte.js?v=202609282002" defer></script>
<script src="assets/js/reaktion.js?v=202609282002" defer></script>
<script src="assets/js/bereiche.js?v=202609282012" defer></script>
<script src="assets/js/wahl.js?v=202609282012" defer></script>
<script src="assets/js/nachfrage.js?v=202609282012" defer></script>
<script src="assets/js/meldung.js?v=202609282012" defer></script>
<script src="assets/js/installieren.js?v=202609282012" defer></script>
<script src="assets/js/kopf.js?v=202609282012" defer></script>
<script src="assets/js/glocke.js?v=202609282012" defer></script>
<script src="assets/js/spendenkarte.js?v=202609282012" defer></script>
<script src="assets/js/reaktion.js?v=202609282012" defer></script>
</body>
</html>