moritz/lazyflat
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

map view (Leaflet + OSM), iOS switches, Alarm → Benachrichtigungen

Browse source 
* flats: new lat/lng columns (migration v3); alert geocodes every new flat
  through googlemaps and ships coords in the payload
* web: CSP extended for unpkg (leaflet.css) + tile.openstreetmap.org
* Wohnungen tab: Liste/Karte view toggle (segmented, CSS-only via :has(),
  selection persisted in localStorage). Karte shows passende flats as Pins
  on an OSM tile map; Popup per Pin mit Adresse, Zimmer/m²/€ und Link
* Top-strip toggles are now proper iOS-style toggle switches (single
  rounded knob sliding in a pill, red when on), no descriptive subtitle
* Alarm-Karte verlinkt jetzt auf /einstellungen/benachrichtigungen
  (Filter-Karte bleibt /einstellungen/filter)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Moritz 2026-04-21 12:02:40 +02:00
parent d9468f6814
commit 376551213a
8 changed files with 239 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web/templates/base.html
View file

@ -7,7 +7,12 @@
<title>{% block title %}lazyflat{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="/static/app.js" defer></script>
<script src="/static/map.js" defer></script>
<style>
:root {
--bg-from: #e4f0fb; --bg-to: #f7fbfe;
@ -47,17 +52,36 @@
.chip-warn { background: #fff4dd; color: #a36a1f; border: 1px solid #f5d48b; }
.chip-bad { background: #fde6e9; color: #b8404e; border: 1px solid #f5b5bf; }
.chip-info { background: #e3effc; color: #1f5f99; border: 1px solid #b6d4f0; }
/* Segmented toggle (An/Aus Kippschalter) */
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
overflow: hidden; background: var(--surface); font-size: 0.85rem; font-weight: 500; }
.toggle label { padding: 0.45rem 1.1rem; cursor: pointer; user-select: none;
color: var(--muted); transition: background .15s, color .15s; }
.toggle label + label { border-left: 1px solid var(--border); }
.toggle label input[type="radio"] { position: absolute; opacity: 0; pointer-events: none;
width: 0; height: 0; }
.toggle label:hover { color: var(--text); background: var(--ghost); }
.toggle label:has(input:checked) { background: var(--primary); color: #fff; }
.toggle.warn label:has(input[value="on"]:checked) { background: var(--danger); }
/* iOS-style toggle switch */
.switch { position: relative; display: inline-block; width: 46px; height: 26px;
flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-visual { position: absolute; cursor: pointer; inset: 0;
background: #cfd9e6; border-radius: 999px;
transition: background .2s; }
.switch-visual::before { content: ""; position: absolute; width: 20px; height: 20px;
left: 3px; top: 3px; background: #fff; border-radius: 50%;
box-shadow: 0 1px 3px rgba(16,37,63,0.25);
transition: transform .2s; }
.switch input:checked + .switch-visual { background: var(--primary); }
.switch input:checked + .switch-visual::before { transform: translateX(20px); }
.switch.warn input:checked + .switch-visual { background: var(--danger); }
.switch input:focus-visible + .switch-visual { box-shadow: 0 0 0 3px rgba(47,138,224,.25); }
/* View toggle (Liste / Karte) — segmented pill, CSS-only via :has() */
.view-toggle { display: inline-flex; border: 1px solid var(--border);
border-radius: 999px; overflow: hidden; background: var(--surface);
font-size: 0.85rem; font-weight: 500; }
.view-toggle label { padding: 0.35rem 0.95rem; cursor: pointer; user-select: none;
color: var(--muted); transition: background .15s, color .15s; }
.view-toggle input { position: absolute; opacity: 0; pointer-events: none;
width: 0; height: 0; }
.view-toggle label:hover { color: var(--text); background: var(--ghost); }
.view-toggle label:has(input:checked) { background: var(--primary); color: #fff; }
.view-map { display: none; }
body:has(#v_map:checked) .view-list { display: none; }
body:has(#v_map:checked) .view-map { display: block; }
#flats-map { height: 520px; border-radius: 10px; }
.brand-dot {
width: 2rem; height: 2rem; border-radius: 10px;
background: linear-gradient(135deg, #66b7f2 0%, #2f8ae0 60%, #fbd76b 100%);