frontend: Untertitel um "Requirements" ergaenzt, Kurzfassung auf Mobil

Der Untertitel nennt jetzt auch Requirements(-Baum) — analog zur
Meta-Description. Fuer kleine Bildschirme gibt es eine garantiert
einzeilige Kurzfassung (neuer i18n-Key subtitleShort, 9 Sprachen): zwei
Spans (.sub-full/.sub-short), per body.mobile umgeschaltet; zusaetzlich
white-space:nowrap + ellipsis als Sicherung gegen Umbruch.

Verifiziert (headless): Desktop zeigt die Langfassung mit Requirements,
375px zeigt die Kurzfassung einzeilig ohne Overflow in allen geprueften
Sprachen (de/en/es/fr/ru/ja); i18n konsistent (48 Keys x 9). Normalgroesse
unveraendert (Kurzfassung nur mobil).

SPEC §9 (Kleiner Bildschirm) ergaenzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 14:43:56 +02:00
co-authored by Claude Opus 4.8
parent cb440af362
commit c16866e1f8
2 changed files with 27 additions and 12 deletions
+3 -2
View File
@@ -151,8 +151,9 @@ Umschalter im Editor-Kopf (statt der dauerhaften „AGENDA“-Zeile), damit sie
zugeklappt keinen Platz kostet. Der **Modus-Wähler** zeigt nur das aktive Icon zugeklappt keinen Platz kostet. Der **Modus-Wähler** zeigt nur das aktive Icon
und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal → und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal →
…), spart also zwei Drittel der Breite. Die **Sprachwahl** zeigt nur Englisch …), spart also zwei Drittel der Breite. Die **Sprachwahl** zeigt nur Englisch
und die aktive Sprache plus „…“ (das alle Sprachen aufklappt). Voreinstellung und die aktive Sprache plus „…“ (das alle Sprachen aufklappt). Der **Untertitel**
auf kleinem Bildschirm ist **Vollbild** (siehe D17). wird auf eine garantiert einzeilige Kurzfassung reduziert. Voreinstellung auf
kleinem Bildschirm ist **Vollbild** (siehe D17).
### Grafikexport des Diagramms ### Grafikexport des Diagramms
Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen
+24 -10
View File
@@ -52,6 +52,7 @@
body.fullscreen .site-footer{max-width:none} body.fullscreen .site-footer{max-width:none}
h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em} h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em}
header p{margin-top:4px;color:var(--muted);font-size:.9rem} header p{margin-top:4px;color:var(--muted);font-size:.9rem}
.sub-short{display:none} /* Kurzfassung nur auf kleinem Bildschirm */
.langsel{ .langsel{
display:inline-flex;flex:0 0 auto; display:inline-flex;flex:0 0 auto;
border:1px solid rgba(36,52,71,.2);border-radius:999px;overflow:hidden; border:1px solid rgba(36,52,71,.2);border-radius:999px;overflow:hidden;
@@ -497,6 +498,10 @@
820-px-Regel weiter oben. Die Legende bekommt einen eigenen Umschalter 820-px-Regel weiter oben. Die Legende bekommt einen eigenen Umschalter
statt der dauerhaften „AGENDA“-Zeile. */ statt der dauerhaften „AGENDA“-Zeile. */
body.mobile .winbtns{display:none} body.mobile .winbtns{display:none}
/* Untertitel: Kurzfassung, garantiert einzeilig (Ellipsis als Sicherung) */
body.mobile .sub-full{display:none}
body.mobile .sub-short{display:inline}
body.mobile header p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Editor immer gestapelt (Textarea oben, Legende darunter) */ /* Editor immer gestapelt (Textarea oben, Legende darunter) */
body.mobile .editor-body{flex-direction:column;align-items:stretch} body.mobile .editor-body{flex-direction:column;align-items:stretch}
body.mobile .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)} body.mobile .agenda{border-left:0;border-top:1px dashed rgba(36,52,71,.18)}
@@ -548,7 +553,7 @@
</div> </div>
</div> </div>
</div> </div>
<p data-i18n="subtitle">Werkbaum Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree Diagramm-Editor.</p> <p><span class="sub-full" data-i18n="subtitle">Werkbaum Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree/Requirements-Baum Diagramm-Editor.</span><span class="sub-short" data-i18n="subtitleShort">WBS, Feature- &amp; Requirements-Bäume als Text</span></p>
</header> </header>
<div class="app" id="app"> <div class="app" id="app">
@@ -1134,7 +1139,8 @@ document.getElementById('dlDiagramPng').addEventListener('click', async () => {
/* ---------- Internationalisierung (DE/EN/ES/FR) ---------- */ /* ---------- Internationalisierung (DE/EN/ES/FR) ---------- */
const I18N = { const I18N = {
de: { de: {
subtitle:"Werkbaum Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree Diagramm-Editor.", subtitle:"Werkbaum Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree/Requirements-Baum Diagramm-Editor.",
subtitleShort:"WBS, Feature- & Requirements-Bäume als Text",
imprint:"Impressum", imprint:"Impressum",
legendTooltip:"Legende ein-/ausblenden", legendTooltip:"Legende ein-/ausblenden",
ghostTooltip:"Ab Größe M sollte ein Element weiter untergliedert werden.", ghostTooltip:"Ab Größe M sollte ein Element weiter untergliedert werden.",
@@ -1167,7 +1173,8 @@ const I18N = {
hint_people:"Personen mit @name — erscheinen unten rechts am Knoten." hint_people:"Personen mit @name — erscheinen unten rechts am Knoten."
}, },
en: { en: {
subtitle:"Werkbaum A text-based WBS / work breakdown structure / feature-tree diagram editor.", subtitle:"Werkbaum A text-based WBS / work breakdown structure / feature-tree / requirements-tree diagram editor.",
subtitleShort:"WBS, feature & requirements trees as text",
imprint:"Imprint (Impressum)", imprint:"Imprint (Impressum)",
legendTooltip:"Show/hide legend", legendTooltip:"Show/hide legend",
ghostTooltip:"From size M upward, an item should be broken down further.", ghostTooltip:"From size M upward, an item should be broken down further.",
@@ -1200,7 +1207,8 @@ const I18N = {
hint_people:"People with @name — shown at the bottom-right of the node." hint_people:"People with @name — shown at the bottom-right of the node."
}, },
es: { es: {
subtitle:"Werkbaum Un editor de diagramas basado en texto para EDT / estructura de desglose del trabajo / árbol de características.", subtitle:"Werkbaum Un editor de diagramas basado en texto para EDT / estructura de desglose del trabajo / árbol de características / árbol de requisitos.",
subtitleShort:"EDT y árboles de características y requisitos",
imprint:"Aviso legal (Impressum)", imprint:"Aviso legal (Impressum)",
legendTooltip:"Mostrar u ocultar la leyenda", legendTooltip:"Mostrar u ocultar la leyenda",
ghostTooltip:"A partir de la talla M, un elemento debería desglosarse más.", ghostTooltip:"A partir de la talla M, un elemento debería desglosarse más.",
@@ -1233,7 +1241,8 @@ const I18N = {
hint_people:"Personas con @nombre — aparecen abajo a la derecha del nodo." hint_people:"Personas con @nombre — aparecen abajo a la derecha del nodo."
}, },
fr: { fr: {
subtitle:"Werkbaum Un éditeur de diagrammes basé sur le texte pour WBS / organigramme des tâches / arbre de fonctionnalités.", subtitle:"Werkbaum Un éditeur de diagrammes basé sur le texte pour WBS / organigramme des tâches / arbre de fonctionnalités / arbre d'exigences.",
subtitleShort:"WBS, arbres de fonctionnalités et d'exigences",
imprint:"Mentions légales (Impressum)", imprint:"Mentions légales (Impressum)",
legendTooltip:"Afficher/masquer la légende", legendTooltip:"Afficher/masquer la légende",
ghostTooltip:"À partir de la taille M, un élément devrait être décomposé davantage.", ghostTooltip:"À partir de la taille M, un élément devrait être décomposé davantage.",
@@ -1266,7 +1275,8 @@ const I18N = {
hint_people:"Personnes avec @nom — affichées en bas à droite du nœud." hint_people:"Personnes avec @nom — affichées en bas à droite du nœud."
}, },
pl: { pl: {
subtitle:"Werkbaum Edytor diagramów oparty na tekście: WBS / struktura podziału pracy / drzewo funkcji.", subtitle:"Werkbaum Edytor diagramów oparty na tekście: WBS / struktura podziału pracy / drzewo funkcji / drzewo wymagań.",
subtitleShort:"WBS, drzewa funkcji i wymagań jako tekst",
imprint:"Nota prawna (Impressum)", imprint:"Nota prawna (Impressum)",
legendTooltip:"Pokaż/ukryj legendę", legendTooltip:"Pokaż/ukryj legendę",
ghostTooltip:"Od rozmiaru M element powinien być dalej podzielony.", ghostTooltip:"Od rozmiaru M element powinien być dalej podzielony.",
@@ -1299,7 +1309,8 @@ const I18N = {
hint_people:"Osoby z @nazwa — pokazywane w prawym dolnym rogu węzła." hint_people:"Osoby z @nazwa — pokazywane w prawym dolnym rogu węzła."
}, },
ru: { ru: {
subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций.", subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций / дерево требований.",
subtitleShort:"СДР, деревья функций и требований",
imprint:"Выходные данные (Impressum)", imprint:"Выходные данные (Impressum)",
legendTooltip:"Показать/скрыть легенду", legendTooltip:"Показать/скрыть легенду",
ghostTooltip:"Начиная с размера M элемент следует далее декомпозировать.", ghostTooltip:"Начиная с размера M элемент следует далее декомпозировать.",
@@ -1332,7 +1343,8 @@ const I18N = {
hint_people:"Люди через @имя — показываются справа внизу узла." hint_people:"Люди через @имя — показываются справа внизу узла."
}, },
hi: { hi: {
subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री।", subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री / रिक्वायरमेंट-ट्री।",
subtitleShort:"WBS, फ़ीचर और रिक्वायरमेंट ट्री",
imprint:"प्रकाशन विवरण (Impressum)", imprint:"प्रकाशन विवरण (Impressum)",
legendTooltip:"लेजेंड दिखाएँ/छिपाएँ", legendTooltip:"लेजेंड दिखाएँ/छिपाएँ",
ghostTooltip:"आकार M से ऊपर किसी तत्व को और अधिक उप-विभाजित करना चाहिए।", ghostTooltip:"आकार M से ऊपर किसी तत्व को और अधिक उप-विभाजित करना चाहिए।",
@@ -1365,7 +1377,8 @@ const I18N = {
hint_people:"@नाम से व्यक्ति — नोड के नीचे-दाएँ दिखते हैं।" hint_people:"@नाम से व्यक्ति — नोड के नीचे-दाएँ दिखते हैं।"
}, },
zh: { zh: {
subtitle:"Werkbaum 基于文本的图表编辑器:WBS / 工作分解结构 / 功能树。", subtitle:"Werkbaum 基于文本的图表编辑器:WBS / 工作分解结构 / 功能树 / 需求树。",
subtitleShort:"WBS、功能树与需求树",
imprint:"法律声明(Impressum", imprint:"法律声明(Impressum",
legendTooltip:"显示/隐藏图例", legendTooltip:"显示/隐藏图例",
brandTooltip:"「Werkbaum」大致意为‘工作之树’——即工作分解结构(WBS)之树。", brandTooltip:"「Werkbaum」大致意为‘工作之树’——即工作分解结构(WBS)之树。",
@@ -1398,7 +1411,8 @@ const I18N = {
hint_people:"用 @姓名 表示人员——显示在节点右下角。" hint_people:"用 @姓名 表示人员——显示在节点右下角。"
}, },
ja: { ja: {
subtitle:"Werkbaum – テキストベースの図エディター:WBS / 作業分解構成図 / フィーチャーツリー。", subtitle:"Werkbaum – テキストベースの図エディター:WBS / 作業分解構成図 / フィーチャーツリー / 要件ツリー。",
subtitleShort:"WBS・機能ツリー・要件ツリー",
imprint:"運営者情報(Impressum", imprint:"運営者情報(Impressum",
legendTooltip:"凡例を表示/非表示", legendTooltip:"凡例を表示/非表示",
brandTooltip:"「Werkbaum」はおおよそ『作業の木』の意味 — 作業分解構成図(WBS)のツリーです。", brandTooltip:"「Werkbaum」はおおよそ『作業の木』の意味 — 作業分解構成図(WBS)のツリーです。",