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

streams/videos list style changes

Browse source
This commit is contained in:
svetlagasheva 2018-12-10 17:44:03 +02:00
parent e3f6896e9f
commit 8e0ee080b4
5 changed files with 64 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/routes/Detail/StreamsList/StreamsList.js
View file

@ -8,21 +8,20 @@ const StreamsList = (props) => {
return (
<div className={styles['streams-list-container']}>
<div className={styles['scroll-container']}>
<div className={styles['streams-list']}>
{props.streams
.map((stream) =>
<Stream key={stream.id}
className={styles['stream']}
logo={stream.logo}
sourceName={stream.sourceName}
title={stream.title}
subtitle={stream.subtitle}
progress={stream.progress}
/>
)}
</div>
{props.streams
.map((stream) =>
<Stream key={stream.id}
className={styles['stream']}
logo={stream.logo}
sourceName={stream.sourceName}
title={stream.title}
subtitle={stream.subtitle}
progress={stream.progress}
/>
)}
<div className={styles['button']} onClick={props.onMoreAddonsClicked}>
<Icon className={styles['button-icon']} icon={'ic_addons'} /> More Add-ons
<Icon className={styles['button-icon']} icon={'ic_addons'} />
<div className={styles['button-label']}>More Add-ons</div>
</div>
</div>
</div>

49
src/routes/Detail/StreamsList/styles.less
View file

@ -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);
}
}
}

31
src/routes/Detail/VideosList/VideosList.js
View file

@ -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 {
</div>
</div>
<div className={styles['scroll-container']}>
<div className={classnames(styles['videos-list'])}>
{this.props.videos
.filter((video) => video.season === this.state.selectedSeason)
.map((video) =>
<Video key={video.id}
className={styles['video']}
poster={video.poster}
episode={video.episode}
title={video.name}
released={video.released}
isWatched={video.isWatched}
isUpcoming={video.isUpcoming}
progress={video.progress}
/>
)}
</div>
{this.props.videos
.filter((video) => video.season === this.state.selectedSeason)
.map((video) =>
<Video key={video.id}
className={styles['video']}
poster={video.poster}
episode={video.episode}
title={video.name}
released={video.released}
isWatched={video.isWatched}
isUpcoming={video.isUpcoming}
progress={video.progress}
/>
)}
</div>
</div>
);

15
src/routes/Detail/VideosList/styles.less
View file

@ -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);
}
}

12
stories/index.stories.js
View file

@ -372,7 +372,17 @@ storiesOf('VideosList', module)
));
storiesOf('StreamsList', module)
.add('list of streams', () => (
.add('short list of streams', () => (
<div style={streamsListStyle} className={appStyles['app']}>
<StreamsList streams={[
{ id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
{ id: '2', logo: '', sourceName: 'Amazon', title: '$1.99 purchase SD,$2.99 purchase HD', subtitle: '', progress: 50 },
{ id: '3', logo: '', sourceName: 'Juan Carlos 2', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },
{ id: '4', logo: 'ic_amazon', sourceName: 'Amazon', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: '', progress: 0 }
]}></StreamsList>
</div>
))
.add('long list of streams', () => (
<div style={streamsListStyle} className={appStyles['app']}>
<StreamsList streams={[
{ id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },