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

fix(Calendar Header): adds responsiveness to the calendar header and the view button group next to the header

Browse Source
This commit is contained in:
SimonGschnell
2024-11-11 14:11:01 +01:00
parent b7e89ab557
commit bd54399cfd
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/components/calendar.css
+1 -1
View File
@@ -77,7 +77,7 @@
/*width: calc(100% + 1.5em);*/
height: calc(100% + 1.5em);
}
.fhc-calendar-day-page .flex-column > div {
.fhc-calendar-day-page .flex-column > .flex-grow-1 {
padding-left: 3em;
}
.fhc-calendar-day-page .flex-column {
public/js/components/Calendar/Header.js
+29 -26
View File
@@ -7,6 +7,7 @@ export default {
month:"Monat",
day: "Tag",
},
headerPadding:null,
}
},
inject: [
@@ -44,36 +45,38 @@ export default {
return c;
}
},
template: `
template: /*html*/`
<div class="calendar-header card-header w-100" :class="classHeader">
<div v-if="!noWeekView && !noMonthView" class="row justify-content-end" style="position: absolute; width: 98%; pointer-events: none;">
<div class="col-auto" style="pointer-events: all;">
<div role="group" aria-label="Kalender Modus">
<button type="button" :class="{'active':mode_kurzbz == mode}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="(mode_bezeichnung,mode_kurzbz) in modes">
<i v-if="!noWeekView && mode_kurzbz == 'week'" class="fa fa-calendar-week"></i>
<i v-else-if="!noMonthView && mode_kurzbz == 'month'" class="fa fa-calendar-days"></i>
<i v-else-if="mode_kurzbz == 'day'" class="fa-solid fa-sun"></i>
</button>
<div class="row align-items-center ">
<div class="col offset-0 offset-md-3" :style="{'padding-left':headerPadding}">
<div class="row align-items-center justify-content-center">
<div class="col-auto ">
<button class="btn btn-outline-secondary border-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="justify-content-center text-center col-auto">
<div class="d-flex justify-content-center align-items-center">
<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
{{ title }}
<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
</button>
</div>
</div>
<div class="col-auto ">
<button class="btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-5 d-flex justify-content-end">
<button class="btn btn-outline-secondary border-0" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
</div>
<div class="justify-content-center text-center col-2">
<div class="d-flex justify-content-center align-items-center">
<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
{{ title }}
<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
</button>
</div>
<div ref="viewButtons" v-if="!noWeekView && !noMonthView" class=" col-12 col-md-3 d-flex justify-content-center justify-content-md-end align-items-center" style="pointer-events: none;">
<div style="pointer-events: all;">
<div role="group" aria-label="Kalender Modus">
<button type="button" :class="{'active':mode_kurzbz == mode}" style="margin-right: 4px;" @click.prevent="$emit('updateMode',mode_kurzbz)" class="btn btn-outline-secondary" v-for="(mode_bezeichnung,mode_kurzbz) in modes">
<i v-if="!noWeekView && mode_kurzbz == 'week'" class="fa fa-calendar-week"></i>
<i v-else-if="!noMonthView && mode_kurzbz == 'month'" class="fa fa-calendar-days"></i>
<i v-else-if="mode_kurzbz == 'day'" class="fa-solid fa-sun"></i>
</button>
</div>
</div>
</div>
<div class="col-5 d-flex justify-content-start">
<button class="btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
</div>
</div>
</div>`
}