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

StreamsList layout changed

Browse source
This commit is contained in:
nklhrstv 2020-03-30 14:51:18 +03:00
parent 052dd071b4
commit 9ed33c2eb4
2 changed files with 49 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -14,37 +14,32 @@ const StreamsList = ({ className, streamsResources }) => {
.flat(1); .flat(1);
}, [streamsResources]); }, [streamsResources]);
return ( return (
<div className={classnames(className, styles['streams-list-container'], { 'streams-list-message': streamsResources.length === 0 || streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') })}> <div className={classnames(className, styles['streams-list-container'])}>
<div className={styles['streams-scroll-container']}> {
{ streamsResources.length === 0 ?
streamsResources.length === 0 ? <div className={styles['message-container']}>
<Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
<div className={styles['label']}>No addons were requested for streams!</div>
</div>
:
streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
<div className={styles['message-container']}> <div className={styles['message-container']}>
<Image className={styles['image']} src={'/images/empty.png'} /> <Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
<div className={styles['label']}>No addons were requested for streams</div> <div className={styles['label']}>No streams were found!</div>
</div> </div>
: :
streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ? streams.length > 0 ?
<div className={styles['message-container']}> <div className={styles['streams-container']}>
<Image className={styles['image']} src={'/images/empty.png'} /> {streams.map((stream, index) => (
<div className={styles['label']}>No streams were found!</div> <Stream {...stream} key={index} />
<div className={styles['description']}>Please install some addons to find more streams</div> ))}
</div> </div>
: :
streams.length > 0 ? <div className={styles['streams-container']}>
streams.map((stream, index) => ( <Stream.Placeholder />
<Stream <Stream.Placeholder />
{...stream} </div>
key={index} }
className={styles['stream']}
/>
))
:
<React.Fragment>
<Stream.Placeholder className={styles['stream']} />
<Stream.Placeholder className={styles['stream']} />
</React.Fragment>
}
</div>
<Button className={styles['install-button-container']} title={'Install Addons'} href={'#/addons'}> <Button className={styles['install-button-container']} title={'Install Addons'} href={'#/addons'}>
<Icon className={styles['icon']} icon={'ic_addons'} /> <Icon className={styles['icon']} icon={'ic_addons'} />
<div className={styles['label']}>Install Addons</div> <div className={styles['label']}>Install Addons</div>

69
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -4,54 +4,41 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:global(.streams-list-message) { .message-container {
background-color: @color-background-dark3-80; flex: 0 1 auto;
}
.streams-scroll-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: stretch; align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 2rem 0;
overflow-y: auto; overflow-y: auto;
.message-container { .image {
display: flex; flex: none;
flex-direction: column; width: 10rem;
align-items: center; height: 10rem;
width: var(--item-size); max-width: 100%;
height: 100%; margin-bottom: 1rem;
padding: 2rem; object-fit: contain;
object-position: center;
&>:not(:last-child) { opacity: 0.9;
margin-bottom: 1rem;
}
.image {
flex: none;
width: 10rem;
opacity: 0.9;
}
.label {
flex: none;
font-size: 1.4rem;
text-align: center;
color: @color-surface-light5-90;
}
.description {
flex: none;
text-align: center;
color: @color-surface-dark1-90;
}
} }
.stream { .label {
width: var(--item-size); flex: none;
font-size: 1.4rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
} }
} }
.streams-container {
flex: 0 1 auto;
align-self: stretch;
padding-top: 1rem;
overflow-y: auto;
}
.install-button-container { .install-button-container {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
@ -59,7 +46,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 1.5rem; margin: 2rem;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
background-color: @color-accent3; background-color: @color-accent3;