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

Routen-Fixes: Richtungspfeile (SVG-interne Rotation) + Filter standardmäßig zu

Browse source 
- Pfeile: rotate als SVG-Pfad-Attribut statt CSS-transform am Element (maplibregl.Marker
  überschrieb das transform → Pfeile zeigten alle nach Norden)
- Filter-Panel + Badge: doppeltes class-Attribut (class=X class=hidden) → Browser ignorierte
  'hidden' → Filter immer offen + roter Badge immer an. Zu 'X hidden' gemergt.
This commit is contained in:
rene 2026-06-05 13:13:14 +02:00
parent fbaf7c5409
commit 27a3f954a4
6 changed files with 24 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -150,7 +150,7 @@ window.Page_routes = (() => {
btnRow.innerHTML = `
<button id="rk-filter-btn" style="${_btnStyle()}position:relative">
${UI.icon('gear')} Filter
<span class="rk-filter-badge" id="rk-filter-badge" class="hidden"></span>
<span class="rk-filter-badge hidden" id="rk-filter-badge"></span>
</button>
<label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}">
${UI.icon('download-simple')} Import
@ -214,7 +214,7 @@ window.Page_routes = (() => {
<div style="display:flex;gap:8px">
<button id="rk-filter-btn" style="${_btnStyle()}position:relative">
${UI.icon('gear')} Filter
<span class="rk-filter-badge" id="rk-filter-badge" class="hidden"></span>
<span class="rk-filter-badge hidden" id="rk-filter-badge"></span>
</button>
<label id="rk-imp-wrap" title="GPX / KML / TCX importieren" style="${_btnStyle()}">
${UI.icon('download-simple')} Import
@ -222,7 +222,7 @@ window.Page_routes = (() => {
</label>
<button class="rk-rec-btn" id="rk-rec-btn" style="${_btnStyle(true)}">${UI.icon('path')} Aufzeichnen</button>
</div>
<div class="rk-filter-panel" id="rk-filter-panel" class="hidden">
<div class="rk-filter-panel hidden" id="rk-filter-panel">
<div class="rk-filters" id="rk-filters">
<div class="rk-filter-group">
<div class="rk-filter-label">Schwierigkeit</div>
@ -2631,9 +2631,11 @@ window.Page_routes = (() => {
for (let i = 1; i < track.length - 1; i++) {
if (cum[i] >= next) {
const deg = brng(track[i-1], track[i]);
const html = `<svg width="20" height="20" viewBox="0 0 20 20"
style="transform:rotate(${deg.toFixed(0)}deg);transform-origin:10px 10px;display:block;pointer-events:none">
<path d="M10,3 L15,15 L10,12 L5,15 Z"
// Rotation INNERHALB des SVG (am Pfad), NICHT als CSS-transform am SVG-Element:
// maplibregl.Marker setzt transform:translate() aufs Element → würde rotate() killen
// (Pfeile zeigten alle nach Norden).
const html = `<svg width="20" height="20" viewBox="0 0 20 20" style="display:block;pointer-events:none">
<path d="M10,3 L15,15 L10,12 L5,15 Z" transform="rotate(${deg.toFixed(0)} 10 10)"
fill="${color}" fill-opacity="0.85"
stroke="rgba(0,0,0,0.25)" stroke-width="1" stroke-linejoin="round"/>
</svg>`;