diff --git a/app/static/css/style.css b/app/static/css/style.css index 6352010..bf40143 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -494,14 +494,20 @@ h1, .page-title h1 { .comment-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.9rem; } .comment-meta strong { color:var(--text); } .comment p { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; } -.search-form select { margin:0; padding:10px 12px; color:var(--text); background:#101010; border:1px solid var(--border); border-radius:9px; font:inherit; } -.clear-filters { grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; color:#fca5a5; border:1px solid var(--border); border-radius:9px; background:#171212; white-space:nowrap; } +.search-form select, .advanced-filters input { margin:0; padding:10px 12px; color:var(--text); background:#101010; border:1px solid var(--border); border-radius:9px; font:inherit; } +.advanced-filters { grid-column:1 / -1; border:1px solid var(--border); border-radius:9px; background:#0d0d0d; } +.advanced-filters summary { padding:10px 12px; color:#fca5a5; cursor:pointer; font-weight:700; } +.advanced-filter-fields { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:0 12px 12px; } +.advanced-filter-fields label { display:grid; gap:5px; color:var(--muted); font-size:.85rem; } +.advanced-filter-fields select { width:100%; } +.clear-filters { grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; color:#fca5a5; border:1px solid var(--border); border-radius:9px; background:#171212; white-space:nowrap; justify-self:start; } .clear-filters:hover { border-color:#ef4444; color:#fff; } .ticket-button-container, .detail-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; } .calendar-export { display:flex; justify-content:center; margin-top:12px; } .ticket-button, .concert-action { display:inline-flex; padding:11px 16px; border:1px solid #b91c1c; border-radius:9px; background:#7f1d1d; color:#fff; font-weight:700; } .concert-action-delete { background:#450a0a; cursor:pointer; } @media (max-width:600px) { .detail-topbar { align-items:flex-start; } .concert-detail { padding:16px; } .comment-meta { flex-direction:column; gap:4px; } } +@media (max-width:700px) { .advanced-filter-fields { grid-template-columns:1fr; } } @media (max-width: 600px) { .logo { max-width: 150px; } diff --git a/app/templates/index.html b/app/templates/index.html index 5afeb72..01bf6b8 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -156,7 +156,7 @@ } .search-panel { margin-bottom: 26px; padding: 16px; background: rgba(16,16,16,.92); border: 1px solid #3a3030; border-radius: 14px; } - .search-form { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 10px; } + .search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items:start; } .search-form input { margin: 0; } .search-results-title { margin: 24px 0 12px; font-size: 1.15rem; } .user-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 24px; } @@ -265,12 +265,17 @@
- - - - - +
+ Weitere Filter{% if filters.date_from or filters.date_to or filters.venue or filters.country or filters.category %} · aktiv{% endif %} +
+ + + + + +
+
{% if filters.date_from or filters.date_to or filters.venue or filters.country or filters.category %}Filter löschen{% endif %}