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', () => (