From dce451bfc2206d75447eaf791978d8a930c39852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Z=C3=BCrcher?= <zuercher@mst.local>
Date: Sun, 16 Nov 2025 08:40:42 +0100
Subject: [PATCH] add new page header and decrease marging

---
 src/pages/EventsTable.vue        |  4 ++--
 src/pages/GroupTable.vue         |  3 ++-
 src/pages/MembersTable.vue       |  7 +++++--
 src/pages/ResponsibleTable.vue   |  4 ++--
 src/pages/SettingsPage.vue       |  4 ++--
 src/pages/UserSettings.vue       |  4 ++--
 src/router/routes.ts             |  4 ++--
 src/vueLib/general/SiteTitle.vue | 12 ++++++++++++
 8 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/vueLib/general/SiteTitle.vue

diff --git a/src/pages/EventsTable.vue b/src/pages/EventsTable.vue
index 77be702..692ecac 100644
--- a/src/pages/EventsTable.vue
+++ b/src/pages/EventsTable.vue
@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('events') }}</h4>
-
+    <SiteTitle :title="$t('events')" />
     <EventsTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import EventsTable from 'src/vueLib/tables/events/EventsTable.vue';
 </script>
diff --git a/src/pages/GroupTable.vue b/src/pages/GroupTable.vue
index 311d350..caa4f4c 100644
--- a/src/pages/GroupTable.vue
+++ b/src/pages/GroupTable.vue
@@ -1,10 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('groups') }}</h4>
+    <SiteTitle :title="$t('groups')" />
     <GroupTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import GroupTable from 'src/vueLib/tables/group/GroupTable.vue';
 </script>
diff --git a/src/pages/MembersTable.vue b/src/pages/MembersTable.vue
index 4ede071..fa875b2 100644
--- a/src/pages/MembersTable.vue
+++ b/src/pages/MembersTable.vue
@@ -1,10 +1,13 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('members') }}</h4>
-    <MembersTable />
+    <SiteTitle :title="$t('members')" />
+    <div class="q-pa-md">
+      <MembersTable />
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
 </script>
diff --git a/src/pages/ResponsibleTable.vue b/src/pages/ResponsibleTable.vue
index 15b4a22..fec9eaf 100644
--- a/src/pages/ResponsibleTable.vue
+++ b/src/pages/ResponsibleTable.vue
@@ -1,11 +1,11 @@
 <template>
   <q-page>
-    <h4 class="text-primary text-bold text-center">{{ $t('responsibles') }}</h4>
-
+    <SiteTitle :title="$t('responsibles')" />
     <ResponsibleTable />
   </q-page>
 </template>
 
 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import ResponsibleTable from 'src/vueLib/tables/responsible/ResponsibleTable.vue';
 </script>
diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue
index 88ecb39..fecc9e3 100644
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
-
+  <SiteTitle :title="$t('userSettings')" />
   <div class="text-h2 flex flex-center">
     <q-card class="q-gutter-md">
       <div>
@@ -152,6 +151,7 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { setLocalSettings } from 'src/localstorage/localStorage';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 
 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);
diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
index c59f8fc..d0ab92c 100644
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -1,6 +1,5 @@
 <template>
-  <h4 class="text-primary text-bold text-center">{{ $t('userSettings') }}</h4>
-
+  <SiteTitle :title="$t('userSettings')" />
   <div class="q-pa-md">
     <div class="q-gutter-y-md">
       <q-card>
@@ -35,6 +34,7 @@
 import { ref } from 'vue';
 import UserTable from 'src/vueLib/tables/users/UserTable.vue';
 import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 
 const tab = ref('users');
 </script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 5711876..d6af6e2 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -25,12 +25,12 @@ const routes: RouteRecordRaw[] = [
       },
       {
         path: 'responsible',
-        component: () => import('pages/ResponsibleTable.vue'),
+        component: () => import('src/pages/ResponsibleTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {
         path: 'group',
-        component: () => import('pages/GroupTable.vue'),
+        component: () => import('src/pages/GroupTable.vue'),
         meta: { requiresAuth: true, requiresAdmin: true },
       },
       {
diff --git a/src/vueLib/general/SiteTitle.vue b/src/vueLib/general/SiteTitle.vue
new file mode 100644
index 0000000..15c1766
--- /dev/null
+++ b/src/vueLib/general/SiteTitle.vue
@@ -0,0 +1,12 @@
+<template>
+  <h4 class="text-primary text-bold text-center" :style="{ margin: props.marging + 'px' }">
+    {{ props.title }}
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: { type: String },
+  marging: { type: Number, default: 28 },
+});
+</script>