Add image upload
This commit is contained in:
Lars Westermann
parent
997f374fe4
commit
67f24adfdf
GPG key ID:
9D417FA5BB9D5E1D
24 changed files with 614 additions and 92 deletions
|
|
@ -11,6 +11,7 @@ $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;
|
||||
|
|
@ -18,7 +19,9 @@ $primary-text-color: #fff;
|
|||
$error-color: #D55225;
|
||||
$error-text-color: #fff;
|
||||
|
||||
$border-color: #888;
|
||||
$input-border-color: #888;
|
||||
$table-border-color: rgba($text-primary-color, 0.1);
|
||||
$table-header-color: rgba($text-primary-color, 0.06);
|
||||
|
||||
$transitionTime: 150ms;
|
||||
|
||||
|
|
@ -40,6 +43,10 @@ body, html {
|
|||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-select {
|
||||
|
|
@ -128,7 +135,7 @@ a {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($primary-text-color, 0.1);
|
||||
background-color: $table-border-color;
|
||||
|
||||
&::after {
|
||||
background: $primary-color;
|
||||
|
|
@ -165,8 +172,8 @@ a {
|
|||
position: absolute;
|
||||
background-color: $background-secondary-color;
|
||||
z-index: 5;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
|
@ -183,7 +190,11 @@ a {
|
|||
line-height: 3rem;
|
||||
|
||||
&:after {
|
||||
bottom: 0.2rem;
|
||||
bottom: 0.55rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -220,7 +231,7 @@ a {
|
|||
}
|
||||
|
||||
.main {
|
||||
padding: 0 1rem;
|
||||
//padding: 0 1rem;
|
||||
}
|
||||
|
||||
.table-layout-search {
|
||||
|
|
@ -252,14 +263,14 @@ a {
|
|||
}
|
||||
|
||||
tr {
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-top: solid 1px $table-border-color;
|
||||
|
||||
&:nth-child(odd) {
|
||||
//background-color: rgba($text-primary-color, 0.01);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
|
@ -269,7 +280,7 @@ a {
|
|||
line-height: 2rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -292,20 +303,20 @@ a {
|
|||
z-index: 1;
|
||||
background: $background-primary-color;
|
||||
width: 100%;
|
||||
border: solid 1px rgba($text-primary-color, 0.1);
|
||||
border: solid 1px $table-border-color;
|
||||
|
||||
span {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: solid 1px $border-color;
|
||||
border: solid 1px $input-border-color;
|
||||
outline: none;
|
||||
padding: 0 1rem;
|
||||
line-height: 2.5rem;
|
||||
|
|
@ -412,7 +423,7 @@ select:-moz-focusring {
|
|||
}
|
||||
|
||||
.form-btn {
|
||||
border: solid 1px $border-color;
|
||||
border: solid 1px $input-border-color;
|
||||
outline: none;
|
||||
padding: 0 1rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -588,7 +599,7 @@ form {
|
|||
.calendar[data-editable = "true"].edit {
|
||||
.calendar-table {
|
||||
width: calc(100% - 16rem);
|
||||
border-right: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-right: solid 1px $table-border-color;
|
||||
}
|
||||
|
||||
.calendar-edit-main {
|
||||
|
|
@ -608,8 +619,8 @@ form {
|
|||
display: none;
|
||||
z-index: 10;
|
||||
|
||||
border: solid 1px $border-color;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba($primary-text-color);
|
||||
border: solid 1px $input-border-color;
|
||||
box-shadow: 0 0.1rem 0.2rem $primary-text-color;
|
||||
|
||||
a {
|
||||
padding: 0.2rem;
|
||||
|
|
@ -707,14 +718,14 @@ form {
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-left: solid 1px $table-border-color;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-top: solid 1px $table-border-color;
|
||||
line-height: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
|
|
@ -727,12 +738,12 @@ form {
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-left: solid 1px $table-border-color;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
|
|
@ -749,7 +760,7 @@ form {
|
|||
width: 6rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
border-right: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-right: solid 1px $table-border-color;
|
||||
}
|
||||
|
||||
.calendar-link {
|
||||
|
|
@ -780,7 +791,7 @@ form {
|
|||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-left: solid 1px $table-border-color;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
|
@ -800,12 +811,12 @@ form {
|
|||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-left: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-left: solid 1px $table-border-color;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
|
|
@ -826,7 +837,7 @@ form {
|
|||
}
|
||||
|
||||
&:nth-child(4n + 2) .calendar-cell::before {
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-top: solid 1px $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -939,13 +950,13 @@ form {
|
|||
display: none;
|
||||
|
||||
background: $background-primary-color;
|
||||
border: solid 1px rgba($text-primary-color, 0.1);
|
||||
border: solid 1px $table-border-color;
|
||||
|
||||
span {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -956,11 +967,13 @@ form {
|
|||
|
||||
.overview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.overview-main {
|
||||
flex-grow: 4;
|
||||
margin-right: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overview-side {
|
||||
|
|
@ -985,6 +998,7 @@ form {
|
|||
font-size: 1.2rem;
|
||||
color: $primary-color;
|
||||
line-height: 2rem;
|
||||
padding: 0 1rem;
|
||||
|
||||
&:empty::before {
|
||||
display: block;
|
||||
|
|
@ -999,11 +1013,30 @@ form {
|
|||
.post-edit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
right: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.post-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.post-image {
|
||||
width: 100%;
|
||||
margin: 0.4rem 0 0;
|
||||
padding-top: 75%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.post-no-image .post-column-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
padding: 0 1rem;
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0.7rem 0;
|
||||
padding: 0;
|
||||
|
|
@ -1039,11 +1072,11 @@ form {
|
|||
}
|
||||
|
||||
td {
|
||||
border-top: solid 1px rgba($text-primary-color, 0.1);
|
||||
border-top: solid 1px $table-border-color;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: rgba($text-primary-color, 0.06);
|
||||
background-color: $table-header-color;
|
||||
}
|
||||
|
||||
td, th {
|
||||
|
|
@ -1051,6 +1084,14 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
.post-footer {
|
||||
color: $text-secondary-color;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
margin-top: -0.3rem;
|
||||
}
|
||||
|
||||
.post-edit-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1060,29 +1101,84 @@ form {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post-edit-image-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 0.4rem;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
width: 80%;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-edit-image {
|
||||
width: 100%;
|
||||
padding-top: 75%;
|
||||
border: solid 1px $input-border-color;
|
||||
margin: 0;
|
||||
background-color: $background-primary-color;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.overview-post {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -1rem;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: $table-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.post-column {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.overview-post::after {
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.post-content, .post-footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.overview-post {
|
||||
.post-column {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.post-column-left {
|
||||
width: 30%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.post-column-right {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.post-edit-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
.post-edit-right {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.overview-post {
|
||||
max-height: 20rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 1.5rem;
|
||||
top: 18.5rem;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, $background-primary-color, transparent);
|
||||
.overview {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue