From 400ba2d7f9f901c3d12f267dd6ff34632e2025a8 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 20 Feb 2025 12:10:48 +0100
Subject: [PATCH] fix(Calendar All Day Events): positions the all day Events in
 its own container above the events

---
 public/css/components/calendar.css            | 21 ++++++++-
 public/js/components/Calendar/Calendar.js     |  3 --
 public/js/components/Calendar/Day.js          |  3 --
 public/js/components/Calendar/Day/Page.js     | 22 ++++++----
 public/js/components/Calendar/Week/Page.js    | 43 ++++++++++---------
 .../components/Cis/Stundenplan/Stundenplan.js |  7 ++-
 6 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 9be771adf..3e6eeb3e2 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -69,8 +69,27 @@
   display: grid;
 }
 
+.all-day-event-border{
+	box-shadow: 1px 1px 0 #dee2e6;
+}
+
+.all-day-event{
+	max-height: 75px;
+	overflow:scroll;
+}
+
+.all-day-event-container{
+	position: sticky;
+	top: 44px;
+	display:grid;
+	grid-template-columns:repeat(7,1fr);
+	width:100%;
+	box-shadow: 0px 1px 0px #dee2e6;
+	z-index:3;
+}
+
 /* 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-border{
 	box-shadow: 0 0 0 1px #dee2e6 !important;
 }
 
diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index cdef23aa9..c3515df45 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -250,9 +250,6 @@ export default {
 			<template #pageMobilContent="{lvMenu, event}">
 				<slot name="pageMobilContent" :lvMenu="lvMenu" :event="event"></slot>
 			</template>
-			<template #pageMobilContentEmpty>
-				<slot name="pageMobilContentEmpty" ></slot>
-			</template>
 			<template #minimizedPage="{event,day}">
 				<slot name="minimizedPage" :event="event" :day="day"></slot>
 			</template>
diff --git a/public/js/components/Calendar/Day.js b/public/js/components/Calendar/Day.js
index a83ea6818..b85615f3e 100644
--- a/public/js/components/Calendar/Day.js
+++ b/public/js/components/Calendar/Day.js
@@ -53,9 +53,6 @@ export default {
 				<template #pageMobilContent="{lvMenu, event}">
 					<slot name="pageMobilContent" :lvMenu="lvMenu" :event="event" ></slot>
 				</template>
-				<template #pageMobilContentEmpty>
-					<slot name="pageMobilContentEmpty" ></slot>
-				</template>
 			</calendar-day-page>
 		</calendar-pane>
 	</div>`
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 4f83f7c36..679086885 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -366,7 +366,7 @@ export default {
 					<div id="scroll g-0" style="height: 100%; overflow-y: scroll;">
 
 						<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
-							<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
+							<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
 
 							<Transition>
 								<div v-if="hourPosition && !noEventsCondition" class="position-absolute border-top small"  :style="indicatorStyle">
@@ -381,7 +381,6 @@ export default {
 							<div>
 								<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">Keine Lehrveranstaltungen</h1>
 								<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
-
 									<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>
@@ -394,9 +393,16 @@ export default {
 													class="small rounded overflow-hidden fhc-entry"
 													v-contrast
 													>
-													<slot class="p-1" 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 class="d-none d-xl-block">
+														<slot name="dayPage" :event="event" :day="day" :mobile="false">
+															<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
+														</slot>
+													</div>
+													<div class="d-block d-xl-none">
+														<slot name="dayPage" :event="event" :day="day" :mobile="true">
+															<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
+														</slot>
+													</div>
 												</div>
 											</div>
 										</div>
@@ -414,7 +420,7 @@ export default {
 													<p>this is a slot placeholder</p>
 												</slot>
 											</div>
-		
+
 										</div>
 									</div>
 								</div>
@@ -432,9 +438,7 @@ export default {
 							</slot>
 						</template>
 						<template v-else-if="noEventsCondition">
-							<slot name="pageMobilContentEmpty" >
-								<h3>This is an slot placeholder</h3>
-							</slot>
+							<h3>Keine Lehrveranstaltungen</h3>
 						</template>
 						<template v-else>
 							<div class="p-4 d-flex w-100 justify-content-center align-items-center">
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 37cd47be8..b4ee7626c 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -249,8 +249,8 @@ export default {
 			}
 		},
 		calcHourPosition(event) {
-			let height = this.$refs.eventcontainer.getBoundingClientRect().height;
-			let top = this.$refs.eventcontainer.getBoundingClientRect().top;
+			let height = this.$refs['eventsRef' + this.week].getBoundingClientRect().height;
+			let top = this.$refs['eventsRef' + this.week].getBoundingClientRect().top;
 			let position = event.clientY - top;
 			// position percentage of total height
 			let timePercentage = (position / height) * 100;
@@ -350,34 +350,35 @@ export default {
 					<a href="#" class="small text-secondary text-decoration-none" >{{dayText[day]?.datum}}</a>
 				</div>
 			</div>
-			<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="hourPosition = null" >
-				<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border-top" :style="hourGridStyle(hour)"></div>
-				<Transition>
-					<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
-						<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
-					</div>
-				</Transition>
-
-				<div class="events" :ref="'eventsRef'+week">
-
-					<div class="hours">
-						<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
-					</div>
-					<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start position-relative" :style="dayGridStyle(day)">
-						<div class="position-absolute w-100" style="top:0; bottom:0;">
-							<div class="position-sticky d-grid " style="top:44px;" v-for="(events,_day) in allDayEvents" :key="day">
-								<div v-if="dayindex == _day" v-for="event in events" :key="event" @click.prevent="weekPageClick(event, _day)"
+			<div ref="eventcontainer" class="position-relative flex-grow-1" >
+				<div class="all-day-event-container" >
+					<div class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
+						<div class="position-sticky d-grid mx-1" style="top:0;" v-for="(events,_day) in allDayEvents" :key="_day">
+						
+						<div v-if="dayindex == _day" v-for="event in events" :key="event" @click.prevent="weekPageClick(event, _day)"
 									:selected="event == selectedEvent"
-									:style="{'background-color': event?.color, 'z-index':2, 'margin-bottom':'1px'}"
+									:style="{'background-color': event?.color, 'margin-bottom':'1px'}"
 									class="small rounded overflow-hidden fhc-entry"
 									v-contrast
-									>
+									>		
 									<slot class="p-1" name="weekPage" :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 class="events position-relative" :ref="'eventsRef'+week" @mousemove="calcHourPosition" @mouseleave="hourPosition = null">
+					<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
+					<Transition>
+						<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
+							<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
 						</div>
+					</Transition>
+					<div class="hours">
+						<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
+					</div>
+					<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start position-relative" :style="dayGridStyle(day)">
 						<Transition>
 							<div v-if="day.isToday" class="position-absolute border-top small"  :style="curIndicatorStyle">
 								<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index af19e218b..b5ade9542 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -237,7 +237,9 @@ export const Stundenplan = {
 					</div>
 				</div>
 				<div v-if="event.type=='moodle'" class="d-flex small w-100" >
-					<span >moodle:</span>
+					<span >
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><radialGradient id="moodle-original-a" cx="532.855" cy="-537.557" r="209.76" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FAAF40"/><stop offset=".043" stop-color="#F9A538"/><stop offset=".112" stop-color="#F89D31"/><stop offset=".227" stop-color="#F89A2F"/><stop offset=".528" stop-color="#F7922D"/><stop offset="1" stop-color="#F37B28"/></radialGradient><path fill="url(#moodle-original-a)" d="M106.259 105.754V66.975c0-8.164-3.397-12.244-10.034-12.244-6.629 0-10.034 4.08-10.034 12.244v38.779H66.294V66.975c0-8.164-3.228-12.244-9.862-12.244-6.633 0-10.036 4.08-10.036 12.244v38.779H26.667V64.768c0-8.504 2.891-14.801 8.844-19.223 5.102-3.91 12.246-5.777 20.92-5.777 9.015 0 15.478 2.207 19.727 6.801 3.57-4.594 10.207-6.801 19.897-6.801 8.844 0 15.819 1.867 20.922 5.777 5.951 4.422 8.843 10.719 8.843 19.223v41.152h-19.563v-.166z"/><path fill="#58595B" d="M28.539 49.627l-2.041 10.207c18.708 6.291 36.395.166 45.751-16.158-13.778-9.522-26.535.17-43.71 5.951"/><linearGradient id="moodle-original-b" gradientUnits="userSpaceOnUse" x1="324.268" y1="-509.952" x2="368.932" y2="-509.952" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#929497"/><stop offset=".124" stop-color="#757578"/><stop offset=".279" stop-color="#575658"/><stop offset=".44" stop-color="#403E3F"/><stop offset=".609" stop-color="#302D2E"/><stop offset=".788" stop-color="#262223"/><stop offset="1" stop-color="#231F20"/></linearGradient><path fill="url(#moodle-original-b)" d="M28.539 47.08c-.681 3.91-1.192 7.65-1.872 11.563 17.857 6.125 35.375.85 44.73-15.137-11.909-13.776-25.17-2.383-42.858 3.574"/><linearGradient id="moodle-original-c" gradientUnits="userSpaceOnUse" x1="332.834" y1="-495.051" x2="351.377" y2="-521.534" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#231F20"/><stop offset="1" stop-color="#231F20" stop-opacity="0"/></linearGradient><path fill="url(#moodle-original-c)" d="M49.799 51.668c-8.164-1.701-17.009 2.555-23.131 6.975-3.912-28.57 13.777-27.893 36.903-20.75-1.529 6.975-4.083 16.33-8.502 21.941-.169-3.744-1.869-6.293-5.27-8.166"/><linearGradient id="moodle-original-d" gradientUnits="userSpaceOnUse" x1="299.778" y1="-495.802" x2="381.412" y2="-495.802" gradientTransform="matrix(1 0 0 -1 -297.6 -460.9)"><stop offset="0" stop-color="#929497"/><stop offset=".124" stop-color="#757578"/><stop offset=".279" stop-color="#575658"/><stop offset=".44" stop-color="#403E3F"/><stop offset=".609" stop-color="#302D2E"/><stop offset=".788" stop-color="#262223"/><stop offset="1" stop-color="#231F20"/></linearGradient><path fill="url(#moodle-original-d)" d="M2.178 47.08c29.932-18.031 46.77-21.43 81.634-25-40.478 31.969-41.499 25-81.634 25"/><path stroke="#4A4A4C" stroke-width=".5" fill="none" d="M83.812 22.246L51.667 45.545"/><path opacity=".23" fill="#231F20" d="M45.545 34.66c.34 3.744-.511-3.572 0 0"/><path stroke="#A8ABAD" stroke-width=".5" fill="none" d="M2.178 47.08l49.489-1.535"/><path stroke="#F16922" stroke-width=".5" d="M42.484 35.002C33.98 37.383 6.09 43.506 5.747 47.08c-.849 6.631-.167 17.176-.167 17.176" fill="none"/><path fill="#F16922" d="M8.131 89.596c-3.063-7.652-6.804-16.158-2.384-26.703C8.64 72.756 8.131 80.24 8.131 89.596"/><path fill="#6D6E70" d="M41.076 33.844c.708-.25 1.384-.17 1.509.184.126.355-.344.846-1.052 1.096-.709.256-1.384.172-1.51-.184-.127-.352.344-.844 1.053-1.096z"/></svg>
+					</span>
 					<span class="flex-grow-1 text-center">{{event.topic}}</span>
 				</div>
 				<div v-else class="d-flex flex-column flex-grow-1 align-items-center small">
@@ -289,9 +291,6 @@ export const Stundenplan = {
 				<lv-menu :containerStyles="['p-0']" :rowStyles="['m-0']" v-show="lvMenu" :menu="lvMenu" />
 			</template>
 		</template>
-		<template #pageMobilContentEmpty >
-			<h3>Keine Lehrveranstaltungen</h3>
-		</template>
 	</fhc-calendar>
 	`
 }