frontend: Vollbild-Umschalter links neben den Sprachen
Neuer Icon-Toggle in der Kopfzeile (links vom Sprachumschalter). Aktiv entfernt er linken/rechten Rand und die 1200px-Maximalbreite von Kopf, Panel-Bereich und Fußzeile, sodass die Panels die ganze Fensterbreite nutzen. Tooltip in allen sieben Sprachen. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
a43d7a82f7
commit
ecf0a3353f
@@ -33,6 +33,21 @@
|
|||||||
}
|
}
|
||||||
header{max-width:1200px;width:100%;margin:0 auto 16px;flex:0 0 auto}
|
header{max-width:1200px;width:100%;margin:0 auto 16px;flex:0 0 auto}
|
||||||
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
|
||||||
|
.header-tools{display:flex;align-items:center;gap:12px}
|
||||||
|
.fsbtn{
|
||||||
|
display:inline-flex;align-items:center;justify-content:center;
|
||||||
|
width:30px;height:29px;padding:0;cursor:pointer;
|
||||||
|
border:1px solid rgba(36,52,71,.2);border-radius:8px;
|
||||||
|
background:var(--card);color:var(--muted);
|
||||||
|
}
|
||||||
|
.fsbtn svg{display:block}
|
||||||
|
.fsbtn:hover{border-color:var(--or);color:var(--or)}
|
||||||
|
.fsbtn.active{background:var(--or);color:#fff;border-color:var(--or)}
|
||||||
|
/* Vollbild: Panels nutzen die ganze Fensterbreite (kein linker/rechter Rand). */
|
||||||
|
body.fullscreen{padding-left:0;padding-right:0}
|
||||||
|
body.fullscreen header,
|
||||||
|
body.fullscreen .app,
|
||||||
|
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}
|
||||||
.langsel{
|
.langsel{
|
||||||
@@ -465,6 +480,10 @@
|
|||||||
</svg>
|
</svg>
|
||||||
<span data-i18n-title="brandTooltip" title="„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).">Werk<span style="color:var(--or)">baum</span></span>
|
<span data-i18n-title="brandTooltip" title="„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).">Werk<span style="color:var(--or)">baum</span></span>
|
||||||
</h1>
|
</h1>
|
||||||
|
<div class="header-tools">
|
||||||
|
<button type="button" id="fsToggle" class="fsbtn" aria-pressed="false" data-i18n-title="fullscreenTooltip" data-i18n-aria="fullscreenTooltip" title="Vollbild – Panels nutzen die ganze Fensterbreite" aria-label="Vollbild – Panels nutzen die ganze Fensterbreite">
|
||||||
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
|
||||||
|
</button>
|
||||||
<div class="langsel" role="radiogroup" aria-label="Sprache / Language">
|
<div class="langsel" role="radiogroup" aria-label="Sprache / Language">
|
||||||
<button type="button" data-lang="de" title="Deutsch">DE</button>
|
<button type="button" data-lang="de" title="Deutsch">DE</button>
|
||||||
<button type="button" data-lang="en" title="English">EN</button>
|
<button type="button" data-lang="en" title="English">EN</button>
|
||||||
@@ -476,6 +495,7 @@
|
|||||||
<button type="button" id="langMore" class="langmore" aria-expanded="false" data-i18n-title="langMore" data-i18n-aria="langMore" title="weitere Sprachen" aria-label="weitere Sprachen">…</button>
|
<button type="button" id="langMore" class="langmore" aria-expanded="false" data-i18n-title="langMore" data-i18n-aria="langMore" title="weitere Sprachen" aria-label="weitere Sprachen">…</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<p data-i18n="subtitle">Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree Diagramm-Editor.</p>
|
<p data-i18n="subtitle">Werkbaum – Ein Text-basierter WBS/Projektstrukturplan/Feature-Tree Diagramm-Editor.</p>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@@ -924,6 +944,7 @@ document.getElementById('copyDiagram').addEventListener('click', async () => {
|
|||||||
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 Diagramm-Editor.",
|
||||||
|
fullscreenTooltip:"Vollbild – Panels nutzen die ganze Fensterbreite",
|
||||||
brandTooltip:"„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).",
|
brandTooltip:"„Werkbaum“ bedeutet so viel wie ‚Werk-Baum‘ — der Baum des Projektstrukturplans (WBS).",
|
||||||
editorTitle:"Struktur (Text)", diagramTitle:"Diagramm",
|
editorTitle:"Struktur (Text)", diagramTitle:"Diagramm",
|
||||||
copy:"kopieren", copyDone:"kopiert ✓", copyTooltip:"Text in die Zwischenablage kopieren",
|
copy:"kopieren", copyDone:"kopiert ✓", copyTooltip:"Text in die Zwischenablage kopieren",
|
||||||
@@ -950,6 +971,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
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 diagram editor.",
|
||||||
|
fullscreenTooltip:"Full screen – panels use the full window width",
|
||||||
brandTooltip:"“Werkbaum” means roughly ‘work tree’ — the tree of the work breakdown structure (WBS).",
|
brandTooltip:"“Werkbaum” means roughly ‘work tree’ — the tree of the work breakdown structure (WBS).",
|
||||||
editorTitle:"Structure (text)", diagramTitle:"Diagram",
|
editorTitle:"Structure (text)", diagramTitle:"Diagram",
|
||||||
copy:"copy", copyDone:"copied ✓", copyTooltip:"Copy text to clipboard",
|
copy:"copy", copyDone:"copied ✓", copyTooltip:"Copy text to clipboard",
|
||||||
@@ -976,6 +998,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
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.",
|
||||||
|
fullscreenTooltip:"Pantalla completa – los paneles usan todo el ancho de la ventana",
|
||||||
brandTooltip:"«Werkbaum» significa algo así como ‘árbol de trabajo’ — el árbol de la estructura de desglose del trabajo (EDT).",
|
brandTooltip:"«Werkbaum» significa algo así como ‘árbol de trabajo’ — el árbol de la estructura de desglose del trabajo (EDT).",
|
||||||
editorTitle:"Estructura (texto)", diagramTitle:"Diagrama",
|
editorTitle:"Estructura (texto)", diagramTitle:"Diagrama",
|
||||||
copy:"copiar", copyDone:"copiado ✓", copyTooltip:"Copiar el texto al portapapeles",
|
copy:"copiar", copyDone:"copiado ✓", copyTooltip:"Copiar el texto al portapapeles",
|
||||||
@@ -1002,6 +1025,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
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.",
|
||||||
|
fullscreenTooltip:"Plein écran – les panneaux occupent toute la largeur de la fenêtre",
|
||||||
brandTooltip:"« Werkbaum » signifie à peu près « arbre de travail » — l’arbre de l’organigramme des tâches (WBS).",
|
brandTooltip:"« Werkbaum » signifie à peu près « arbre de travail » — l’arbre de l’organigramme des tâches (WBS).",
|
||||||
editorTitle:"Structure (texte)", diagramTitle:"Diagramme",
|
editorTitle:"Structure (texte)", diagramTitle:"Diagramme",
|
||||||
copy:"copier", copyDone:"copié ✓", copyTooltip:"Copier le texte dans le presse-papiers",
|
copy:"copier", copyDone:"copié ✓", copyTooltip:"Copier le texte dans le presse-papiers",
|
||||||
@@ -1028,6 +1052,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
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.",
|
||||||
|
fullscreenTooltip:"Pełny ekran – panele wykorzystują całą szerokość okna",
|
||||||
brandTooltip:"„Werkbaum” znaczy mniej więcej ‚drzewo pracy’ — drzewo struktury podziału pracy (WBS).",
|
brandTooltip:"„Werkbaum” znaczy mniej więcej ‚drzewo pracy’ — drzewo struktury podziału pracy (WBS).",
|
||||||
editorTitle:"Struktura (tekst)", diagramTitle:"Diagram",
|
editorTitle:"Struktura (tekst)", diagramTitle:"Diagram",
|
||||||
copy:"kopiuj", copyDone:"skopiowano ✓", copyTooltip:"Kopiuj tekst do schowka",
|
copy:"kopiuj", copyDone:"skopiowano ✓", copyTooltip:"Kopiuj tekst do schowka",
|
||||||
@@ -1054,6 +1079,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
ru: {
|
ru: {
|
||||||
subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций.",
|
subtitle:"Werkbaum – текстовый редактор диаграмм: СДР / структура декомпозиции работ / дерево функций.",
|
||||||
|
fullscreenTooltip:"Полный экран – панели занимают всю ширину окна",
|
||||||
brandTooltip:"«Werkbaum» примерно означает ‚дерево работ’ — дерево структуры декомпозиции работ (СДР).",
|
brandTooltip:"«Werkbaum» примерно означает ‚дерево работ’ — дерево структуры декомпозиции работ (СДР).",
|
||||||
editorTitle:"Структура (текст)", diagramTitle:"Диаграмма",
|
editorTitle:"Структура (текст)", diagramTitle:"Диаграмма",
|
||||||
copy:"копировать", copyDone:"скопировано ✓", copyTooltip:"Скопировать текст в буфер обмена",
|
copy:"копировать", copyDone:"скопировано ✓", copyTooltip:"Скопировать текст в буфер обмена",
|
||||||
@@ -1080,6 +1106,7 @@ const I18N = {
|
|||||||
},
|
},
|
||||||
hi: {
|
hi: {
|
||||||
subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री।",
|
subtitle:"Werkbaum – टेक्स्ट-आधारित आरेख संपादक: WBS / कार्य विभाजन संरचना / फ़ीचर-ट्री।",
|
||||||
|
fullscreenTooltip:"पूर्ण स्क्रीन – पैनल पूरी विंडो चौड़ाई का उपयोग करते हैं",
|
||||||
brandTooltip:"„Werkbaum“ का अर्थ लगभग ‚कार्य-वृक्ष‘ है — कार्य विभाजन संरचना (WBS) का वृक्ष।",
|
brandTooltip:"„Werkbaum“ का अर्थ लगभग ‚कार्य-वृक्ष‘ है — कार्य विभाजन संरचना (WBS) का वृक्ष।",
|
||||||
editorTitle:"संरचना (टेक्स्ट)", diagramTitle:"आरेख",
|
editorTitle:"संरचना (टेक्स्ट)", diagramTitle:"आरेख",
|
||||||
copy:"कॉपी करें", copyDone:"कॉपी हो गया ✓", copyTooltip:"टेक्स्ट को क्लिपबोर्ड पर कॉपी करें",
|
copy:"कॉपी करें", copyDone:"कॉपी हो गया ✓", copyTooltip:"टेक्स्ट को क्लिपबोर्ड पर कॉपी करें",
|
||||||
@@ -1160,6 +1187,14 @@ document.querySelectorAll('.langsel button[data-lang]').forEach(b => {
|
|||||||
b.addEventListener('click', () => applyLang(b.dataset.lang));
|
b.addEventListener('click', () => applyLang(b.dataset.lang));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/* ---------- Vollbild: Panels über die ganze Fensterbreite ---------- */
|
||||||
|
const fsBtn = document.getElementById('fsToggle');
|
||||||
|
fsBtn.addEventListener('click', () => {
|
||||||
|
const on = document.body.classList.toggle('fullscreen');
|
||||||
|
fsBtn.classList.toggle('active', on);
|
||||||
|
fsBtn.setAttribute('aria-pressed', String(on));
|
||||||
|
});
|
||||||
|
|
||||||
applySplit(); /* Startzustand: normal, markiert die normal-Buttons aktiv */
|
applySplit(); /* Startzustand: normal, markiert die normal-Buttons aktiv */
|
||||||
src.value = INITIAL;
|
src.value = INITIAL;
|
||||||
let startLang = 'de';
|
let startLang = 'de';
|
||||||
|
|||||||
Reference in New Issue
Block a user