Sascha/Aime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GUI: Splitter zwischen Liste und Detail (340-680px, persistent)

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0113vDKdSNtD3Dwcw4QMu9yV
This commit is contained in:
schakal00783
2026-07-17 02:00:03 +02:00
co-authored by Claude Fable 5
parent f7c50b2b6b
commit 2c9015dd7c
3 changed files with 37 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/src/main.js
+21
View File
@@ -289,8 +289,29 @@ function viewRecordings() {
v.innerHTML = `
<div class="rec-layout">
<aside class="rec-list-pane"><div id="reclist" class="list">Lade…</div></aside>
<div class="rec-splitter" title="Ziehen: Listenbreite ändern"></div>
<section class="rec-detail-pane"><div id="detail"><div class="detail-empty muted">← Aufnahme wählen</div></div></section>
</div>`;
// Draggable splitter: list width between LIST_MIN (the old fixed width) and
// twice that; persisted for all sessions.
const LIST_MIN = 340, LIST_MAX = 680;
const listPane = v.querySelector('.rec-list-pane');
const applyW = (w) => { listPane.style.flex = `0 0 ${Math.min(LIST_MAX, Math.max(LIST_MIN, w))}px`; };
applyW(+localStorage.getItem('aime-list-width') || LIST_MIN);
v.querySelector('.rec-splitter').onmousedown = (e) => {
e.preventDefault();
const startX = e.clientX, startW = listPane.getBoundingClientRect().width;
document.body.classList.add('resizing');
const move = (ev) => applyW(startW + (ev.clientX - startX));
const up = () => {
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', up);
document.body.classList.remove('resizing');
localStorage.setItem('aime-list-width', Math.round(listPane.getBoundingClientRect().width));
};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', up);
};
refreshRecList();
if (state.selectedId != null) openRecording(state.selectedId);
}
app/web/src/style.css
+9 -2
View File
@@ -175,7 +175,13 @@ audio { width: 100%; margin-bottom: 10px; }
.ana-line { margin: 2px 0 8px; }
/* ---- Aufnahmen: Liste links, Detail rechts ---- */
.rec-layout { display: flex; gap: 14px; align-items: flex-start; }
.rec-layout { display: flex; gap: 8px; align-items: flex-start; }
.rec-splitter {
flex: 0 0 6px; align-self: stretch; cursor: col-resize; border-radius: 3px;
background: transparent; transition: background .12s;
}
.rec-splitter:hover, body.resizing .rec-splitter { background: var(--accent-soft); }
body.resizing { cursor: col-resize; user-select: none; }
.rec-list-pane {
flex: 0 0 340px; position: sticky; top: 12px; max-height: calc(100vh - 90px);
overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
@@ -268,7 +274,8 @@ audio { width: 100%; margin-bottom: 10px; }
@media (max-width: 800px) {
#app.wide { max-width: 860px; }
.rec-layout { flex-direction: column; }
.rec-list-pane { flex: none; width: 100%; position: static; max-height: 340px; }
.rec-list-pane { flex: none !important; width: 100%; position: static; max-height: 340px; }
.rec-splitter { display: none; }
.topbar nav { margin-left: 0; width: 100%; order: 3; }
}