rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Routen-Header aufgeräumt — 3 saubere Zeilen, einheitliche Buttons

Browse source
This commit is contained in:
rene 2026-04-19 12:05:14 +02:00
parent 26bcd07f84
commit 98dd5d74ee
3 changed files with 49 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

20
backend/static/js/pages/routes.js
View file

@ -78,25 +78,29 @@ window.Page_routes = (() => {
<button class="rk-mode-btn${_browseMode==='mine'?' active':''}" id="rk-mode-mine">${UI.icon('user')} Meine Routen</button>
<button class="rk-mode-btn${_browseMode==='discover'?' active':''}" id="rk-mode-discover">${UI.icon('compass')} Entdecken</button>
</div>
<div class="rk-search-row">
<!-- Zeile 2: Suche + View-Toggle -->
<div style="display:flex;gap:var(--space-2);align-items:center">
<div class="diary-search-wrap" style="flex:1;min-width:0">
<svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
<input class="diary-search-input" id="rk-search" type="search"
placeholder="Routen durchsuchen…" autocomplete="off">
placeholder="Routen suchen…" autocomplete="off">
</div>
<div class="rk-view-toggle">
<button class="rk-view-btn${_viewMode==='list'?' active':''}" id="rk-view-list" title="Liste">${UI.icon('list')}</button>
<button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button>
</div>
<button class="btn btn-secondary btn-sm rk-filter-toggle-btn" id="rk-filter-btn" title="Filter">
</div>
<!-- Zeile 3: Aktions-Buttons gleichmäßig -->
<div style="display:flex;gap:var(--space-2)">
<button class="rk-action-btn rk-filter-toggle-btn" id="rk-filter-btn" style="position:relative">
${UI.icon('funnel')} Filter
<span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
</button>
<label class="btn btn-secondary btn-sm rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren">
<label class="rk-action-btn rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="cursor:pointer">
${UI.icon('download-simple')} Import
<input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
</label>
<button class="btn btn-primary btn-sm rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button>
<button class="rk-action-btn rk-action-btn--primary rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button>
</div>
<div class="rk-filter-panel" id="rk-filter-panel" style="display:none">
<div class="rk-filters" id="rk-filters">
@ -200,10 +204,10 @@ window.Page_routes = (() => {
const btn = document.getElementById('rk-rec-btn');
if (!btn) return;
if (recording) {
btn.className = 'btn btn-danger btn-sm rk-rec-btn rk-rec-btn--active';
btn.innerHTML = UI.icon('path') + ' Stopp aufnehmen';
btn.className = 'rk-action-btn rk-action-btn--danger rk-rec-btn rk-rec-btn--active';
btn.innerHTML = UI.icon('path') + ' Stopp';
} else {
btn.className = 'btn btn-primary btn-sm rk-rec-btn';
btn.className = 'rk-action-btn rk-action-btn--primary rk-rec-btn';
btn.innerHTML = UI.icon('path') + ' Aufzeichnen';
}
}