blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-06-25 07:59:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(Stundenplan hour lines): fixes the hour lines from disapearing on smaller viewports by using a box-shadow instead

Browse Source
This commit is contained in:
SimonGschnell
2024-11-11 11:27:23 +01:00
parent 0e49dfaba0
commit b7e89ab557
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/calendar.css
+5
View File
@@ -63,6 +63,11 @@
display: grid;
}
/* 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: 0 0 0 1px #dee2e6 !important;
}
.fhc-calendar-day-page {
/*aspect-ratio: 7/6;*/
min-height: 0;
public/js/components/Calendar/Day/Page.js
+3 -3
View File
@@ -140,7 +140,7 @@ export default {
template: /*html*/`
<div class="fhc-calendar-day-page ">
<div class="row">
<div class="col-6">
<div class="col-12 col-xl-6">
<div class="d-flex flex-column">
<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'z-index':4,'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
@@ -149,7 +149,7 @@ export default {
</div>
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
<div v-for="hour in hours" :key="hour" class="position-absolute border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-if="hourPosition" class="position-absolute border-top small" style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
</div>
@@ -169,7 +169,7 @@ export default {
</div>
</div>
</div>
<div class="col-6">
<div class="d-none d-xl-block col-xl-6">
<div class="bg-secondary h-100 d-flex justify-content-center align-items-center">
<p class="text-white fs-1" >other content goes in here</p>
</div>
public/js/components/Calendar/Week/Page.js
+1 -1
View File
@@ -150,7 +150,7 @@ export default {
</div>
</div>
<div ref="eventcontainer" class="position-relative flex-grow-1" @mousemove="calcHourPosition" @mouseleave="" >
<div v-for="hour in hours" :key="hour" class="position-absolute border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border-top" style="pointer-events: none;" :style="{top:getAbsolutePositionForHour(hour),left:0,right:0,'z-index':0}"></div>
<div v-if="hourPosition" class="position-absolute border-top small" style="pointer-events: none; padding-left:3.5rem; margin-top:-1px;z-index:2;border-color:#00649C !important" :style="{top:hourPosition+'px',left:0,right:0}">
<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
</div>