From b7e89ab55795b57a799baa4072f139df1cd730ab Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Mon, 11 Nov 2024 11:27:23 +0100
Subject: [PATCH] fix(Stundenplan hour lines): fixes the hour lines from
 disapearing on smaller viewports by using a box-shadow instead

---
 public/css/components/calendar.css         | 5 +++++
 public/js/components/Calendar/Day/Page.js  | 6 +++---
 public/js/components/Calendar/Week/Page.js | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 2806ec60f..93c351120 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -63,6 +63,11 @@
   display: grid;
 }
 
+/* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/
+.box-shadow-border-top{
+	box-shadow: 0 0 0 1px #dee2e6 !important;
+}
+
 .fhc-calendar-day-page {
   /*aspect-ratio: 7/6;*/
   min-height: 0;
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 7ff94b5e5..877ab9873 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -140,7 +140,7 @@ export default {
 	template: /*html*/`
 	<div class="fhc-calendar-day-page ">
 		<div class="row">
-			<div class="col-6">
+			<div class="col-12 col-xl-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)">
@@ -149,7 +149,7 @@ export default {
 					</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-for="hour in hours" :key="hour"  class="position-absolute box-shadow-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>
@@ -169,7 +169,7 @@ export default {
 				</div>
 			</div>
 			</div>
-			<div class="col-6">
+			<div class="d-none d-xl-block col-xl-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>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 75b7bed4d..2eba70699 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -150,7 +150,7 @@ export default {
 				</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-for="hour in hours" :key="hour"  class="position-absolute box-shadow-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>