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

refactor(Calendar Events Layout): changes the layout of the calendar events adjusting to different renderer components

Browse Source
This commit is contained in:
SimonGschnell
2025-06-13 12:04:31 +02:00
parent 3a7e14a95f
commit e4100f5fb0
6 changed files with 112 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/core/Events.php
+2 -1
View File
@@ -8,7 +8,8 @@ Events::on('loadRenderers', function ($renderers) {
$fhc_core_renderers["lehreinheit"] = array(
'calendarEvent' => APP_ROOT.'public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js',
'modalTitle' => APP_ROOT.'public/js/components/Cis/Mylv/modalTitle.js',
'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js'
'modalContent' => APP_ROOT.'public/js/components/Cis/Mylv/modalContent.js',
'calendarEventStyles' => APP_ROOT.'public/css/Cis4/CoreCalendarEvents.css'
);
});
public/css/Cis4/CoreCalendarEvents.css
+75
View File
@@ -0,0 +1,75 @@
/* Moodle Events in Month Page */
.monthPageContainer .lehreinheitEventContent{
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
border-bottom: 1px solid var(--bs-border-color);
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display:grid;
padding: .25rem .5rem .25rem .25rem;
margin-right: .25rem;
align-content: center;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
font-size: .875em;
align-items:center;
justify-content: space-evenly;
}
/* Moodle Events in Week Page */
.weekPageContainer .lehreinheitEventContent {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display: grid;
padding: .25rem .5rem .25rem .25rem;
margin-right: .25rem;
align-content: center;
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-wrap: wrap;
column-gap: 5px;
align-items: center;
justify-content: space-evenly;
}
/* Moodle Events in Day Page */
.dayPageContainer .lehreinheitEventContent {
display: flex;
padding-left:4rem;
justify-content: space-evenly;
align-items: center;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display:grid;
align-content: center;
border-right: 1px solid var(--bs-border-color);
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: contents;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventText *{
font-weight: 500;
}
public/css/components/calendar.css
+2 -72
View File
@@ -413,77 +413,7 @@
opacity: 0.5;
}
.dayPageContainer, .weekPageContainer{
.dayPageContainer,
.weekPageContainer {
container-type: inline-size;
}
.dayPageContainer .lehreinheitEventContent,
.weekPageContainer .lehreinheitEventContent {
display: flex;
flex-direction: column;
}
.dayPageContainer .moodleEventContent,
.weekPageContainer .moodleEventContent{
display: flex;
flex-direction: row;
}
.dayPageContainer .lehreinheitEventContent{
flex-grow:1;
align-items: center;
font-size: 0.875rem;
font-weight: 400;
line-height:1.25;
}
.dayPageContainer .lehreinheitEventHeader {
display: flex;
flex-direction: column;
padding: 1rem;
border-right: 1px solid gray;
}
.dayPageContainer .moodleEventContent {
align-items: center;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25;
width:100%;
}
.weekPageContainer .moodleEventContent {
align-items: center;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25;
width: 100%;
}
.weekPageContainer .lehreinheitEventHeader {
display: flex;
flex-direction: column;
padding: 1rem;
border-right: 1px solid gray;
}
.weekPageContainer .lehreinheitEventContent {
flex-grow: 1;
align-items: center;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25;
}
@container( min-width: 500px){
.dayPageContainer .lehreinheitEventContent,
.weekPageContainer .lehreinheitEventContent {
flex-direction: row;
}
.dayPageContainer .lehreinheitEventContent{
justify-content: space-evenly;
}
}
public/js/apps/Dashboard/Fhc.js
+20 -4
View File
@@ -293,10 +293,26 @@ const app = Vue.createApp({
.then(res => res.data)
.then(data => {
for (let rendertype of Object.keys(data)) {
let modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
let modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
let calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
let modalTitle = null;
let modalContent = null;
let calendarEvent = null;
if (data[rendertype].modalTitle)
modalTitle = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalTitle)));
if (data[rendertype].modalContent)
modalContent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].modalContent)));
if (data[rendertype].calendarEvent)
calendarEvent = Vue.markRaw(Vue.defineAsyncComponent(() => import(data[rendertype].calendarEvent)));
if (data[rendertype].calendarEventStyles){
console.log(data[rendertype].calendarEventStyles)
var head = document.head;
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = data[rendertype].calendarEventStyles;
head.appendChild(link);
}
if(this.renderers === null) {
this.renderers = {};
}
public/js/components/Cis/LvPlan/EventTypes/calendarEvent.js
+10 -9
View File
@@ -16,15 +16,16 @@ export default {
},
},
template: `
<div class="lehreinheitEventHeader" v-if="!event.allDayEvent && event?.beginn && event?.ende" >
<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
<span class="small">{{convertTime(event.ende.split(":"))}}</span>
<div class="lehreinheitEventContent h-100 w-100 p-1" >
<div id="lehreinheitEventHeader" class="h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
<span class="small">{{convertTime(event.ende.split(":"))}}</span>
</div>
<div id="lehreinheitEventText">
<span>{{event.topic}}</span>
<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
<span>{{event.ort_kurzbz}}</span>
</div>
</div>
<div class="lehreinheitEventContent">
<span>{{event.topic}}</span>
<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
<span>{{event.ort_kurzbz}}</span>
</div>
`,
}
public/js/components/Cis/LvPlan/LvPlan.js
+3 -5
View File
@@ -336,13 +336,13 @@ const LvPlan = {
</div>
</template>
<template #monthPage="{event,day}">
<div @click="showModal(event)" class="p-1">
<div @click="showModal(event)" class="monthPageContainer " >
<component :is="calendarEventComponent(event.type)" :event="event" ></component>
</div>
</template>
<template #weekPage="{event,day}">
<div @click="showModal(event)" type = "button"
class="weekPageContainer position-relative border border-secondary border d-flex flex-col align-items-center justify-content-evenly h-100"
class="weekPageContainer position-relative border border-secondary border h-100"
:class="{'p-1':event.allDayEvent}"
style = "overflow: auto;" >
<component :is="calendarEventComponent(event.type)" :event="event" ></component>
@@ -350,9 +350,7 @@ const LvPlan = {
</template>
<template #dayPage="{event,day,mobile}">
<div @click="mobile? showModal(event):null" type="button" class="dayPageContainer fhc-entry border border-secondary border m-0 h-100 text-center">
<div class="h-100 d-flex flex-col justify-content-evenly align-items-center">
<component :is="calendarEventComponent(event.type)" :event="event"></component>
</div>
<component :is="calendarEventComponent(event.type)" :event="event"></component>
</div>
</template>
<template #pageMobilContent="{lvMenu, event}">