change: standardisation of UI

src/templates/Main.vue

@@ -16,9 +16,9 @@
   <div
     class="max-w-full w-full grow flex flex-col divide-y-2 divide-gray-300 bg-white rounded-lg justify-center overflow-hidden"
   >
+    <div v-if="topBar || title" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+      <h1 v-if="title" class="font-bold text-xl h-8 min-h-fit">{{ title }}</h1>
       <slot name="topBar"></slot>
-    <div v-if="!topBar" class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-      <h1 class="font-bold text-xl min-h-8">{{ title }}</h1>
     </div>
     <div class="flex flex-col gap-2 grow py-5 overflow-hidden">
       <slot name="diffMain"></slot>
@@ -56,7 +56,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      default: "Titel",
+      default: "",
     },
   },
   computed: {

src/views/account/Administration.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Administration übertragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Administration übertragen" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/LoginData.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Anmeldedaten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Anmeldedaten" :useStagedOverviewLink="false">
     <template #diffMain>
       <Spinner v-if="loading" class="mx-auto" />
       <div v-else class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">

src/views/account/Me.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mein Account</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mein Account" :useStagedOverviewLink="false">
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/account/Permission.vue

@@ -1,18 +1,13 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Meine Berechtigungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Meine Berechtigungen" :useStagedOverviewLink="false">
     <template #main>
-      <Permission :permissions="permissions" :disableEdit="true" />
+      <Permission :permissions="permissions" disableEdit />
     </template>
   </MainTemplate>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Permission from "@/components/admin/Permission.vue";

src/views/admin/club/calendar/Calendar.vue

@@ -1,16 +1,10 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Kalender">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
       <div class="flex flex-row gap-2">
-          <PlusIcon
-            class="text-gray-500 h-5 w-5 cursor-pointer"
-            @click="select({ start: '', end: '', allDay: false })"
-          />
+        <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select({ start: '', end: '', allDay: false })" />
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">

src/views/admin/club/listprint/ListPrint.vue

@@ -1,12 +1,6 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Liste Drucken</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+  <MainTemplate title="Liste Drucken">
+    <template #main>
       <form
         class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
         @submit.prevent="sendPrintJob"
@@ -80,7 +74,6 @@
           <a ref="download" button primary class="w-fit!">download</a>
         </div>
       </div>
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/club/members/Member.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitglieder</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitglieder">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/members/MemberRouting.vue

@@ -4,12 +4,11 @@
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">
+      <h1 class="font-bold text-xl h-8 min-h-fit">
         {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
         {{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
       </h1>
-
+      <div class="flex flex-row gap-2">
         <div title="Mitgliederliste drucken" @click="openPrintModal">
           <DocumentTextIcon class="w-5 h-5 cursor-pointer" />
         </div>

src/views/admin/club/members/Overview.vue

@@ -1,24 +0,0 @@
-<template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Übersicht</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 justify-center items-center h-full"></div>
-    </template>
-  </MainTemplate>
-</template>
-
-<script setup lang="ts">
-import { defineComponent } from "vue";
-import { mapState } from "pinia";
-import MainTemplate from "@/templates/Main.vue";
-</script>
-
-<script lang="ts">
-export default defineComponent({
-  computed: {},
-});
-</script>

src/views/admin/club/newsletter/Newsletter.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/newsletter/NewsletterRouting.vue

@@ -1,11 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="origin?.title">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}</h1>
       <NewsletterSyncing
         :executeSyncAll="executeSyncAll"
         @syncState="
@@ -14,7 +12,6 @@
           }
         "
       />
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">

src/views/admin/club/protocol/Protocol.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Protokolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Protokolle">
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-center px-7">
         <Pagination

src/views/admin/club/protocol/ProtocolRouting.vue

@@ -1,11 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`${origin?.title}, ${origin?.date}`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
     </template>
     <template #topBar>
-      <div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
       <ProtocolSyncing
         :executeSyncAll="executeSyncAll"
         @syncState="
@@ -14,7 +12,6 @@
           }
         "
       />
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@@ -92,10 +89,10 @@ export default defineComponent({
   },
   mounted() {
     this.fetchProtocolByActiveId();
-    this.fetchProtocolAgenda()
-    this.fetchProtocolDecision()
-    this.fetchProtocolPresence()
-    this.fetchProtocolVoting()
+    this.fetchProtocolAgenda();
+    this.fetchProtocolDecision();
+    this.fetchProtocolPresence();
+    this.fetchProtocolVoting();
   },
   // this.syncState is undefined, so it will never work
   // beforeRouteLeave(to, from, next) {
@@ -118,8 +115,8 @@ export default defineComponent({
     ...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
     ...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda"]),
     ...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision"]),
-    ...mapActions(useProtocolPresenceStore,["fetchProtocolPresence"]),
-    ...mapActions(useProtocolVotingStore,["fetchProtocolVoting"]),
+    ...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
+    ...mapActions(useProtocolVotingStore, ["fetchProtocolVoting"]),
     ...mapActions(useModalStore, ["openModal"]),
     openInfoModal() {
       this.openModal(

src/views/admin/club/query/Builder.vue

@@ -1,12 +1,6 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Query Builder</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
+  <MainTemplate title="Query Builder">
+    <template #main>
       <BuilderHost
         v-model="query"
         allow-predefined-select
@@ -51,7 +45,6 @@
           <p>{{ row }}</p>
         </template>
       </Pagination>
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/configuration/award/Award.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Auszeichnungen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/award/AwardEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Auszeichnung ${origin?.award} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/calendarType/CalendarType.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp</h1>
-      </div>
-    </template>
+  <MainTemplate title="Termintyp">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/calendarType/CalendarTypeEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Termintyp ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Termintyp {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/communicationType/CommunicationType.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsarten</h1>
-      </div>
-    </template>
+  <MainTemplate title="Kommunikationsarten">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/communicationType/CommunicationTypeEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Kommunikationsart ${origin?.type} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/executivePosition/ExecutivePosition.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsämter</h1>
-      </div>
-    </template>
+  <MainTemplate title="Vereinsämter">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/executivePosition/ExecutivePositionEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Vereinsamt ${origin?.position} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/membershipStatus/MembershipStatus.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus</h1>
-      </div>
-    </template>
+  <MainTemplate title="Mitgliedsstatus">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/membershipStatus/MembershipStatusEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Mitgliedsstatus ${origin?.status} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/newsletterConfig/NewsletterConfig.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Newsletter Konfiguration</h1>
-      </div>
-    </template>
+  <MainTemplate title="Newsletter Konfiguration">
     <template #main>
       <p>
         Ein Newsletter kann als pdf exportiert oder per Mail versandt werden. <br />

src/views/admin/configuration/qualification/Qualification.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikationen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Qualifikationen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/qualification/QualificationEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Qualifikation ${origin?.qualification} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/queryStore/QueryStore.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">gespeicherte Abfragen</h1>
-      </div>
-    </template>
+  <MainTemplate title="gespeicherte Abfragen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/Salutation.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede</h1>
-      </div>
-    </template>
+  <MainTemplate title="Anrede">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/configuration/salutation/SalutationEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Anrede ${origin?.salutation} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Anrede {{ origin?.salutation }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/Template.vue

@@ -1,12 +1,9 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="Templates">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates</h1>
       <RouterLink :to="{ name: 'admin-configuration-template-info' }">
         <InformationCircleIcon class="text-gray-500 h-5 w-5" />
       </RouterLink>
-      </div>
     </template>
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">

src/views/admin/configuration/template/TemplateEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Template ${origin?.template} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template {{ origin?.template }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/configuration/template/UsageInfo.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Templates - Verwendungsinformation</h1>
-      </div>
-    </template>
+  <MainTemplate title="Templates - Verwendungsinformation">
     <template #main>
       <p>
         Mit diesem Editor können Vorlagen erstellt werden, welche später dafür genutzt werden können, um pdfs zu drucken

src/views/admin/configuration/templateUsage/TemplateUsage.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Template-Verwendung</h1>
-      </div>
-    </template>
+  <MainTemplate title="Template-Verwendung">
     <template #main>
       <TemplateUsageListItem v-for="usage in templateUsages" :key="usage.scope" :templateUsage="usage" />
     </template>

src/views/admin/management/backup/BackupRouting.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Backups</h1>
-      </div>
-    </template>
+  <MainTemplate title="Backups">
     <template #diffMain>
       <div class="flex flex-col gap-2 grow px-7 overflow-hidden">
         <div class="flex flex-col grow gap-2 overflow-hidden">

src/views/admin/management/backup/GeneratedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/backup/UploadedBackup.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col gap-4 h-full pl-7">
-    <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-2 grow overflow-y-scroll">
       <BackupListItem v-for="backup in backups" :key="backup" :backup="backup" />
     </div>
     <div class="flex flex-row gap-4">

src/views/admin/management/role/Role.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rollen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Rollen">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/role/RoleEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${origin?.role} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/role/RoleEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Rolle ${role?.role} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/setting/Setting.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Einstellungen</h1>
-      </div>
-    </template>
+  <MainTemplate title="Einstellungen">
     <template #main>
       <p>Hinweis: Optionale Felder können leer gelassen werden und nutzen dann einen Fallback-Werte.</p>
       <ClubImageSetting />

src/views/admin/management/user/Invite.vue

@@ -1,17 +1,10 @@
 <template>
-  <MainTemplate>
+  <MainTemplate title="offene Einladungen">
     <template #headerInsert>
       <RouterLink :to="{ name: 'admin-management-user' }" class="text-primary">zurück zur Nutzerliste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">offene Einladungen</h1>
-      </div>
-    </template>
-    <template #diffMain>
-      <div class="flex flex-col gap-2 grow overflow-y-scroll px-7">
+    <template #main>
       <InviteListItem v-for="invite in invites" :key="invite.username" :invite="invite" />
-      </div>
     </template>
   </MainTemplate>
 </template>

src/views/admin/management/user/User.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Benutzer</h1>
-      </div>
-    </template>
+  <MainTemplate title="Benutzer">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/user/UserEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/user/UserEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${user?.username} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <p>Hinweis: Berechtigungen von Nutzer und Rolle sind ergänzend.</p>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />

src/views/admin/management/user/UserEditRoles.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Nutzer ${origin?.username} - Rollen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/version/VersionDisplay.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Versions-Kontrolle</h1>
-      </div>
-    </template>
+  <MainTemplate title="Versions-Kontrolle" :useStagedOverviewLink="false">
     <template #diffMain>
       <div class="h-full flex flex-col px-7 overflow-hidden">
         <div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">

src/views/admin/management/webapi/Webapi.vue

@@ -1,10 +1,5 @@
 <template>
-  <MainTemplate>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token</h1>
-      </div>
-    </template>
+  <MainTemplate title="Webapi-Token">
     <template #diffMain>
       <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">

src/views/admin/management/webapi/WebapiEdit.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${origin?.title} - Daten bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ origin?.title }} - Daten bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/admin/management/webapi/WebapiEditPermission.vue

@@ -1,13 +1,8 @@
 <template>
-  <MainTemplate>
+  <MainTemplate :title="`Webapi-Token ${webapi?.title} - Berechtigungen bearbeiten`">
     <template #headerInsert>
       <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Webapi-Token {{ webapi?.title }} - Berechtigungen bearbeiten</h1>
-      </div>
-    </template>
     <template #main>
       <Spinner v-if="loading == 'loading'" class="mx-auto" />
       <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>

src/views/docs/DocPage.vue

@@ -2,7 +2,7 @@
   <MainTemplate :useStagedOverviewLink="false">
     <!-- <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">{{page}}</h1>
+        <h1 class="font-bold text-xl h-8 min-h-fit">{{page}}</h1>
       </div>
     </template> -->
     <template #diffMain>

src/views/public/calendar/Calendar.vue

@@ -1,9 +1,7 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender" :showBack="false">
     <template #topBar>
-      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kalender</h1>
-        <div class="grow"></div>
+      <div class="flex flex-row gap-2">
         <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
         <RouterLink :to="{ name: 'public-calendar-explain' }">
           <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />

src/views/public/calendar/CalendarExplain.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainTemplate :showBack="false">
+  <MainTemplate title="Kalender-Erklärung - WebCal Kalendar einbinden" :showBack="false">
     <template #headerInsert>
       <RouterLink
         :to="{
@@ -10,11 +10,6 @@
         zum Kalender
       </RouterLink>
     </template>
-    <template #topBar>
-      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-fit">Kalender-Erklärung - WebCal Kalendar einbinden</h1>
-      </div>
-    </template>
     <template #main>
       <div class="instruction">
         <h2>iOS: Webcal-Link einbinden</h2>