Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-15 10:36:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

board uses flat files structure

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-29 11:24:03 +03:00
parent 4765f1c855
commit 8fa98feab4
5 changed files with 100 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,20 @@
const React = require('react');
const classnames = require('classnames');
const { MainNavBar } = require('stremio/common');
const BoardRow = require('./BoardRow');
const useCatalogs = require('./useCatalogs');
const styles = require('./styles');
const CONTINUE_WATCHING_MENU = [
{
label: 'Play',
type: 'play'
},
{
label: 'Dismiss',
type: 'dismiss'
}
];
const Board = () => {
const catalogs = useCatalogs();
return (
@ -14,9 +24,7 @@ const Board = () => {
{catalogs.map((catalog) => (
<BoardRow
key={catalog.id}
className={classnames(styles['board-row'], styles['addon-catalog-row'])}
metaItemClassName={styles['meta-item']}
menuClassName={styles['menu-container']}
className={styles['addon-catalog-row']}
title={catalog.title}
items={catalog.items}
/>

19
src/routes/Board/BoardRow/BoardRow.js → src/routes/Board/BoardRow.js
View file

@ -5,18 +5,7 @@ const { Input } = require('stremio-navigation');
const { MetaItem } = require('stremio/common');
const styles = require('./styles');
const CONTINUE_WATCHING_MENU = [
{
label: 'Play',
type: 'play'
},
{
label: 'Dismiss',
type: 'dismiss'
}
];
const BoardRow = ({ className, metaItemClassName, menuClassName, title, items }) => {
const BoardRow = ({ className, title, items, itemMenuOptions }) => {
return (
<div className={classnames(className, styles['board-row-container'])}>
<div className={styles['title-container']}>
@ -27,10 +16,10 @@ const BoardRow = ({ className, metaItemClassName, menuClassName, title, items })
<MetaItem
{...item}
key={item.id}
className={classnames(metaItemClassName, styles['meta-item'], styles[`poster-shape-${item.posterShape}`])}
menuClassName={classnames(menuClassName, styles['menu-container'])}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape}`])}
menuClassName={styles['menu-container']}
title={item.name}
menuOptions={CONTINUE_WATCHING_MENU}
menuOptions={itemMenuOptions}
/>
))}
</div>

3
src/routes/Board/BoardRow/index.js
View file

@ -1,3 +0,0 @@
const BoardRow = require('./BoardRow');
module.exports = BoardRow;

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

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

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

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