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/Partials/AvailableEvents.vue
+178 -43
View File
@@ -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>
app/Domains/Event/Views/Partials/Overview.vue
+47 -2
View File
@@ -79,12 +79,37 @@
</script>
<template>
<div class="smartphone-actions">
<a :href="'/event/details/' + props.data.event.identifier + '/pdf/first-aid-list'">
<input type="button" value="Erste-Hilfe-Liste (PDF)" />
</a><br/>
<a :href="'/event/details/' + props.data.event.identifier + '/csv/participant-list'">
<input type="button" value="Teili-Liste (CSV)" />
</a><br/>
<a :href="'/event/details/' + props.data.event.identifier + '/pdf/kitchen-list'">
<input type="button" value="Küchenübersicht (PDF)" />
</a><br/>
<a :href="'/event/details/' + props.data.event.identifier + '/pdf/amount-list'">
<input type="button" value="Beitragsliste (PDF)" />
</a><br/>
<a :href="'/event/details/' + props.data.event.identifier + '/pdf/drinking-list'">
<input type="button" value="Getränkeliste (PDF)" />
</a><br/>
<a :href="'/event/details/' + props.data.event.identifier + '/pdf/photo-permission-list'">
<input type="button" value="Foto-Erlaubnis (PDF)" />
</a><br/>
</div>
<ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event" @close="showMain" />
<CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event" @close="showMain" />
<EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event" @close="showMain" />
<div class="event-flexbox" v-else>
<div class="event-flexbox-row top">
<div class="left"><ParticipationSummary v-if="dynamicProps.event" :event="dynamicProps.event" /></div>
@@ -118,6 +143,8 @@
</div>
</div>
<div>
<table>
<tr>
@@ -241,4 +268,22 @@
margin-bottom: 10px;
}
.smartphone-actions {
display: none;
}
/* ─── Smartphone ─── */
@media (max-width: 639px) {
.smartphone-actions {
display: block;
width: 100%;
text-align: center;
}
.event-flexbox {
display: none;
}
}
</style>
app/Domains/Event/Views/Partials/ParticipantsList.vue
+193 -81
View File
@@ -301,7 +301,7 @@ function mailToGroup(groupKey) {
<h2>{{ event?.name ?? "Veranstaltung" }}</h2>
<div :key="groupKey">
<div>
<table style="width: 95%; margin: 20px auto; border-collapse: collapse;" v-for="[groupKey, participants] in getGroupEntries">
<table class="participants-table" v-for="[groupKey, participants] in getGroupEntries">
<thead>
<tr>
<th colspan="4" style="background: linear-gradient(to bottom, #fff, #f6f7f7); font-weight: bold">
@@ -309,10 +309,10 @@ function mailToGroup(groupKey) {
</th>
</tr>
<tr style="background: linear-gradient(to bottom, #fff, #f6f7f7);">
<th>Name</th>
<th>Beitrag</th>
<th>E-Mail-Adresse</th>
<th>Telefon</th>
<th class="pl-name">Name</th>
<th class="pl-amount">Beitrag</th>
<th class="pl-email">E-Mail-Adresse</th>
<th class="pl-phone">Telefon</th>
</tr>
</thead>
@@ -323,7 +323,7 @@ function mailToGroup(groupKey) {
>
<tr :class="getRowClass(participant)" :id="'participant-' + participant.identifier + '-common'">
<td :id="'participant-' + participant.identifier +'-name'"
style="width: 300px;"
class="pl-name"
:class="participant.efz_status === 'checked_invalid' ? 'efz-invalid' :
participant.efz_status === 'not_checked' ? 'efz-not-checked' : ''">
<div :id="'participant-' + participant.identifier +'-fullname'" v-html="participant.fullname" /><br />
@@ -335,7 +335,7 @@ function mailToGroup(groupKey) {
<span :id="'participant-' + participant.identifier +'-coc-action'" v-if="participant.efz_status !== 'checked_valid' && participant.efz_status !== 'not_required'" class="link" style="color: #3cb62e; font-size: 11pt;" @click="markCocExisting(participant)">Vorhanden?</span>
</td>
<td :id="'participant-' + participant.identifier +'-payment'" :class="participant.amount_left_value != 0 && !participant.unregistered ? 'not-paid' : ''" style="width: 275px; '">
<td class="pl-amount" :id="'participant-' + participant.identifier +'-payment'" :class="participant.amount_left_value != 0 && !participant.unregistered ? 'not-paid' : ''">
Gezahlt: <label :id="'participant-' + participant.identifier + '-paid'">{{ participant?.amountPaid.readable }}</label> /<br />
Gesamt: <label :id="'participant-' + participant.identifier + '-expected'">{{ participant?.amountExpected.readable }}</label>
<br /><br />
@@ -345,12 +345,12 @@ function mailToGroup(groupKey) {
</span>
</td>
<td>
<td class="pl-email">
<label :id="'participant-' + participant.identifier +'-email_1'" class="block-label">{{ participant?.email_1 ?? "-" }}</label>
<label :id="'participant-' + participant.identifier +'-email_2'" class="block-label">{{ participant.email_2 }}</label>
</td>
<td>
<td class="pl-phone">
<label :id="'participant-' + participant.identifier +'-phone_1'" class="block-label">{{ participant?.phone_1 }}</label>
<label :id="'participant-' + participant.identifier +'-phone_2'" class="block-label">{{ participant?.phone_2 }}</label>
</td>
@@ -359,7 +359,7 @@ function mailToGroup(groupKey) {
</tr>
<tr class="participant-meta-row" :id="'participant-' + participant.identifier + '-meta'">
<td colspan="5" style="height: 15px !important; font-size: 9pt; background-color: #ffffff; border-top-style: none;">
<td colspan="5" class="pl-meta">
<label :id="'participant-' + participant.identifier +'-localgroup'">
{{ participant?.localgroup ?? "-" }}
</label> |
@@ -385,8 +385,8 @@ function mailToGroup(groupKey) {
</tr>
</template>
<tr>
<td colspan="3" style="font-weight: normal;">
<tr class="pl-summary-row">
<td colspan="3" class="pl-age-summary">
0 - 5 Jahre: <strong>{{ getAgeCounts(participants)['0-5'] ?? 0 }}</strong> |
6-11 Jahre: <strong>{{ getAgeCounts(participants)['6-11'] ?? 0 }}</strong> |
12-15 Jahre: <strong>{{ getAgeCounts(participants)['12-15'] ?? 0 }}</strong> |
@@ -394,7 +394,7 @@ function mailToGroup(groupKey) {
18 - 27 Jahre: <strong>{{ getAgeCounts(participants)['18-27'] ?? 0 }}</strong> |
27 Jahre und älter: <strong>{{ getAgeCounts(participants)['27+'] ?? 0 }}</strong>
</td>
<td>
<td class="pl-summary-action">
<input type="button" class="button" @click="mailToGroup(groupKey)" value="E-Mail an Gruppe senden" />
</td>
</tr>
@@ -458,81 +458,193 @@ function mailToGroup(groupKey) {
</template>
<style scoped>
table {
margin-bottom: 60px !important;
.participants-table {
width: 95%;
margin: 20px auto;
border-collapse: collapse;
}
table {
margin-bottom: 60px !important;
}
tr {
vertical-align: top;
}
tr td {
height: 80px;
padding: 10px;
padding-top: 20px;
font-size: 11pt;
line-height: 1.5;
}
tr th {
height: 40px;
padding-left: 10px;
vertical-align: middle;
}
tr th:after {
content: "";
}
/* Spaltenbreiten auf Desktop */
.pl-name { width: 300px; }
.pl-amount { width: 275px; }
.pl-email { width: auto; }
.pl-phone { width: auto; }
.pl-meta {
height: 15px !important;
font-size: 9pt;
background-color: #ffffff;
border-top-style: none;
}
tr:nth-child(even) {
background-color: #f9fafb;
border-style: solid;
border-width: 0 1px;
border-color: #e5e7eb;
}
tr:nth-child(odd) {
background-color: #ffffff;
border-style: solid;
border-width: 5px 1px 0 1px;
border-color: #e5e7eb;
}
tr:first-child {
border-width: 1px 1px 0 1px;
}
tr:last-child {
border-width: 0 1px 1px 1px;
}
tr:last-child td {
background: linear-gradient(to bottom, #fff, #f6f7f7); font-weight: bold;
height: 30px;
}
.button {
display: block;
font-size: 10pt;
text-decoration: none;
}
.not-paid {
color: #ff0000; background-color: #ffe6e6;
}
.efz-invalid {
color: #ff0000; background-color: #ffe6e6;
}
.efz-not-checked {
color: #8D914BFF; background-color: #F4E99EFF;
}
.block-label {
display: block;
}
/* ─── Tablet ─── */
@media (max-width: 1023px) {
.participants-table {
width: 100%;
}
tr {
.pl-name { width: 40%; }
.pl-amount { width: 25%; }
.pl-email,
.pl-phone { width: 17.5%; }
tr td {
padding: 8px;
font-size: 10pt;
}
}
/* ─── Smartphone ─── */
@media (max-width: 639px) {
.participants-table {
width: 100%;
font-size: 0.85rem;
}
/* Auf Smartphone werden Beitrag und E-Mail ausgeblendet,
Name + Telefon bleiben sichtbar */
.pl-amount,
.pl-email {
display: none !important;
}
.pl-name {
width: 65% !important;
display: table-cell;
padding: 10px 8px !important;
height: auto;
vertical-align: top;
}
tr td {
height: 80px;
.pl-phone {
width: 35% !important;
display: table-cell;
padding: 10px 6px !important;
height: auto;
vertical-align: top;
font-size: 0.8rem;
word-break: break-all;
}
.pl-phone .block-label {
margin-bottom: 4px;
}
/* Header-Zeile entsprechend anpassen */
thead tr:nth-child(2) th.pl-name { width: 65% !important; }
thead tr:nth-child(2) th.pl-phone { width: 35% !important; }
/* Meta-Zeile (Adresse, Aktionen) bleibt sichtbar, aber kompakter */
.pl-meta {
padding: 8px !important;
font-size: 0.78rem !important;
line-height: 1.6;
word-break: break-word;
}
/* Summary-Zeile (Altersverteilung) auf Mobile: stapeln */
.pl-summary-row {
display: flex !important;
flex-direction: column;
}
.pl-summary-row td {
display: block;
width: 100% !important;
height: auto !important;
}
.pl-age-summary {
font-size: 0.78rem !important;
line-height: 1.8;
padding: 8px !important;
}
.pl-summary-action input.button {
width: 100%;
padding: 10px;
padding-top: 20px;
font-size: 11pt;
line-height: 1.5;
}
tr th {
height: 40px;
padding-left: 10px;
vertical-align: middle;
}
tr th:after {
content: "";
}
tr:nth-child(even) {
background-color: #f9fafb;
border-style: solid;
border-width: 0 1px;
border-color: #e5e7eb;
}
tr:nth-child(odd) {
background-color: #ffffff;
border-style: solid;
border-width: 5px 1px 0 1px;
border-color: #e5e7eb;
}
tr:first-child {
border-width: 1px 1px 0 1px;
}
tr:last-child {
border-width: 0 1px 1px 1px;
}
tr:last-child td {
background: linear-gradient(to bottom, #fff, #f6f7f7); font-weight: bold;
height: 30px;
}
.button {
display: block;
font-size: 10pt;
text-decoration: none;
}
.not-paid {
color: #ff0000; background-color: #ffe6e6;
}
.efz-invalid {
color: #ff0000; background-color: #ffe6e6;
}
.efz-not-checked {
color: #8D914BFF; background-color: #F4E99EFF;
}
.block-label {
display: block;
/* tr-Border auf Mobile angleichen */
tr td {
height: auto;
padding: 10px 8px;
padding-top: 12px;
}
}
</style>
app/Domains/Event/Views/Partials/ParticipationSummary.vue
+13 -15
View File
@@ -1,7 +1,7 @@
<script setup>
const props = defineProps({
event: Object
})
const props = defineProps({
event: Object
})
</script>
<template>
@@ -68,8 +68,6 @@
</td>
</tr>
<tr>
<th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th>
<td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">
@@ -117,7 +115,6 @@
</div>
</div>
</template>
<style scoped>
@@ -131,22 +128,22 @@
.participant-flexbox-row {
display: flex;
gap: 10px; /* Abstand zwischen den Spalten */
gap: 20px;
flex-wrap: wrap;
}
.participant-flexbox-row.top .left {
flex: 0 0 50%;
padding: 10px;
}
.participant-flexbox.top .right {
flex: 0 0 50%;
.participant-flexbox-row.top .left,
.participant-flexbox-row.top .right {
flex: 1 1 280px;
padding: 10px;
min-width: 0;
}
.participant-income-table,
.event-payment-table {
width: 475px;
width: 100%;
max-width: 475px;
table-layout: auto;
}
.participant-income-table th {
@@ -162,4 +159,5 @@
.event-payment-table {
width: 100%;
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue
+150 -25
View File
@@ -50,43 +50,37 @@ const steps = [
<template v-else>
<!-- Fortschrittsleiste (ab Step 2) -->
<div v-if="currentStep > 1" style="margin-bottom: 28px;">
<div style="display: flex; gap: 6px; flex-wrap: wrap; align-items: center;">
<div v-if="currentStep > 1" class="signup-progress">
<div class="signup-progress-pills">
<template v-for="(s, index) in steps.filter(s => s.step > 1)" :key="s.step">
<!-- Trennlinie zwischen Pills -->
<div v-if="index > 0" style="flex-shrink: 0; width: 16px; height: 2px; background: #e5e7eb; border-radius: 1px;"></div>
<div v-if="index > 0" class="signup-progress-separator"></div>
<div
:style="{
padding: '5px 14px',
borderRadius: '999px',
fontSize: '0.78rem',
fontWeight: '600',
whiteSpace: 'nowrap',
border: '2px solid',
borderColor: currentStep === s.step ? '#2563eb' : currentStep > s.step ? '#bbf7d0' : '#e5e7eb',
background: currentStep === s.step ? '#2563eb' : currentStep > s.step ? '#f0fdf4' : '#f9fafb',
color: currentStep === s.step ? 'white' : currentStep > s.step ? '#15803d' : '#9ca3af',
cursor: currentStep > s.step ? 'pointer' : 'default',
class="signup-pill"
:class="{
'signup-pill--active': currentStep === s.step,
'signup-pill--done': currentStep > s.step,
'signup-pill--upcoming': currentStep < s.step,
}"
@click="currentStep > s.step ? goToStep(s.step) : null"
>
<span v-if="currentStep > s.step" style="margin-right: 4px;">✓</span>
<span v-if="currentStep > s.step" class="signup-pill__check">✓</span>
{{ s.label }}
</div>
</template>
</div>
<!-- Fortschrittsbalken -->
<div style="margin-top: 10px; height: 3px; background: #e5e7eb; border-radius: 2px; overflow: hidden;">
<div class="signup-progress-bar">
<div
:style="{
height: '100%',
background: 'linear-gradient(90deg, #2563eb, #3b82f6)',
borderRadius: '2px',
width: ((currentStep - 2) / (steps.length - 2) * 100) + '%',
transition: 'width 0.3s ease',
}"
class="signup-progress-bar__fill"
:style="{ width: ((currentStep - 2) / (steps.length - 2) * 100) + '%' }"
></div>
</div>
<!-- Mobile Step-Anzeige -->
<div class="signup-progress-mobile">
Schritt {{ currentStep - 1 }} von {{ steps.length - 1 }}:
<strong>{{ steps.find(s => s.step === currentStep)?.label }}</strong>
</div>
</div>
<!-- Steps -->
@@ -115,11 +109,87 @@ const steps = [
</template>
<style>
/* ─── Progress (Step-Pills) ─── */
.signup-progress {
margin-bottom: 28px;
}
.signup-progress-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.signup-progress-separator {
flex-shrink: 0;
width: 16px;
height: 2px;
background: #e5e7eb;
border-radius: 1px;
}
.signup-pill {
padding: 5px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
border: 2px solid;
cursor: default;
}
.signup-pill__check { margin-right: 4px; }
.signup-pill--active {
border-color: #2563eb;
background: #2563eb;
color: white;
}
.signup-pill--done {
border-color: #bbf7d0;
background: #f0fdf4;
color: #15803d;
cursor: pointer;
}
.signup-pill--upcoming {
border-color: #e5e7eb;
background: #f9fafb;
color: #9ca3af;
}
.signup-progress-bar {
margin-top: 10px;
height: 3px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
.signup-progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, #2563eb, #3b82f6);
border-radius: 2px;
transition: width 0.3s ease;
}
.signup-progress-mobile {
display: none;
margin-top: 8px;
font-size: 0.9rem;
color: #374151;
}
/* ─── Form-Table ─── */
.form-table { width: 100%; border-collapse: collapse; }
.form-table td { padding: 8px 12px 8px 0; vertical-align: top; }
.form-table td:first-child { width: 220px; color: #374151; font-weight: 500; }
.form-table input[type="text"],
.form-table input[type="date"],
.form-table input[type="email"],
.form-table input[type="number"],
.form-table select,
.form-table textarea {
width: 100%;
@@ -129,7 +199,8 @@ const steps = [
font-size: 0.95rem;
box-sizing: border-box;
}
.btn-row { display: flex; gap: 10px; padding-top: 16px; }
.btn-row { display: flex; gap: 10px; padding-top: 16px; flex-wrap: wrap; }
.btn-primary {
padding: 8px 20px;
background: #2563eb;
@@ -149,4 +220,58 @@ const steps = [
font-weight: 600;
cursor: pointer;
}
/* ─── Tablet ─── */
@media (max-width: 1023px) {
.form-table td:first-child {
width: 160px;
}
}
/* ─── Smartphone ─── */
@media (max-width: 639px) {
/* Pills auf Mobile: kompakter, Trennstriche ausblenden */
.signup-progress-pills {
display: none;
}
.signup-progress-mobile {
display: block;
}
/* Form-Table: Label oberhalb des Feldes */
.form-table,
.form-table tbody,
.form-table tr {
display: block;
width: 100%;
}
.form-table td {
display: block;
width: 100% !important;
padding: 4px 0;
}
.form-table td:first-child {
width: 100% !important;
font-weight: 600;
color: #374151;
padding-top: 10px;
}
.form-table td[colspan] {
width: 100% !important;
}
.btn-row {
flex-direction: column-reverse;
gap: 8px;
}
.btn-primary,
.btn-secondary {
width: 100%;
padding: 12px 20px;
}
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepAge.vue
+53 -7
View File
@@ -9,7 +9,7 @@ const emit = defineEmits(['next'])
<h3 style="margin: 0 0 6px 0; color: #111827;">Wer nimmt teil?</h3>
<p style="margin: 0 0 24px 0; color: #6b7280; font-size: 0.95rem;">Bitte wähle deine Altersgruppe aus.</p>
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
<div class="age-card-row">
<!-- Kind / Jugendliche:r -->
<div class="age-card" @click="emit('next', 2)">
@@ -40,9 +40,15 @@ const emit = defineEmits(['next'])
</template>
<style scoped>
.age-card-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.age-card {
flex: 1;
min-width: 220px;
flex: 1 1 280px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
@@ -62,13 +68,14 @@ const emit = defineEmits(['next'])
.age-card__badge {
position: relative;
width: 350px;
height: 200px;
width: 100%;
max-width: 350px;
aspect-ratio: 350 / 200;
margin-bottom: 16px;
}
.age-card__img {
width: 350px;
height: 200px;
width: 100%;
height: 100%;
object-fit: contain;
}
.age-card__badge-fallback {
@@ -100,4 +107,43 @@ const emit = defineEmits(['next'])
font-size: 0.85rem;
font-weight: 600;
}
/* ─── Smartphone ─── */
@media (max-width: 639px) {
.age-card-row {
flex-direction: column;
gap: 12px;
}
.age-card {
flex: 1 1 100%;
padding: 18px 14px;
flex-direction: row;
text-align: left;
align-items: center;
gap: 14px;
}
.age-card__badge {
flex: 0 0 90px;
width: 90px;
max-width: 90px;
aspect-ratio: 1;
margin-bottom: 0;
}
.age-card__body {
flex: 1;
align-items: flex-start;
text-align: left;
}
.age-card__title {
font-size: 1rem;
}
.age-card__desc {
font-size: 0.85rem;
}
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPersonalData.vue
+29 -2
View File
@@ -116,8 +116,10 @@ const next = () => {
<tr>
<td>PLZ, Ort:</td>
<td>
<input maxlength="5" type="text" v-model="props.formData.plz" style="width: 100px; margin-right: 8px;" />
<input type="text" v-model="props.formData.ort" style="width: calc(100% - 110px);" />
<div class="plz-ort-row">
<input maxlength="5" type="text" v-model="props.formData.plz" class="plz-input" placeholder="PLZ" />
<input type="text" v-model="props.formData.ort" class="ort-input" placeholder="Ort" />
</div>
<ErrorText :message="errors.plz" />
<ErrorText :message="errors.ort" />
</td>
@@ -132,3 +134,28 @@ const next = () => {
</table>
</div>
</template>
<style scoped>
.plz-ort-row {
display: flex;
gap: 8px;
width: 100%;
}
.plz-input {
flex: 0 0 100px;
width: 100px;
}
.ort-input {
flex: 1;
min-width: 0;
}
@media (max-width: 639px) {
.plz-input {
flex: 0 0 80px;
width: 80px;
}
}
</style>