mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-19 16:02:15 +00:00
fix(Calendar All Day Events): positions the all day Events in its own container above the events
This commit is contained in:
SimonGschnell
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>`
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user