Offline-Karten: POI-Marker offlinetauglich + Offline-Banner klappt ein (Geraetetest-Befunde)

- MapOffline.downloadAround speichert zusaetzlich /api/osm/pois je Typ fuer die
  Region-Bbox in IndexedDB (Key-Praefix p/, Merge per id — zweite Region loescht
  die erste nicht); MapOffline.pois(type,bbox) filtert fuer den Ausschnitt
- map.js Phase-1-Fallback: Fetch fehlgeschlagen (offline) -> gespeicherte
  Region-POIs statt leerer Karte; Download-Toast zeigt Marker-Anzahl
- Offline-Banner: nach 5s auf schmale Icon-Leiste eingeklappt (verdeckte die
  Karten-Legende); Inline-Styles nach components.css konsolidiert
- Bump v1223
This commit is contained in:
rene 2026-06-06 11:25:40 +02:00
parent c5bdad2d86
commit e2c75f04bc
9 changed files with 106 additions and 37 deletions

View file

@ -86,24 +86,19 @@
<title>Ban Yaro</title>
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
<script src="/js/boot-early.js?v=1222"></script>
<script src="/js/boot-early.js?v=1223"></script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1222">
<link rel="stylesheet" href="/css/layout.css?v=1222">
<link rel="stylesheet" href="/css/components.css?v=1222">
<link rel="stylesheet" href="/css/utilities.css?v=1222">
<link rel="stylesheet" href="/css/lists.css?v=1222">
<link rel="stylesheet" href="/css/design-system.css?v=1223">
<link rel="stylesheet" href="/css/layout.css?v=1223">
<link rel="stylesheet" href="/css/components.css?v=1223">
<link rel="stylesheet" href="/css/utilities.css?v=1223">
<link rel="stylesheet" href="/css/lists.css?v=1223">
</head>
<body>
<!-- Offline-Banner -->
<div id="offline-banner" aria-live="polite"
style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;
background:#1f2937;color:#f3f4f6;font-size:0.78rem;font-weight:500;
padding:calc(env(safe-area-inset-top, 0px) + 7px) 16px 7px;
align-items:center;justify-content:center;gap:8px;
box-shadow:0 2px 8px rgba(0,0,0,.3)">
<!-- Offline-Banner (Styling in components.css — boot.js toggelt display + .collapsed) -->
<div id="offline-banner" aria-live="polite">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 256 256">
<path d="M213.92,210.62l-160-176A8,8,0,1,0,42.08,45.38L81.06,88.86A152.34,152.34,0,0,0,26.49,130a8,8,0,0,0,11,11.61,136.36,136.36,0,0,1,52-37.29l19.2,21.12A96.09,96.09,0,0,0,67.6,160.59,8,8,0,1,0,79,172.2a80.12,80.12,0,0,1,33.5-23.89L128,165.37V224a8,8,0,0,0,16,0V183.94l69.92,76.92a8,8,0,1,0,11.84-10.76ZM128,141.46,108.42,120A80.38,80.38,0,0,1,128,116a79.91,79.91,0,0,1,19.59,2.43l-19.59,23Zm0-85.46a167.9,167.9,0,0,1,101.51,34.17,8,8,0,1,0,9.72-12.72A183.82,183.82,0,0,0,128,40a183.5,183.5,0,0,0-48.55,6.55L95,64.18A168.23,168.23,0,0,1,128,56Zm57.09,72.41a8,8,0,0,0,11.22-1.36,8,8,0,0,0-1.36-11.22,136.72,136.72,0,0,0-31.62-18.23L178,114.26A120.52,120.52,0,0,1,185.09,128.41Z"/>
</svg>
@ -617,11 +612,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1222"></script>
<script src="/js/ui.js?v=1222"></script>
<script src="/js/app.js?v=1222"></script>
<script src="/js/worlds.js?v=1222"></script>
<script src="/js/offline-indicator.js?v=1222"></script>
<script src="/js/api.js?v=1223"></script>
<script src="/js/ui.js?v=1223"></script>
<script src="/js/app.js?v=1223"></script>
<script src="/js/worlds.js?v=1223"></script>
<script src="/js/offline-indicator.js?v=1223"></script>
<!-- Feature-Seiten werden lazy geladen -->
@ -631,7 +626,7 @@
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
<script src="/js/boot.js?v=1222"></script>
<script src="/js/boot.js?v=1223"></script>
</body>