Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +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 PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const NotFound = require('stremio/routes/NotFound'); 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 useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs'); const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles'); const styles = require('./styles');
@ -11,11 +11,14 @@ const Library = ({ model, route, urlParams, queryParams }) => {
const profile = useProfile(); const profile = useProfile();
const library = useLibrary(model, urlParams, queryParams); const library = useLibrary(model, urlParams, queryParams);
const [typeSelect, sortSelect] = useSelectableInputs(route, library); const [typeSelect, sortSelect] = useSelectableInputs(route, library);
const available = React.useMemo(() => {
return route === 'continuewatching' || profile.auth !== null;
}, []);
return ( return (
<MainNavBars className={styles['library-container']} route={route}> <MainNavBars className={styles['library-container']} route={route}>
<div className={styles['library-content']}> <div className={styles['library-content']}>
{ {
profile.auth !== null && library.type_names.length > 0 ? available ?
<div className={styles['selectable-inputs-container']}> <div className={styles['selectable-inputs-container']}>
<Multiselect {...typeSelect} className={styles['select-input-container']} /> <Multiselect {...typeSelect} className={styles['select-input-container']} />
<Multiselect {...sortSelect} className={styles['select-input-container']} /> <Multiselect {...sortSelect} className={styles['select-input-container']} />
@ -24,12 +27,17 @@ const Library = ({ model, route, urlParams, queryParams }) => {
null null
} }
{ {
profile.auth === null ? !available ?
<div className={classnames(styles['message-container'], styles['no-user-message-container'])}> <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'}> <Button className={styles['login-button-container']} href={'#/intro'}>
<div className={styles['label']}>LOG IN</div> <div className={styles['label']}>LOG IN</div>
</Button> </Button>
<div className={styles['message-label']}>Library is only available for logged in users!</div>
</div> </div>
: :
library.type_names.length === 0 ? library.type_names.length === 0 ?

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

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