meta error messages styled

This commit is contained in:
nklhrstv 2020-03-29 22:09:53 +03:00
parent 93d5439ebe
commit 3f95d0361a
2 changed files with 40 additions and 16 deletions

View file

@ -28,26 +28,22 @@ const MetaDetails = ({ urlParams }) => {
<div className={styles['metadetails-content']}>
{
metaResourceRef === null ?
<MetaPreview
className={styles['meta-preview']}
name={'No meta was selected'}
/>
<div className={styles['meta-message-container']}>
<Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
<div className={styles['message-label']}>No meta was selected!</div>
</div>
:
metaResources.length === 0 ?
<MetaPreview
className={styles['meta-preview']}
name={'No addons ware requested for this meta'}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
<div className={styles['meta-message-container']}>
<Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
<div className={styles['message-label']}>No addons ware requested for this meta!</div>
</div>
:
metaResources.every((metaResource) => metaResource.content.type === 'Err') ?
<MetaPreview
className={styles['meta-preview']}
name={'No metadata was found'}
inLibrary={inLibrary}
toggleInLibrary={toggleInLibrary}
/>
<div className={styles['meta-message-container']}>
<Image className={styles['image']} src={'/images/empty.png'} alt={' '} />
<div className={styles['message-label']}>No metadata was found!</div>
</div>
:
selectedMetaResource !== null ?
<React.Fragment>

View file

@ -55,6 +55,34 @@
}
}
.meta-message-container {
flex: 0 1 30rem;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
.image {
flex: none;
width: 12rem;
height: 12rem;
max-width: 100%;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.message-label {
flex: none;
align-self: stretch;
font-size: 2rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
}
}
.meta-preview {
flex: 0 1 40rem;
align-self: stretch;