Anpassungen Event Uebersicht II
This commit is contained in:
parent
23f3e85543
commit
433743069c
@ -215,7 +215,7 @@ textarea:focus {
|
||||
.option-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: 1.25rem;
|
||||
padding: var(--space-31);
|
||||
border: 1.5px solid var(--olive-light);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter-light);
|
||||
@ -241,11 +241,6 @@ textarea:focus {
|
||||
background: var(--olive-light);
|
||||
}
|
||||
|
||||
/*
|
||||
.option-card:has(input:checked) small {
|
||||
color: rgba(247, 246, 230, 0.88);
|
||||
}*/
|
||||
|
||||
.option-card--invalid {
|
||||
border-color: var(--tomato) !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
|
||||
@ -344,7 +339,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.error-message {
|
||||
order: -1; /* nach oben verschieben */
|
||||
order: -1; /* nach oben verschieben */
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@ -368,7 +363,7 @@ textarea:focus {
|
||||
.progress {
|
||||
flex: 1;
|
||||
height: 0.3rem;
|
||||
background: var(--olive-lightg);
|
||||
background: var(--olive-light);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -523,15 +518,6 @@ textarea:focus-visible {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.button--text {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*
|
||||
.button--primary {
|
||||
width: 100%;
|
||||
*/
|
||||
|
||||
.event-flow-header {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@ -556,4 +542,4 @@ textarea:focus-visible {
|
||||
.option-grid--4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -71,7 +71,6 @@
|
||||
color: var(--olive);
|
||||
font-size: 18px;
|
||||
letter-spacing: var(--ls-la);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
@ -84,32 +83,32 @@
|
||||
|
||||
.category-group {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
gap: var(--space-1);
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
border: 2px solid var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter);
|
||||
color: var(--black);
|
||||
border: 1.5px solid var(--tomato);
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--butter-light);
|
||||
color: var(--tomato);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
padding: var(--space-1) var(--space-31);
|
||||
min-height: 40px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.category-item:hover {
|
||||
background: #faf8e8;
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.category-item.active {
|
||||
border-color: transparent;
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
background: var(--tomato);
|
||||
color: var(--butter-light);
|
||||
}
|
||||
|
||||
.meta-filter-group {
|
||||
@ -130,26 +129,26 @@
|
||||
|
||||
.meta-filter select,
|
||||
.meta-filter input[type="date"] {
|
||||
border: 2px solid var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--butter);
|
||||
border: 1.5px solid var(--tomato);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--butter-light);
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
min-height: 40px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*
|
||||
.meta-filter select:focus,
|
||||
.meta-filter input[type="date"]:focus {
|
||||
outline: 2px solid rgba(107, 107, 5, 0.35);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
}*/
|
||||
|
||||
.meta-filter input[type="date"] {
|
||||
color-scheme: light;
|
||||
accent-color: var(--olive);
|
||||
accent-color: var(--tomato);
|
||||
}
|
||||
|
||||
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
@ -185,7 +184,7 @@
|
||||
|
||||
.event-card {
|
||||
/* Core card container for every overview event entry. */
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: var(--butter-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5) 40px var(--space-4);
|
||||
display: flex;
|
||||
@ -193,7 +192,12 @@
|
||||
align-items: flex-start;
|
||||
gap: var(--space-6);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.event-card:hover {
|
||||
box-shadow: var(--shadow-interaction);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.event-main {
|
||||
@ -202,29 +206,29 @@
|
||||
}
|
||||
|
||||
.event-date-time {
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
gap: var(--space-0);
|
||||
}
|
||||
|
||||
.event-top-row {
|
||||
/* Primary metadata line: location + date/time/guest counters. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
margin-bottom: var(--space-1);
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.event-location {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: var(--space-0);
|
||||
}
|
||||
|
||||
.event-location img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
.event-location .icon path{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
display: block;
|
||||
filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(501%) hue-rotate(22deg) brightness(96%) contrast(96%);
|
||||
}
|
||||
|
||||
.event-meta-row {
|
||||
@ -283,7 +287,7 @@
|
||||
/* Sold-out visual state, intentionally high-contrast and always filled. */
|
||||
border: 2px solid var(--tomato);
|
||||
border-radius: var(--radius-pill);
|
||||
color: var(--white);
|
||||
color: var(--butter-light);
|
||||
background: var(--tomato);
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
@ -308,39 +312,6 @@
|
||||
background: var(--olive);
|
||||
}
|
||||
|
||||
.btn-primary-register:hover,
|
||||
.btn-primary-register:focus-visible {
|
||||
background: #575704;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(107, 107, 5, 0.28);
|
||||
}
|
||||
|
||||
.btn-primary-register:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(107, 107, 5, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary-danger {
|
||||
background: var(--tomato);
|
||||
}
|
||||
|
||||
.btn-primary-danger:hover,
|
||||
.btn-primary-danger:focus-visible {
|
||||
background: var(--tomato-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 10px rgba(188, 74, 52, 0.28);
|
||||
}
|
||||
|
||||
.btn-primary-danger:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(188, 74, 52, 0.25);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary-own,
|
||||
.btn-primary-own:disabled {
|
||||
background: var(--olive-light);
|
||||
@ -396,7 +367,7 @@
|
||||
border: 0;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
color: var(--butter-light);
|
||||
font-weight: 600;
|
||||
padding: 10px 22px;
|
||||
cursor: pointer;
|
||||
@ -440,7 +411,7 @@
|
||||
}
|
||||
|
||||
.detail-top-row {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
flex-wrap: wrap;
|
||||
@ -489,7 +460,7 @@
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
color: var(--butter-light);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -607,7 +578,7 @@
|
||||
right: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--white);
|
||||
color: var(--butter-light);
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
@ -656,7 +627,7 @@
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: var(--tomato);
|
||||
color: var(--white);
|
||||
color: var(--butter-light);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -705,18 +676,21 @@
|
||||
|
||||
.detail-action-bar {
|
||||
/* Sticky bottom CTA bar with summary and booking controls. */
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid var(--olive-light);
|
||||
background: var(--white);
|
||||
backdrop-filter: blur(3px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(3px) saturate(140%);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-interaction);
|
||||
|
||||
padding: 10px 14px;
|
||||
position: sticky;
|
||||
bottom: 18px;
|
||||
z-index: 12;
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.detail-action-summary {
|
||||
@ -897,10 +871,6 @@
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.category-group {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
font-size: 15px;
|
||||
padding: 8px 14px;
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
--olive-dark: #545404;
|
||||
--olive-light: #C8CC7A;
|
||||
--butter: #F5F1BC;
|
||||
--butter-light: #F7F6E6;
|
||||
--butter-light: #FAF9F0;
|
||||
--white: #ffffff;
|
||||
--black: #141411;
|
||||
--brown: #66340d;
|
||||
@ -39,9 +39,11 @@
|
||||
--shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1);
|
||||
|
||||
/* Spacing Scale > 1rem = 16px*/
|
||||
--space-0: 0.25rem; /* 4px */
|
||||
--space-1: 0.5rem; /* 8px */
|
||||
--space-2: 0.75rem; /* 12px */
|
||||
--space-3: 1rem; /* 16px */
|
||||
--space-31: 1.25rem; /* 20px */
|
||||
--space-4: 1.5rem; /* 24px */
|
||||
--space-5: 2rem; /* 32px */
|
||||
--space-6: 2.5rem; /* 40px */
|
||||
@ -79,7 +81,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: clamp(2.25rem, 5vw, 3rem);
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
@ -88,6 +90,15 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
letter-spacing: var(--ls-sm);
|
||||
color: var(--brown);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
line-height: 120%;
|
||||
@ -122,6 +133,13 @@ p {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex: 0 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
.top-nav-wrap {
|
||||
position: sticky;
|
||||
@ -234,7 +252,7 @@ p {
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter);
|
||||
color: var(--butter-light);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
@ -245,6 +263,36 @@ p {
|
||||
border-color: var(--olive-dark);
|
||||
}
|
||||
|
||||
.button-primary:disabled {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
color: var(--olive-dark);
|
||||
opacity: 0.6;
|
||||
padding: 0.375rem 0 0.375rem 1.5rem;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-primary-abmelden {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
background-color: var(--blue);
|
||||
border: 1.5px solid var(--blue);
|
||||
border-radius: var(--radius-lg);
|
||||
font-family: var(--font-main);
|
||||
font-weight: 400;
|
||||
font-size: 1.25rem;
|
||||
color: var(--butter-light);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.button-primary-abmelden:hover,
|
||||
.button-primary-abmelden:focus-visible {
|
||||
background: var(--blue-dark);
|
||||
border-color: var(--blue-dark);
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1.5rem;
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Japanese Delight",
|
||||
"location": "ZÜRICH",
|
||||
"location": "Zürich",
|
||||
"address": "Limmatquai 92, 8001 Zürich",
|
||||
"date": "02. MAI. 2026",
|
||||
"time": "12:30 UHR",
|
||||
|
||||
@ -4,12 +4,14 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event-Overview</title>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_overview.css">
|
||||
<script src="js/navigation.js" defer></script>
|
||||
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -28,7 +30,7 @@
|
||||
<!-- Main content: page headline, filter controls and dynamic event list -->
|
||||
<main class="container">
|
||||
<!-- Page headline -->
|
||||
<h1 class="overview-title">Events</h1>
|
||||
<h1>Events</h1>
|
||||
|
||||
<!-- Filter section: category chips + location/date filters -->
|
||||
<section class="filter-section">
|
||||
@ -36,11 +38,11 @@
|
||||
<div class="filter-row">
|
||||
<!-- Primary category filter buttons -->
|
||||
<div class="category-group">
|
||||
<button class="category-item" type="button" data-cat="BRUNCH">BRUNCH</button>
|
||||
<button class="category-item" type="button" data-cat="LUNCH">LUNCH</button>
|
||||
<button class="category-item" type="button" data-cat="DINNER">DINNER</button>
|
||||
<button class="category-item" type="button" data-cat="COFFEE">COFFEE</button>
|
||||
<button class="category-item active" type="button" data-cat="ALLE">ALLE</button>
|
||||
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
|
||||
<button class="category-item" type="button" data-cat="BRUNCH">Brunch</button>
|
||||
<button class="category-item" type="button" data-cat="LUNCH">Lunch</button>
|
||||
<button class="category-item" type="button" data-cat="COFFEE">Kaffee + Kuchen</button>
|
||||
<button class="category-item" type="button" data-cat="DINNER">Dinner</button>
|
||||
</div>
|
||||
|
||||
<!-- Secondary filters populated/handled by JavaScript -->
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
// DOM entry point and shared asset path.
|
||||
// -------------------------------------------------------------
|
||||
const detailContainer = document.getElementById('detail-view');
|
||||
const locationIconPath = 'assets/icon_location-pin.svg';
|
||||
const locationIconPath = 'assets/icon_location.svg';
|
||||
const calendarIconPath = 'assets/icon_calendar.svg';
|
||||
const currentUser = getCurrentUser();
|
||||
|
||||
// Read event id from query string (detail page deep-link support).
|
||||
@ -347,11 +348,12 @@
|
||||
|
||||
<section class="detail-hero">
|
||||
<div class="detail-top-row">
|
||||
<span class="event-location">
|
||||
<img src="${locationIconPath}" alt="">
|
||||
<span class="event-location">
|
||||
<img src="${locationIconPath}" class="icon" alt="">
|
||||
${event.location}
|
||||
</span>
|
||||
<p class="event-date-time">${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gäste</p>
|
||||
<span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime} |
|
||||
${confirmedGuests}/${totalGuests} Gäste <span class="event-location">
|
||||
</div>
|
||||
<h1 class="detail-title">${event.title}</h1>
|
||||
<div class="event-meta-row detail-chip-row">
|
||||
|
||||
@ -9,7 +9,8 @@
|
||||
const filterButtons = document.querySelectorAll('.category-item');
|
||||
const locationFilter = document.getElementById('location-filter');
|
||||
const dateFilter = document.getElementById('date-filter');
|
||||
const locationIconPath = 'assets/icon_location-pin.svg';
|
||||
const locationIconPath = 'assets/icon_location.svg';
|
||||
const calendarIconPath = 'assets/icon_calendar.svg';
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// In-memory state for fetched events and currently active category.
|
||||
@ -367,27 +368,29 @@
|
||||
: '';
|
||||
|
||||
const actionMarkup = isOwnEvent
|
||||
? '<button class="btn-primary btn-primary-own" type="button" data-registration-action="own" disabled>Dein Event!</button>'
|
||||
? '<button class="button-primary" type="button" data-registration-action="own" disabled>Dein Event!</button>'
|
||||
: isRegistered
|
||||
? '<button class="btn-primary btn-primary-danger" type="button" data-registration-action="unregister">Abmelden</button>'
|
||||
? '<button class="button-primary button-primary-abmelden" type="button" data-registration-action="unregister">Abmelden</button>'
|
||||
: isRegistrationClosed
|
||||
? '<button class="btn-primary btn-primary-danger" type="button" data-registration-action="closed" disabled>Anmeldung geschlossen</button>'
|
||||
? '<button class="button-primary" button-primary-abmelden" type="button" data-registration-action="closed" disabled>Anmeldung geschlossen</button>'
|
||||
: isFull
|
||||
? ''
|
||||
: !currentUser
|
||||
? '<button class="btn-primary btn-primary-register" type="button" data-registration-action="login">Anmelden</button>'
|
||||
: '<button class="btn-primary btn-primary-register" type="button" data-registration-action="register">Anmelden</button>';
|
||||
? '<button class="button-primary btn-primary-register" type="button" data-registration-action="login">Anmelden</button>'
|
||||
: '<button class="button-primary btn-primary-register" type="button" data-registration-action="register">Anmelden</button>';
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="event-main">
|
||||
<div class="event-top-row">
|
||||
<span class="event-location">
|
||||
<img src="${locationIconPath}" alt="">
|
||||
<img src="${locationIconPath}" class="icon" alt="">
|
||||
${event.location}
|
||||
</span>
|
||||
<p class="event-date-time">${displayDate} | ${displayTime} | ${bookedSeats}/${totalCapacity} Gäste</p>
|
||||
<span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
|
||||
</span>
|
||||
<span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span>
|
||||
</div>
|
||||
<h2 class="event-title">${event.title}</h2>
|
||||
<h3 class="event-title">${event.title}</h3>
|
||||
<div class="event-meta-row">
|
||||
<span class="event-tag">${event.category}</span>
|
||||
<span class="event-tag">${event.diet}</span>
|
||||
@ -395,7 +398,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="event-side${isFull ? ' event-side-full' : ''}">
|
||||
<span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze FREI`}</span>
|
||||
<span class="event-spots${isFull ? ' event-spots-full' : ''}">${isFull ? 'AUSGEBUCHT' : `${freePlaces} Plätze frei`}</span>
|
||||
${actionMarkup}
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user