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

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 ( return (
<div className={styles['streams-list-container']}> <div className={styles['streams-list-container']}>
<div className={styles['scroll-container']}> <div className={styles['scroll-container']}>
<div className={styles['streams-list']}> {props.streams
{props.streams .map((stream) =>
.map((stream) => <Stream key={stream.id}
<Stream key={stream.id} className={styles['stream']}
className={styles['stream']} logo={stream.logo}
logo={stream.logo} sourceName={stream.sourceName}
sourceName={stream.sourceName} title={stream.title}
title={stream.title} subtitle={stream.subtitle}
subtitle={stream.subtitle} progress={stream.progress}
progress={stream.progress} />
/> )}
)}
</div>
<div className={styles['button']} onClick={props.onMoreAddonsClicked}> <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> </div>
</div> </div>

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

@ -1,6 +1,8 @@
.streams-list-container { .streams-list-container {
--scroll-container-width: 392px; --scroll-container-width: 392px;
--stream-width: 360px;
--spacing: 8px; --spacing: 8px;
--button-label-font-size: 18px;
} }
.streams-list-container { .streams-list-container {
@ -11,40 +13,35 @@
.scroll-container { .scroll-container {
flex: 1; flex: 1;
position: relative;
width: var(--scroll-container-width); width: var(--scroll-container-width);
padding: 0 calc(2 * var(--spacing));
margin: var(--spacing); margin: var(--spacing);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.streams-list { >:not(:first-child) {
top: 0; margin-top: var(--spacing);
left: 0;
right: 0;
bottom: 0;
padding: 0 calc(2 * var(--spacing));
>:not(:first-child) {
margin-top: var(--spacing);
}
} }
}
.button { .button {
width: calc(0.4 * var(--scroll-container-width)); width: var(--stream-width);
height: calc(0.12 * var(--scroll-container-width)); height: calc(0.2 * var(--stream-width));
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: calc(4 * var(--spacing)) auto; color: var(--color-primary);
color: var(--color-primary); background-color: var(--color-surfacelighter);
background-color: var(--color-surfacelighter);
.button-icon { .button-icon {
width: 12%; height: 44%;
margin-right: var(--spacing); margin-right: var(--spacing);
fill: var(--color-primary); 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 React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames';
import Icon from 'stremio-icons/dom'; import Icon from 'stremio-icons/dom';
import Video from './Video'; import Video from './Video';
import styles from './styles'; import styles from './styles';
@ -54,22 +53,20 @@ class VideosList extends Component {
</div> </div>
</div> </div>
<div className={styles['scroll-container']}> <div className={styles['scroll-container']}>
<div className={classnames(styles['videos-list'])}> {this.props.videos
{this.props.videos .filter((video) => video.season === this.state.selectedSeason)
.filter((video) => video.season === this.state.selectedSeason) .map((video) =>
.map((video) => <Video key={video.id}
<Video key={video.id} className={styles['video']}
className={styles['video']} poster={video.poster}
poster={video.poster} episode={video.episode}
episode={video.episode} title={video.name}
title={video.name} released={video.released}
released={video.released} isWatched={video.isWatched}
isWatched={video.isWatched} isUpcoming={video.isUpcoming}
isUpcoming={video.isUpcoming} progress={video.progress}
progress={video.progress} />
/> )}
)}
</div>
</div> </div>
</div> </div>
); );

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

@ -37,23 +37,14 @@
.scroll-container { .scroll-container {
flex: 1; flex: 1;
position: relative;
width: var(--scroll-container-width); width: var(--scroll-container-width);
padding: 0 calc(2 * var(--spacing));
margin: 0 var(--spacing); margin: 0 var(--spacing);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
.videos-list { >:not(:first-child) {
position: absolute; margin-top: var(--spacing);
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 calc(2 * 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) 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']}> <div style={streamsListStyle} className={appStyles['app']}>
<StreamsList streams={[ <StreamsList streams={[
{ id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 }, { id: '1', logo: 'ic_itunes', sourceName: 'iTunes', title: 'Vikings S01E09 HDTV XviD-AFG[ettv], 👤 1', subtitle: 'HDTV', progress: 50 },