Fix import, add wall
This commit is contained in:
Lars Westermann
parent
8a926aeb35
commit
19956ebafb
GPG key ID:
9D417FA5BB9D5E1D
19 changed files with 749 additions and 218 deletions
7
src/jsMain/resources/images/logo.svg
Normal file
7
src/jsMain/resources/images/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -1,90 +1,73 @@
|
|||
@import "../config";
|
||||
|
||||
.board-header {
|
||||
line-height: 3rem;
|
||||
flex-grow: 1;
|
||||
font-family: "Bungee", sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1.1rem;
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
|
||||
.board-card {
|
||||
background-color: var(--background-card-color);
|
||||
box-shadow: 0 0.1rem 0.2rem var(--shadow-color);
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.board {
|
||||
padding: 1rem 0.4rem 2rem;
|
||||
display: flex;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 0.5rem);
|
||||
|
||||
& > div {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
padding: 0 0.4rem;
|
||||
|
||||
&:nth-child(1) {
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex-grow: 4;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex-grow: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.board-twitter {
|
||||
.board-card {
|
||||
height: calc(100% - 1.3rem);
|
||||
|
||||
& > * {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.board-post {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.post-name {
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.board-schedule-box {
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
& > div {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-child {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
width: 30%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.board-card-header {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
.board-header {
|
||||
height: 8rem !important;
|
||||
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.board-content {
|
||||
top: 8rem !important;
|
||||
bottom: 0;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.board-logo {
|
||||
img {
|
||||
height: 6rem;
|
||||
width: 6rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 4rem;
|
||||
margin-top: -3rem;
|
||||
margin-left: -3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.board-running {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
.board-schedule {
|
||||
line-height: 1.3rem;
|
||||
height: 2rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--table-border-color)
|
||||
}
|
||||
min-width: 10rem;
|
||||
display: flex;
|
||||
border-bottom: solid 1px var(--table-border-color)
|
||||
}
|
||||
|
||||
.board-schedule-color {
|
||||
|
|
@ -112,4 +95,46 @@
|
|||
width: 4rem;
|
||||
text-align: right;
|
||||
color: var(--text-secondary-color)
|
||||
}
|
||||
}
|
||||
|
||||
.board-calendar {
|
||||
height: 100% !important;
|
||||
margin-top: 0 !important;
|
||||
|
||||
.calendar-table {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-table-box {
|
||||
width: 100%;
|
||||
}
|
||||
.calendar-row {
|
||||
width: 100% !important;
|
||||
height: 0.7rem !important;
|
||||
}
|
||||
.calendar-cell {
|
||||
&:not(:first-child) {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0;
|
||||
}
|
||||
}
|
||||
.calendar-entry::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.board-header-date {
|
||||
position: absolute;
|
||||
line-height: 2rem;
|
||||
font-size: 2rem;
|
||||
top: 50%;
|
||||
margin-top: -1rem;
|
||||
left: 8rem;
|
||||
}
|
||||
|
||||
.board-twitter {
|
||||
& > * {
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,15 +50,16 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
overflow: scroll;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
transition: width $transitionTime;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-edit {
|
||||
|
|
@ -301,7 +302,6 @@
|
|||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
|
||||
.calendar-header, .calendar-row {
|
||||
display: flex;
|
||||
|
|
@ -325,10 +325,15 @@
|
|||
line-height: 2rem;
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--background-secondary-color);
|
||||
z-index: 5;
|
||||
border-bottom: solid 1px var(--table-border-color);
|
||||
|
||||
.calendar-cell:first-child {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.calendar-cell:not(:first-child) {
|
||||
|
|
@ -347,6 +352,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
line-height: 2rem;
|
||||
height: 1.3rem;
|
||||
|
|
@ -438,6 +447,7 @@
|
|||
}
|
||||
|
||||
.calendar-header {
|
||||
|
||||
.calendar-cell {
|
||||
position: relative;
|
||||
width: 6rem;
|
||||
|
|
|
|||
78
src/jsMain/resources/style/components/_wall.scss
Normal file
78
src/jsMain/resources/style/components/_wall.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
@import "../config";
|
||||
|
||||
.wall {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wall-box {
|
||||
width: 100%;
|
||||
height: calc(33.3333% - 1rem);
|
||||
overflow: hidden;
|
||||
border-bottom: solid 2px var(--input-border-color);
|
||||
|
||||
&:first-child {
|
||||
height: calc(33.3333% + 2rem);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
.calendar-row, .calendar-header {
|
||||
.calendar-cell:first-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.calendar-row, .calendar-header {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.calendar-entry {
|
||||
top: 0 !important;
|
||||
margin-top: -0.5rem !important;
|
||||
bottom: 0 !important;
|
||||
}
|
||||
.calendar-entry::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.calendar-table-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.calendar-body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.calendar-row {
|
||||
width: 100%;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.calendar-cell {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
line-height: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.wall-calendar {
|
||||
margin-top: 0 !important;
|
||||
height: 100% !important;
|
||||
|
||||
.calendar-table {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,12 +3,13 @@
|
|||
|
||||
@include color-setting;
|
||||
|
||||
@import "components/board";
|
||||
@import "components/calendar";
|
||||
@import "components/form";
|
||||
@import "components/menu";
|
||||
@import "components/overview";
|
||||
@import "components/table-layout";
|
||||
@import "components/board";
|
||||
@import "components/wall";
|
||||
|
||||
body, html {
|
||||
color: var(--text-primary-color);
|
||||
|
|
@ -143,6 +144,7 @@ a {
|
|||
margin-top: -2rem;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
left: 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue