tsc-vfl/hugo-page
3
0
Fork 1
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

WIP create calendar

Browse Source
This commit is contained in:
Christian Wolf
2025-01-19 10:33:57 +01:00
parent 7fd921b66e
commit cee3597e25
7 changed files with 403 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
themes/tsc_vfl/assets/css/_colors.scss Normal file
View File

@@ -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;

223
themes/tsc_vfl/assets/css/_schedule.scss Normal file
View File

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

170
themes/tsc_vfl/assets/css/main.scss
View File

@@ -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;