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

9
css/stylesheet_global.css
View File

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

26
js/event_detail.js
View File

@ -8,7 +8,7 @@
const detailContainer = document.getElementById('detail-view');
const locationIconPath = 'assets/icon_location.svg';
const calendarIconPath = 'assets/icon_calendar.svg';
const calendarIconPath = 'assets/icon_gast.svg';
const gastIconPath = 'assets/icon_gast.svg';
const currentUser = getCurrentUser();
// Read event id from query string (detail page deep-link support).
@ -345,11 +345,16 @@
<section class="detail-hero">
<div class="detail-top-row">
<span class="event-location">
<img src="${locationIconPath}" class="icon" alt="">
${event.location}
<img src="${locationIconPath}" class="icon" alt="">${event.location}
</span>
<span class="event-date-time">
<img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
</span>
<span class="event-date-time">
<img src="${gastIconPath}" class="icon" alt="">${confirmedGuests}/${totalGuests}
</span>
<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">
@ -411,7 +416,16 @@
<img src="${locationIconPath}" alt="">
${event.location}
</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>
<strong>${event.title}</strong>
</div>

5
js/event_overview.js
View File

@ -11,7 +11,8 @@
const dateFilter = document.getElementById('date-filter');
const locationIconPath = 'assets/icon_location.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.
@ -394,7 +395,7 @@
</span>
<span class="event-date-time"> <img src="${calendarIconPath}" class="icon" alt=""> ${displayDate} | ${displayTime}
</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>
<h2>${event.title}</h2>
<div class="event-meta-row">