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

StreamsList message container styled

Browse source
This commit is contained in:
svetlagasheva 2020-03-25 18:12:34 +02:00
parent 521146e722
commit 17aca73990
2 changed files with 41 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const { Button, Image } = require('stremio/common');
const Stream = require('./Stream');
const styles = require('./styles');
@ -14,14 +14,21 @@ const StreamsList = ({ className, streamsResources }) => {
.flat(1);
}, [streamsResources]);
return (
<div className={classnames(className, styles['streams-list-container'])}>
<div className={classnames(className, styles['streams-list-container'], { 'streams-list-message': streamsResources.length === 0 || streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') })}>
<div className={styles['streams-scroll-container']}>
{
streamsResources.length === 0 ?
<div className={styles['message-label']}>No addons ware requested for streams</div>
<div className={styles['message-container']}>
<Image className={styles['image']} src={'/images/meta_details_cat.png'} />
<div className={styles['label']}>No addons were requested for streams</div>
</div>
:
streamsResources.every((streamsResource) => streamsResource.content.type === 'Err') ?
<div className={styles['message-label']}>No streams were found</div>
<div className={styles['message-container']}>
<Image className={styles['image']} src={'/images/meta_details_cat.png'} />
<div className={styles['label']}>No streams were found!</div>
<div className={styles['description']}>Please install some addons to find more streams</div>
</div>
:
streams.length > 0 ?
streams.map((stream, index) => (

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

@ -4,6 +4,10 @@
display: flex;
flex-direction: column;
&:global(.streams-list-message) {
background-color: @color-background-dark3-80;
}
.streams-scroll-container {
flex-grow: 0;
flex-shrink: 1;
@ -11,11 +15,32 @@
align-self: stretch;
overflow-y: auto;
.message-label {
padding: 2rem 0;
font-size: 2rem;
text-align: center;
color: @color-surface-light5;
.message-container {
display: flex;
flex-direction: column;
align-items: center;
width: var(--item-size);
height: 100%;
padding: 2rem;
&>:not(:last-child) {
margin-bottom: 1rem;
}
.image, .label, .description {
flex: none;
}
.label {
font-size: 1.4rem;
text-align: center;
color: @color-surface-light5;
}
.description {
text-align: center;
color: @color-surface-dark1;
}
}
.stream {