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

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 ( return (
<BoardRowPlaceholder <BoardRowPlaceholder
key={`${index}${request.transport_url}${response.type}`} key={`${index}${request.transport_url}${response.type}`}
className={'board-row'} className={'board-row-placeholder'}
/> />
); );
} }

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

@ -1,87 +1,89 @@
.board-row-container { .board-container {
display: grid; .board-row-container {
grid-template-columns: 6fr minmax(12rem, 1fr); display: grid;
grid-template-areas: grid-template-columns: 6fr minmax(12rem, 1fr);
"title-area title-area" grid-template-areas:
"message-area message-area" "title-area title-area"
"meta-items-area see-all-area"; "message-area message-area"
"meta-items-area see-all-area";
.title-container {
grid-area: title-area;
max-height: 2.4em;
padding: 0 1rem; padding: 0 1rem;
font-size: 1.5rem;
color: var(--color-surfacelighter);
text-transform: capitalize;
}
.message-container { .title-container {
grid-area: message-area; grid-area: title-area;
max-height: 3.6em; max-height: 2.4em;
margin: 1rem 0; padding: 0 1rem;
padding: 0 1rem; font-size: 1.5rem;
font-size: 1.3rem; color: var(--color-surfacelighter);
color: var(--color-surfacelighter); }
}
.meta-items-container { .message-container {
grid-area: meta-items-area; grid-area: message-area;
display: flex; max-height: 3.6em;
flex-direction: row; margin: 1rem 0;
align-items: stretch; padding: 0 1rem;
font-size: 1.3rem;
color: var(--color-surfacelighter);
}
.meta-item { .meta-items-container {
margin: 1rem; grid-area: meta-items-area;
display: flex;
flex-direction: row;
align-items: stretch;
&.poster-shape-square { .meta-item {
flex: 1; margin: 1rem;
}
&.poster-shape-landscape { &.poster-shape-square {
flex: calc(1 / var(--landscape-shape-ratio)); flex: 1;
} }
&.poster-shape-poster { &.poster-shape-landscape {
flex: calc(1 / var(--poster-shape-ratio)); flex: calc(1 / var(--landscape-shape-ratio));
}
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}
} }
} }
}
.see-all-container { .see-all-container {
grid-area: see-all-area; grid-area: see-all-area;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 1rem; margin: 1rem;
padding: 0.5rem; padding: 0.5rem;
background-color: var(--color-backgroundlight); background-color: var(--color-backgroundlight);
&:hover, &:focus { &:hover, &:focus {
background-color: var(--color-backgroundlighter); background-color: var(--color-backgroundlighter);
.label {
color: var(--color-surfacelighter);
}
.icon {
fill: var(--color-surfacelighter);
}
}
.label { .label {
color: var(--color-surfacelighter); font-size: 1.2rem;
max-height: 2.4em;
color: var(--color-surfacelight);
text-align: center;
} }
.icon { .icon {
fill: var(--color-surfacelighter); flex: none;
width: 1.3rem;
height: 1.3rem;
margin-left: 0.3rem;
fill: var(--color-surfacelight);
} }
} }
.label {
font-size: 1.2rem;
max-height: 3.6em;
color: var(--color-surfacelight);
text-align: center;
}
.icon {
flex: none;
width: 1.3rem;
height: 1.3rem;
margin-left: 0.3rem;
fill: var(--color-surfacelight);
}
} }
} }

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

@ -1,22 +1,26 @@
.board-row-placeholder-container { .board-container {
.title-container { .board-row-placeholder-container {
width: 60%; padding: 0 1rem;
height: 2.4rem;
margin: 0 1rem;
background-color: var(--color-backgroundlighter);
}
.meta-items-container { .title-container {
display: flex; width: 60%;
flex-direction: row; height: 2.4rem;
margin: 0 1rem;
.meta-item {
flex: 1;
margin: 1rem;
background-color: var(--color-backgroundlighter); background-color: var(--color-backgroundlighter);
}
.meta-item-poster { .meta-items-container {
padding-top: calc(100% * var(--poster-shape-ratio)); display: flex;
flex-direction: row;
.meta-item {
flex: 1;
margin: 1rem;
background-color: var(--color-backgroundlighter);
.meta-item-poster {
padding-top: calc(100% * var(--poster-shape-ratio));
}
} }
} }
} }

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

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