From 7ecc2cf91a5790cf875eab78136d0c0c1135fd8f Mon Sep 17 00:00:00 2001 From: viiivo <«vivien.vonburg@outlook.com»> Date: Wed, 22 Apr 2026 10:19:13 +0200 Subject: [PATCH] Enhance event overview layout and styling; update event date and improve participant name handling. Pop-Up that Events are free. Explenation for Event Adresse. --- css/event_overview.css | 32 +++++++++++++++++ css/stylesheet_global.css | 73 +++++++++++++++++++++++++++++++++++---- data/events.json | 2 +- event_overview.html | 5 ++- js/event_detail.js | 32 ++++++++++++++--- js/event_overview.js | 13 +++++-- js/my_profil.js | 21 +++++++---- 7 files changed, 155 insertions(+), 23 deletions(-) diff --git a/css/event_overview.css b/css/event_overview.css index 4219e3b..5750bd1 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -21,6 +21,17 @@ line-height: 1.15; } +.overview-title-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-4); +} + +.overview-title-row .overview-title { + margin-bottom: var(--space-4); +} + .detail-title { margin-bottom: var(--space-4); } @@ -122,6 +133,7 @@ .meta-filter select { cursor: pointer; + appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E"); background-repeat: no-repeat; @@ -752,6 +764,13 @@ font-size: 34px; } + .overview-info-button { + width: 44px; + height: 44px; + flex-basis: 44px; + font-size: 1.5rem; + } + .top-nav-links { gap: 8px; } @@ -878,6 +897,19 @@ font-size: 30px; } + .overview-title-row { + align-items: flex-start; + gap: 12px; + } + + .overview-info-button { + width: 40px; + height: 40px; + flex-basis: 40px; + font-size: 1.35rem; + margin-top: 2px; + } + .top-nav-links { width: auto; justify-content: flex-end; diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index e23df86..fdd8e2d 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -682,23 +682,82 @@ label { animation: modalSlideIn 0.3s ease; } +.btn-info { + width: 48px; + height: 48px; + flex: 0 0 48px; + border: 1.5px solid var(--olive); + border-radius: 999px; + background: var(--butter-light); + color: var(--olive); + font-family: "Bagel Fat One", cursive; + font-size: 1.7rem; + line-height: 1; + cursor: pointer; + box-shadow: var(--shadow-interaction); + transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; +} + +.btn-info:hover, +.btn-info:focus-visible { + background: var(--butter); + border-color: var(--olive-dark); + transform: translateY(-1px); +} + +.btn-info:focus-visible { + outline: 2px solid var(--olive-dark); +} + @keyframes modalSlideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { - position: relative; + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-4); } .modal-header h2 { - padding: var(--space-20)var(--space-20) 0 var(--space-20); + margin: 0; + padding: 0; + text-align: left; + flex: 1; +} + +.modal-close { + width: 32px; + height: 32px; + flex: 0 0 32px; + margin-left: auto; + border: none; + background: transparent; + color: var(--olive); + font-size: 2rem; + line-height: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + transition: color 0.2s ease, transform 0.2s ease; +} + +.modal-close:hover, +.modal-close:focus-visible { + color: var(--olive-dark); + transform: translateY(-1px); +} + +.modal-close:focus-visible { + outline: 2px solid var(--olive-dark); + outline-offset: 2px; } .close-btn { - position: absolute; - right: 0; - top: 0; font-size: 28px; color: var(--black); background: none; @@ -712,7 +771,9 @@ label { } .modal-body { - padding: var(--space-20) var(--space-20) var(--space-4) var(--space-20); + padding: var(--space-4) 0 0; + text-align: left; + line-height: 1.7; } .modal-footer { diff --git a/data/events.json b/data/events.json index fb162e7..52940fc 100644 --- a/data/events.json +++ b/data/events.json @@ -4,7 +4,7 @@ "title": "Italienische Tavolata", "location": "Luzern", "address": "Pilatusstrasse 18, 6003 Luzern", - "date": "22. APR. 2026", + "date": "23. APR. 2026", "time": "15:30 UHR", "category": "Dinner", "diet": "Vegetarisch", diff --git a/event_overview.html b/event_overview.html index 2e76569..6be6d40 100644 --- a/event_overview.html +++ b/event_overview.html @@ -30,7 +30,10 @@

Event finden

-

Was darf es sein?

+
+

Was darf es sein?

+ +
diff --git a/js/event_detail.js b/js/event_detail.js index 02872d3..a7082ad 100644 --- a/js/event_detail.js +++ b/js/event_detail.js @@ -68,8 +68,9 @@ const firstName = String(user.vorname || '').trim(); const lastName = String(user.nachname || '').trim(); + const fullName = `${firstName} ${lastName}`.trim(); - return (firstName || `${firstName} ${lastName}`.trim() || String(user.email || '').trim()).trim(); + return (fullName || firstName || String(user.email || '').trim()).trim(); } function getResolvedParticipants(event, registrationMap) { @@ -102,6 +103,24 @@ return baseParticipants; } + function getParticipantNameForViewer(name, canSeeLastName) { + const rawName = String(name || '').trim(); + if (!rawName) { + return ''; + } + + if (canSeeLastName) { + return rawName; + } + + // Bei E-Mail-Fallback nur den lokalen Teil anzeigen. + if (rawName.includes('@')) { + return rawName.split('@')[0].trim() || rawName; + } + + return rawName.split(/\s+/)[0]; + } + function setRegistrationMap(registrationMap) { localStorage.setItem(REGISTRATION_STORAGE_KEY, JSON.stringify(registrationMap)); } @@ -337,6 +356,10 @@ : []; const registrationMap = getRegistrationMap(); const participants = getResolvedParticipants(event, registrationMap); + const isOwnEvent = isEventOwnedByCurrentUser(event, currentUser); + const participantNamesForView = participants + .map(name => getParticipantNameForViewer(name, isOwnEvent)) + .filter(Boolean); const galleryImages = Array.isArray(event.gallery) ? event.gallery.filter(Boolean) : []; @@ -351,14 +374,13 @@ ` : ''; - const visibleParticipants = participants.slice(0, 6); - const remainingParticipants = Math.max(0, participants.length - visibleParticipants.length); + const visibleParticipants = participantNamesForView.slice(0, 6); + const remainingParticipants = Math.max(0, participantNamesForView.length - visibleParticipants.length); const totalGuests = Number.isFinite(event.spots) ? event.spots : 0; const confirmedGuests = participants.length; const freePlaces = Math.max(0, totalGuests - confirmedGuests); const isFull = freePlaces === 0; const isRegistrationClosed = isRegistrationClosedForEvent(event); - const isOwnEvent = isEventOwnedByCurrentUser(event, currentUser); const deregInfo = getDeregistrationInfo(event); const userRegistrations = currentUser?.email && Array.isArray(registrationMap[currentUser.email]) ? registrationMap[currentUser.email].map(id => Number(id)) @@ -456,7 +478,7 @@ ${remainingParticipants > 0 ? `+${remainingParticipants}` : ''}