Errors in discover styled

This commit is contained in:
nklhrstv 2020-03-27 10:27:37 +02:00
parent e4f2af69e3
commit 4e34cebc65
2 changed files with 42 additions and 7 deletions

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 { AddonDetailsModal, Button, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
const { useServices } = require('stremio/services');
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
@ -91,17 +91,34 @@ const Discover = ({ urlParams, queryParams }) => {
{
discover.selectable.types.length === 0 && discover.catalog_resource === null ?
<div className={styles['message-container']}>
No catalogs
<Image
className={styles['image']}
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}>No catalogs avaliable.</div>
</div>
:
discover.catalog_resource === null ?
<div className={styles['message-container']}>
No select
<Image
className={styles['image']}
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}>No catalog selected</div>
</div>
:
discover.catalog_resource.content.type === 'Err' ?
<div className={styles['message-container']}>
Catalog Error
<Image
className={styles['image']}
src={'/images/empty.png'}
alt={' '}
/>
<div className={styles['message-label']}>
{`Error(${discover.catalog_resource.content.content.type})${typeof discover.catalog_resource.content.content.content === 'string' ? ` - ${discover.catalog_resource.content.content.content}` : ''}`}
</div>
</div>
:
discover.catalog_resource.content.type === 'Loading' ?

View file

@ -157,9 +157,27 @@
}
.message-container {
padding: 0 1.5rem;
font-size: 2rem;
color: @color-surface-light5;
display: flex;
flex-direction: column;
align-items: center;
padding: 4rem;
.image {
flex: none;
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.message-label {
flex: 0 1 auto;
font-size: 2.5rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
}
}
}