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

UX: Routen-Header alle Zeilen gleiche Höhe 46px, Inline-Styles durchgängig

Browse source
This commit is contained in:
rene 2026-04-19 12:28:18 +02:00
parent 4030da3776
commit 385b4540b3
1 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -105,16 +105,36 @@ 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==='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> <button class="rk-mode-btn${_browseMode==='discover'?' active':''}" id="rk-mode-discover">${UI.icon('compass')} Entdecken</button>
</div> </div>
<!-- Zeile 2: Suche + View-Toggle --> <!-- Zeile 2: Suche + View-Toggle (gleiche Höhe wie Aktions-Buttons) -->
<div style="display:flex;gap:var(--space-2);align-items:center"> <div style="display:flex;gap:8px;align-items:stretch">
<div class="diary-search-wrap" style="flex:1;min-width:0"> <div style="position:relative;flex:1;min-width:0">
<svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg> <svg class="ph-icon" aria-hidden="true"
<input class="diary-search-input" id="rk-search" type="search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);
placeholder="Routen suchen…" autocomplete="off"> color:var(--c-text-muted);pointer-events:none;width:16px;height:16px">
<use href="/icons/phosphor.svg#magnifying-glass"></use>
</svg>
<input id="rk-search" type="search" placeholder="Routen suchen…" autocomplete="off"
style="width:100%;height:46px;padding:0 12px 0 36px;
border:1.5px solid var(--c-border);border-radius:10px;
font-size:14px;font-family:inherit;
background:var(--c-surface);color:var(--c-text);outline:none;
box-sizing:border-box;">
</div> </div>
<div class="rk-view-toggle"> <div style="display:flex;border:1.5px solid var(--c-border);border-radius:10px;
<button class="rk-view-btn${_viewMode==='list'?' active':''}" id="rk-view-list" title="Liste">${UI.icon('list')}</button> overflow:hidden;flex-shrink:0;height:46px">
<button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button> <button id="rk-view-list" title="Liste"
style="padding:0 14px;border:none;cursor:pointer;font-size:14px;
background:${_viewMode==='list' ? 'var(--c-primary)' : 'var(--c-surface)'};
color:${_viewMode==='list' ? '#fff' : 'var(--c-text-secondary)'}">
${UI.icon('list')}
</button>
<button id="rk-view-map" title="Karte"
style="padding:0 14px;border:none;border-left:1.5px solid var(--c-border);
cursor:pointer;font-size:14px;
background:${_viewMode==='map' ? 'var(--c-primary)' : 'var(--c-surface)'};
color:${_viewMode==='map' ? '#fff' : 'var(--c-text-secondary)'}">
${UI.icon('map-trifold')}
</button>
</div> </div>
</div> </div>
<!-- Zeile 3: Aktions-Buttons gleichmäßig (Inline-Styles, cache-unabhängig) --> <!-- Zeile 3: Aktions-Buttons gleichmäßig (Inline-Styles, cache-unabhängig) -->