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/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>