From cee3597e258eaf221e70d700298cf74d9109b7c1 Mon Sep 17 00:00:00 2001 From: Christian Wolf Date: Sun, 19 Jan 2025 10:33:57 +0100 Subject: [PATCH] WIP create calendar --- content/page/info/raumbelegung/index.md | 2 + themes/tsc_vfl/assets/css/_colors.scss | 9 + themes/tsc_vfl/assets/css/_schedule.scss | 223 ++++++++++++++++++ themes/tsc_vfl/assets/css/main.scss | 170 +++---------- .../layouts/partials/tsc/calendar/list.html | 18 ++ .../shortcodes/tsc/calendar/schedule.html | 118 +++++++++ .../shortcodes/tsc/calendar/table.html | 18 +- 7 files changed, 403 insertions(+), 155 deletions(-) create mode 100644 themes/tsc_vfl/assets/css/_colors.scss create mode 100644 themes/tsc_vfl/assets/css/_schedule.scss create mode 100644 themes/tsc_vfl/layouts/partials/tsc/calendar/list.html create mode 100644 themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html diff --git a/content/page/info/raumbelegung/index.md b/content/page/info/raumbelegung/index.md index 9073d85..6bece4d 100644 --- a/content/page/info/raumbelegung/index.md +++ b/content/page/info/raumbelegung/index.md @@ -26,6 +26,8 @@ Weitere Infos zur Reservierung findest du unterhalb der Kalender. ## Raumbelegung - planmäßig +{{< tsc/calendar/schedule 10 22 "Mon" "Tue" "Wed" >}} + {{< tsc/show-calendar 10 22 "Mo" "Di" "Mi" >}} {{< tsc/show-calendar 10 22 "Do" "Fr" >}} diff --git a/themes/tsc_vfl/assets/css/_colors.scss b/themes/tsc_vfl/assets/css/_colors.scss new file mode 100644 index 0000000..7666b62 --- /dev/null +++ b/themes/tsc_vfl/assets/css/_colors.scss @@ -0,0 +1,9 @@ +$color-red: #cd1013; + +$color-background-mobile-menu: #f5f5f5; +$color-background-mobile-menu-header: #e0e0e0; +$color-hor-line: #a5a5a5; + +$color-vh-vorne: #ddcb55; +$color-vh-mitte: #c98879; +$color-vh-hinten: #0082c9; diff --git a/themes/tsc_vfl/assets/css/_schedule.scss b/themes/tsc_vfl/assets/css/_schedule.scss new file mode 100644 index 0000000..94a34e1 --- /dev/null +++ b/themes/tsc_vfl/assets/css/_schedule.scss @@ -0,0 +1,223 @@ +@use './responsive.scss' as r; +@use './colors.scss' as *; + +.calendar-schedule { + display: grid; + + .header { + display: contents; + font-weight: bold; + div { + justify-self: center; + } + .rooms { + display: flex; + width: 100%; + + div { + flex: 1 0 0; + text-align: center; + } + } + + .first-row { + grid-row: 1; + } + .second-row { + grid-row: 2; + } + } + + .times { + display: contents; + div { + height: 60px; + } + } + + .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; + + &.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); + } + } + } + + .background { + display: contents; + + > * { + grid-column: 1 / -1; + min-height: 10px; + } + } +} + +.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/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss index 3e00473..7240868 100644 --- a/themes/tsc_vfl/assets/css/main.scss +++ b/themes/tsc_vfl/assets/css/main.scss @@ -1,16 +1,11 @@ @use 'responsive.scss' as r; +@use './schedule.scss'; +@use './colors.scss' as *; /* Variables */ $total-width: 95%; -$color-red: #cd1013; -$color-background-mobile-menu: #f5f5f5; -$color-background-mobile-menu-header: #e0e0e0; -$color-hor-line: #a5a5a5; $gap-columns-persons: 25px; $left-menu-width: 180px; -$color-vh-vorne: #ddcb55; -$color-vh-mitte: #c98879; -$color-vh-hinten: #0082c9; /* Mixins */ @@ -129,138 +124,10 @@ h1 { max-width: 100%; hyphens: auto; - table { - width: 100%; - border-collapse: collapse; - - td, th { - padding: 5px; - border: none; - text-align: left; - } - - tr { - background-color: #dedede; - - &:nth-of-type(2n) { - background-color: #f7f7f7; - } - } - - thead > tr { - background-color: $color-red; - color: white; - text-align: left; - } - } - - .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; - } - } - } - } + + // @include schedule.legacy; + .float-right { float: right; margin: 7px 0 7px 15px; @@ -299,6 +166,33 @@ h1 { } +table { + width: 100%; + border-collapse: collapse; + + td, th { + padding: 5px; + border: none; + text-align: left; + } + + tr { + background-color: #dedede; + + &:nth-of-type(2n) { + background-color: #f7f7f7; + } + } + + thead > tr { + background-color: $color-red; + color: white; + text-align: left; + } +} + +// @include schedule.legacy; + #header { border-bottom: 2px solid rgba(173, 173, 173, 50%); margin: 0 auto 30px; diff --git a/themes/tsc_vfl/layouts/partials/tsc/calendar/list.html b/themes/tsc_vfl/layouts/partials/tsc/calendar/list.html new file mode 100644 index 0000000..86cbb9b --- /dev/null +++ b/themes/tsc_vfl/layouts/partials/tsc/calendar/list.html @@ -0,0 +1,18 @@ +{{ $calendars := site.Data.schedule.calendars -}} +{{- $list := slice -}} +{{- range $room, $roomData := $calendars -}} + {{- if ($roomData.ignore | default false) -}}{{ continue }}{{- end -}} + {{- $roomName := $roomData.name | default $room -}} + {{/* warnf "%s " $room */}} + {{- range $roomData.schedule -}} + {{- $addData := dict "room" $roomName "roomId" $room "weight" 0 -}} + {{- $addData = merge $addData . -}} + {{/* warnf "%#v" $addData */}} + {{- $list = $list | append $addData -}} + {{- end -}} +{{- end -}} +{{- $list = sort $list "start" -}} +{{- $list = sort $list "title" -}} +{{- $list = sort $list "weight" -}} +{{/* warnf "%#v" $list */}} +{{- return $list -}} diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html new file mode 100644 index 0000000..d53dc92 --- /dev/null +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/schedule.html @@ -0,0 +1,118 @@ +{{- $start := .Get 0 -}} +{{- $end := .Get 1 -}} +{{- $days := after 2 .Params -}} +{{- $numDays := len $days -}} +{{- $calendar := $.Site.Data.calendar.calendar -}} +{{- $listSchedule := partialCached "tsc/calendar/list" . }} +
+
+
+ {{ range $days }} +
{{ . }}
+ {{ end }} +
+
+ {{ range $days }} +
+
Vorne
+
Mitte
+
Hinten
+
+ {{ end }} +
+
+
+ {{ range (seq $start $end) }} +
{{ printf "%2d:00" . }}
+
{{ printf "%2d:00" . }}
+ {{ end }} +
+ {{ range $id, $day := $days }} +
+ {{ range $listSchedule }} + {{- if ne .day $day }}{{ continue }}{{ end }} + {{- $sTime := time.AsTime (printf "2025-01-02T%s:00" .start) -}} + {{- $hours := int ($sTime.Format "15") -}} + {{- $minutes := int ($sTime.Format "4") -}} + {{/* warnf "%T" $hours */}} + {{ $hours = add $hours (sub 0 $start) (div $minutes 60.0) }} + {{/* print $hours */}} + {{/* $hours = $hours - 0 + ($minutes / 60.0) */}} + {{- $top := mul $hours 60 -}} + {{- $height := mul (div .duration 60.0) 60 -}} + {{- $style := printf "top: %1.0fpx; height: %1.0fpx;" $top $height -}} + {{/* warnf "%s" $style */}} +
+
+ {{ .title }} +
+
+ {{ end }} +
+ {{ end }} +
+ {{ range $idx, $val := (seq $start $end)}} +
+ {{ end }} +
+
+ + + + {{ range $days }} + + {{ end }} + + + + + {{ range $days }} + + + + {{ end }} + + + {{ range seq $start $end }} + {{ $hour := . }} + {{ range seq 0 15 45 }} + {{ $firstMin := "" }} + {{ if eq . 0 }} + {{ $firstMin = "first-min" }} + {{ end }} + + {{ $time := printf "%2d:%02d" $hour . }} + {{ if or (eq . 0) (eq . 30) }} + + {{ 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 }} + + {{ else }} + + {{ end }} + {{ end }} + {{ end }} + {{ if or (eq . 0) (eq . 30) }} + {{ $time := printf "%2d.%02d" $hour . }} + + {{ end }} + + {{ end }} + {{ end }} +
{{ . }}
vornemittehinten
{{ $time }} +
+
+ {{ .title }} +
+
+ 		{{ $time }}
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/table.html b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/table.html index a556df7..ecf0edc 100644 --- a/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/table.html +++ b/themes/tsc_vfl/layouts/shortcodes/tsc/calendar/table.html @@ -1,23 +1,7 @@ -{{ $calendars := .Site.Data.schedule.calendars -}} -{{- $list := slice -}} -{{- range $room, $roomData := $calendars -}} - {{- if ($roomData.ignore | default false) -}}{{ continue }}{{- end -}} - {{- $roomName := $roomData.name | default $room -}} - {{/* warnf "%s " $room */}} - {{- range $roomData.schedule -}} - {{- $addData := dict "room" $roomName "weight" 0 -}} - {{- $addData = merge $addData . -}} - {{/* warnf "%#v" $addData */}} - {{- $list = $list | append $addData -}} - {{- end -}} -{{- end -}} +{{- $list := partialCached "tsc/calendar/list" . -}} {{- $cat := .Get "category" -}} {{/* warnf "%#v" $cat */}} {{- $showAge := .Get "showAge" | default false -}} -{{- $list = sort $list "start" -}} -{{- $list = sort $list "title" -}} -{{- $list = sort $list "weight" -}} -{{/* warnf "%#v" $list */}}