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

Styling Filter Übersicht Events

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 20:36:53 +02:00
parent ffee29d57e
commit e3f7233581
15 changed files with 101 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/event_create.css
View File

@ -31,7 +31,7 @@
/*
.submission-success {
padding: var(--space-24) 0 var(--space-7);
padding: var(--space-24) 0 var(--space-48);
}*/
.submission-success-title-row {
@ -86,7 +86,7 @@
min-height: 60vh;
align-content: center;
grid-template-columns: 1fr;
gap: var(--space-7);
gap: var(--space-48);
}
.step-copy,

50
css/event_overview.css
View File

@ -43,11 +43,11 @@
.filter-row {
display: flex;
justify-content: flex-start;
gap: var(--space-16);
}
.category-group {
gap: var(--space-12);
display: flex;
gap: var(--space-6);
margin-bottom: 0;
flex-wrap: wrap;
flex: 1;
@ -270,34 +270,15 @@
--------------------------------------------------------- */
.empty-state {
text-align: center;
padding: 42px var(--space-32);
border: 2px solid var(--olive-light);
padding: var(--space-32) var(--space-40);
border-radius: var(--radius-lg);
background: var(--butter-light);
margin-top: 8px;
}
.empty-state-kicker {
margin: 0 0 8px;
color: var(--olive);
font-size: 13px;
font-weight: 600;
letter-spacing: var(--ls-lg);
}
.empty-state h3 {
margin: 0;
font-family: "Jost", sans-serif;
font-size: 28px;
font-weight: 600;
color: var(--brown);
line-height: 1.25;
}
.empty-state p {
margin: 12px 0 0;
font-size: 18px;
color: var(--black);
font-size: 1rem;
font-weight: 400;
}
.empty-state-link {
@ -515,7 +496,7 @@
margin: 20px;
list-style: disc;
font-size: 1.125rem;
line-height: 1.5;
line-height: 1.45;
}
.detail-participants-head {
@ -525,14 +506,6 @@
gap: 20px;
}
.detail-participants-link {
font-size: 12px;
font-weight: 600;
color: var(--tomato);
letter-spacing: var(--ls-lg);
text-decoration: none;
}
.detail-avatar-row {
display: flex;
align-items: center;
@ -560,27 +533,26 @@
.detail-participants-full {
display: flex;
flex-direction: column;
gap: 10px;
}
.detail-participant-item {
display: flex;
align-items: center;
gap: 10px;
}
.participant-name {
font-size: 0.95rem;
font-weight: 500;
font-size: 1.125rem;
font-weight: 400;
color: var(--black);
}
.detail-participants-link {
background: none;
border: none;
font-family: var(--font-main);
color: var(--olive);
font-size: 0.85rem;
font-weight: 600;
font-size: 1rem;
font-weight: 400;
cursor: pointer;
padding: 0;
text-decoration: underline;

6
css/login_signup.css
View File

@ -143,12 +143,6 @@ input:focus {
justify-content: center;
}
.modal-footer {
display: flex;
gap: var(--space-2);
justify-content: center;
}
.btn-primary {
padding: var(--space-2) var(--space-32);
background-color: var(--olive);

39
css/my_profil.css
View File

@ -18,9 +18,7 @@
}
#headline {
margin: 0.4rem 0;
color: var(--brown);
font-size: clamp(2rem, 4.4vw, 2.8rem);
}
.profile-subline {
@ -67,7 +65,7 @@
.profile-card-list {
display: grid;
gap: var();
gap: var(--space-16);
}
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
@ -102,27 +100,26 @@
}*/
.profile-event-address-block {
margin-top: 0.55rem;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
border-left: 4px solid var(--tomato);
background: rgba(232, 237, 209, 0.65);
margin-top: var(--space-24);
background-color: var(--olive-light);
padding: var(--space-16);
border-radius: var(--radius-md);
color: var(--black);
line-height: 1.4;
}
.profile-event-address-label {
margin: 0;
color: var(--olive);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: var(--ls-lg);
font-size: 1rem;
font-weight: 400;
color: var(--olive-dark);
}
.profile-event-address {
margin: 0.2rem 0 0;
font-size: 0.95rem;
font-size: 1.125rem;
font-weight: 400;
line-height: 1.4;
color: var(--black);
font-weight: 600;
line-height: 1.35;
}
.profile-event-link {
@ -228,6 +225,14 @@
box-shadow: var(--shadow-error);
}
.info-abmeldung {
font-size: 1rem;
color: var(--olive);
margin-bottom: 16px;
display: flex; align-items:
flex-start;
gap: 8px;
}
.profile-feedback {
margin: 0.75rem 0 0;
font-size: 0.95rem;

54
css/stylesheet_global.css
View File

@ -50,7 +50,7 @@
--space-24: 1.5rem; /* 24px */
--space-32: 2rem; /* 32px */
--space-40: 2.5rem; /* 40px */
--space-7: 3rem; /* 48px */
--space-48: 3rem; /* 48px */
--space-64: 4rem; /* 64px */
--space-80: 5rem; /* 80px */
@ -107,17 +107,15 @@ h3 {
p {
font-family: var(--font-main);
font-size: 1.125rem;
line-height: 1.5;
line-height: 1.45;
color: var(--black);
margin-bottom: 1rem;
}
.p-small {
font-family: var(--font-main);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-bottom: 0rem;
line-height: 1.4;
}
.label-input-field,
@ -173,7 +171,7 @@ label {
.error-message {
font-family: var(--font-main);
font-size: 1rem;
line-height: 1.5;
line-height: 1.4;
}
.error-message--inline {
@ -538,7 +536,8 @@ label {
.button--outline:hover {
background-color: var(--olive-light);
color: var(--black);
color: var(--olive-dark);
border: 1.5px solid var(--olive-dark);
}
.counter-button {
@ -589,7 +588,7 @@ label {
.category-items {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-1);
gap: var(--space-8);
}
.category-item-profile {
@ -700,7 +699,7 @@ label {
align-items: center;
justify-content: center;
height: 1em; /* keeps it aligned with text size */
margin-top: var(--space-7);
margin-top: var(--space-48);
}
.instagram-invite__link {
@ -760,10 +759,10 @@ label {
padding: var(--space-40);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-interaction);
max-width: 500px;
max-width: 460px;
width: 90%;
text-align: center;
animation: modalSlideIn 0.3s ease;
animation: modalSlideIn 0.5s ease;
}
.btn-info {
@ -813,7 +812,7 @@ label {
margin-left: auto;
border: none;
background: transparent;
color: var(--black);
color: transparent;
font-size: 2rem;
line-height: 1;
cursor: pointer;
@ -843,33 +842,36 @@ label {
}
.modal-body {
padding: var(--space-24) 0 0;
font-family: var(--font-main);
font-size: 1.125rem;
padding: var(--space-24) 0 var(--space-40) 0;
text-align: left;
line-height: 1.7;
line-height: 1.45;
}
.modal-footer {
display: flex;
gap: var();
gap: var(--space-12);
justify-content: center;
}
/* Snackbar */
.snackbar {
.snackbar,
.snackbar--danger {
position: fixed;
bottom: 30px;
bottom: 40px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--olive);
color: var(--white);
color: var(--butter-light);
background: var(--tomato);
padding: var(--space-16) var(--space-40);
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 600;
font-size: 1.125rem;
font-weight: 400;
font-family: var(--font-main);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: var(--shadow-interaction);
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
transition: transform 0.5s ease, opacity 0.4s ease;
z-index: 9999;
pointer-events: none;
}
@ -879,10 +881,6 @@ label {
opacity: 1;
}
.snackbar--danger {
background: var(--tomato);
}
/* Lightbox */
.lightbox {
position: fixed;
@ -961,7 +959,7 @@ input:focus {
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 120px;
padding: var(--space-16) var(--space-7);
padding: var(--space-16) var(--space-48);
}
.footer-links {

2
data/events.json
View File

@ -87,7 +87,7 @@
"title": "Japanese Delight",
"location": "Zürich",
"address": "Limmatquai 92, 8001 Zürich",
"date": "24. April. 2026",
"date": "8. Mai 2026",
"time": "12:30 UHR",
"category": "Lunch",
"diet": "Fisch",

8
event_create.html
View File

@ -43,14 +43,14 @@
aria-labelledby="intro-title"
>
<div class="step-layout hero startseite">
<div class="step-copy">
<p class="badge">Event erstellen</p>
<div>
<p class="badge margin-bottom-40">Event erstellen</p>
<h1 id="intro-title">Hey <span id="username">{{username}}</span>, was hast du vor?</h1>
<p class="step-text">
<p class="step-text margin-bottom-40">
Erzähl uns von deiner Idee, vom Essen bis zur Stimmung. Ob Dinner, Brunch
oder etwas ganz Eigenes wir helfen dir dabei, dein Event in sieben Schritten aufzubauen.
</p>
<button type="button" class="button-primary button--intro" data-start-flow>
<button type="button" class="button-primary" data-start-flow>
Los geht’s!
</button>
</div>

4
event_detail.html
View File

@ -47,7 +47,7 @@
<div class="modal-body">
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
<div class="modal-footer">
<button class="button-primary button--outline" type="button" id="register-modal-cancel">Abbrechen</button>
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
</div>
@ -63,7 +63,7 @@
<div class="modal-body">
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
<div class="modal-footer">
<button class="button-primary button--outline" type="button" id="unregister-modal-cancel">Abbrechen</button>
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
</div>

24
event_overview.html
View File

@ -36,9 +36,9 @@
</div>
<!-- Filter section: category chips + location/date filters -->
<section class="filter-section">
<section class="filter-section margin-bottom-24">
<p class="filter-label">Art des Essens / Eventtyp</p>
<div class="filter-row">
<div class="filter-row margin-bottom-24">
<!-- Primary category filter buttons -->
<div class="category-group">
<button class="category-item active" type="button" data-cat="ALLE">Alle</button>
@ -50,24 +50,24 @@
<!-- Secondary filters populated/handled by JavaScript -->
<div class="meta-filter-group" aria-label="Weitere Filter">
<label class="meta-filter" for="location-filter">
<div class="meta-filter" for="location-filter">
<span>Ort</span>
<select id="location-filter">
<option value="ALLE_ORTE">Alle Orte</option>
</select>
</label>
</div>
<label class="meta-filter" for="date-filter">
<div class="meta-filter" for="date-filter">
<span>Datum</span>
<div class="date-input-wrapper">
<input id="date-filter" type="date">
</div>
</label>
</div>
</div>
</div>
<details class="filter-box">
<summary>Nach Ernährungform filtern</summary>
<div class="filter-row">
<div class="filter-row margin-bottom-16">
<div class="category-group">
<button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
<button class="category-item" type="button" data-diet="Fisch">Fisch</button>
@ -79,7 +79,7 @@
<details class="filter-box">
<summary>Nach Allergenen filtern</summary>
<div class="filter-row">
<div class="filter-row margin-bottom-16">
<div class="category-group">
<button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
<button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
@ -116,12 +116,12 @@
<div class="modal-content">
<div class="modal-header">
<h2>Ein Platz für dich am Tisch!</h2>
<button type="button" class="modal-close" onclick="closeRegisterModal()" aria-label="Popup schließen">&times;</button>
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</div>
<div class="modal-body">
<p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
<div class="modal-footer">
<button class="button-primary button--outline" type="button" onclick="closeRegisterModal()">Abbrechen</button>
<button class="button-primary" type="button" id="confirm-register-btn">Ja, ich bin dabei</button>
</div>
@ -132,12 +132,12 @@
<div class="modal-content">
<div class="modal-header">
<h2>Pläne haben sich geändert?</h2>
<button type="button" class="modal-close" onclick="closeUnregisterModal()" aria-label="Popup schließen">&times;</button>
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</div>
<div class="modal-body">
<p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>
</div>
<div class="modal-footer" style="display: flex; justify-content: flex-end; gap: 16px; margin-top: 24px;">
<div class="modal-footer">
<button class="button-primary button--outline" type="button" onclick="closeUnregisterModal()">Abbrechen</button>
<button class="button-primary button-primary-abmelden" type="button" id="confirm-unregister-btn">Ja, abmelden</button>
</div>

4
index.html
View File

@ -35,7 +35,7 @@
<div class="hero__left">
<span class="badge margin-bottom-40">einfach. lecker. gemeinsam.</span>
<h1>Teile deine Leidenschaft, geniesse gemeinsam.</h1>
<p>Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.</p>
<p class="margin-bottom-40">Ob du als leidenschaftlicher Hobbykoch Gastgeber sein möchtest oder als Feinschmecker einen Platz an einem lokalen Tisch suchst Invité verbindet Menschen durch die Kraft einer gemeinsamen Mahlzeit.</p>
<a class="button-primary" href="signup.html">Registrieren</a>
</div>
@ -83,7 +83,7 @@
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
</div><h2>Einblick in Cooking-Erlebnisse</h2>
<p>#gemeinsam_invité auf Instagram</p>
<p class="margin-bottom-16">#gemeinsam_invité auf Instagram</p>
</div>
<div class="gallery__carousel">
<button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">

4
js/event_detail.js
View File

@ -522,7 +522,7 @@
setTimeout(() => {
snackbar.classList.remove('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
}, 3000);
}, 4000);
}
renderDetailPage(event);
};
@ -546,7 +546,7 @@
if (snackbar) {
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
snackbar.classList.add('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
}
renderDetailPage(event);
};

4
js/event_overview.js
View File

@ -586,7 +586,7 @@
if (snackbar) {
snackbar.textContent = 'Du wurdest erfolgreich angemeldet.';
snackbar.classList.add('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 3000);
setTimeout(() => snackbar.classList.remove('snackbar--visible'), 4000);
}
applyFilters();
};
@ -613,7 +613,7 @@
setTimeout(() => {
snackbar.classList.remove('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
}, 3000);
}, 4000);
}
applyFilters();
};

2
js/my_profil.js
View File

@ -248,7 +248,7 @@
setTimeout(() => {
snackbar.classList.remove('snackbar--visible');
setTimeout(() => snackbar.classList.remove('snackbar--danger'), 400);
}, 3000);
}, 4000);
}
return;
}

18
my_profil.html
View File

@ -32,7 +32,7 @@
<main class="layout-wide">
<section class="profile-hero" aria-label="Profilübersicht">
<div>
<p class="badge">Mein Bereich</p>
<p class="badge margin-bottom-40">Mein Bereich</p>
<h1 id="headline">Mein Profil</h1>
<p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
</div>
@ -70,8 +70,8 @@
<div class="panel-head">
<span id="my-registrations-count" class="panel-count">0</span>
</div>
<p style="font-size: 0.9rem; color: var(--olive); margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
<p class="info-abmeldung">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--olive)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 1px;">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="8" x2="12" y2="8"/>
<line x1="12" y1="12" x2="12" y2="16"/>
@ -86,26 +86,26 @@
<form id="profile-form" novalidate>
<div class="form-grid">
<div class="margin-bottom-16">
<label for="vorname">Vorname</label>
<label class="label-input-field" for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname" required>
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
</div>
<div class="margin-bottom-16">
<label for="nachname">Nachname</label>
<label class="label-input-field" for="nachname">Nachname</label>
<input type="text" id="nachname" name="nachname" required>
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
</div>
</div>
<div class="margin-bottom-16">
<label for="email">E-Mail</label>
<label class="label-input-field" for="email">E-Mail</label>
<input type="email" id="email" name="email" required>
<p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
</div>
<div class="margin-bottom-40">
<label for="passwort">Passwort</label>
<label class="label-input-field" for="passwort">Passwort</label>
<input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
<p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>
<p class="input-error" id="passwort-error">Das Passwort muss mindestens 6 Zeichen lang sein.</p>
@ -122,11 +122,11 @@
<div id="logoutModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close-btn" onclick="closeLogoutModal()">&times;</button>
<h2>Abmelden?</h2>
</div>
<p class="modal-body">
Bist du sicher, dass du dich abmelden möchtest?
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</p>
<div class="modal-footer">
<button class="button-primary button--outline" type="button" onclick="closeLogoutModal()">Abbrechen</button>
@ -142,11 +142,11 @@
<div id="cancelEventModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close-btn" onclick="closeCancelEventModal()">&times;</button>
<h2>Event absagen?</h2>
</div>
<p class="modal-body">
Bist du sicher, dass du dieses Event absagen möchtest? Diese Aktion kann nicht rückgängig gemacht werden.
<button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
</p>
<div class="modal-footer">
<button class="button-secondary" type="button" onclick="closeCancelEventModal()">Abbrechen</button>

10
signup.html
View File

@ -36,25 +36,25 @@
</div>
<form id="signupForm" novalidate>
<div class="margin-bottom-16">
<div class="form-group margin-bottom-16">
<p class= "label-input-field" for="vorname">Vorname*</p>
<input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
<div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
</div>
<div class="margin-bottom-16">
<div class="form-group margin-bottom-16">
<p class= "label-input-field" for="nachname">Nachname*</p>
<input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
<div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
</div>
<div class="margin-bottom-16">
<div class="form-group margin-bottom-16">
<p class= "label-input-field" for="email">E-Mail*</p>
<input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
</div>
<div class="margin-bottom-40">
<div class="form-group margin-bottom-40">
<p class= "label-input-field" for="passwort">Passwort*</p>
<input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
<div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
@ -82,8 +82,8 @@
<div id="welcomeModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<button class="close-btn" onclick="closeWelcomeModal()">&times;</button>
<h2>Konto erfolgreich erstellt!</h2>
<button class="close-btn" onclick="closeWelcomeModal()">&times;</button>
</div>
<div class="modal-body">
Willkommen bei Invité! Dein Account wurde erfolgreich erstellt. Entdecke jetzt die neuesten Events in deiner Nähe.