feature(Calendar Tagesansicht):based on the window with decides wether to display the lvMenu in a Modal or next to the calendar

public/css/components/calendar.css

@@ -1,3 +1,7 @@
+:root{
+	--fhc-calendar-pane-height: calc(100vh - 220px);
+}
+
 .fhc-calendar-week-page-header {
   background-color: #e9ecef;
 }

public/js/apps/Cis/Stundenplan.js

@@ -36,12 +36,20 @@ const app = Vue.createApp({
 		
 	},
 	methods:{
+		setWindowWidth: function () {
+			this.windowWidth = window.innerWidth;
+		},
 		getLvID: function () {
 			this.lv_id = window.location.pathname
 		},
 		selectDay: function(day){
 			this.currentDay = day;
 		},
+		showDayModal: function (event) {
+			// only show the modal if the window width is smaller than 1200px
+			if(this.windowWidth >= 1200) return;
+			this.showModal(event);
+		},
 		showModal: function(event){
 			this.currentlySelectedEvent = event;
 			Vue.nextTick(() => {
@@ -108,6 +116,13 @@ const app = Vue.createApp({
 		this.loadEvents();
 		this.getLvID()
 	},
+	mounted(){
+		this.windowWidth = window.innerWidth;
+		window.addEventListener('resize', this.setWindowWidth);
+	},
+	beforeUnmount(){
+		window.removeEventListener('resize', this.setWindowWidth);
+	},
 	//TODO: Stundenplan phrase
 	template:/*html*/`
 	<h2>Stundenplan</h2>
@@ -122,7 +137,7 @@ const app = Vue.createApp({
 			</div>
 		</template>
 		<template #dayPage="{event,day}">
-			<div type="button" class="row h-100 justify-content-center align-items-center text-center">
+			<div @click="showDayModal(event?.orig)" type="button" class="row h-100 justify-content-center align-items-center text-center">
 				<div class="col ">
 					<p>Lehrveranstaltung:</p>
 					<p class="m-0">{{event?.orig.topic}}</p>

public/js/components/Calendar/Day/Page.js

@@ -227,7 +227,7 @@ export default {
 			</div>
 			<div class="d-none d-xl-block col-xl-6 p-0">
 				<div class="p-5	 sticky-top d-flex justify-content-center align-items-center flex-column">
-					<div style="max-height: calc(-300px + 100vh); overflow-y:auto;">
+					<div style="max-height: calc(var(--fhc-calendar-pane-height) - 100px); overflow-y:auto;">
 						<template v-if="selectedEvent && lvMenu">
 							<h3 >{{$p.t('lvinfo','lehrveranstaltungsinformationen')}}</h3>
 							<div class="w-100">

public/js/components/Calendar/Pane.js

@@ -67,7 +67,7 @@ export default {
 	template: `
 	<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
 		<!--height calc function just for user testing purpose (has to be fixed)-->
-		<div @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:calc(100vh - 220px); overflow:scroll">
+		<div @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height); overflow:scroll">
 			<div v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item">
 				<slot :index="i" :offset="offsets[i]" />
 			</div>