Small design improvements

app/Domains/Event/Views/Partials/ParticipantData.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {onMounted, reactive, watch} from "vue";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
+import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
 
 const staticProps = defineProps({
     editMode: Boolean,
@@ -205,7 +206,7 @@ function saveParticipant() {
                     <tr>
                         <th>Telefon</th>
                         <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" />
                         </td>
                     </tr>
@@ -229,7 +230,7 @@ function saveParticipant() {
                     <tr>
                         <th>Ansprechperson Telefon</th>
                         <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" />
                         </td>
                     </tr>

app/Domains/Event/Views/Partials/ParticipantsList.vue

@@ -8,6 +8,7 @@ import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
 import {format, getDay, getMonth, getYear} from "date-fns";
 import AmountInput from "../../../../Views/Components/AmountInput.vue";
 import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
+import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
 
 const props = defineProps({
     data: {
@@ -351,8 +352,8 @@ function mailToGroup(groupKey) {
                         </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>
+                            <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">K: <DialableTelephoneNumber :number="participant?.phone_2" /></label>
                         </td>
 
 

app/Domains/Event/Views/Partials/ParticipationSummary.vue

@@ -69,12 +69,12 @@ const props = defineProps({
                     </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">
+                        <th colspan="2" style="border-width: 1px; border-top-style: solid">Gesamt</th>
+                        <td style="font-weight: bold; border-width: 1px; border-top-style: solid">
                             {{ props.event.income.real.readable }} /
                         </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 }}
                         </td>
                     </tr>
@@ -107,8 +107,8 @@ const props = defineProps({
                         <td>{{amount.string}}</td>
                     </tr>
                     <tr>
-                        <th style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 58px">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>
+                        <th style="color:#f44336; border-width: 1px; border-top-style: solid; ">Gesamt</th>
+                        <td style="color:#f44336; border-width: 1px; border-top-style: solid; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td>
                     </tr>
                 </table>
             </div>
@@ -128,13 +128,13 @@ const props = defineProps({
 
 .participant-flexbox-row {
     display: flex;
-    gap: 20px;
+    flex: 1 1;
     flex-wrap: wrap;
 }
 
 .participant-flexbox-row.top .left,
 .participant-flexbox-row.top .right {
-    flex: 1 1 280px;
+
     padding: 10px;
     min-width: 0;
 }
@@ -152,12 +152,16 @@ const props = defineProps({
 }
 
 .participant-income-table tr td:first-child {
-    width: 25px !important;
-    font-size: 11pt;
+    width: 50px;
 }
 
-.event-payment-table {
-    width: 100%;
+.participant-income-table tr td:first-child {
+    width: 25px !important;
+    font-size: 10pt;
+}
+
+.event-payment-table th {
+    width: 50px;
 }
 
 </style>

app/Views/Components/DialableTelephoneNumber.vue

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

version

@@ -1 +1 @@
-4.3.0
+4.3.1