From bd54399cfd545564653a7e3a992b230675ddf23c Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 11 Nov 2024 14:11:01 +0100
Subject: [PATCH] fix(Calendar Header): adds responsiveness to the calendar
 header and the view button group next to the header

---
 public/css/components/calendar.css      |  2 +-
 public/js/components/Calendar/Header.js | 55 +++++++++++++------------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 93c351120..157836afc 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -77,7 +77,7 @@
   /*width: calc(100% + 1.5em);*/
   height: calc(100% + 1.5em);
 }
-.fhc-calendar-day-page .flex-column > div {
+.fhc-calendar-day-page .flex-column > .flex-grow-1 {
   padding-left: 3em;
 }
 .fhc-calendar-day-page .flex-column {
diff --git a/public/js/components/Calendar/Header.js b/public/js/components/Calendar/Header.js
index aece861b4..07fc58ceb 100644
--- a/public/js/components/Calendar/Header.js
+++ b/public/js/components/Calendar/Header.js
@@ -7,6 +7,7 @@ export default {
 				month:"Monat",
 				day: "Tag", 
 			},
+			headerPadding:null,
 		}
 	},
 	inject: [
@@ -44,36 +45,38 @@ export default {
 			return c;
 		}
 	},
-	template: `
+	template: /*html*/`
 	<div class="calendar-header card-header w-100" :class="classHeader">
-
-		<div v-if="!noWeekView && !noMonthView" class="row justify-content-end" style="position: absolute; width: 98%; pointer-events: none;">
-			<div class="col-auto" style="pointer-events: all;">
-				<div  role="group" aria-label="Kalender Modus">
-					<button type="button" :class="{'active':mode_kurzbz == mode}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="(mode_bezeichnung,mode_kurzbz) in modes">
-						<i v-if="!noWeekView && mode_kurzbz == 'week'" class="fa fa-calendar-week"></i>
-						<i v-else-if="!noMonthView && mode_kurzbz == 'month'" class="fa fa-calendar-days"></i>
-						<i v-else-if="mode_kurzbz == 'day'" class="fa-solid fa-sun"></i>
-					</button>
+		<div class="row align-items-center ">
+			<div class="col offset-0 offset-md-3" :style="{'padding-left':headerPadding}">
+				<div class="row align-items-center justify-content-center">
+					<div class="col-auto ">
+						<button class="btn btn-outline-secondary border-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
+					</div>
+					<div class="justify-content-center text-center col-auto">
+						<div class="d-flex justify-content-center align-items-center">
+							<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
+								{{ title }}
+								<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
+							</button>
+						</div>
+					</div>
+					<div class="col-auto ">
+						<button class="btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
+					</div>
 				</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="col-5 d-flex justify-content-end">
-				<button class="btn btn-outline-secondary border-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
-			</div>
-			<div class="justify-content-center text-center col-2">
-				<div class="d-flex justify-content-center align-items-center">
-					<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
-						{{ title }}
-						<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
-					</button>
+			</div>	
+			<div ref="viewButtons" v-if="!noWeekView && !noMonthView" class=" col-12 col-md-3 d-flex justify-content-center justify-content-md-end align-items-center" style="pointer-events: none;">
+				<div  style="pointer-events: all;">
+					<div  role="group" aria-label="Kalender Modus">
+						<button type="button" :class="{'active':mode_kurzbz == mode}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="(mode_bezeichnung,mode_kurzbz) in modes">
+							<i v-if="!noWeekView && mode_kurzbz == 'week'" class="fa fa-calendar-week"></i>
+							<i v-else-if="!noMonthView && mode_kurzbz == 'month'" class="fa fa-calendar-days"></i>
+							<i v-else-if="mode_kurzbz == 'day'" class="fa-solid fa-sun"></i>
+						</button>
+					</div>
 				</div>
 			</div>
-			<div class="col-5 d-flex justify-content-start">
-				<button class="btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
-			</div>
 		</div>
 	</div>`
 }
\ No newline at end of file