th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Responsive design

Browse Source
This commit is contained in:
Thomas Günther
2026-05-23 18:08:27 +02:00
parent 3fdbaf0285
commit 0d436d8190
19 changed files with 2152 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Domains/Event/Views/Signup.vue
+181 -35
View File
@@ -26,78 +26,78 @@ function close() {
<AppLayout title="Für Veranstaltung anmelden">
<FullScreenModal :show="showSignup" @close="close">
<shadowed-box style="width: 95%; margin: 30px auto; padding: 0; overflow: hidden; border-radius: 12px;">
<shadowed-box class="signup-box">
<!-- Header -->
<div v-if="props.event.registrationAllowed" style="background: linear-gradient(135deg, #1e40af, #3b82f6); padding: 28px 32px; color: white;">
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
<span style="background: rgba(255,255,255,0.2); color: white; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,255,255,0.4);">
<div v-if="props.event.registrationAllowed" class="signup-header signup-header--open">
<div class="signup-header-row">
<h2 class="signup-event-title">{{ props.event.name }}</h2>
<span class="signup-badge signup-badge--open">
✓ Anmeldung offen
</span>
</div>
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
<p class="signup-event-location">
📍 {{ props.event.postalCode }} {{ props.event.location }}
</p>
</div>
<div v-else style="background: linear-gradient(135deg, #991b1b, #dc2626); padding: 28px 32px; color: white;">
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
<span style="background: rgba(255,0,0,0.2); color: #fecaca; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,100,100,0.4);">
<div v-else class="signup-header signup-header--closed">
<div class="signup-header-row">
<h2 class="signup-event-title">{{ props.event.name }}</h2>
<span class="signup-badge signup-badge--closed">
✗ Anmeldung geschlossen
</span>
</div>
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
<p class="signup-event-location">
📍 {{ props.event.postalCode }} {{ props.event.location }}
</p>
</div>
<!-- Body -->
<div style="padding: 28px 32px;">
<div class="signup-body">
<!-- Info-Grid -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
<div class="signup-info-grid">
<!-- Zeile 1 links: Zeitraum -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Veranstaltungszeitraum</div>
<div style="font-size: 1rem; color: #111827; font-weight: 500;">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
<div style="font-size: 0.85rem; color: #6b7280;">{{ props.event.duration }} Tage</div>
<!-- Zeitraum -->
<div class="info-card">
<div class="info-card__label">Veranstaltungszeitraum</div>
<div class="info-card__value">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
<div class="info-card__sub">{{ props.event.duration }} Tage</div>
</div>
<!-- Zeile 1 rechts: Erstattungsrichtlinien -->
<div style="background: #f0f9ff; border-radius: 8px; padding: 16px; border-left: 3px solid #0ea5e9;">
<div style="font-size: 0.75rem; color: #0369a1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;">Erstattungsrichtlinien</div>
<div style="color: #0c4a6e; font-size: 0.875rem; line-height: 1.8;">
<!-- Erstattungsrichtlinien -->
<div class="info-card info-card--accent">
<div class="info-card__label info-card__label--accent">Erstattungsrichtlinien</div>
<div class="info-card__list">
<div>100 % bis {{ props.event.earlyBirdEnd.formatted }}</div>
<div>{{ props.event.refundAfterEarlyBirdEnd }} % bis {{ props.event.registrationFinalEnd.formatted }}</div>
<div>Danach nur bei Nachrückplätzen</div>
</div>
</div>
<!-- Zeile 2 links: Anmeldeschluss -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Anmeldeschluss</div>
<div style="font-size: 1rem; color: #111827; font-weight: 500; margin-bottom: 20px;">{{ props.event.registrationFinalEnd.formatted }}</div>
<!-- Anmeldeschluss -->
<div class="info-card">
<div class="info-card__label">Anmeldeschluss</div>
<div class="info-card__value" style="margin-bottom: 16px;">{{ props.event.registrationFinalEnd.formatted }}</div>
<div style="font-size: 0.75rem; color: #366a34; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Frühbucher bis</div>
<div style="font-size: 1rem; color: #366a34; font-weight: 500;">{{ props.event.earlyBirdEnd.formatted }}</div>
<div class="info-card__label info-card__label--green">Frühbucher bis</div>
<div class="info-card__value" style="color: #366a34;">{{ props.event.earlyBirdEnd.formatted }}</div>
</div>
<!-- Zeile 2 rechts: Kontakt -->
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Kontakt</div>
<p style="margin: 0 0 6px 0; color: #374151; font-size: 0.9rem; line-height: 1.6;">
<!-- Kontakt -->
<div class="info-card">
<div class="info-card__label">Kontakt</div>
<p class="info-card__text">
Hast du Fragen zur Veranstaltung oder deiner Anmeldung? Kontaktiere uns per E-Mail:
</p>
<a :href="'mailto:' + props.event.email" style="font-size: 0.95rem; color: #2563eb; text-decoration: none; font-weight: 500;">{{ props.event.email }}</a>
<a :href="'mailto:' + props.event.email" class="info-card__link">{{ props.event.email }}</a>
</div>
</div>
</div>
<hr class="signup-divider" />
<hr style="margin: 0 32px; border: none; border-top: 1px solid #e5e7eb;" />
<div style="padding: 28px 32px;">
<div class="signup-body">
<SignupForm
:event="props.event"
:participantData="props.participantData ?? {}"
@@ -115,5 +115,151 @@ function close() {
</template>
<style scoped>
.signup-box {
width: 95%;
margin: 30px auto;
padding: 0;
overflow: hidden;
border-radius: 12px;
}
/* Header */
.signup-header {
padding: 28px 32px;
color: white;
}
.signup-header--open { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.signup-header--closed { background: linear-gradient(135deg, #991b1b, #dc2626); }
.signup-header-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.signup-event-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.signup-badge {
padding: 4px 14px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
border: 1px solid rgba(255,255,255,0.4);
}
.signup-badge--open { background: rgba(255,255,255,0.2); color: white; }
.signup-badge--closed { background: rgba(255,0,0,0.2); color: #fecaca; }
.signup-event-location {
margin: 8px 0 0 0;
opacity: 0.85;
font-size: 0.95rem;
}
/* Body */
.signup-body { padding: 28px 32px; }
.signup-divider { margin: 0 32px; border: none; border-top: 1px solid #e5e7eb; }
/* Info-Grid */
.signup-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}
.info-card {
background: #f8fafc;
border-radius: 8px;
padding: 16px;
}
.info-card--accent {
background: #f0f9ff;
border-left: 3px solid #0ea5e9;
}
.info-card__label {
font-size: 0.75rem;
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
.info-card__label--accent { color: #0369a1; margin-bottom: 8px; }
.info-card__label--green { color: #366a34; margin-top: 4px; }
.info-card__value {
font-size: 1rem;
color: #111827;
font-weight: 500;
}
.info-card__sub {
font-size: 0.85rem;
color: #6b7280;
}
.info-card__list {
color: #0c4a6e;
font-size: 0.875rem;
line-height: 1.8;
}
.info-card__text {
margin: 0 0 6px 0;
color: #374151;
font-size: 0.9rem;
line-height: 1.6;
}
.info-card__link {
font-size: 0.95rem;
color: #2563eb;
text-decoration: none;
font-weight: 500;
word-break: break-all;
}
/* ─── Tablet (640–1023px) ─── */
@media (max-width: 1023px) {
.signup-box {
width: 100%;
margin: 10px auto;
}
.signup-header,
.signup-body { padding: 20px 18px; }
.signup-divider { margin: 0 18px; }
.signup-info-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.signup-event-title { font-size: 1.25rem; }
}
/* ─── Smartphone (< 640px) ─── */
@media (max-width: 639px) {
.signup-box {
width: 100%;
margin: 0;
border-radius: 0;
}
.signup-header,
.signup-body { padding: 16px 12px; }
.signup-divider { margin: 0 12px; }
.signup-event-title { font-size: 1.1rem; }
.signup-event-location { font-size: 0.85rem; }
.signup-badge { font-size: 0.7rem; padding: 3px 10px; }
.signup-info-grid {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 16px;
}
.info-card { padding: 12px; }
.info-card__value { font-size: 0.95rem; }
.info-card__list { font-size: 0.82rem; }
}
</style>