New Responsive design
This commit is contained in:
@@ -8,78 +8,67 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="width: 95%; margin: 20px auto;">
|
||||
<div class="available-events-wrapper">
|
||||
|
||||
<div v-if="props.events.length === 0" style="text-align: center; color: #6b7280; padding: 40px 0;">
|
||||
<div v-if="props.events.length === 0" class="available-events-empty">
|
||||
Aktuell sind keine Veranstaltungen verfügbar.
|
||||
</div>
|
||||
|
||||
<shadowed-box
|
||||
v-for="event in props.events"
|
||||
:key="event.id"
|
||||
style="padding: 24px; margin-bottom: 20px;"
|
||||
class="available-event-card"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;">
|
||||
<div class="available-event-header">
|
||||
<div>
|
||||
<h2 style="margin: 0 0 4px 0; font-size: 1.25rem;">{{ event.name }}</h2>
|
||||
<span style="color: #6b7280; font-size: 0.9rem;">{{ event.postalCode }} {{ event.location }}</span>
|
||||
<h2 class="available-event-title">{{ event.name }}</h2>
|
||||
<span class="available-event-location">{{ event.postalCode }} {{ event.location }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="event.registrationAllowed"
|
||||
style="background: #d1fae5; color: #065f46; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap;"
|
||||
class="available-event-badge available-event-badge--open"
|
||||
>
|
||||
Anmeldung offen
|
||||
</span>
|
||||
Anmeldung offen
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
style="background: #fee2e2; color: #991b1b; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap;"
|
||||
class="available-event-badge available-event-badge--closed"
|
||||
>
|
||||
Anmeldung geschlossen
|
||||
</span>
|
||||
Anmeldung geschlossen
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 16px 0; border: none; border-top: 1px solid #e5e7eb;" />
|
||||
<hr class="available-event-divider" />
|
||||
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<table class="available-event-table">
|
||||
<tr>
|
||||
<th style="text-align: left; padding: 6px 12px 6px 0; width: 220px; color: #374151; font-weight: 600;">Zeitraum</th>
|
||||
<td style="padding: 6px 0; color: #111827;">{{ event.eventBegin }} – {{ event.eventEnd }} ({{ event.duration }} Tage)</td>
|
||||
<th>Zeitraum</th>
|
||||
<td>{{ event.eventBegin }} – {{ event.eventEnd }} ({{ event.duration }} Tage)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align: left; padding: 6px 12px 6px 0; width: 220px; color: #374151; font-weight: 600;">Veranstaltungsort</th>
|
||||
<td style="padding: 6px 0; color: #111827;">{{ event.postalCode }} {{ event.location }}</td>
|
||||
<th>Veranstaltungsort</th>
|
||||
<td>{{ event.postalCode }} {{ event.location }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align: left; padding: 6px 12px 6px 0; color: #374151; font-weight: 600;">Frühbuchen bis</th>
|
||||
<td style="padding: 6px 0; color: #111827;">{{ event.earlyBirdEnd.formatted }}</td>
|
||||
<th>Frühbuchen bis</th>
|
||||
<td>{{ event.earlyBirdEnd.formatted }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="text-align: left; padding: 6px 12px 6px 0; color: #374151; font-weight: 600;">Anmeldeschluss</th>
|
||||
<td style="padding: 6px 0; color: #111827;">{{ event.registrationFinalEnd.formatted }}</td>
|
||||
<th>Anmeldeschluss</th>
|
||||
<td>{{ event.registrationFinalEnd.formatted }}</td>
|
||||
</tr>
|
||||
<tr v-if="event.email">
|
||||
<th style="text-align: left; padding: 6px 12px 6px 0; color: #374151; font-weight: 600;">Kontakt</th>
|
||||
<td style="padding: 6px 0;">
|
||||
<a :href="'mailto:' + event.email" style="color: #2563eb;">{{ event.email }}</a>
|
||||
<th>Kontakt</th>
|
||||
<td>
|
||||
<a :href="'mailto:' + event.email" class="available-event-mail">{{ event.email }}</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div style="margin-top: 20px; display: flex; justify-content: flex-end;">
|
||||
<div class="available-event-actions">
|
||||
<a
|
||||
:href="'/event/' + event.identifier + '/signup'"
|
||||
style="
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
opacity: 1;
|
||||
transition: background-color 0.2s;
|
||||
"
|
||||
class="available-event-button"
|
||||
:style="{ opacity: event.registrationAllowed ? '1' : '0.5', pointerEvents: event.registrationAllowed ? 'auto' : 'none' }"
|
||||
>
|
||||
Zur Anmeldung →
|
||||
@@ -87,14 +76,160 @@ const props = defineProps({
|
||||
</div>
|
||||
</shadowed-box>
|
||||
|
||||
</div><div style="width: 95%; margin: 20px auto;">
|
||||
|
||||
<div v-if="props.events.length === 0" style="text-align: center; color: #6b7280; padding: 40px 0;">
|
||||
Aktuell sind keine Veranstaltungen verfügbar.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.available-events-wrapper {
|
||||
width: 95%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.available-events-empty {
|
||||
text-align: center;
|
||||
color: #6b7280;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.available-event-card {
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.available-event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.available-event-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.available-event-location {
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.available-event-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.available-event-badge--open { background: #d1fae5; color: #065f46; }
|
||||
.available-event-badge--closed { background: #fee2e2; color: #991b1b; }
|
||||
|
||||
.available-event-divider {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.available-event-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.available-event-table th {
|
||||
text-align: left;
|
||||
padding: 6px 12px 6px 0;
|
||||
width: 220px;
|
||||
color: #374151;
|
||||
font-weight: 600;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.available-event-table td {
|
||||
padding: 6px 0;
|
||||
color: #111827;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.available-event-mail {
|
||||
color: #2563eb;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.available-event-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.available-event-button {
|
||||
display: inline-block;
|
||||
padding: 10px 24px;
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
/* ─── Tablet ─── */
|
||||
@media (max-width: 1023px) {
|
||||
.available-events-wrapper {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.available-event-table th {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Smartphone ─── */
|
||||
@media (max-width: 639px) {
|
||||
.available-event-card {
|
||||
padding: 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.available-event-title {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* Tabelle vertikal stapeln: Label über Wert */
|
||||
.available-event-table,
|
||||
.available-event-table tbody,
|
||||
.available-event-table tr,
|
||||
.available-event-table th,
|
||||
.available-event-table td {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.available-event-table tr {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.available-event-table th {
|
||||
padding: 4px 0 2px 0;
|
||||
font-size: 0.78rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.available-event-table td {
|
||||
padding: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.available-event-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.available-event-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user