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

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
+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;
}
+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;
}
}