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

CSS improvements Calendar

Browse Source
This commit is contained in:
chfhtw
2025-07-29 08:54:16 +02:00
parent 5e0ef4ebab
commit d76a5965db
8 changed files with 106 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/Cis4/Cis.css
+2
View File
@@ -1,6 +1,7 @@
/* basic */
@import '../components/searchbar/searchbar.css';
@import '../components/Sprachen.css';
@import './Cis/Calendar.css';
html {
font-size: 0.875em;
@@ -567,6 +568,7 @@ html {
@media (max-width: 991.98px) {
#cis-main{
padding: 0.75rem 0.75rem;
height: calc(100vh - var(--fhc-cis-header-height));
}
#cis-main > :first-child {
margin-top: var(--fhc-cis-header-height);
public/css/Cis4/Cis/Calendar.css
+13
View File
@@ -0,0 +1,13 @@
/* mobile */
@media (max-width: 991.98px) {
.responsive-calendar .fhc-calendar-mode-week .fhc-calendar-base-label-day .short,
.responsive-calendar .fhc-calendar-mode-week .fhc-calendar-base-label-dow .short,
.responsive-calendar .fhc-calendar-mode-month .fhc-calendar-base-label-dow .short {
display: block;
}
.responsive-calendar .fhc-calendar-mode-week .fhc-calendar-base-label-day .long,
.responsive-calendar .fhc-calendar-mode-week .fhc-calendar-base-label-dow .long,
.responsive-calendar .fhc-calendar-mode-month .fhc-calendar-base-label-dow .long {
display: none;
}
}
public/css/Cis4/CoreCalendarEvents.css
+62 -154
View File
@@ -1,185 +1,93 @@
/* Lehreinheits Events in Month Page */
.monthPageContainer .lehreinheitEventContent{
display: flex;
border-bottom: 1px solid var(--bs-border-color);
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display:none;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
width: 100%;
font-size: .875em;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:flex;
justify-content: space-evenly;
align-items:center;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText #lehreinheitLektoren{
display:none;
}
.monthPageContainer .lehreinheitEventContent #lektorEllipsis {
display: none;
}
/* Lehreinheits Events in Week Page */
.weekPageContainer .lehreinheitEventContent {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
}
@media(max-width: 1199px){
.weekPageContainer .lehreinheitEventContent {
grid-template-columns: 1fr;
}
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display: grid;
padding: .25rem .5rem .25rem .25rem;
margin-right: .25rem;
align-content: center;
border-right: 1px solid var(--bs-secondary);
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-direction: column;
column-gap: 5px;
overflow-y: scroll;
/* All */
.weekPageContainer,
.dayPageContainer {
height: 100%;
min-height:auto;
justify-content: space-between;
align-items:center;
}
/* Lehreinheits 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;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: contents;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventText *{
font-weight: 500;
}
/* Ferientage Events in Month Page */
.monthPageContainer .feiertagEventContent {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
align-items:center;
color: var(--fhc-light);
}
.monthPageContainer .feiertagEventContent #ferienEventIcon{
margin: 0.5rem;
}
.monthPageContainer .feiertagEventContent #ferienEventTitle {
}
/* Ferientage Events in Week Page */
.weekPageContainer .feiertagEventContent {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
align-items:center;
color: var(--fhc-light);
}
.weekPageContainer .feiertagEventContent {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
/* Feiertag */
.feiertagEventContent {
align-items: center;
color: var(--fhc-light);
}
.weekPageContainer .feiertagEventContent #ferienEventIcon {
margin: 0.25rem;
}
.weekPageContainer .feiertagEventContent #ferienEventTitle {
}
/* Ferientage Events in Day Page */
.monthPageContainer .feiertagEventContent,
.weekPageContainer .feiertagEventContent,
.dayPageContainer .feiertagEventContent {
display: grid;
grid-template-columns: auto 1fr;
justify-items: center;
align-items: center;
color: var(--fhc-light);
}
.dayPageContainer .feiertagEventContent #ferienEventIcon {
margin: 0.5rem;
}
.dayPageContainer .feiertagEventContent #ferienEventTitle {}
/* List Page Container Styles */
/* Ferientage Events for List Page */
.listPageContainer .feiertagEventContent{
display: flex;
justify-content: center;
align-items: center;
color: var(--fhc-light);
}
.listPageContainer .feiertagEventContent #ferienEventIcon{
margin: 0.5rem;
.monthPageContainer .feiertagEventContent #ferienEventIcon {
margin: 0 .5rem;
}
.weekPageContainer .feiertagEventContent #ferienEventIcon,
.dayPageContainer .feiertagEventContent #ferienEventIcon,
.listPageContainer .feiertagEventContent #ferienEventIcon {
margin: .5rem;
}
.listPageContainer .feiertagEventContent #ferienEventTitle{
.listPageContainer .feiertagEventContent #ferienEventTitle {
flex-grow: 1;
}
/* Lehreinheits Events in List Page */
.listPageContainer .lehreinheitEventContent {
/* Lehreinheit */
.monthPageContainer .lehreinheitEventContent {
padding: 0!important;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
.monthPageContainer .lehreinheitEventContent #lehreinheitLektoren,
.monthPageContainer .lehreinheitEventContent #lektorEllipsis {
display: none!important;
}
.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
padding-left: 4rem;
justify-content: space-evenly;
align-items: center;
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
justify-content: center;
grid-template-columns: repeat(2, auto);
border-bottom: solid 1px;
height: auto!important;
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader :last-child:not(:first-child):before {
content: "-";
margin-inline-start: .15em;
}
.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.dayPageContainer .lehreinheitEventContent,
.listPageContainer .lehreinheitEventContent {
display: flex;
align-items: center;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
.listPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
display: grid;
align-content: center;
padding-inline-end: .5em;
border-inline-end: solid 1px;
margin-inline-end: .5em;
}
.dayPageContainer .lehreinheitEventContent #lehreinheitEventText,
.listPageContainer .lehreinheitEventContent #lehreinheitEventText {
display: contents;
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
gap: .25em;
justify-content: center;
}
.listPageContainer .lehreinheitEventContent #lehreinheitEventText * {
font-weight: 500;
.dayPageContainer .lehreinheitEventContent #lehreinheitTopic,
.dayPageContainer .lehreinheitEventContent #lehreinheitOrt,
.listPageContainer .lehreinheitEventContent #lehreinheitTopic,
.listPageContainer .lehreinheitEventContent #lehreinheitOrt {
flex: 0 0 100%;
text-align: center;
}
public/css/components/calendar.css
+6 -5
View File
@@ -4,26 +4,27 @@
/* Themable Variables */
:root {
--fhc-calendar-gap: var(--fhc-border, #dee2e6);
--fhc-calendar-gap: var(--bs-border-width, 1px);
--fhc-calendar-bg: var(--fhc-background, #fff);
--fhc-calendar-border: var(--fhc-border, #dee2e6);
--fhc-calendar-bg-gap: var(--fhc-border, #dee2e6);
--fhc-calendar-bg-event: var(--fhc-white-80, #ccc);
--fhc-calendar-border-event: var(--bs-secondary, #6c757d);
--fhc-calendar-radius-event: var(--bs-border-radius, .375rem);
--fhc-calendar-fontsize-event: .875em;
--fhc-calendar-bg-markings-past: var(--fhc-beige-10, rgba(245, 233, 215, 0.5));
--fhc-calendar-border-markings-past: var(--fhc-calendar-border);
--fhc-calendar-bg-markings-past-label: var(--fhc-calendar-bg);
--fhc-calendar-border-markings-past-label: var(--fhc-calendar-border);
--fhc-calendar-gap-header: transparent;
--fhc-calendar-gap-allday: transparent;
--fhc-calendar-gap-body: transparent;
--fhc-calendar-bg-header: var(--fhc-calendar-bg);
--fhc-calendar-bg-header-gap: transparent;
--fhc-calendar-bg-allday: var(--fhc-calendar-bg);
--fhc-calendar-bg-allday-gap: transparent;
--fhc-calendar-bg-body: var(--fhc-calendar-bg);
--fhc-calendar-bg-body-gap: transparent;
--fhc-calendar-bg-month-today: var(--fhc-primary);
--fhc-calendar-color-month-today: var(--fhc-white-10);
public/css/components/calendar/events.css
+9 -8
View File
@@ -1,17 +1,17 @@
.event {
cursor: pointer;
}
.fhc-calendar-mode-week .all-day-events .event .weekPageContainer {
padding: .25rem;
}
.fhc-calendar-mode-day .event,
.fhc-calendar-mode-week .event {
margin: 0 .5rem;
font-size: var(--fhc-calendar-fontsize-event, .875rem);
}
.fhc-calendar-mode-day .fhc-calendar-base-grid-line,
.fhc-calendar-mode-week .fhc-calendar-base-grid-line {
padding: 0 var(--fhc-calendar-gap-events, var(--fhc-calendar-gap, 1px));
}
.fhc-calendar-mode-day .all-day-events .event,
.fhc-calendar-mode-week .all-day-events .event {
margin: .25rem;
margin: var(--fhc-calendar-gap-events, var(--fhc-calendar-gap, 1px)) 0;
}
.fhc-calendar-mode-list .event {
margin-bottom: var(--fhc-calendar-gap-events, var(--fhc-calendar-gap, 1px));
}
/* Border */
.fhc-calendar-mode-day .grid-main .event > *,
@@ -64,6 +64,7 @@
}
.fhc-calendar-base .event > * {
background-color: var(--event-bg, var(--event-default-bg));
color: var(--event-color, var(--fhc-calendar-color-event, #000));
}
.fhc-calendar-base .event > *:hover {
filter: brightness(120%);
public/css/components/calendar/frame.css
+12 -13
View File
@@ -56,7 +56,6 @@
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header {
--event-bg: transparent;
font-weight: bold;
text-indent: 0;
font-size: var(--fhc-calendar-fontsize-month-day, 1rem);
}
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event.event-header .disabled {
@@ -69,11 +68,11 @@
/* Grid */
.fhc-calendar-base-grid {
--fhc-calendar-axis-collapsible: .2fr;
background-color: var(--fhc-calendar-gap);
grid-gap: 2px;
background-color: var(--fhc-calendar-bg-gap);
grid-gap: var(--fhc-calendar-gap-header, calc(var(--fhc-calendar-gap, 1px) * 2));
}
.fhc-calendar-base-grid .grid-header {
background-color: var(--fhc-calendar-gap-header);
background-color: var(--fhc-calendar-bg-header-gap, var(--fhc-calendar-bg-gap));
}
.fhc-calendar-base-grid .grid-header:before,
.fhc-calendar-base-grid .grid-allday:before {
@@ -84,22 +83,22 @@
background-color: var(--fhc-calendar-bg-header);
}
.fhc-calendar-base-grid .grid-allday {
background-color: var(--fhc-calendar-gap-allday);
background-color: var(--fhc-calendar-bg-allday-gap, var(--fhc-calendar-bg-gap));
}
.fhc-calendar-base-grid .grid-allday:before,
.fhc-calendar-base-grid .grid-allday .all-day-events {
background-color: var(--fhc-calendar-bg-allday);
}
.fhc-calendar-base-grid .grid-main {
grid-gap: 1px;
background-color: var(--fhc-calendar-gap-body);
grid-gap: var(--fhc-calendar-gap, 1px);
background-color: var(--fhc-calendar-bg-body-gap, var(--fhc-calendar-bg-gap));
}
.fhc-calendar-base-grid .grid-main .part-header,
.fhc-calendar-base-grid .grid-main .part-body {
background-color: var(--fhc-calendar-bg-body);
}
.fhc-calendar-base-grid-line {
grid-gap: 1px;
grid-gap: var(--fhc-calendar-gap-events, var(--fhc-calendar-gap, 1px));
}
.fhc-calendar-base-label-time {
display: flex;
@@ -118,7 +117,7 @@
.fhc-calendar-mode-day .event-details {
padding: 1.5rem;
width: 100%;
border-left: solid 1px var(--fhc-calendar-gap);
border-left: solid 1px var(--fhc-calendar-bg-gap);
}
.fhc-calendar-mode-day .today {
background-color: var(--fhc-calendar-bg-day-today);
@@ -132,14 +131,14 @@
/* Month */
.fhc-calendar-mode-month .fhc-calendar-base-grid-line {
overflow: hidden;
line-height: 1.5;
line-height: 1.8;
grid-template-rows: 2em;
grid-auto-rows: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
grid-auto-rows: 1.8em;
font-size: var(--fhc-calendar-fontsize-event, .875rem);
}
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event {
text-indent: .5em;
height: calc(var(--fhc-calendar-fontsize-event, .875rem) + 2 * var(--fhc-calendar-margin-event-icon, .5rem));
font-size: 1em;
height: 1.8em;
overflow: hidden;
}
.fhc-calendar-mode-month .fhc-calendar-base-grid-line-event .placeholder-glow {
public/js/components/Cis/LvPlan/LvPlan.js
+1
View File
@@ -173,6 +173,7 @@ export default {
<hr>
<fhc-calendar
ref="calendar"
class="responsive-calendar"
:date="currentDay"
:modes="modes"
:mode-options="modeOptions"
public/js/components/Cis/Mylv/RoomInformation.js
+1
View File
@@ -116,6 +116,7 @@ export default {
<hr>
<fhc-calendar
ref="calendar"
class="responsive-calendar"
:date="currentDay"
:modes="modes"
:mode-options="modeOptions"