From f5d7b216714278214c9d6413919d7c82588b5fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20G=C3=BCnther?= <th.guenther@saale-mail.de>
Date: Sat, 23 May 2026 21:40:06 +0200
Subject: [PATCH] Small design improvements

---
 .../Event/Views/Partials/ParticipantData.vue  |  5 ++--
 .../Event/Views/Partials/ParticipantsList.vue |  5 ++--
 .../Views/Partials/ParticipationSummary.vue   | 26 +++++++++++--------
 .../Components/DialableTelephoneNumber.vue    | 10 +++++++
 version                                       |  2 +-
 5 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 app/Views/Components/DialableTelephoneNumber.vue

diff --git a/app/Domains/Event/Views/Partials/ParticipantData.vue b/app/Domains/Event/Views/Partials/ParticipantData.vue
index c6e4aa8..26c07f8 100644
--- a/app/Domains/Event/Views/Partials/ParticipantData.vue
+++ b/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>
diff --git a/app/Domains/Event/Views/Partials/ParticipantsList.vue b/app/Domains/Event/Views/Partials/ParticipantsList.vue
index f4ecedd..0859993 100644
--- a/app/Domains/Event/Views/Partials/ParticipantsList.vue
+++ b/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>
 
 
diff --git a/app/Domains/Event/Views/Partials/ParticipationSummary.vue b/app/Domains/Event/Views/Partials/ParticipationSummary.vue
index 0bdfffe..3394bd6 100644
--- a/app/Domains/Event/Views/Partials/ParticipationSummary.vue
+++ b/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>
diff --git a/app/Views/Components/DialableTelephoneNumber.vue b/app/Views/Components/DialableTelephoneNumber.vue
new file mode 100644
index 0000000..09971fb
--- /dev/null
+++ b/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>
diff --git a/version b/version
index 8089590..f77856a 100644
--- a/version
+++ b/version
@@ -1 +1 @@
-4.3.0
+4.3.1