diff --git a/content/page/info/raumbelegung/index.md b/content/page/info/raumbelegung/index.md index cd9baa3..0b35c00 100644 --- a/content/page/info/raumbelegung/index.md +++ b/content/page/info/raumbelegung/index.md @@ -27,11 +27,7 @@ Weitere Infos zur Reservierung findest du unterhalb der Kalender. {{< tsc/calendar/schedule 10 22 "Mon" "Tue" "Wed" >}} -{{< tsc/show-calendar 10 22 "Mo" "Di" "Mi" >}} - -{{< tsc/calendar/schedule 10 22 "Thu" "Fri" >}} - -{{< tsc/show-calendar 10 22 "Do" "Fr" >}} +{{< tsc/calendar/schedule 14 22 "Thu" "Fri" >}} ## Regeln für die Belegung der Tanzsäle diff --git a/themes/tsc_vfl/assets/css/_schedule.scss b/themes/tsc_vfl/assets/css/_schedule.scss index ae22b3c..592b0f7 100644 --- a/themes/tsc_vfl/assets/css/_schedule.scss +++ b/themes/tsc_vfl/assets/css/_schedule.scss @@ -1,16 +1,19 @@ @use './responsive.scss' as r; @use './colors.scss' as *; -$calendar-height-row: 60px; .calendar-schedule { + $calendar-height-row: 60px; + + $border-style: solid lightgray 1px; + display: grid; font-size: xx-small; @include r.media-large { & { - font-size: x-small; + font-size: small; } } @@ -18,7 +21,9 @@ $calendar-height-row: 60px; display: contents; font-weight: bold; div { - justify-self: center; + width: 100%; + text-align: center; + box-sizing: border-box; } .rooms { display: flex; @@ -29,24 +34,31 @@ $calendar-height-row: 60px; text-align: center; } } - } - - .times { - display: contents; - div { - height: 60px; + .main-column { + border-right: $border-style; } } .table-row { height: $calendar-height-row; + box-sizing: border-box; - border-top: solid lightgray 1px; + border-top: $border-style; + } + + .times-left { + border-right: $border-style; + } + .times-left, .times-right{ + width: 100%; + padding: 0 5px; } .main-entry { position: relative; + border-right: $border-style; + .event { position: absolute; z-index: 1; @@ -55,62 +67,8 @@ $calendar-height-row: 60px; height: calc($calendar-height-row * var(--duration) / 60.0); width: 30%; - box-sizing: border-box; padding: 1px 0; - // overflow: hidden; - - --fg-color: black; - - &.room-vorne { - --bg-color: var(--color-vhvorne); - left: 2.5%; - } - &.room-mitte { - --bg-color: var(--color-vhmitte); - left: 35% - } - &.room-hinten { - --bg-color: var(--color-vhhinten); - --fg-color: white; - left: 67.5%; - } - - div { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 3px; - border-radius: 4px; - - color: var(--fg-color); - background-color: var(--bg-color); - } - - } - } - - .cal-main-content { - grid-row: 3 / 100; - position: relative; - - &.day-0 { - grid-column: 2; - } - &.day-1 { - grid-column: 3; - } - &.day-2 { - grid-column: 4; - } - // grid-column: 2; - - .event { - position: absolute; - - width: 30%; - // height: 100%; box-sizing: border-box; - padding: 1px 0; overflow: hidden; --fg-color: black; @@ -139,131 +97,16 @@ $calendar-height-row: 60px; color: var(--fg-color); background-color: var(--bg-color); } + } } - } .calendar-grid-2-days { grid-template-columns: auto repeat(2, 1fr) auto; - - .cal-main-content { - // grid-column-end: span 2; - } } .calendar-grid-3-days { grid-template-columns: auto repeat(3, 1fr) auto; - - .cal-main-content { - // grid-column-end: span 3; - } } -// Legacy styling -.calendar-manual { - font-size: xx-small; - - @include r.media-large { - font-size: small; - } - - tr { - height: 20px; - - &.first-min { - border-top: solid lightgray 1px; - } - - &:nth-of-type(n) { - background-color: unset; - } - - .time { - vertical-align: top; - } - - .time:last-of-type, .first-col-of-room { - border-left: solid lightgray 1px; - } - - .day-title { - text-align: center; - } - } - - .calendar-block { - position: relative; - - .calendar-block-entity { - position: absolute; - top: 0; - left: 0; - width: 100%; - padding: 1.5px; - box-sizing: border-box; - - - &.height-1 { - height: 20px; - } - - &.height-2 { - height: 40px; - } - - &.height-3 { - height: 60px; - } - - &.height-4 { - height: 80px; - } - - &.height-5 { - height: 100px; - } - - &.height-6 { - height: 120px; - } - - &.height-7 { - height: 140px; - } - - &.height-8 { - height: 160px; - } - - &.height-9 { - height: 180px; - } - - &.height-10 { - height: 200px; - } - - .room-block { - width: 100%; - height: 100%; - box-sizing: border-box; - padding: 3px; - overflow: hidden; - } - - .room-vorne { - background-color: var(--color-vhvorne); - } - - .room-mitte { - background-color: var(--color-vhmitte); - } - - .room-hinten { - background-color: var(--color-vhhinten); - color: white; - } - } - } -} diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html index d62bd30..c7e41c6 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html @@ -6,28 +6,27 @@ {{- $listSchedule := partialCached "tsc/calendar/list" . }}
- {{ range $days }} - | {{ . }} | - {{ end }} -- | ||
---|---|---|---|---|
- {{ range $days }} - | vorne | -mitte | -hinten | - {{ end }} -- |
{{ $time }} | - {{ end }} - {{ range $days }} - {{ $day := . }} - {{ $firstRoom := true }} - {{ range slice "vorne" "mitte" "hinten" }} - {{ $room := . }} - {{ $addClass := "" }} - {{ if $firstRoom }} - {{ $addClass = "first-col-of-room" }} - {{ $firstRoom = false }} - {{ end }} - {{ with index (index (index $calendar .) $day) $time }} -
-
-
-
- {{ .title }}
-
- |
- {{ else }}
- - {{ end }} - {{ end }} - {{ end }} - {{ if or (eq . 0) (eq . 30) }} - {{ $time := printf "%2d.%02d" $hour . }} - | {{ $time }} | - {{ end }} -