Routenübersicht: immer Karten-Preview statt erstem Foto, Kamera-Badge bei Routen mit Bildern

Bisher: wenn eine Route Fotos hatte, zeigte die Karten-Übersicht das erste Foto statt der Mini-Map → kein Vergleich der Tracks auf einen Blick möglich. Jetzt: die Mini-Map ist immer da, ein kleiner Kamera-Badge oben rechts zeigt die Anzahl Fotos an (analog zum Tagebuch). Die Fotos sind weiter unverändert in der Route-Detail-Ansicht zu sehen. CSS: .rk-card-preview bekommt position:relative für das Badge.
2026-05-30 18:16:46 +02:00 · 2026-05-30 18:16:46 +02:00 · f934560a12
commit f934560a12
parent 4cfce1051f
7 changed files with 40 additions and 22 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-1138
+1139
--- a/backend/static/css/components.css
+++ b/backend/static/css/components.css
@ -2838,6 +2838,7 @@ html.modal-open {
  overflow:    hidden;
  background:  #e8f0e8;
  flex-shrink: 0;
+  position:    relative;
 }
 .rk-preview-empty {
  display:         flex;
--- a/backend/static/index.html
+++ b/backend/static/index.html
@ -86,14 +86,14 @@
  <title>Ban Yaro</title>

  <!-- Theme + theme-color Statusleiste vor CSS setzen -->
-  <script src="/js/boot-early.js?v=1138"></script>
+  <script src="/js/boot-early.js?v=1139"></script>

  <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
-  <link rel="stylesheet" href="/css/design-system.css?v=1138">
-  <link rel="stylesheet" href="/css/layout.css?v=1138">
-  <link rel="stylesheet" href="/css/components.css?v=1138">
-  <link rel="stylesheet" href="/css/utilities.css?v=1138">
-  <link rel="stylesheet" href="/css/lists.css?v=1138">
+  <link rel="stylesheet" href="/css/design-system.css?v=1139">
+  <link rel="stylesheet" href="/css/layout.css?v=1139">
+  <link rel="stylesheet" href="/css/components.css?v=1139">
+  <link rel="stylesheet" href="/css/utilities.css?v=1139">
+  <link rel="stylesheet" href="/css/lists.css?v=1139">
 </head>
 <body>

@ -617,11 +617,11 @@
 <div id="modal-container"></div>

 <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
-<script src="/js/api.js?v=1138"></script>
-<script src="/js/ui.js?v=1138"></script>
-<script src="/js/app.js?v=1138"></script>
-<script src="/js/worlds.js?v=1138"></script>
-<script src="/js/offline-indicator.js?v=1138"></script>
+<script src="/js/api.js?v=1139"></script>
+<script src="/js/ui.js?v=1139"></script>
+<script src="/js/app.js?v=1139"></script>
+<script src="/js/worlds.js?v=1139"></script>
+<script src="/js/offline-indicator.js?v=1139"></script>

 <!-- Feature-Seiten werden lazy geladen -->

@ -631,7 +631,7 @@


 <!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
-<script src="/js/boot.js?v=1138"></script>
+<script src="/js/boot.js?v=1139"></script>


 </body>
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@ -3,7 +3,7 @@
   Router, State-Management, Navigation, Initialisierung.
   ============================================================ */

-const APP_VER     = '1138'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1139'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 window.APP_VER     = APP_VER;       // global verfügbar für andere Module (z.B. offline-indicator)
 window.APP_VERSION = APP_VERSION;
--- a/backend/static/js/pages/routes.js
+++ b/backend/static/js/pages/routes.js
@ -1411,12 +1411,29 @@ window.Page_routes = (() => {
    const paws      = HUNDE_LABEL[r.hunde_tauglichkeit] || '';
    const dist      = r.distanz_km ? `${r.distanz_km.toFixed(1)} km` : '';
    const dur       = r.dauer_min  ? _fmtDur(r.dauer_min) : '';
-    const firstPhoto = (r.foto_urls || [])[0];
-    const previewContent = firstPhoto
-      ? `<img src="${UI.escape(firstPhoto)}" style="width:100%;height:100%;object-fit:cover">`
-      : `<div class="rk-mini-map" data-id="${r.id}"
-              data-track='${JSON.stringify(r.preview_track||[])}'
-              style="width:100%;height:100%"></div>`;
+    // Immer die Karte zeigen — Fotos erst beim Öffnen der Route.
+    // Bei Routen mit Fotos einen kleinen Kamera-Marker oben rechts
+    // einblenden (analog zum Tagebuch).
+    const photoCount = (r.foto_urls || []).length;
+    const photoBadge = photoCount > 0
+      ? `<div class="rk-photo-badge"
+              style="position:absolute;top:6px;right:6px;z-index:2;
+                     display:flex;align-items:center;gap:3px;
+                     padding:3px 7px;border-radius:999px;
+                     background:rgba(0,0,0,0.55);color:#fff;
+                     font-size:11px;font-weight:600;
+                     backdrop-filter:blur(4px);
+                     -webkit-backdrop-filter:blur(4px);
+                     pointer-events:none">
+           <svg class="ph-icon" aria-hidden="true" style="width:12px;height:12px"><use href="/icons/phosphor.svg#camera"></use></svg>
+           ${photoCount}
+         </div>`
+      : '';
+    const previewContent = `
+      ${photoBadge}
+      <div class="rk-mini-map" data-id="${r.id}"
+           data-track='${JSON.stringify(r.preview_track||[])}'
+           style="width:100%;height:100%"></div>`;

    const authorLine = isDiscover
      ? `<div class="rk-card-creator">${UI.icon('user')} ${UI.escape(r.user_name||'Anonym')}</div>`
--- a/backend/static/landing.html
+++ b/backend/static/landing.html
@ -4,7 +4,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
-  <script src="/js/landing-init.js?v=1138"></script>
+  <script src="/js/landing-init.js?v=1139"></script>
  <title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
  <meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
  <meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@ -4,7 +4,7 @@
   ============================================================ */

 // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
-const VER           = '1138';
+const VER           = '1139';
 const CACHE_VERSION = `by-v${VER}`;
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten