From 8fa98feab4a6ab4b710d7432ff594d6a4ce5f68b Mon Sep 17 00:00:00 2001 From: NikolaBorislavovHristov Date: Mon, 29 Jul 2019 11:24:03 +0300 Subject: [PATCH] board uses flat files structure --- src/routes/Board/Board.js | 16 +++- src/routes/Board/{BoardRow => }/BoardRow.js | 19 +---- src/routes/Board/BoardRow/index.js | 3 - src/routes/Board/BoardRow/styles.less | 84 -------------------- src/routes/Board/styles.less | 85 ++++++++++++++++++++- 5 files changed, 100 insertions(+), 107 deletions(-) rename src/routes/Board/{BoardRow => }/BoardRow.js (68%) delete mode 100644 src/routes/Board/BoardRow/index.js delete mode 100644 src/routes/Board/BoardRow/styles.less diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index ae0c7d498..f0da1788a 100644 --- a/src/routes/Board/Board.js +++ b/src/routes/Board/Board.js @@ -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) => ( diff --git a/src/routes/Board/BoardRow/BoardRow.js b/src/routes/Board/BoardRow.js similarity index 68% rename from src/routes/Board/BoardRow/BoardRow.js rename to src/routes/Board/BoardRow.js index 60d5f4d0c..0e8dfa244 100644 --- a/src/routes/Board/BoardRow/BoardRow.js +++ b/src/routes/Board/BoardRow.js @@ -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 (
@@ -27,10 +16,10 @@ const BoardRow = ({ className, metaItemClassName, menuClassName, title, items }) ))}
diff --git a/src/routes/Board/BoardRow/index.js b/src/routes/Board/BoardRow/index.js deleted file mode 100644 index 7ce90b72b..000000000 --- a/src/routes/Board/BoardRow/index.js +++ /dev/null @@ -1,3 +0,0 @@ -const BoardRow = require('./BoardRow'); - -module.exports = BoardRow; diff --git a/src/routes/Board/BoardRow/styles.less b/src/routes/Board/BoardRow/styles.less deleted file mode 100644 index 9d467e593..000000000 --- a/src/routes/Board/BoardRow/styles.less +++ /dev/null @@ -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); - } - } -} \ No newline at end of file diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less index fc0c1084c..d3bef91ed 100644 --- a/src/routes/Board/styles.less +++ b/src/routes/Board/styles.less @@ -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); + } + } + } } -} \ No newline at end of file +}