From 0e49dfaba01d41beb978286d84bad6f15b2a7c9a Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 11 Nov 2024 10:40:58 +0100
Subject: [PATCH] refactor(Calendar day view): changes the classes for
 fhc-calendar-day-page so that the width is divided in calendar and content

---
 public/css/components/calendar.css        | 28 ++++++++++++
 public/js/components/Calendar/Day/Page.js | 56 +++++++++++++----------
 2 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 7cb105b85..2806ec60f 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -63,6 +63,34 @@
   display: grid;
 }
 
+.fhc-calendar-day-page {
+  /*aspect-ratio: 7/6;*/
+  min-height: 0;
+}
+.fhc-calendar-day-page > div {
+  /*transform: translate(-0.75em, -0.75em);*/
+  /*width: calc(100% + 1.5em);*/
+  height: calc(100% + 1.5em);
+}
+.fhc-calendar-day-page .flex-column > div {
+  padding-left: 3em;
+}
+.fhc-calendar-day-page .flex-column {
+	border-right: 1px solid #dee2e6;
+}
+.fhc-calendar-day-page .events {
+  display: grid;
+  grid-template-columns: 3em 1fr;
+  margin-left: -3em;
+  /*min-height: 266.6666666667%;*/
+}
+.fhc-calendar-day-page .events .day {
+  gap: 1px;
+}
+.fhc-calendar-day-page .events .hours, .fhc-calendar-day-page .events .day {
+  display: grid;
+}
+
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-lg .fhc-calendar-month-page-weekday,
 .fhc-calendar-md .fhc-calendar-month-page-day,
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index c66dcf33a..7ff94b5e5 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -138,33 +138,43 @@ export default {
 		setTimeout(() => this.$refs.eventcontainer.scrollTop = this.$refs.eventcontainer.scrollHeight / 3 + 1, 0);
 	},
 	template: /*html*/`
-	<div class="fhc-calendar-week-page">
-		<div class="d-flex flex-column">
-			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'z-index':4,'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
-				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
-					<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
-					<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
+	<div class="fhc-calendar-day-page ">
+		<div class="row">
+			<div class="col-6">
+				<div class="d-flex flex-column">
+				<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'z-index':4,'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
+					<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
+						<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
+						<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
+					</div>
+				</div>
+				<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
+					<div v-for="hour in hours" :key="hour"  class="position-absolute border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
+					<div v-if="hourPosition" class="position-absolute border-top small"  style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
+						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
+					</div>
+					<div class="events">
+						<div class="hours">
+							<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
+						</div>
+						<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="{'grid-template-columns': '1 1fr', 'grid-template-rows': 'repeat(' + (hours.length * 60 / smallestTimeFrame) + ', 1fr)'}">
+							<div  :style="{'background-color':event.orig.color}" class="mx-2 border border-dark border-2 small rounded overflow-hidden "  @click.prevent="$emit('input', event.orig)" :style="{'z-index':1,'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">
+								<slot  name="dayPage" :event="event" :day="day">
+									<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
+								</slot>
+							</div>
+
+						</div>
+					</div>
 				</div>
 			</div>
-			<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
-				<div v-for="hour in hours" :key="hour"  class="position-absolute border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
-				<div v-if="hourPosition" class="position-absolute border-top small"  style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
-					<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
-				</div>
-				<div class="events">
-					<div class="hours">
-						<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
-					</div>
-					<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (hours.length * 60 / smallestTimeFrame) + ', 1fr)'}">
-						<div  :style="{'background-color':event.orig.color}" class="mx-2 border border-dark border-2 small rounded overflow-hidden "  @click.prevent="$emit('input', event.orig)" :style="{'z-index':1,'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">	
-							<slot  name="dayPage" :event="event" :day="day">
-								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
-							</slot>
-						</div>
-						
-					</div>
+			</div>
+			<div class="col-6">
+				<div class="bg-secondary h-100 d-flex justify-content-center align-items-center">
+					<p class="text-white fs-1" >other content goes in here</p>
 				</div>
 			</div>
 		</div>
+		
 	</div>`
 }