From d76a5965db16127d98b970734cf9b7079796319f Mon Sep 17 00:00:00 2001 From: chfhtw Date: Tue, 29 Jul 2025 08:54:16 +0200 Subject: [PATCH] CSS improvements Calendar --- public/css/Cis4/Cis.css | 2 + public/css/Cis4/Cis/Calendar.css | 13 ++ public/css/Cis4/CoreCalendarEvents.css | 216 +++++------------- public/css/components/calendar.css | 11 +- public/css/components/calendar/events.css | 17 +- public/css/components/calendar/frame.css | 25 +- public/js/components/Cis/LvPlan/LvPlan.js | 1 + .../js/components/Cis/Mylv/RoomInformation.js | 1 + 8 files changed, 106 insertions(+), 180 deletions(-) create mode 100644 public/css/Cis4/Cis/Calendar.css diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css index 80784fe5d..ff1b181dd 100644 --- a/public/css/Cis4/Cis.css +++ b/public/css/Cis4/Cis.css @@ -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); diff --git a/public/css/Cis4/Cis/Calendar.css b/public/css/Cis4/Cis/Calendar.css new file mode 100644 index 000000000..c8483dd0f --- /dev/null +++ b/public/css/Cis4/Cis/Calendar.css @@ -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; + } +} diff --git a/public/css/Cis4/CoreCalendarEvents.css b/public/css/Cis4/CoreCalendarEvents.css index c990c93d2..7b43603da 100644 --- a/public/css/Cis4/CoreCalendarEvents.css +++ b/public/css/Cis4/CoreCalendarEvents.css @@ -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; } diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css index f46554007..1c78ccc6c 100644 --- a/public/css/components/calendar.css +++ b/public/css/components/calendar.css @@ -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); diff --git a/public/css/components/calendar/events.css b/public/css/components/calendar/events.css index f996b7339..5bdbb1b46 100644 --- a/public/css/components/calendar/events.css +++ b/public/css/components/calendar/events.css @@ -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%); diff --git a/public/css/components/calendar/frame.css b/public/css/components/calendar/frame.css index ab400c95d..843e95cf6 100644 --- a/public/css/components/calendar/frame.css +++ b/public/css/components/calendar/frame.css @@ -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 { diff --git a/public/js/components/Cis/LvPlan/LvPlan.js b/public/js/components/Cis/LvPlan/LvPlan.js index 4555f18aa..5a276b889 100644 --- a/public/js/components/Cis/LvPlan/LvPlan.js +++ b/public/js/components/Cis/LvPlan/LvPlan.js @@ -173,6 +173,7 @@ export default {