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

45
backend/static/css/components.css
View file

@ -2047,23 +2047,50 @@ html.modal-open {
outline: none;
}
.rk-search:focus { border-color: var(--c-primary); }
.rk-rec-btn {
white-space: nowrap;
flex-shrink: 0;
}
.rk-rec-btn--active {
animation: rec-pulse 1.2s ease-in-out infinite;
}
/* Filter-Panel (aufklappbar) */
.rk-filter-toggle-btn {
position: relative;
flex-shrink: 0;
/* Einheitliche Aktions-Buttons (Filter / Import / Aufzeichnen) */
.rk-action-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
min-height: 40px;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
border: 1.5px solid var(--c-border);
border-radius: var(--radius-md);
background: var(--c-surface);
color: var(--c-text);
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast), border-color var(--transition-fast);
-webkit-tap-highlight-color: transparent;
}
.rk-filter-toggle-btn.active {
.rk-action-btn:hover { background: var(--c-surface-2); }
.rk-action-btn:active { background: var(--c-border); }
.rk-action-btn--primary {
background: var(--c-primary);
border-color: var(--c-primary);
color: #fff;
}
.rk-action-btn--primary:hover { background: var(--c-primary-dark); }
.rk-action-btn--danger {
background: var(--c-danger);
border-color: var(--c-danger);
color: #fff;
}
/* Filter-Panel (aufklappbar) */
.rk-filter-toggle-btn.active {
background: var(--c-primary-subtle);
border-color: var(--c-primary);
color: var(--c-primary);
}
.rk-filter-badge {
position: absolute;
top: 2px;

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '234'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '235'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

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';
}
}