tobias/podcast-mindmap
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Podcast-Selector im Hauptbereich statt nur im Seitenpanel

Browse Source 
Der Selector war vorher nur im 400px-Panel rechts sichtbar — auf Mobile
oder bei schmalem Fenster quasi unsichtbar. Jetzt wird er zentriert im
Mindmap-Bereich angezeigt, bis ein Podcast gewählt wird.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dotty Dotter 2026-04-24 10:39:10 +02:00
parent 78d66bef21
commit c146d7ddb2
1 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
webapp/index.html
View File

@ -921,13 +921,19 @@ async function selectPodcast(podcastId) {
const resp = await fetch(`${API_BASE}/api/podcasts/${podcastId}`); const resp = await fetch(`${API_BASE}/api/podcasts/${podcastId}`);
DATA = await resp.json(); DATA = await resp.json();
CURRENT_PODCAST = podcastId; CURRENT_PODCAST = podcastId;
// Clear existing graph + timeline if switching // Reset mindmap area (might have been used for selector)
document.getElementById('svg').innerHTML = ''; const mindmap = document.getElementById('mindmap');
mindmap.style.display = '';
mindmap.style.alignItems = '';
mindmap.style.justifyContent = '';
mindmap.style.flexDirection = '';
mindmap.style.padding = '';
mindmap.innerHTML = '<svg id="svg"></svg>';
// Clear filters + timeline
document.getElementById('staffel-filters').innerHTML = ''; document.getElementById('staffel-filters').innerHTML = '';
const tl = document.getElementById('timeline-container'); const tl = document.getElementById('timeline-container');
if (tl) { tl.remove(); timelineBuilt = false; } if (tl) { tl.remove(); timelineBuilt = false; }
// Reset to mindmap view // Reset to mindmap view
document.getElementById('mindmap').style.display = '';
document.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.view-tab').forEach(t => t.classList.remove('active'));
document.getElementById('tab-mindmap')?.classList.add('active'); document.getElementById('tab-mindmap')?.classList.add('active');
TRANSCRIPTS = null; TRANSCRIPTS = null;
@ -949,24 +955,35 @@ function showPodcastSelector(podcasts) {
document.getElementById('cross-toggle').style.display = ''; document.getElementById('cross-toggle').style.display = '';
} }
let html = '<div class="welcome"><h2>Podcast Mindmap</h2><p>Wähle einen Podcast oder vergleiche zwei.</p></div>'; // Hide mindmap, show selector full-width in mindmap area
html += '<div class="podcast-selector" id="podcast-selector">'; mindmap.innerHTML = '';
mindmap.style.display = 'flex';
mindmap.style.alignItems = 'center';
mindmap.style.justifyContent = 'center';
mindmap.style.flexDirection = 'column';
mindmap.style.padding = '20px';
let selectorHtml = '<div class="welcome"><h2>Podcast Mindmap</h2><p>Wähle einen Podcast oder vergleiche zwei.</p></div>';
selectorHtml += '<div class="podcast-selector" id="podcast-selector">';
podcasts.forEach(p => { podcasts.forEach(p => {
html += `<div class="podcast-card" id="pc-${p.id}" onclick="selectPodcast('${p.id}')">`; selectorHtml += `<div class="podcast-card" id="pc-${p.id}" onclick="selectPodcast('${p.id}')">`;
html += `<h3>${escHtml(p.name)}</h3>`; selectorHtml += `<h3>${escHtml(p.name)}</h3>`;
html += `<p>${escHtml(p.description || '')}</p>`; selectorHtml += `<p>${escHtml(p.description || '')}</p>`;
html += `</div>`; selectorHtml += `</div>`;
}); });
html += '</div>'; selectorHtml += '</div>';
if (podcasts.length > 1) { if (podcasts.length > 1) {
html += '<div class="compare-actions">'; selectorHtml += '<div class="compare-actions">';
html += '<button class="compare-btn" onclick="startCompare()">Podcasts vergleichen</button>'; selectorHtml += '<button class="compare-btn" onclick="startCompare()">Podcasts vergleichen</button>';
html += '</div>'; selectorHtml += '</div>';
} }
html += '<div id="compare-result"></div>'; selectorHtml += '<div id="compare-result"></div>';
panel.innerHTML = html; mindmap.innerHTML = selectorHtml;
// Panel: minimal welcome
panel.innerHTML = '<div class="welcome"><h2>Willkommen</h2><p>Wähle links einen Podcast.</p></div>';
document.getElementById('app-title').textContent = 'Podcast'; document.getElementById('app-title').textContent = 'Podcast';
document.title = 'Podcast Mindmap'; document.title = 'Podcast Mindmap';