Small design improvements

This commit is contained in:
2026-05-23 21:40:06 +02:00
parent 444711b049
commit f5d7b21671
5 changed files with 32 additions and 16 deletions
@@ -1,6 +1,7 @@
<script setup> <script setup>
import {onMounted, reactive, watch} from "vue"; import {onMounted, reactive, watch} from "vue";
import AmountInput from "../../../../Views/Components/AmountInput.vue"; import AmountInput from "../../../../Views/Components/AmountInput.vue";
import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
const staticProps = defineProps({ const staticProps = defineProps({
editMode: Boolean, editMode: Boolean,
@@ -205,7 +206,7 @@ function saveParticipant() {
<tr> <tr>
<th>Telefon</th> <th>Telefon</th>
<td> <td>
<span v-if="!staticProps.editMode">{{ props.participant.phone_1 }}</span> <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_1"</DialableTelephoneNumber>
<input v-else v-model="form.phone_1" type="text" /> <input v-else v-model="form.phone_1" type="text" />
</td> </td>
</tr> </tr>
@@ -229,7 +230,7 @@ function saveParticipant() {
<tr> <tr>
<th>Ansprechperson Telefon</th> <th>Ansprechperson Telefon</th>
<td> <td>
<span v-if="!staticProps.editMode">{{ props.participant.phone_2 }}</span> <DialableTelephoneNumber v-if="!staticProps.editMode" :number="props.participant.phone_2"</DialableTelephoneNumber>
<input v-else v-model="form.phone_2" type="text" /> <input v-else v-model="form.phone_2" type="text" />
</td> </td>
</tr> </tr>
@@ -8,6 +8,7 @@ import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
import {format, getDay, getMonth, getYear} from "date-fns"; import {format, getDay, getMonth, getYear} from "date-fns";
import AmountInput from "../../../../Views/Components/AmountInput.vue"; import AmountInput from "../../../../Views/Components/AmountInput.vue";
import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue"; import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
const props = defineProps({ const props = defineProps({
data: { data: {
@@ -351,8 +352,8 @@ function mailToGroup(groupKey) {
</td> </td>
<td class="pl-phone"> <td class="pl-phone">
<label :id="'participant-' + participant.identifier +'-phone_1'" class="block-label">{{ participant?.phone_1 }}</label> <label :id="'participant-' + participant.identifier +'-phone_1'" class="block-label">P: <DialableTelephoneNumber :number="participant?.phone_1" /></label>
<label :id="'participant-' + participant.identifier +'-phone_2'" class="block-label">{{ participant?.phone_2 }}</label> <label :id="'participant-' + participant.identifier +'-phone_2'" class="block-label">K: <DialableTelephoneNumber :number="participant?.phone_2" /></label>
</td> </td>
@@ -69,12 +69,12 @@ const props = defineProps({
</tr> </tr>
<tr> <tr>
<th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th> <th colspan="2" style="border-width: 1px; border-top-style: solid">Gesamt</th>
<td style="font-weight: bold; border-width: 1px; border-bottom-style: solid"> <td style="font-weight: bold; border-width: 1px; border-top-style: solid">
{{ props.event.income.real.readable }} / {{ props.event.income.real.readable }} /
</td> </td>
<td style="font-weight: bold; border-width: 1px; border-bottom-style: solid"> <td style="font-weight: bold; border-width: 1px; border-top-style: solid">
{{ props.event.income.expected.readable }} {{ props.event.income.expected.readable }}
</td> </td>
</tr> </tr>
@@ -107,8 +107,8 @@ const props = defineProps({
<td>{{amount.string}}</td> <td>{{amount.string}}</td>
</tr> </tr>
<tr> <tr>
<th style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 58px">Gesamt</th> <th style="color:#f44336; border-width: 1px; border-top-style: solid; ">Gesamt</th>
<td style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 58px; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td> <td style="color:#f44336; border-width: 1px; border-top-style: solid; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td>
</tr> </tr>
</table> </table>
</div> </div>
@@ -128,13 +128,13 @@ const props = defineProps({
.participant-flexbox-row { .participant-flexbox-row {
display: flex; display: flex;
gap: 20px; flex: 1 1;
flex-wrap: wrap; flex-wrap: wrap;
} }
.participant-flexbox-row.top .left, .participant-flexbox-row.top .left,
.participant-flexbox-row.top .right { .participant-flexbox-row.top .right {
flex: 1 1 280px;
padding: 10px; padding: 10px;
min-width: 0; min-width: 0;
} }
@@ -152,12 +152,16 @@ const props = defineProps({
} }
.participant-income-table tr td:first-child { .participant-income-table tr td:first-child {
width: 25px !important; width: 50px;
font-size: 11pt;
} }
.event-payment-table { .participant-income-table tr td:first-child {
width: 100%; width: 25px !important;
font-size: 10pt;
}
.event-payment-table th {
width: 50px;
} }
</style> </style>
@@ -0,0 +1,10 @@
<!-- NumericInput.vue -->
<script setup>
const props = defineProps({
number: { type: String, required: true },
})
</script>
<template>
<a class="link" :href="'tel:' + props.number">{{ props.number }}</a>
</template>
+1 -1
View File
@@ -1 +1 @@
4.3.0 4.3.1