DogFatherGit
401c8f006c
URSACHE ZUERST: .feld--breit stand in DREI HTML-Dateien (wissen,
scouting, dateien) -- und war NIE im CSS definiert. Das Raster
(auto-fit, minmax(170px)) gab deshalb jedem Feld dieselbe Breite, egal
was drin steht: Der Titel war so schmal wie eine Auswahl, lange
Kategorienamen wurden abgeschnitten ("1. TikTok - Grundla"), und die
Tag-Vorschlaege stapelten sich zu einer halben Seite.
Jetzt zwoelf Spalten statt auto-fit. Damit laesst sich sagen, WIE breit
ein Feld sein soll: Titel, Beschreibung und Kategorie ueber die ganze
Zeile, Stufe/Geraet/Datum zu dritt nebeneinander. Unter 860 px zwei
Spalten, unter 560 px eine. Die Klasse ist zentral definiert, also
wirken die drei betroffenen Seiten sofort mit.
Gemessen danach: Titel/Beschreibung/Kategorie je 1058 px, die drei
kleinen je 342 px, Kategorie nicht mehr abgeschnitten.
PDF-ABLAGE statt nacktem Dateifeld. Der Browser-Knopf war abgeschnitten
("K...") und sah aus wie ein Fremdkoerper. Jetzt eine eigene Flaeche:
Klicken, Ziehen oder Tastatur. Sie markiert sich gruen, sobald eine
Datei drin ist, prueft schon im Browser auf PDF und schlaegt den
Dateinamen als Titel vor, wenn der noch leer ist.
Sie steht bewusst GANZ OBEN: Man laedt etwas hoch und beschreibt DANN,
was es ist -- nicht umgekehrt.
SCHALTER statt Kaestchen fuer "besonders wichtig". Ein Kaestchen von 17
Pixeln ist auf dem Handy kaum zu treffen und sagt nicht, was passiert.
Der Schalter ist gross, zeigt seinen Zustand in Gold (dieselbe Farbe wie
die Marke "Wichtig" spaeter) und erklaert sich in einer Zeile:
"Erscheint zusaetzlich ganz oben unter Neu & wichtig".
Tag-Vorschlaege kompakter: von zehn Zeilen auf zwei.
Geprueft: Handy ohne Ueberlauf, 0 Konsolenfehler, Dateiwahl markiert die
Flaeche und fuellt den Titel, Schalter schaltet.
95 lines
4.0 KiB
HTML
95 lines
4.0 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Dateien · Creator Workspace</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<meta name="theme-color" content="#05070d" />
|
||
<link rel="icon" href="assets/img/favicon.png" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202608281319" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202608281319" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202608281319" />
|
||
<link rel="stylesheet" href="assets/css/dateien.css?v=202608281319" />
|
||
</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"><a class="zurueck" href="start.html">Creator Workspace</a> · Dateien</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">Ablage</p>
|
||
<h1 class="titel">Dateien & Freigaben</h1>
|
||
<p class="unterzeile">Entwurf → Review → Freigabe. Die aktuelle Version ist immer klar erkennbar.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Hinweis für alle, die nicht ablegen dürfen (Creator). Steht statt
|
||
des Ablegefeldes, damit klar ist warum -- ein einfach fehlendes
|
||
Feld wirkt wie ein Fehler. -->
|
||
<p class="nur-lesen" id="nur-lesen" hidden>
|
||
Hier siehst du die Dateien deines Bereichs. <strong>Abgelegt werden sie
|
||
von DogFather oder von Scouts</strong> – du kannst sie öffnen, aber nichts hochladen.
|
||
</p>
|
||
|
||
<!-- Ablegefeld. Klick öffnet die Dateiauswahl, Ziehen funktioniert
|
||
ebenso -- beides landet im selben Ablauf. -->
|
||
<div class="ablage" id="ablage" tabindex="0" role="button"
|
||
aria-label="Datei auswählen oder hierher ziehen">
|
||
<svg class="ablage__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5" />
|
||
<path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15" />
|
||
</svg>
|
||
<p class="ablage__text">Datei hierher ziehen oder <strong>auswählen</strong></p>
|
||
<p class="ablage__klein" id="ablage-grenze">bis 25 MB</p>
|
||
<input type="file" id="feld-datei" hidden />
|
||
</div>
|
||
|
||
<div class="hochlade-zeile" id="zuordnung" hidden>
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild" for="f-creator">Ablegen im Bereich von <span class="leise">(optional)</span></label>
|
||
<select id="f-creator"><option value="">— kein Bereich —</option></select>
|
||
</div>
|
||
<!-- Wer die Datei sehen darf. Mehrfachauswahl: dieselbe Datei kann
|
||
an mehrere Personen gehen, ohne sie mehrfach hochzuladen. -->
|
||
<div class="feld feld--breit">
|
||
<label class="feld-schild">Wer darf sie sehen?</label>
|
||
<p class="leise" id="wahl-hinweis">Niemand ausgewählt – dann sieht sie nur DogFather.</p>
|
||
<div class="wahl" id="wahl"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="fortschritt" id="fortschritt" hidden><span id="fortschritt-text"></span></p>
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="filter" id="filter">
|
||
<button type="button" class="schritt" data-status="" aria-pressed="true">Alle</button>
|
||
<button type="button" class="schritt" data-status="entwurf" aria-pressed="false">Entwurf</button>
|
||
<button type="button" class="schritt" data-status="review" aria-pressed="false">Review</button>
|
||
<button type="button" class="schritt" data-status="freigegeben" aria-pressed="false">Freigegeben</button>
|
||
</div>
|
||
|
||
<div id="liste" aria-busy="true"><p class="leise">Dateien werden geladen …</p></div>
|
||
|
||
</main>
|
||
|
||
<script src="assets/js/kopf.js?v=202608281319" defer></script>
|
||
<script src="assets/js/dateien.js?v=202608281319" defer></script>
|
||
</body>
|
||
</html>
|