diff --git a/src/routes/Detail/StreamsList/StreamsList.js b/src/routes/Detail/StreamsList/StreamsList.js index 4452b3c7e..c590e09c9 100644 --- a/src/routes/Detail/StreamsList/StreamsList.js +++ b/src/routes/Detail/StreamsList/StreamsList.js @@ -8,21 +8,20 @@ const StreamsList = (props) => { return (
-
- {props.streams - .map((stream) => - - )} -
+ {props.streams + .map((stream) => + + )}
- More Add-ons + +
More Add-ons
diff --git a/src/routes/Detail/StreamsList/styles.less b/src/routes/Detail/StreamsList/styles.less index 6042cc533..afc323479 100644 --- a/src/routes/Detail/StreamsList/styles.less +++ b/src/routes/Detail/StreamsList/styles.less @@ -1,6 +1,8 @@ .streams-list-container { --scroll-container-width: 392px; + --stream-width: 360px; --spacing: 8px; + --button-label-font-size: 18px; } .streams-list-container { @@ -11,40 +13,35 @@ .scroll-container { flex: 1; - position: relative; width: var(--scroll-container-width); + padding: 0 calc(2 * var(--spacing)); margin: var(--spacing); overflow-y: auto; overflow-x: hidden; - .streams-list { - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 0 calc(2 * var(--spacing)); - - >:not(:first-child) { - margin-top: var(--spacing); - } + >:not(:first-child) { + margin-top: var(--spacing); } - } - .button { - width: calc(0.4 * var(--scroll-container-width)); - height: calc(0.12 * var(--scroll-container-width)); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - margin: calc(4 * var(--spacing)) auto; - color: var(--color-primary); - background-color: var(--color-surfacelighter); + .button { + width: var(--stream-width); + height: calc(0.2 * var(--stream-width)); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + background-color: var(--color-surfacelighter); - .button-icon { - width: 12%; - margin-right: var(--spacing); - fill: var(--color-primary); + .button-icon { + height: 44%; + margin-right: var(--spacing); + fill: var(--color-primary); + } + + .button-label { + font-size: var(--button-label-font-size); + } } } diff --git a/src/routes/Detail/VideosList/VideosList.js b/src/routes/Detail/VideosList/VideosList.js index 8f6499f8b..3cc1be171 100644 --- a/src/routes/Detail/VideosList/VideosList.js +++ b/src/routes/Detail/VideosList/VideosList.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; import Icon from 'stremio-icons/dom'; import Video from './Video'; import styles from './styles'; @@ -54,22 +53,20 @@ class VideosList extends Component {
-
- {this.props.videos - .filter((video) => video.season === this.state.selectedSeason) - .map((video) => -
+ {this.props.videos + .filter((video) => video.season === this.state.selectedSeason) + .map((video) => +
); diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less index ddcceb87f..41f242d3b 100644 --- a/src/routes/Detail/VideosList/styles.less +++ b/src/routes/Detail/VideosList/styles.less @@ -37,23 +37,14 @@ .scroll-container { flex: 1; - position: relative; width: var(--scroll-container-width); + padding: 0 calc(2 * var(--spacing)); margin: 0 var(--spacing); overflow-y: auto; overflow-x: hidden; - .videos-list { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 0 calc(2 * var(--spacing)); - - >:not(:first-child) { - margin-top: var(--spacing); - } + >:not(:first-child) { + margin-top: var(--spacing); } } diff --git a/stories/index.stories.js b/stories/index.stories.js index 1c7c03ab3..996e11312 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.js @@ -372,7 +372,17 @@ storiesOf('VideosList', module) )); storiesOf('StreamsList', module) - .add('list of streams', () => ( + .add('short list of streams', () => ( +
+ +
+ )) + .add('long list of streams', () => (