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

Icon Event-Beschrieb hinzugefügt

Browse Source
This commit is contained in:
Simona Oswald 2026-04-21 15:04:39 +02:00
parent e17a41509c
commit 24dc61a887
4 changed files with 44 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/event_overview.css
View File

@ -160,7 +160,9 @@
flex: 1; flex: 1;
} }
.event-date-time { .event-location,
.event-date-time,
.event-gast {
display: inline-flex; display: inline-flex;
gap: var(--space-0); gap: var(--space-0);
} }
@ -369,26 +371,17 @@
margin-bottom: 30px; margin-bottom: 30px;
} }
.host-avatar {
width: 32px;
height: 32px;
border-radius: 999px;
background: var(--olive);
color: var(--butter-light);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.host-name { .host-name {
font-weight: 500; margin-left: 12px;
font-weight: 600;
letter-spacing: var(--ls-sm);
} }
/*
.host-role { .host-role {
border: 1.5px solid var(--olive); border: 1.5px solid var(--olive-light);
background: var(--olive);; background: var(--olive-light);;
color: var(--butter-light); color: var(--olive);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
@ -396,7 +389,7 @@
line-height: 1; line-height: 1;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-la);
padding: var(--space-1) var(--space-20); padding: var(--space-1) var(--space-20);
} }*/
.detail-gallery { .detail-gallery {
grid-area: gallery; grid-area: gallery;
@ -616,7 +609,7 @@
.detail-action-meta { .detail-action-meta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 16px;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -627,8 +620,8 @@
} }
.detail-action-location img { .detail-action-location img {
width: 16px; width: 18px;
height: 16px; height: 18px;
} }

9
css/stylesheet_global.css
View File

@ -173,8 +173,9 @@ p {
} }
/* Event-Beschrieb oberhalb von Eventtitel */ /* Event-Beschrieb oberhalb von Eventtitel */
.event-date-time,
.event-location, .event-location,
.event-date-time,
.event-gast,
.profile-event-meta { .profile-event-meta {
color: var(--olive); color: var(--olive);
font-family: var(--font-main); font-family: var(--font-main);
@ -277,7 +278,8 @@ p {
/* Badge */ /* Badge */
.badge { .badge,
.host-role {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: fit-content; width: fit-content;
@ -289,7 +291,8 @@ p {
z-index: 0; z-index: 0;
} }
.badge::before { .badge::before,
.host-role::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;

28
js/event_detail.js
View File

@ -8,7 +8,7 @@
const detailContainer = document.getElementById('detail-view'); const detailContainer = document.getElementById('detail-view');
const locationIconPath = 'assets/icon_location.svg'; const locationIconPath = 'assets/icon_location.svg';
const calendarIconPath = 'assets/icon_calendar.svg'; const calendarIconPath = 'assets/icon_calendar.svg';
const calendarIconPath = 'assets/icon_gast.svg'; const gastIconPath = 'assets/icon_gast.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).
@ -345,11 +345,16 @@
<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}" class="icon" alt=""> <img src="${locationIconPath}" class="icon" alt="">${event.location}
${event.location} </span>
</span>
<span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime} | <span class="event-date-time">
${confirmedGuests}/${totalGuests} Gäste <span class="event-location"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
</span>
<span class="event-date-time">
<img src="${gastIconPath}" class="icon" alt="">${confirmedGuests}/${totalGuests}
</span>
</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">
@ -411,7 +416,16 @@
<img src="${locationIconPath}" alt=""> <img src="${locationIconPath}" alt="">
${event.location} ${event.location}
</span> </span>
<span class="detail-action-meta-text">| ${displayDate} | ${displayTime} | ${confirmedGuests}/${totalGuests} Gäste</span>
<span class="event-date-time detail-action-location">
<img src="${calendarIconPath}" alt=""> ${displayDate} | ${displayTime}
</span>
<span class="event-gast detail-action-location">
<img src="${gastIconPath}" alt="">
${confirmedGuests}/${totalGuests}
</span>
</small> </small>
<strong>${event.title}</strong> <strong>${event.title}</strong>
</div> </div>

5
js/event_overview.js
View File

@ -11,7 +11,8 @@
const dateFilter = document.getElementById('date-filter'); const dateFilter = document.getElementById('date-filter');
const locationIconPath = 'assets/icon_location.svg'; const locationIconPath = 'assets/icon_location.svg';
const calendarIconPath = 'assets/icon_calendar.svg'; const calendarIconPath = 'assets/icon_calendar.svg';
const calendarIconPath = 'assets/icon_gast.svg'; const gastIconPath = 'assets/icon_gast.svg';
// ------------------------------------------------------------- // -------------------------------------------------------------
// In-memory state for fetched events and currently active category. // In-memory state for fetched events and currently active category.
@ -394,7 +395,7 @@
</span> </span>
<span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime} <span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
</span> </span>
<span class="event-date-time"> ${bookedSeats}/${totalCapacity} Gäste</span> <span class="event-gast"> <img src="${gastIconPath}" class="icon" alt="Gaeste Icon">${bookedSeats}/${totalCapacity} </span>
</div> </div>
<h2>${event.title}</h2> <h2>${event.title}</h2>
<div class="event-meta-row"> <div class="event-meta-row">