From ed006976d97e162a048035dd3e5eeadd680df266 Mon Sep 17 00:00:00 2001 From: team3 Date: Thu, 18 Jun 2026 16:51:38 +0200 Subject: [PATCH] update --- frontend/src/App.vue | 6 +- frontend/src/components/TopicSidebar.vue | 88 +++++++++++++++++------- 2 files changed, 63 insertions(+), 31 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 9483fb8..a8971b9 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -275,10 +275,6 @@ function setAnsicht(modus) { if (selectedTopic.value) localStorage.setItem('ansicht_' + selectedTopic.value, modus) } -function toggleAnsicht() { - setAnsicht(ansichtModus.value === 'kompakt' ? 'erklärend' : 'kompakt') -} - function handleOpenBausteineView() { if (!selectedTopic.value) return bausteineView.value = true @@ -398,7 +394,7 @@ onMounted(async () => { :ansichtModus="ansichtModus" @setProvider="setProvider" @toggleDark="toggleDark" - @toggleAnsicht="toggleAnsicht" + @setAnsicht="setAnsicht" @select="selectTopic" @create="createTopic" @createThema="handleCreateThema" diff --git a/frontend/src/components/TopicSidebar.vue b/frontend/src/components/TopicSidebar.vue index 296ee41..5a3b535 100644 --- a/frontend/src/components/TopicSidebar.vue +++ b/frontend/src/components/TopicSidebar.vue @@ -24,7 +24,7 @@ const props = defineProps({ ansichtModus: { type: String, default: 'kompakt' }, // kompakt | erklärend }) -const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'toggleAnsicht', 'setProvider']) +const emit = defineEmits(['select', 'create', 'createThema', 'updateQuelle', 'formatClick', 'bausteineClick', 'cancelBausteine', 'resetBausteine', 'deleteTopic', 'cancelGuide', 'deleteGuide', 'dismissError', 'dismissUiError', 'preview', 'openBausteineView', 'openElements', 'togglePin', 'sidebarLeave', 'toggleDark', 'setAnsicht', 'setProvider']) // Accordion: höchstens ein Panel offen. IDs: 'bausteine', 'fmt-', 'topic-'. const openPanel = ref(null) @@ -222,7 +222,7 @@ function confirmDeleteTopic(topic) { armOrRun('topic-' + topic, () => emit('deleteTopic', topic)) } -// --- Thema-Edit: Klick auf ein Thema wählt es UND klappt die Quellen-Form auf --- +// --- Thema-Edit: Name-Klick wählt nur; das Chevron klappt die Quellen-Form auf/zu (Default zu) --- const editTopic = ref(null) const editForm = ref({ type: 'thema', ort: '', spec: '' }) const editLoading = ref(false) @@ -231,7 +231,7 @@ const canSave = computed(() => { return true }) -async function onTopicClick(t) { +async function toggleTopicPanel(t) { emit('select', t) if (openPanel.value === 'topic-' + t) { openPanel.value = null; return } openPanel.value = 'topic-' + t @@ -283,13 +283,22 @@ function saveQuelle() { :title="dark ? 'Hellmodus' : 'Dunkelmodus'" @click="emit('toggleDark')" >{{ dark ? '☀' : '🌙' }} - +
+ + +
@@ -446,9 +455,9 @@ function saveQuelle() { :key="t" :class="{ active: t === selectedTopic, 'li-open': isOpen('topic-' + t) }" > -
- {{ t }} - ▾ +
+ {{ t }} +

Lade…

@@ -563,8 +572,21 @@ function saveQuelle() { border-color: var(--accent-border); } -.new-topic .ansicht-btn { font-weight: 700; } -.new-topic .ansicht-btn.erkl { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } +/* Ansicht-Umschalter: zwei Icon-Buttons (kurzer / langer Text) */ +.ansicht-toggle { display: inline-flex; } +.new-topic .ansicht-toggle button { + padding: 4px 7px; + background: var(--bg); + color: var(--text-muted); + border: 1px solid var(--border-strong); + display: inline-flex; + align-items: center; +} +.new-topic .ansicht-toggle button:first-child { border-radius: 6px 0 0 6px; } +.new-topic .ansicht-toggle button:last-child { border-radius: 0 6px 6px 0; border-left: none; } +.new-topic .ansicht-toggle button:hover { color: var(--accent-hover); } +.new-topic .ansicht-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } +.ansicht-toggle svg { fill: currentColor; display: block; } .stats-bar { display: flex; @@ -574,12 +596,12 @@ function saveQuelle() { } .stat { + position: relative; flex: 1; display: flex; - flex-direction: column; align-items: center; - gap: 1px; - padding: 4px 2px; + justify-content: center; + padding: 7px 2px 4px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 6px; @@ -592,11 +614,18 @@ function saveQuelle() { color: var(--text); } +/* Mini-Titel sitzt auf der oberen Kante des Badges (Legenden-Look) */ .stat-label { - font-size: 0.58rem; + position: absolute; + top: -0.42rem; + left: 50%; + transform: translateX(-50%); + padding: 0 3px; + font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); + background: var(--panel); white-space: nowrap; } @@ -688,13 +717,13 @@ function saveQuelle() { .step-dots { display: inline-flex; - gap: 5px; + gap: 4px; flex: 1; } .step-dot { - width: 10px; - height: 10px; + width: 7px; + height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; @@ -991,8 +1020,8 @@ function saveQuelle() { /* Erstellen — inline aufklappbar (kein Modal) */ .new-topic-toggle { - flex: 1; - padding: 6px 8px; + margin-left: auto; /* rechtsbündig statt volle Breite */ + padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; background: var(--accent); @@ -1053,8 +1082,15 @@ function saveQuelle() { .dlg-create { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .dlg-create:disabled { opacity: 0.45; cursor: default; } -/* Thema-Edit-Panel innerhalb der Themen-Liste */ -.edit-panel { margin: 0 0.75rem 0.5rem; } +/* Thema-Edit-Panel: dezent in die Liste eingefügt — keine Box, nur ein linker Akzent */ +.edit-panel { + margin: 0; + padding: 0.5rem 1rem 0.7rem 1.25rem; + background: var(--accent-soft); + border: none; + border-left: 3px solid var(--accent-border); + border-radius: 0; +} .dlg-delete { margin-right: auto; color: var(--danger); } .dlg-delete.armed { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; } select.dlg-input { cursor: pointer; }