DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3dd4cef42ded845c736342d112f2df8080d36208
dogfather-universe/workspace/hilfe.html
T
DogFatherGit 3dd4cef42d Die Handgriffe unter jeder Nachricht: drei Zeilen werden zwei 
EINE RECHNUNG, DIE NIE GEMESSEN WURDE

In chat.css stand seit dem 25.09.2026 neben den 44-Pixel-Knoepfen
der Fusszeile:

  "Fuenf mal 44 plus vier Abstaende sind 236 px -- eine Blase hat
   auf 412 px innen 251 px. Die Reihe bleibt damit einzeilig."

Sie vergisst die Uhrzeit. Die ist 57 Pixel breit und steht in
derselben Reihe; 236 + 57 sind 293.

Auffallen konnte das nicht, weil die Regel nie lief: Alle
Handy-Messungen des Hauses liefen bis gestern mit einem MAUSZEIGER.
`setViewportSize` macht aus einem Browser kein Telefon -- `hasTouch`
gehoert zum Kontext und laesst sich danach nicht mehr setzen. Ohne
ihn meldet der Browser `pointer: fine`, und KEINE einzige Regel aus
`@media (pointer: coarse)` greift. Dort stehen im ganzen Haus die
44-Pixel-Beruehrziele. Die Rechnung wurde also gedacht und nie
gesehen.

Mit Finger gemessen, 412 px: 234 Pixel Platz fuer 277 Pixel Inhalt.
DREI Zeilen, 96 Pixel hoch -- unter jeder einzelnen Nachricht.

DIE UHRZEIT BEKOMMT IHRE EIGENE ZEILE

Sie ist das einzige Stueck der Reihe, das kein Beruehrziel ist.
Damit behalten die fuenf Knoepfe ihre 44 Pixel nebeneinander:
5 x 44 + 4 x 2 = 228 und passen in 234.

Gemessen jetzt: zwei Zeilen, 74 Pixel. Die Knopfzeile braucht 224
von 234.

EIN VERSUCH, DER ES NICHT WURDE

Zuerst hatte ich die Blase am Fingergeraet von `min(66%, 62ch)` auf
82 Prozent verbreitert -- daneben steht ja die Absicht, sie solle
"auf dem Handy trotzdem die Breite ausnutzen". Die Messung kam
SCHLECHTER zurueck (188 statt 234 Pixel Platz), und das lag an der
Messung selbst: Sie las "die erste Fusszeile". Wie breit die ist,
haengt vom Text darueber ab. Dieselbe Aenderung sah dadurch mal
besser und mal schlechter aus, ohne dass sich etwas geaendert hatte.

Der eigentliche Grund, warum 82 Prozent nicht helfen: `max-width`
ist eine Obergrenze, keine Breite. Eine kurze Nachricht hat eine
schmale Blase, und die Fusszeile bricht darin genauso um. Bei
allen vier gemessenen Nachrichten brach sie.

MESSUNG GESCHAERFT

  - Sie fragt jetzt, WIE VIELE Fusszeilen umbrechen, nicht wie die
    erste aussieht.
  - "Inhalt" ist die breiteste ZEILE, nicht die Summe aller Kinder.
    Seit die Uhrzeit absichtlich umbricht, waere die Summe die
    Breite zweier Zeilen uebereinander -- sie meldete 444 Pixel in
    einer 234 Pixel breiten Fusszeile und sah wie ein Ueberlauf aus.
  - `mess-notizblock` misst am Handy jetzt ebenfalls mit Finger
    (eigener Kontext, `hasTouch`). Vorher zeigten seine
    Handy-Bilder eine Seite, die auf keinem Handy so aussieht.

DIE KLAMMERWACHE HAT WIEDER EINEN ECHTEN FUND GEMACHT

Beim Zuruecknehmen des 82-Prozent-Versuchs blieb das schliessende
`}` der Medienabfrage stehen. Zweiter echter Fund in zwei Tagen,
beide Male an meinem eigenen Werkzeug.

GEPRUEFT
  pruef-chatkachel, -css-klassen, -tippziele, -handy: alle EXIT 0
  mess-chat-optik   EXIT 0 -- 2 Zeilen, 74 px (vorher 3 / 96)
  mess-notizblock   EXIT 0
2026-09-29 13:59:20 +02:00

160 lines
7.0 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>Vertraulich melden · Das Rudel</title>
<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=202609291353" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609291353" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609291353" />
<link rel="stylesheet" href="assets/css/start.css?v=202609291353" />
<link rel="stylesheet" href="assets/css/hilfe.css?v=202609291353" />
<link rel="stylesheet" href="assets/css/module.css?v=202609291353" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609291353" />
</head>
<body class="start">
<div class="schleier" aria-hidden="true"></div>
<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">Das&nbsp;Rudel</a> · Vertraulich</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">Das Rudel · Vertraulich</p>
<h1 class="titel" id="seiten-titel">Vertraulich melden</h1>
<p class="unterzeile" id="seiten-unter">
Wenn etwas nicht stimmt – hier schreibst du direkt an DogFather.
</p>
</div>
</section>
<!-- ==================================================================
WARUM HIER "VERTRAULICH" STEHT UND NICHT "ANONYM"
Filipe hat es "anonym" genannt, und gegenüber den anderen
Mitgliedern ist es das auch: Niemand sonst sieht diese Meldungen,
kein Modi, kein anderes Mitglied.
Aber DogFather und die rechte Hand sehen den Namen — so ist es
bestellt, und es ist auch richtig so: Ohne Namen kann man
niemandem helfen. Wer glaubt, er schreibe unerkannt, schreibt
anders und fühlt sich hinterher getäuscht. Deshalb steht der
Satz oben im Formular, bevor jemand tippt.
============================================================== -->
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
<!-- Der Hinweis, wer mitliest. Steht VOR allem anderen. -->
<div class="vertrauen" id="vertrauen">
<span class="vertrauen__zeichen" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 3.2 5 6v5.6c0 4.3 2.9 7.6 7 9.2 4.1-1.6 7-4.9 7-9.2V6z" />
<path d="M9.2 12.2l2 2 3.6-4" />
</svg>
</span>
<p class="vertrauen__text" id="vertrauen-text">
<strong>DogFather und die rechte Hand lesen mit – sonst niemand.</strong>
Sie sehen auch deinen Namen. Kein anderes Mitglied und niemand aus
der Moderation bekommt diese Meldungen zu Gesicht.
</p>
</div>
<!-- ---- NEU MELDEN (nur für Mitglieder) ------------------------- -->
<section class="hilfe-block" id="neu-block" hidden>
<div class="hilfe-block__kopf">
<h2 class="hilfe-block__titel">Etwas melden</h2>
<button type="button" class="knopf knopf--klein" id="neu-auf">Neue Meldung</button>
</div>
<form class="hilfe-form" id="neu-form" hidden>
<label class="feld">
<span class="feld__schild">Worum geht es? <span class="feld__pflicht">kurz</span></span>
<input type="text" id="neu-betreff" maxlength="120" autocomplete="off"
placeholder="z. B. Jemand geht mich im Chat immer wieder an" />
</label>
<label class="feld">
<span class="feld__schild">Was ist passiert?</span>
<textarea id="neu-text" rows="6" maxlength="4000"
placeholder="Schreib so viel, wie du willst. Wann war es, wer war dabei, was ist passiert?"></textarea>
</label>
<p class="hilfe-form__hinweis">
Nach dem Absenden wartest du auf eine Antwort. Erst wenn eine da
ist, kannst du wieder schreiben – so geht nichts durcheinander.
</p>
<div class="hilfe-form__fuss">
<button type="submit" class="knopf" id="neu-senden">Meldung abschicken</button>
<button type="button" class="knopf knopf--still" id="neu-zu">Abbrechen</button>
<span class="hilfe-form__stand" id="neu-stand" role="status" aria-live="polite"></span>
</div>
</form>
</section>
<!-- ---- DIE LISTE ----------------------------------------------- -->
<section class="hilfe-block">
<div class="hilfe-block__kopf">
<h2 class="hilfe-block__titel" id="listen-titel">Deine Meldungen</h2>
<span class="hilfe-block__zahl" id="listen-zahl"></span>
</div>
<div id="liste" aria-busy="true"><p class="leise">wird geladen …</p></div>
</section>
<!-- ---- EIN FALL ------------------------------------------------- -->
<section class="hilfe-block" id="fall-block" hidden>
<div class="hilfe-block__kopf">
<h2 class="hilfe-block__titel" id="fall-titel">…</h2>
<button type="button" class="knopf knopf--klein knopf--still" id="fall-zurueck">Zur Liste</button>
</div>
<p class="fall-kopf" id="fall-kopf"></p>
<div id="verlauf"></div>
<form class="hilfe-form hilfe-form--antwort" id="antwort-form" hidden>
<label class="feld">
<span class="feld__schild" id="antwort-schild">Deine Antwort</span>
<textarea id="antwort-text" rows="4" maxlength="4000"></textarea>
</label>
<div class="hilfe-form__fuss">
<button type="submit" class="knopf" id="antwort-senden">Absenden</button>
<button type="button" class="knopf knopf--still" id="fall-schliessen" hidden>Fall abschließen</button>
<span class="hilfe-form__stand" id="antwort-stand" role="status" aria-live="polite"></span>
</div>
</form>
<!-- EIN <div>, KEIN <p> (20.09.2026). Seit dem Abschluss drei
Saetze enthaelt, stehen hier <p>-Elemente darin -- und ein
<p> in einem <p> ist ungueltig: Der Browser schliesst das
aeussere selbst und schiebt den Rest daneben. Das faellt
erst am Bildschirm auf, nicht im Quelltext. -->
<div class="fall-warten" id="fall-warten" hidden></div>
</section>
</main>
<script src="assets/js/meldung.js?v=202609291353" defer></script>
<script src="assets/js/nachfrage.js?v=202609291353" defer></script>
<script src="assets/js/wahl.js?v=202609291353" defer></script>
<script src="assets/js/bereiche.js?v=202609291353" defer></script>
<script src="assets/js/installieren.js?v=202609291353" defer></script>
<script src="assets/js/kopf.js?v=202609291353" defer></script>
<script src="assets/js/glocke.js?v=202609291353" defer></script>
<script src="assets/js/hilfe.js?v=202609291353" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink