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

Fix: Routen-Header Buttons mit Inline-Styles (cache-unabhängig wie Pills)

Browse source
This commit is contained in:
rene 2026-04-19 12:07:37 +02:00
parent 98dd5d74ee
commit d374b5af61
2 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -90,17 +90,17 @@ window.Page_routes = (() => {
<button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button> <button class="rk-view-btn${_viewMode==='map'?' active':''}" id="rk-view-map" title="Karte">${UI.icon('map-trifold')}</button>
</div> </div>
</div> </div>
<!-- Zeile 3: Aktions-Buttons gleichmäßig --> <!-- Zeile 3: Aktions-Buttons gleichmäßig (Inline-Styles, cache-unabhängig) -->
<div style="display:flex;gap:var(--space-2)"> <div style="display:flex;gap:8px">
<button class="rk-action-btn rk-filter-toggle-btn" id="rk-filter-btn" style="position:relative"> <button id="rk-filter-btn" style="${_btnStyle()}position:relative">
${UI.icon('funnel')} Filter ${UI.icon('funnel')} Filter
<span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span> <span class="rk-filter-badge" id="rk-filter-badge" style="display:none"></span>
</button> </button>
<label class="rk-action-btn rk-imp-btn" id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="cursor:pointer"> <label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}cursor:pointer">
${UI.icon('download-simple')} Import ${UI.icon('download-simple')} Import
<input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none"> <input type="file" id="rk-import-input" accept=".gpx,.kml,.tcx" style="display:none">
</label> </label>
<button class="rk-action-btn rk-action-btn--primary rk-rec-btn" id="rk-rec-btn">${UI.icon('path')} Aufzeichnen</button> <button class="rk-rec-btn" id="rk-rec-btn" style="${_btnStyle(true)}">${UI.icon('path')} Aufzeichnen</button>
</div> </div>
<div class="rk-filter-panel" id="rk-filter-panel" style="display:none"> <div class="rk-filter-panel" id="rk-filter-panel" style="display:none">
<div class="rk-filters" id="rk-filters"> <div class="rk-filters" id="rk-filters">
@ -204,11 +204,14 @@ window.Page_routes = (() => {
const btn = document.getElementById('rk-rec-btn'); const btn = document.getElementById('rk-rec-btn');
if (!btn) return; if (!btn) return;
if (recording) { if (recording) {
btn.className = 'rk-action-btn rk-action-btn--danger rk-rec-btn rk-rec-btn--active'; btn.className = 'rk-rec-btn rk-rec-btn--active';
btn.innerHTML = UI.icon('path') + ' Stopp'; btn.style.cssText = _btnStyle() +
'border-color:var(--c-danger);background:var(--c-danger);color:#fff;flex:1;';
btn.innerHTML = UI.icon('path') + ' Stopp';
} else { } else {
btn.className = 'rk-action-btn rk-action-btn--primary rk-rec-btn'; btn.className = 'rk-rec-btn';
btn.innerHTML = UI.icon('path') + ' Aufzeichnen'; btn.style.cssText = _btnStyle(true) + 'flex:1;';
btn.innerHTML = UI.icon('path') + ' Aufzeichnen';
} }
} }
@ -694,6 +697,14 @@ window.Page_routes = (() => {
</svg>`; </svg>`;
} }
// Button-Hilfsfunktion für Header-Buttons (cache-unabhängig)
const _btnStyle = (primary = false) =>
`flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;` +
`padding:8px 12px;min-height:40px;font-size:13px;font-weight:600;` +
`border-radius:8px;border:1.5px solid ${primary ? 'var(--c-primary)' : 'var(--c-border)'};` +
`background:${primary ? 'var(--c-primary)' : 'var(--c-surface)'};` +
`color:${primary ? '#fff' : 'var(--c-text)'};white-space:nowrap;`;
// Pill-Hilfsfunktionen (inline styles — unabhängig vom CSS-Cache) // Pill-Hilfsfunktionen (inline styles — unabhängig vom CSS-Cache)
const _pillStyle = (bg, color, border) => const _pillStyle = (bg, color, border) =>
`display:inline-flex;align-items:center;font-size:10px;font-weight:600;` + `display:inline-flex;align-items:center;font-size:10px;font-weight:600;` +