Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-29 05:38:48 +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 (
<BoardRowPlaceholder
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 {
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";
.title-container {
grid-area: title-area;
max-height: 2.4em;
.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;
font-size: 1.5rem;
color: var(--color-surfacelighter);
text-transform: capitalize;
}
.message-container {
grid-area: message-area;
max-height: 3.6em;
margin: 1rem 0;
padding: 0 1rem;
font-size: 1.3rem;
color: var(--color-surfacelighter);
}
.title-container {
grid-area: title-area;
max-height: 2.4em;
padding: 0 1rem;
font-size: 1.5rem;
color: var(--color-surfacelighter);
}
.meta-items-container {
grid-area: meta-items-area;
display: flex;
flex-direction: row;
align-items: stretch;
.message-container {
grid-area: message-area;
max-height: 3.6em;
margin: 1rem 0;
padding: 0 1rem;
font-size: 1.3rem;
color: var(--color-surfacelighter);
}
.meta-item {
margin: 1rem;
.meta-items-container {
grid-area: meta-items-area;
display: flex;
flex-direction: row;
align-items: stretch;
&.poster-shape-square {
flex: 1;
}
.meta-item {
margin: 1rem;
&.poster-shape-landscape {
flex: calc(1 / var(--landscape-shape-ratio));
}
&.poster-shape-square {
flex: 1;
}
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
&.poster-shape-landscape {
flex: calc(1 / var(--landscape-shape-ratio));
}
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}
}
}
}
.see-all-container {
grid-area: see-all-area;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 1rem;
padding: 0.5rem;
background-color: var(--color-backgroundlight);
.see-all-container {
grid-area: see-all-area;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 1rem;
padding: 0.5rem;
background-color: var(--color-backgroundlight);
&:hover, &:focus {
background-color: var(--color-backgroundlighter);
&:hover, &:focus {
background-color: var(--color-backgroundlighter);
.label {
color: var(--color-surfacelighter);
}
.icon {
fill: var(--color-surfacelighter);
}
}
.label {
color: var(--color-surfacelighter);
font-size: 1.2rem;
max-height: 2.4em;
color: var(--color-surfacelight);
text-align: center;
}
.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 {
.title-container {
width: 60%;
height: 2.4rem;
margin: 0 1rem;
background-color: var(--color-backgroundlighter);
}
.board-container {
.board-row-placeholder-container {
padding: 0 1rem;
.meta-items-container {
display: flex;
flex-direction: row;
.meta-item {
flex: 1;
margin: 1rem;
.title-container {
width: 60%;
height: 2.4rem;
margin: 0 1rem;
background-color: var(--color-backgroundlighter);
}
.meta-item-poster {
padding-top: calc(100% * var(--poster-shape-ratio));
.meta-items-container {
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;
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;
}