From 65d0e89f06a26d882ff8194b84623b762927d7fa Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Fri, 15 Nov 2024 11:48:55 +0100
Subject: [PATCH] refactor(Stundenplan events css): moves the class definitions
 of the events to the slot templates and adds little animations

---
 public/css/Cis4/Cis.css                    | 12 ++++++++++++
 public/js/apps/Cis/Stundenplan.js          |  4 ++--
 public/js/components/Calendar/Day/Page.js  |  2 +-
 public/js/components/Calendar/Week/Page.js |  2 +-
 public/js/components/Cis/Mylv/LvMenu.js    |  2 +-
 5 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index e9343497c..bace22f52 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -462,4 +462,16 @@ html {
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
   font-weight: var(--fa-style, 900);
   margin-inline-start: 0.5rem;
+}
+
+.fhc-entry:hover{
+	background-color:#00649c !important;
+	color:white !important;
+	border: none !important;
+}
+
+.fhc-entry {
+	transition-property: background,color;
+	transition-duration: 0.3s,0.2s;
+	transition-timing-function: ease-out,ease-out;
 }
\ No newline at end of file
diff --git a/public/js/apps/Cis/Stundenplan.js b/public/js/apps/Cis/Stundenplan.js
index ca464a4be..4c575031a 100644
--- a/public/js/apps/Cis/Stundenplan.js
+++ b/public/js/apps/Cis/Stundenplan.js
@@ -130,14 +130,14 @@ const app = Vue.createApp({
 	<lv-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="lvmodal" />
 	<fhc-calendar :initial-date="currentDay" @change:range="updateRange" :events="events" initial-mode="week" show-weeks @select:day="selectDay" v-model:minimized="minimized">
 		<template #weekPage="{event,day}">
-			<div @click="showModal(event?.orig)" type="button" class="d-flex flex-column align-items-center justify-content-evenly h-100">
+			<div @click="showModal(event?.orig)" type="button" class="fhc-entry border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
 				<span>{{event?.orig.topic}}</span>
 				<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
 				<span>{{event?.orig.ort_kurzbz}}</span>
 			</div>
 		</template>
 		<template #dayPage="{event,day}">
-			<div @click="showDayModal(event?.orig)" type="button" class="row h-100 justify-content-center align-items-center text-center">
+			<div @click="showDayModal(event?.orig)" type="button" class="border border-secondary border 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>
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 1374a2bd9..09e201751 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -212,7 +212,7 @@ export default {
 								<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="{'selectedEvent':event.orig == selectedEvent}" class="mx-2 border border-dark border-2 small rounded overflow-hidden "  @click.prevent="eventClick(event)" :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">
+								<div  :style="{'background-color':event.orig.color}" :class="{'selectedEvent':event.orig == selectedEvent}" class="mx-2 small rounded overflow-hidden "  @click.prevent="eventClick(event)" :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>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index c0fc7df61..656cf9341 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -164,7 +164,7 @@ export default {
 						<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">	
+						<div  :style="{'background-color':event.orig.color}" class="mx-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="weekPage" :event="event" :day="day">
 								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 							</slot>
diff --git a/public/js/components/Cis/Mylv/LvMenu.js b/public/js/components/Cis/Mylv/LvMenu.js
index 2315eaf1f..d2a7a8e7c 100644
--- a/public/js/components/Cis/Mylv/LvMenu.js
+++ b/public/js/components/Cis/Mylv/LvMenu.js
@@ -40,7 +40,7 @@ export default {
 		<div class="container" :class="containerStyles">
 			<div class="row g-2 justify-content-center" :class="rowStyles">
 				<div style="min-height:150px; min-width:150px;" class="col-12 col-lg-6 col-xl-4" v-for="(menuItem, index) in menu" :key="index">
-					<a :title="menuItem.name" :target="menuItem.c4_target ?? null" role="button" :href="menuItem.c4_link" class="p-2 w-100 text-wrap border border-1 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
+					<a :title="menuItem.name" :target="menuItem.c4_target ?? null" role="button" :href="menuItem.c4_link" class="fhc-entry p-2 w-100 text-wrap border border-1 rounded-3 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
 						<img :src="menuItem.c4_icon" :alt="menuItem.name" ></img>
 						<p @click="selectMenu(menuItem)" class="w-100 mt-2">{{menuItem.name}}</p>
 						<p v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1 w-100" :index="index">{{text}}</p>