Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Library not available message styled and fixed for CW route

Browse source
This commit is contained in:
nklhrstv 2020-03-28 22:09:31 +02:00
parent 4a703459d5
commit 8af0312f69
2 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/routes/Library/Library.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const NotFound = require('stremio/routes/NotFound');
const { Button, Multiselect, MainNavBars, LibItem, useProfile, routesRegexp } = require('stremio/common');
const { Button, Multiselect, MainNavBars, LibItem, Image, useProfile, routesRegexp } = require('stremio/common');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -11,11 +11,14 @@ const Library = ({ model, route, urlParams, queryParams }) => {
const profile = useProfile();
const library = useLibrary(model, urlParams, queryParams);
const [typeSelect, sortSelect] = useSelectableInputs(route, library);
const available = React.useMemo(() => {
return route === 'continuewatching' || profile.auth !== null;
}, []);
return (
<MainNavBars className={styles['library-container']} route={route}>
<div className={styles['library-content']}>
{
profile.auth !== null && library.type_names.length > 0 ?
available ?
<div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} />
@ -24,12 +27,17 @@ const Library = ({ model, route, urlParams, queryParams }) => {
null
}
{
profile.auth === null ?
!available ?
<div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
<div className={styles['message-label']}>Library is only available for logged in users</div>
<Image
className={styles['image']}
src={'/images/anonymous.png'}
alt={' '}
/>
<Button className={styles['login-button-container']} href={'#/intro'}>
<div className={styles['label']}>LOG IN</div>
</Button>
<div className={styles['message-label']}>Library is only available for logged in users!</div>
</div>
:
library.type_names.length === 0 ?

32
src/routes/Library/styles.less
View file

@ -42,25 +42,19 @@
}
.message-container {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: 0 1 auto;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 0 1.5rem;
overflow-y: auto;
&:first-child {
.message-label {
margin: 1.5rem 0;
}
padding: 4rem;
}
&.no-user-message-container {
flex: 1;
justify-content: center;
.login-button-container {
flex: none;
display: flex;
@ -70,6 +64,7 @@
width: 20rem;
min-height: 4rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
background-color: @color-accent3;
&:hover {
@ -83,18 +78,27 @@
max-height: 4.8em;
font-size: 1.2rem;
font-weight: 700;
color: @color-surface-light5;
color: @color-surface-light5-90;
text-align: center;
}
}
}
.image {
flex: none;
width: 12rem;
height: 12rem;
margin-bottom: 1rem;
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.message-label {
flex: none;
max-height: 4.8em;
font-size: 2rem;
color: @color-surface-light5;
font-size: 2.5rem;
text-align: center;
color: @color-secondaryvariant2-light1-90;
}
}