hendrik/vindn.de
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added date selection and filter popup

Browse Source
This commit is contained in:
Hendrik Behme committed 2026-10-09 16:26:56 +02:00
1 parent 739a1eee28
commit 36ed3880e8
16 files changed
+741 -180
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/public/styles.css
+20
View File
@@ -352,6 +352,26 @@ h1,h2,h3{ font-family: var(--f-display); font-weight:700; letter-spacing:-0.01em
pointer-events:auto;
}
.search-card{ padding:14px 16px; flex:1; max-width:560px; }
/* the compact card holds just the date row — size it to that, not to 560px */
.stage-compact .search-card{ flex:none; max-width:100%; }
.date-range{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; font-family:var(--f-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.date-range:first-child{ margin-top:0; }
.date-range input{ padding:5px 8px; border:1px solid var(--line-strong); border-radius:6px; font-family:var(--f-mono); font-size:12px; background:#fff; color:var(--ink); }
.date-range input{ width:112px; }
.date-range .flatpickr-wrapper{ display:inline-block; position:static; }
/* Anchor the popup to the row (Browse) or the whole card (maps) instead of
the input it belongs to — otherwise the "From" calendar, ~308px wide,
starts at the input and runs off the right edge of a phone screen. */
.date-range{ position:relative; }
.search-card{ position:relative; }
.search-card .date-range{ position:static; }
.date-range .flatpickr-calendar.static{ left:0; right:auto; }
.date-range .flatpickr-calendar:before, .date-range .flatpickr-calendar:after{ display:none; }
/* the calendar renders inside .date-range (static), so undo its uppercase mono label styling */
.date-range .flatpickr-calendar{ text-transform:none; letter-spacing:normal; font-family:var(--f-body); font-size:14px; color:var(--ink); }
.flatpickr-day.selected, .flatpickr-day.selected:hover{ background:var(--ink); border-color:var(--ink); }
.flatpickr-day.today:not(.selected){ border-color:var(--accent); }
.date-clear{ background:none; border:none; padding:0 4px; font-family:var(--f-mono); font-size:12px; text-transform:none; letter-spacing:0; color:var(--accent); text-decoration:underline; }
.chip-row-tight{ display:flex; gap:8px; flex-wrap:wrap; max-height:64px; overflow-y:auto; }
.chip-sm{ font-family:var(--f-mono); font-size:11px; padding:6px 12px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft); }
.chip-sm.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }