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

Fix: Pills mit Inline-Styles (CSS-Cache-unabhängig) + CSS-Version gebumpt

Browse source
This commit is contained in:
rene 2026-04-19 11:56:47 +02:00
parent eabc88f0b8
commit 01a499b740
3 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
backend/static/index.html
View file

@ -32,8 +32,8 @@
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/layout.css?v=93">
<link rel="stylesheet" href="/css/components.css?v=93">
<link rel="stylesheet" href="/css/layout.css?v=232">
<link rel="stylesheet" href="/css/components.css?v=232">
</head>
<body>

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

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

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

@ -692,6 +692,14 @@ window.Page_routes = (() => {
</svg>`;
}
// Pill-Hilfsfunktionen (inline styles — unabhängig vom CSS-Cache)
const _pillStyle = (bg, color, border) =>
`display:inline-flex;align-items:center;font-size:10px;font-weight:600;` +
`padding:2px 8px;border-radius:999px;white-space:nowrap;` +
`background:${bg};color:${color};border:1px solid ${border};`;
const _pill = (text, bg, color, border) =>
`<span style="${_pillStyle(bg, color, border)}">${text}</span>`;
// ----------------------------------------------------------
// Detail-Modal
// ----------------------------------------------------------
@ -723,18 +731,19 @@ window.Page_routes = (() => {
margin-bottom:var(--space-3);background:var(--c-surface-2)"></div>
${photoGallery}
<div style="display:flex;flex-wrap:wrap;gap:6px;margin:var(--space-3) 0">
${route.distanz_km ? `<span class="rk-pill rk-pill--neutral">${route.distanz_km.toFixed(1)} km</span>` : ''}
${route.dauer_min ? `<span class="rk-pill rk-pill--neutral">${_fmtDur(route.dauer_min)}</span>` : ''}
${route.schwierigkeit ? `<span class="rk-pill" style="${DIFF_COLOR[route.schwierigkeit]||''}">${DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit}</span>` : ''}
${route.hunde_tauglichkeit ? `<span class="rk-pill rk-pill--dog">${HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit}</span>` : ''}
${route.distanz_km ? _pill(route.distanz_km.toFixed(1)+' km', '#f1f5f9','#475569','#e2e8f0') : ''}
${route.dauer_min ? _pill(_fmtDur(route.dauer_min), '#f1f5f9','#475569','#e2e8f0') : ''}
${route.schwierigkeit ? _pill(DIFFICULTY_LABEL[route.schwierigkeit]||route.schwierigkeit,
({leicht:'#dcfce7',mittel:'#fef9c3',anspruchsvoll:'#fee2e2'})[route.schwierigkeit]||'#f1f5f9',
({leicht:'#15803d',mittel:'#92400e',anspruchsvoll:'#991b1b'})[route.schwierigkeit]||'#475569',
({leicht:'#bbf7d0',mittel:'#fde68a',anspruchsvoll:'#fecaca'})[route.schwierigkeit]||'#e2e8f0') : ''}
${route.hunde_tauglichkeit ? _pill(HUNDE_TEXT[route.hunde_tauglichkeit]||route.hunde_tauglichkeit,'#fef3c7','#92400e','#fde68a') : ''}
${isOwn
? `<button type="button" id="rd-vis-pill"
class="rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}"
style="border:none;cursor:pointer;font:inherit"
title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}">
? `<button type="button" id="rd-vis-pill" title="${route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen'}"
style="${_pillStyle(route.is_public?'#dcfce7':'#dbeafe', route.is_public?'#15803d':'#1d4ed8', route.is_public?'#bbf7d0':'#bfdbfe')}cursor:pointer;">
${route.is_public ? 'Öffentlich' : 'Privat'}
</button>`
: (!route.is_public ? `<span class="rk-pill rk-pill--private">Privat</span>` : `<span class="rk-pill rk-pill--public">Öffentlich</span>`)
: _pill(route.is_public?'Öffentlich':'Privat', route.is_public?'#dcfce7':'#dbeafe', route.is_public?'#15803d':'#1d4ed8', route.is_public?'#bbf7d0':'#bfdbfe')
}
</div>
${route.beschreibung ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-3)">${UI.escape(route.beschreibung)}</p>` : ''}
@ -825,7 +834,10 @@ window.Page_routes = (() => {
await API.routes.update(route.id, { is_public: !route.is_public });
route.is_public = !route.is_public;
if (pill) {
pill.className = `rk-pill ${route.is_public ? 'rk-pill--public' : 'rk-pill--private'}`;
pill.style.cssText = _pillStyle(
route.is_public ? '#dcfce7' : '#dbeafe',
route.is_public ? '#15803d' : '#1d4ed8',
route.is_public ? '#bbf7d0' : '#bfdbfe') + 'cursor:pointer;';
pill.innerHTML = route.is_public ? 'Öffentlich' : 'Privat';
pill.title = route.is_public ? 'Auf Privat setzen' : 'Auf Öffentlich setzen';
}