From c16866e1f8fc0b6ba5f345f76a91324f9f7ed46e Mon Sep 17 00:00:00 2001 From: mhoennig Date: Tue, 21 Jul 2026 14:43:56 +0200 Subject: [PATCH] frontend: Untertitel um "Requirements" ergaenzt, Kurzfassung auf Mobil MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- docs/SPEC.md | 5 +++-- frontend/index.html | 34 ++++++++++++++++++++++++---------- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/docs/SPEC.md b/docs/SPEC.md index b6ccc1d..6eafca7 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -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 und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal → …), spart also zwei Drittel der Breite. Die **Sprachwahl** zeigt nur Englisch -und die aktive Sprache plus „…“ (das alle Sprachen aufklappt). Voreinstellung -auf kleinem Bildschirm ist **Vollbild** (siehe D17). +und die aktive Sprache plus „…“ (das alle Sprachen aufklappt). Der **Untertitel** +wird auf eine garantiert einzeilige Kurzfassung reduziert. Voreinstellung auf +kleinem Bildschirm ist **Vollbild** (siehe D17). ### Grafikexport des Diagramms Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen diff --git a/frontend/index.html b/frontend/index.html index 2199a24..23a0d05 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -52,6 +52,7 @@ body.fullscreen .site-footer{max-width:none} h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em} header p{margin-top:4px;color:var(--muted);font-size:.9rem} + .sub-short{display:none} /* Kurzfassung nur auf kleinem Bildschirm */ .langsel{ display:inline-flex;flex:0 0 auto; 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 statt der dauerhaften „AGENDA“-Zeile. */ 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) */ 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)} @@ -548,7 +553,7 @@ -

Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree Diagramm-Editor.

+

Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree/Requirements-Baum Diagramm-Editor.WBS, Feature- & Requirements-Bäume als Text

@@ -1134,7 +1139,8 @@ document.getElementById('dlDiagramPng').addEventListener('click', async () => { /* ---------- Internationalisierung (DE/EN/ES/FR) ---------- */ const I18N = { 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", legendTooltip:"Legende ein-/ausblenden", 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." }, 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)", legendTooltip:"Show/hide legend", 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." }, 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)", legendTooltip:"Mostrar u ocultar la leyenda", 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." }, 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)", legendTooltip:"Afficher/masquer la légende", 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." }, 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)", legendTooltip:"Pokaż/ukryj legendę", 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." }, ru: { - subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций.", + subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций / дерево требований.", + subtitleShort:"СДР, деревья функций и требований", imprint:"Выходные данные (Impressum)", legendTooltip:"Показать/скрыть легенду", ghostTooltip:"Начиная с размера M элемент следует далее декомпозировать.", @@ -1332,7 +1343,8 @@ const I18N = { hint_people:"Люди через @имя — показываются справа внизу узла." }, hi: { - subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री।", + subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री / रिक्वायरमेंट-ट्री।", + subtitleShort:"WBS, फ़ीचर और रिक्वायरमेंट ट्री", imprint:"प्रकाशन विवरण (Impressum)", legendTooltip:"लेजेंड दिखाएँ/छिपाएँ", ghostTooltip:"आकार M से ऊपर किसी तत्व को और अधिक उप-विभाजित करना चाहिए।", @@ -1365,7 +1377,8 @@ const I18N = { hint_people:"@नाम से व्यक्ति — नोड के नीचे-दाएँ दिखते हैं।" }, zh: { - subtitle:"Werkbaum – 基于文本的图表编辑器：WBS / 工作分解结构 / 功能树。", + subtitle:"Werkbaum – 基于文本的图表编辑器：WBS / 工作分解结构 / 功能树 / 需求树。", + subtitleShort:"WBS、功能树与需求树", imprint:"法律声明（Impressum）", legendTooltip:"显示/隐藏图例", brandTooltip:"「Werkbaum」大致意为‘工作之树’——即工作分解结构（WBS）之树。", @@ -1398,7 +1411,8 @@ const I18N = { hint_people:"用 @姓名 表示人员——显示在节点右下角。" }, ja: { - subtitle:"Werkbaum – テキストベースの図エディター：WBS / 作業分解構成図 / フィーチャーツリー。", + subtitle:"Werkbaum – テキストベースの図エディター：WBS / 作業分解構成図 / フィーチャーツリー / 要件ツリー。", + subtitleShort:"WBS・機能ツリー・要件ツリー", imprint:"運営者情報（Impressum）", legendTooltip:"凡例を表示/非表示", brandTooltip:"「Werkbaum」はおおよそ『作業の木』の意味 — 作業分解構成図（WBS）のツリーです。",