kif/portal
10
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Look schedule to room and/or time

Browse source
This commit is contained in:
Lars Westermann 2019-06-02 18:44:01 +02:00
parent 0288150c6e
commit bd8f10f1e7
Signed by: lars.westermann
GPG key ID: 9D417FA5BB9D5E1D
14 changed files with 1418 additions and 521 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/jsMain/resources/style/_color.scss
View file

@ -1,39 +1,59 @@
$background-primary-color: #fff;
$background-secondary-color: #fcfcfc;
$text-primary-color: #333;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #B11D33;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$error-background-color: rgba($error-color, 0.5);
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$icon-color-focused: rgba($text-primary-color, 0.87);
$icon-color: rgba($text-primary-color, 0.54);
$icon-color-inactive: rgba($text-primary-color, 0.38);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@mixin color-setting {
:root {
--background-primary-color: $background-primary-color;
--background-secondary-color: $background-secondary-color;
--text-primary-color: $text-primary-color;
--text-secondary-color: $text-secondary-color;
--primary-color: $primary-color;
--primary-text-color: $primary-text-color;
--error-color: $error-color;
--error-text-color: $error-text-color;
--error-background-color: $error-background-color;
--input-border-color: $input-border-color;
--table-border-color: $table-border-color;
--table-header-color: $table-header-color;
--shadow-color: $shadow-color;
--icon-color-focused: $icon-color-focused;
--icon-color: $icon-color;
--icon-color-inactive: $icon-color-inactive;
--bg-disabled-color: $bg-disabled-color;
--bg-enabled-color: $bg-enabled-color;
--lever-disabled-color: $lever-disabled-color;
--lever-enabled-color: $lever-enabled-color;
--error-background-color: $error-background-color;
}
}

12
src/jsMain/resources/style/dark.scss
View file

@ -2,20 +2,30 @@
$background-primary-color: #2d2d2d;
$background-secondary-color: #373737;
$text-primary-color: #fff;
$text-secondary-color: rgba($text-primary-color, 0.5);
$primary-color: #dd213d;
$primary-text-color: #fff;
$error-color: #F00;
$error-text-color: #fff;
$error-background-color: rgba($error-color, 0.5);
$input-border-color: #888;
$table-border-color: rgba($text-primary-color, 0.1);
$table-header-color: rgba($text-primary-color, 0.06);
$shadow-color: rgba($text-primary-color, 0.8);
$icon-color-focused: rgba($text-primary-color, 1.0);
$icon-color: rgba($text-primary-color, 0.7);
$icon-color-inactive: rgba($text-primary-color, 0.5);
$bg-disabled-color: rgba($text-primary-color, .26);
$bg-enabled-color: rgba($primary-color, .5);
$lever-disabled-color: $background-primary-color;
$lever-enabled-color: $primary-color;
$error-background-color: rgba($error-color, 0.5);
@include color-setting;

336
src/jsMain/resources/style/style.scss
View file

@ -26,6 +26,8 @@ body, html {
margin: 0;
padding: 0;
overflow-x: hidden;
& > *:last-child {
//margin-bottom: 1rem;
}
@ -549,18 +551,18 @@ form {
}
.calendar-edit {
width: 16rem;
width: 0;
height: 100%;
display: block;
position: absolute;
right: 0;
top: 0;
transition: width $transitionTime;
.calendar-edit-main {
position: sticky;
margin-left: 16rem;
opacity: 0;
transition: margin-left $transitionTime, opacity $transitionTime, visibility $transitionTime;
transition: opacity $transitionTime, visibility $transitionTime;
top: 1rem;
visibility: hidden;
height: 100vh;
@ -610,7 +612,7 @@ form {
z-index: 2;
.calendar-tools {
display: none;
display: block;
}
}
@ -635,8 +637,11 @@ form {
border-right: solid 1px var(--table-border-color);
}
.calendar-edit {
width: 16rem;
}
.calendar-edit-main {
margin-left: 0;
opacity: 1;
visibility: visible;
}
@ -644,19 +649,71 @@ form {
.calendar-tools {
position: absolute;
top: -3rem;
top: -5rem;
right: 0;
background-color: #fff;
padding: 0.2rem 0.5rem;
background-color: var(--background-primary-color);
border-radius: $border-radius;
display: none;
z-index: 10;
width: max-content;
border: solid 1px var(--input-border-color);
box-shadow: 0 0.1rem 0.2rem var(--primary-text-color);
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
a {
padding: 0.2rem;
div {
clear: left;
span {
float: left;
display: block;
width: 2rem;
line-height: 2rem;
height: 2rem;
text-align: center;
color: var(--icon-color-focused);
transition: color $transitionTime, background-color $transitionTime;
box-sizing: content-box;
i {
font-size: 1rem;
}
&:hover {
background: var(--table-header-color);
}
&.disabled {
color: var(--icon-color-inactive);
}
&:first-child {
padding-left: 0.5rem;
}
&:last-child {
padding-right: 0.5rem;
}
}
&:first-child {
span:first-child {
color: var(--text-primary-color);
width: 6rem;
&:hover {
background-color: transparent;
}
}
span {
padding-top: 0.2rem;
}
}
&:last-child {
span {
padding-bottom: 0.2rem;
}
}
}
&::after {
@ -669,10 +726,6 @@ form {
}
}
.calendar[data-editable=false] .calendar-tools {
display: none !important;
}
.calendar-entry {
position: absolute;
display: block;
@ -706,7 +759,7 @@ form {
z-index: 2;
.calendar-tools {
display: none;
display: block;
}
}
@ -729,161 +782,154 @@ form {
@include no-select()
}
.calendar-table-time-to-room {
.calendar-table-box {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
width: max-content;
height: max-content;
.calendar-header, .calendar-row {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
width: max-content;
}
.calendar-header {
line-height: 2rem;
height: 2rem;
.calendar-cell:not(:first-child) {
font-size: 0.8rem;
width: 6rem;
position: relative;
padding-left: 0.2rem;
&::before {
content: '';
height: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
height: max-content;
}
.calendar-row {
border-top: solid 1px var(--table-border-color);
line-height: 3rem;
height: 3rem;
.calendar-cell {
position: relative;
width: 1.5rem;
&:nth-child(2n + 2)::before {
content: '';
height: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
&:hover {
background-color: var(--table-header-color);
}
.calendar-entry {
top: 0.5rem !important;
bottom: 0.5rem;
width: 0;
left: 0;
height: auto !important;
}
}
}
.calendar-cell:first-child {
width: 6rem;
left: 0;
text-align: center;
border-right: solid 1px var(--table-border-color);
}
&.room-to-time {
.calendar-header {
line-height: 2rem;
height: 2rem;
width: 100%;
.calendar-link {
display: block;
width: 100%;
height: 100%;
}
}
.calendar-table-room-to-time {
.calendar-header, .calendar-row {
display: flex;
flex-wrap: nowrap;
width: max-content;
}
.calendar-header {
line-height: 2rem;
height: 2rem;
.calendar-cell:not(:first-child) {
width: 12rem;
position: relative;
padding-left: 0.2rem;
&::before {
content: '';
height: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
}
.calendar-row {
line-height: 2rem;
height: 1.3rem;
.calendar-cell {
position: relative;
width: 12rem;
&::before {
content: '';
height: 100%;
width: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
.calendar-cell:first-child {
flex-grow: 1;
text-align: center;
}
&:hover {
background-color: var(--table-header-color);
}
.calendar-entry {
top: 0.1rem;
bottom: 0;
width: auto !important;
left: 0.1rem !important;
right: 0.1rem;
}
a {
.calendar-cell:not(:first-child) {
width: 12rem;
position: relative;
padding-left: 0.2rem;
&::before {
content: '';
height: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
}
.calendar-cell:first-child::before {
border-left: none;
}
.calendar-row {
line-height: 2rem;
height: 1.3rem;
&:nth-child(4n + 2) .calendar-cell::before {
border-top: solid 1px var(--table-border-color);
.calendar-cell {
position: relative;
width: 12rem;
&::before {
content: '';
height: 100%;
width: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
.calendar-entry {
top: 0.1rem;
bottom: 0;
width: auto !important;
left: 0.1rem !important;
right: 0.1rem;
}
}
.calendar-cell:first-child {
width: 6rem;
left: 0;
text-align: center;
}
.calendar-cell:first-child::before {
border-left: none;
}
&:nth-child(4n + 2) .calendar-cell::before {
border-top: solid 1px var(--table-border-color);
}
}
}
.calendar-cell:first-child {
width: 6rem;
left: 0;
text-align: center;
}
&.time-to-room {
flex-direction: row;
.calendar-link {
display: block;
width: 100%;
height: 100%;
.calendar-header, .calendar-row {
flex-direction: column;
line-height: 3rem;
.calendar-cell {
height: 3rem;
}
}
.calendar-header {
.calendar-cell {
position: relative;
width: 6rem;
&:not(:first-child) {
border-top: solid 1px var(--table-border-color);
}
}
}
.calendar-row {
.calendar-cell {
position: relative;
width: 1.5rem;
&:not(:first-child) {
border-top: solid 1px var(--table-border-color);
}
.calendar-entry {
top: 0.5rem !important;
bottom: 0.5rem;
width: 0;
left: 0;
height: auto !important;
}
&:first-child {
font-size: 0.8rem;
position: relative;
padding-left: 0.2rem;
}
}
&:nth-child(2n + 2) .calendar-cell::before {
content: '';
height: 100%;
left: 0;
top: 0;
border-left: solid 1px var(--table-border-color);
position: absolute;
}
}
}
}