koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Anpassungen Event Uebersicht II

Browse Source
This commit is contained in:
Simona Oswald 2026-04-17 16:09:35 +02:00
parent 23f3e85543
commit 433743069c
7 changed files with 132 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/event_create.css
View File

@ -215,7 +215,7 @@ textarea:focus {
.option-card { .option-card {
position: relative; position: relative;
display: grid; display: grid;
padding: 1.25rem; padding: var(--space-31);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--butter-light); background: var(--butter-light);
@ -241,11 +241,6 @@ textarea:focus {
background: var(--olive-light); background: var(--olive-light);
} }
/*
.option-card:has(input:checked) small {
color: rgba(247, 246, 230, 0.88);
}*/
.option-card--invalid { .option-card--invalid {
border-color: var(--tomato) !important; border-color: var(--tomato) !important;
box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
@ -344,7 +339,7 @@ textarea:focus {
} }
.error-message { .error-message {
order: -1; /* nach oben verschieben */ order: -1; /* nach oben verschieben */
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
@ -368,7 +363,7 @@ textarea:focus {
.progress { .progress {
flex: 1; flex: 1;
height: 0.3rem; height: 0.3rem;
background: var(--olive-lightg); background: var(--olive-light);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
overflow: hidden; overflow: hidden;
} }
@ -523,15 +518,6 @@ textarea:focus-visible {
align-items: stretch; align-items: stretch;
} }
.button--text {
justify-content: flex-start;
}
/*
.button--primary {
width: 100%;
*/
.event-flow-header { .event-flow-header {
justify-content: flex-start; justify-content: flex-start;
} }

122
css/event_overview.css
View File

@ -71,7 +71,6 @@
color: var(--olive); color: var(--olive);
font-size: 18px; font-size: 18px;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-la);
font-weight: 500;
} }
.filter-row { .filter-row {
@ -84,32 +83,32 @@
.category-group { .category-group {
display: flex; display: flex;
gap: var(--space-2); gap: var(--space-1);
margin-bottom: 0; margin-bottom: 0;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
} }
.category-item { .category-item {
border: 2px solid var(--olive); border: 1.5px solid var(--tomato);
border-radius: var(--radius-md); border-radius: var(--radius-pill);
background: var(--butter); background: var(--butter-light);
color: var(--black); color: var(--tomato);
line-height: 1.3; line-height: 1.3;
padding: var(--space-1) var(--space-4); padding: var(--space-1) var(--space-31);
min-height: 40px; min-height: 40px;
cursor: pointer; 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 { .category-item:hover {
background: #faf8e8; background: var(--tomato);
color: var(--butter-light);
} }
.category-item.active { .category-item.active {
border-color: transparent; background: var(--tomato);
background: var(--olive); color: var(--butter-light);
color: var(--white);
} }
.meta-filter-group { .meta-filter-group {
@ -130,26 +129,26 @@
.meta-filter select, .meta-filter select,
.meta-filter input[type="date"] { .meta-filter input[type="date"] {
border: 2px solid var(--olive); border: 1.5px solid var(--tomato);
border-radius: var(--radius-md); border-radius: var(--radius-sm);
background: var(--butter); background: var(--butter-light);
color: var(--black); color: var(--black);
line-height: 1.3;
padding: var(--space-1) var(--space-4); padding: var(--space-1) var(--space-4);
min-height: 40px; min-height: 40px;
height: 40px; height: 40px;
box-sizing: border-box; box-sizing: border-box;
} }
/*
.meta-filter select:focus, .meta-filter select:focus,
.meta-filter input[type="date"]:focus { .meta-filter input[type="date"]:focus {
outline: 2px solid rgba(107, 107, 5, 0.35); outline: 2px solid rgba(107, 107, 5, 0.35);
outline-offset: 1px; outline-offset: 1px;
} }*/
.meta-filter input[type="date"] { .meta-filter input[type="date"] {
color-scheme: light; color-scheme: light;
accent-color: var(--olive); accent-color: var(--tomato);
} }
.meta-filter input[type="date"]::-webkit-calendar-picker-indicator { .meta-filter input[type="date"]::-webkit-calendar-picker-indicator {
@ -185,7 +184,7 @@
.event-card { .event-card {
/* Core card container for every overview event entry. */ /* Core card container for every overview event entry. */
background: rgba(255, 255, 255, 0.9); background: var(--butter-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: var(--space-5) 40px var(--space-4); padding: var(--space-5) 40px var(--space-4);
display: flex; display: flex;
@ -193,7 +192,12 @@
align-items: flex-start; align-items: flex-start;
gap: var(--space-6); gap: var(--space-6);
cursor: pointer; 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 { .event-main {
@ -202,29 +206,29 @@
} }
.event-date-time { .event-date-time {
margin: 0; display: inline-flex;
gap: var(--space-0);
} }
.event-top-row { .event-top-row {
/* Primary metadata line: location + date/time/guest counters. */ /* Primary metadata line: location + date/time/guest counters. */
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-5); gap: var(--space-4);
margin-bottom: var(--space-1); margin-bottom: var(--space-4);
flex-wrap: wrap; flex-wrap: wrap;
} }
.event-location { .event-location {
display: inline-flex; display: inline-flex;
align-items: center; gap: var(--space-0);
gap: 6px;
} }
.event-location img { .event-location .icon path{
width: 18px; width: 20px;
height: 18px; height: 20px;
flex: 0 0 20px;
display: block; display: block;
filter: brightness(0) saturate(100%) invert(35%) sepia(95%) saturate(501%) hue-rotate(22deg) brightness(96%) contrast(96%);
} }
.event-meta-row { .event-meta-row {
@ -283,7 +287,7 @@
/* Sold-out visual state, intentionally high-contrast and always filled. */ /* Sold-out visual state, intentionally high-contrast and always filled. */
border: 2px solid var(--tomato); border: 2px solid var(--tomato);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
color: var(--white); color: var(--butter-light);
background: var(--tomato); background: var(--tomato);
opacity: 1; opacity: 1;
font-weight: 600; font-weight: 600;
@ -308,39 +312,6 @@
background: var(--olive); 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,
.btn-primary-own:disabled { .btn-primary-own:disabled {
background: var(--olive-light); background: var(--olive-light);
@ -396,7 +367,7 @@
border: 0; border: 0;
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
background: var(--olive); background: var(--olive);
color: var(--white); color: var(--butter-light);
font-weight: 600; font-weight: 600;
padding: 10px 22px; padding: 10px 22px;
cursor: pointer; cursor: pointer;
@ -440,7 +411,7 @@
} }
.detail-top-row { .detail-top-row {
display: flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-5); gap: var(--space-5);
flex-wrap: wrap; flex-wrap: wrap;
@ -489,7 +460,7 @@
height: 32px; height: 32px;
border-radius: 999px; border-radius: 999px;
background: var(--olive); background: var(--olive);
color: var(--white); color: var(--butter-light);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -607,7 +578,7 @@
right: 0; right: 0;
border: 0; border: 0;
background: transparent; background: transparent;
color: var(--white); color: var(--butter-light);
font-size: 40px; font-size: 40px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@ -656,7 +627,7 @@
height: 34px; height: 34px;
border-radius: 50%; border-radius: 50%;
background: var(--tomato); background: var(--tomato);
color: var(--white); color: var(--butter-light);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -705,18 +676,21 @@
.detail-action-bar { .detail-action-bar {
/* Sticky bottom CTA bar with summary and booking controls. */ /* Sticky bottom CTA bar with summary and booking controls. */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
background: rgba(255, 255, 255, 0.95); background: var(--white);
border: 1px solid var(--olive-light); backdrop-filter: blur(3px) saturate(140%);
-webkit-backdrop-filter: blur(3px) saturate(140%);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-interaction);
padding: 10px 14px; padding: 10px 14px;
position: sticky; position: sticky;
bottom: 18px; bottom: 18px;
z-index: 12; z-index: 1001;
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
} }
.detail-action-summary { .detail-action-summary {
@ -897,10 +871,6 @@
font-size: 15px; font-size: 15px;
} }
.category-group {
gap: 10px;
}
.category-item { .category-item {
font-size: 15px; font-size: 15px;
padding: 8px 14px; padding: 8px 14px;

54
css/stylesheet_global.css
View File

@ -23,7 +23,7 @@
--olive-dark: #545404; --olive-dark: #545404;
--olive-light: #C8CC7A; --olive-light: #C8CC7A;
--butter: #F5F1BC; --butter: #F5F1BC;
--butter-light: #F7F6E6; --butter-light: #FAF9F0;
--white: #ffffff; --white: #ffffff;
--black: #141411; --black: #141411;
--brown: #66340d; --brown: #66340d;
@ -39,9 +39,11 @@
--shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1); --shadow-error: 0 0 0 2px rgba(255, 59, 48, 0.1);
/* Spacing Scale > 1rem = 16px*/ /* Spacing Scale > 1rem = 16px*/
--space-0: 0.25rem; /* 4px */
--space-1: 0.5rem; /* 8px */ --space-1: 0.5rem; /* 8px */
--space-2: 0.75rem; /* 12px */ --space-2: 0.75rem; /* 12px */
--space-3: 1rem; /* 16px */ --space-3: 1rem; /* 16px */
--space-31: 1.25rem; /* 20px */
--space-4: 1.5rem; /* 24px */ --space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */ --space-5: 2rem; /* 32px */
--space-6: 2.5rem; /* 40px */ --space-6: 2.5rem; /* 40px */
@ -79,7 +81,7 @@ h1, h2, h3, h4, h5, h6 {
} }
h1 { h1 {
font-size: 2.5rem; font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 600; font-weight: 600;
line-height: 120%; line-height: 120%;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
@ -88,6 +90,15 @@ h1 {
} }
h2 { 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-size: 2rem;
font-weight: 600; font-weight: 600;
line-height: 120%; line-height: 120%;
@ -122,6 +133,13 @@ p {
margin: 0 auto; margin: 0 auto;
} }
.icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
display: inline-block;
}
/* Top Navigation */ /* Top Navigation */
.top-nav-wrap { .top-nav-wrap {
position: sticky; position: sticky;
@ -234,7 +252,7 @@ p {
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.25rem; font-size: 1.25rem;
color: var(--butter); color: var(--butter-light);
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease; transition: background-color 0.2s ease, border-color 0.2s ease;
@ -245,6 +263,36 @@ p {
border-color: var(--olive-dark); 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 { .button-secondary {
display: inline-block; display: inline-block;
padding: 0.375rem 1.5rem; padding: 0.375rem 1.5rem;

2
data/events.json
View File

@ -85,7 +85,7 @@
{ {
"id": 3, "id": 3,
"title": "Japanese Delight", "title": "Japanese Delight",
"location": "ZÜRICH", "location": "Zürich",
"address": "Limmatquai 92, 8001 Zürich", "address": "Limmatquai 92, 8001 Zürich",
"date": "02. MAI. 2026", "date": "02. MAI. 2026",
"time": "12:30 UHR", "time": "12:30 UHR",

18
event_overview.html
View File

@ -5,11 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event-Overview</title> <title>Event-Overview</title>
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Stylesheet für diese Seite--> <!-- Stylesheet für diese Seite-->
<link rel="stylesheet" href="css/event_overview.css"> <link rel="stylesheet" href="css/event_overview.css">
<script src="js/navigation.js" defer></script> <script src="js/navigation.js" defer></script>
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
</head> </head>
<body> <body>
@ -28,7 +30,7 @@
<!-- Main content: page headline, filter controls and dynamic event list --> <!-- Main content: page headline, filter controls and dynamic event list -->
<main class="container"> <main class="container">
<!-- Page headline --> <!-- Page headline -->
<h1 class="overview-title">Events</h1> <h1>Events</h1>
<!-- Filter section: category chips + location/date filters --> <!-- Filter section: category chips + location/date filters -->
<section class="filter-section"> <section class="filter-section">
@ -36,11 +38,11 @@
<div class="filter-row"> <div class="filter-row">
<!-- Primary category filter buttons --> <!-- Primary category filter buttons -->
<div class="category-group"> <div class="category-group">
<button class="category-item" type="button" data-cat="BRUNCH">BRUNCH</button> <button class="category-item active" type="button" data-cat="ALLE">Alle</button>
<button class="category-item" type="button" data-cat="LUNCH">LUNCH</button> <button class="category-item" type="button" data-cat="BRUNCH">Brunch</button>
<button class="category-item" type="button" data-cat="DINNER">DINNER</button> <button class="category-item" type="button" data-cat="LUNCH">Lunch</button>
<button class="category-item" type="button" data-cat="COFFEE">COFFEE</button> <button class="category-item" type="button" data-cat="COFFEE">Kaffee + Kuchen</button>
<button class="category-item active" type="button" data-cat="ALLE">ALLE</button> <button class="category-item" type="button" data-cat="DINNER">Dinner</button>
</div> </div>
<!-- Secondary filters populated/handled by JavaScript --> <!-- Secondary filters populated/handled by JavaScript -->

10
js/event_detail.js
View File

@ -6,7 +6,8 @@
// DOM entry point and shared asset path. // DOM entry point and shared asset path.
// ------------------------------------------------------------- // -------------------------------------------------------------
const detailContainer = document.getElementById('detail-view'); 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(); const currentUser = getCurrentUser();
// Read event id from query string (detail page deep-link support). // Read event id from query string (detail page deep-link support).
@ -347,11 +348,12 @@
<section class="detail-hero"> <section class="detail-hero">
<div class="detail-top-row"> <div class="detail-top-row">
<span class="event-location"> <span class="event-location">
<img src="${locationIconPath}" alt=""> <img src="${locationIconPath}" class="icon" alt="">
${event.location} ${event.location}
</span> </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> </div>
<h1 class="detail-title">${event.title}</h1> <h1 class="detail-title">${event.title}</h1>
<div class="event-meta-row detail-chip-row"> <div class="event-meta-row detail-chip-row">

23
js/event_overview.js
View File

@ -9,7 +9,8 @@
const filterButtons = document.querySelectorAll('.category-item'); const filterButtons = document.querySelectorAll('.category-item');
const locationFilter = document.getElementById('location-filter'); const locationFilter = document.getElementById('location-filter');
const dateFilter = document.getElementById('date-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. // In-memory state for fetched events and currently active category.
@ -367,27 +368,29 @@
: ''; : '';
const actionMarkup = isOwnEvent 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 : 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 : 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 : isFull
? '' ? ''
: !currentUser : !currentUser
? '<button class="btn-primary btn-primary-register" type="button" data-registration-action="login">Anmelden</button>' ? '<button class="button-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="register">Anmelden</button>';
card.innerHTML = ` card.innerHTML = `
<div class="event-main"> <div class="event-main">
<div class="event-top-row"> <div class="event-top-row">
<span class="event-location"> <span class="event-location">
<img src="${locationIconPath}" alt=""> <img src="${locationIconPath}" class="icon" alt="">
${event.location} ${event.location}
</span> </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> </div>
<h2 class="event-title">${event.title}</h2> <h3 class="event-title">${event.title}</h3>
<div class="event-meta-row"> <div class="event-meta-row">
<span class="event-tag">${event.category}</span> <span class="event-tag">${event.category}</span>
<span class="event-tag">${event.diet}</span> <span class="event-tag">${event.diet}</span>
@ -395,7 +398,7 @@
</div> </div>
</div> </div>
<div class="event-side${isFull ? ' event-side-full' : ''}"> <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} ${actionMarkup}
</div> </div>
`; `;