Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 20:02:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

board styles encapsulated

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-20 16:37:42 +03:00
parent 17782b30c0
commit 740223db9d
4 changed files with 96 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Board/Board.js
View file

@ -49,7 +49,7 @@ const Board = () => {
return (
<BoardRowPlaceholder
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
className={'board-row-placeholder'}
/>
);
}

8
src/routes/Board/BoardRow/styles.less
View file

@ -1,10 +1,12 @@
.board-row-container {
.board-container {
.board-row-container {
display: grid;
grid-template-columns: 6fr minmax(12rem, 1fr);
grid-template-areas:
"title-area title-area"
"message-area message-area"
"meta-items-area see-all-area";
padding: 0 1rem;
.title-container {
grid-area: title-area;
@ -12,7 +14,6 @@
padding: 0 1rem;
font-size: 1.5rem;
color: var(--color-surfacelighter);
text-transform: capitalize;
}
.message-container {
@ -71,7 +72,7 @@
.label {
font-size: 1.2rem;
max-height: 3.6em;
max-height: 2.4em;
color: var(--color-surfacelight);
text-align: center;
}
@ -84,4 +85,5 @@
fill: var(--color-surfacelight);
}
}
}
}

6
src/routes/Board/BoardRowPlaceholder/styles.less
View file

@ -1,4 +1,7 @@
.board-row-placeholder-container {
.board-container {
.board-row-placeholder-container {
padding: 0 1rem;
.title-container {
width: 60%;
height: 2.4rem;
@ -20,4 +23,5 @@
}
}
}
}
}

13
src/routes/Board/styles.less
View file

@ -17,9 +17,8 @@
align-self: stretch;
overflow-y: auto;
.board-row {
.board-row, .board-row-placeholder {
margin: 2rem 0;
padding: 0 1rem;
}
}
}
@ -27,7 +26,7 @@
@media only screen and (min-width: @large) {
.board-container {
.board-content {
.board-row {
.board-row, .board-row-placeholder {
.meta-item:nth-child(n+9) {
display: none;
}
@ -39,7 +38,7 @@
@media only screen and (max-width: @large) {
.board-container {
.board-content {
.board-row {
.board-row, .board-row-placeholder {
.meta-item:nth-child(n+8) {
display: none;
}
@ -51,7 +50,7 @@
@media only screen and (max-width: @medium) {
.board-container {
.board-content {
.board-row {
.board-row, .board-row-placeholder {
.meta-item:nth-child(n+7) {
display: none;
}
@ -63,7 +62,7 @@
@media only screen and (max-width: @small) {
.board-container {
.board-content {
.board-row {
.board-row, .board-row-placeholder {
.meta-item:nth-child(n+6) {
display: none;
}
@ -75,7 +74,7 @@
@media only screen and (max-width: @xsmall) {
.board-container {
.board-content {
.board-row {
.board-row, .board-row-placeholder {
.meta-item:nth-child(n+5) {
display: none;
}