Add calendar live editing
This commit is contained in:
Lars Westermann
parent
8063e15421
commit
4e5dc610a3
GPG key ID:
9D417FA5BB9D5E1D
35 changed files with 2239 additions and 111 deletions
|
|
@ -102,6 +102,7 @@ a {
|
|||
position: relative;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
z-index: 6;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
|
|
@ -157,13 +158,24 @@ a {
|
|||
display: none;
|
||||
position: absolute;
|
||||
background-color: $background-secondary-color;
|
||||
z-index: 1;
|
||||
z-index: 5;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
top: -8rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8rem;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
|
||||
&:after {
|
||||
bottom: 0.2rem;
|
||||
}
|
||||
|
|
@ -192,6 +204,7 @@ a {
|
|||
a {
|
||||
display: inline-block;
|
||||
line-height: unset;
|
||||
|
||||
&:after {
|
||||
bottom: 1.8em
|
||||
}
|
||||
|
|
@ -215,7 +228,7 @@ a {
|
|||
.btn-search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: calc(2.5rem + 2px);
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
right: -3px;
|
||||
border-bottom-left-radius: 0;
|
||||
|
|
@ -228,9 +241,6 @@ a {
|
|||
input:focus ~ .btn-search {
|
||||
border-color: $primary-color;
|
||||
border-width: 2px;
|
||||
margin-top: 0;
|
||||
height: calc(2.5rem + 4px);
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -282,6 +292,7 @@ a {
|
|||
outline: none;
|
||||
padding: 0 1rem;
|
||||
line-height: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
background-color: $background-primary-color;
|
||||
border-radius: 0.2rem;
|
||||
|
|
@ -291,10 +302,14 @@ a {
|
|||
&:focus {
|
||||
border-color: $primary-color;
|
||||
border-width: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $text-primary-color;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding-bottom: 1rem;
|
||||
display: block;
|
||||
|
|
@ -411,7 +426,7 @@ a {
|
|||
border-color: $error-color;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner {
|
||||
button::-moz-focus-inner, input::-moz-focus-inner, select::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
|
@ -425,3 +440,358 @@ form {
|
|||
width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
|
||||
.form-btn {
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
margin-right: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
|
||||
& > div {
|
||||
width: calc(100% - 6rem);
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
margin-left: 6rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-tools {
|
||||
position: absolute;
|
||||
top: -3rem;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.2rem;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
|
||||
border: solid 1px $border-color;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba($primary-text-color);
|
||||
|
||||
a {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-radius: 0.2rem;
|
||||
z-index: 1;
|
||||
line-height: 2rem;
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
background-color: $primary-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&::after {
|
||||
content: attr(data-language);
|
||||
bottom: 0;
|
||||
right: 1rem;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&:hover .calendar-tools {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.drag {
|
||||
box-shadow: 0 0.1rem 0.2rem rgba($text-primary-color, 0.8);
|
||||
z-index: 2;
|
||||
|
||||
.calendar-tools {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.pending::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $background-primary-color;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-table-time-to-room {
|
||||
.calendar-header, .calendar-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
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 rgba($text-primary-color, 0.1);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
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 rgba($text-primary-color, 0.1);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
top: 0.5rem !important;
|
||||
bottom: 0.5rem;
|
||||
width: 0;
|
||||
left: 0;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-cell:first-child {
|
||||
position: absolute;
|
||||
width: 6rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px rgba($text-primary-color, 0.1);
|
||||
}
|
||||
|
||||
.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 rgba($text-primary-color, 0.1);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
line-height: 2rem;
|
||||
height: 1.3rem;
|
||||
|
||||
&:nth-child(4n + 2)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% - 6rem);
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
position: relative;
|
||||
width: 12rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: solid 1px rgba($text-primary-color, 0.1);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
top: 0.1rem;
|
||||
bottom: 0;
|
||||
width: auto !important;
|
||||
left: 0.1rem !important;
|
||||
right: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-cell:first-child:not(:empty)::before {
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-left: none;
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-cell:first-child {
|
||||
position: absolute;
|
||||
width: 6rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
.color-picker-entry {
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
float: left;
|
||||
|
||||
input {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
input:checked ~ label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
top: 1rem;
|
||||
left: 0.8rem;
|
||||
width: 1.1rem;
|
||||
height: 0.5rem;
|
||||
transform: rotate(-45deg);
|
||||
border-left: solid 0.3rem $background-primary-color;
|
||||
border-bottom: solid 0.3rem $background-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-custom {
|
||||
position: relative;
|
||||
clear: both;
|
||||
height: 4rem;
|
||||
|
||||
& > input {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
z-index: 1;
|
||||
border: solid 0.1rem $text-primary-color;
|
||||
}
|
||||
|
||||
input:checked ~ label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
top: 1rem;
|
||||
left: 0.8rem;
|
||||
width: 1.1rem;
|
||||
height: 0.5rem;
|
||||
transform: rotate(-45deg);
|
||||
border-left: solid 0.3rem $text-primary-color;
|
||||
border-bottom: solid 0.3rem $text-primary-color;
|
||||
}
|
||||
|
||||
label input {
|
||||
position: absolute;
|
||||
left: 4rem;
|
||||
top: 0.2rem;
|
||||
height: 2rem;
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue