blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-19 16:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(Calendar indicator):adds Vue transition to the Calendar indicator through Vue's built-in component

Browse Source
This commit is contained in:
SimonGschnell
2024-11-29 11:50:27 +01:00
parent 9cf6036926
commit 857d4d7282
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/Cis4/Cis.css
+11
View File
@@ -544,4 +544,15 @@ html {
padding-left: 2.5rem;
overflow-wrap: anywhere;
}
}
/* classes used for the Vue <Transition> component*/
.v-enter-active,
.v-leave-active {
transition: opacity 0.2s ease-out;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
public/js/components/Calendar/Day/Page.js
+5 -3
View File
@@ -290,9 +290,11 @@ export default {
</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>
<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 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>
<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}">
public/js/components/Calendar/Week/Page.js
+5 -3
View File
@@ -214,9 +214,11 @@ export default {
</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>
<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 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">
<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>