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

refactor(Library): reuse Placeholder component and remove unused styles

Browse source
This commit is contained in:
Botzy 2025-02-20 14:31:20 +02:00
parent 64310c863f
commit 13c9ef986a
2 changed files with 3 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,8 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const NotFound = require('stremio/routes/NotFound');
const { useProfile, useNotifications, routesRegexp, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { Button, DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
const { DelayedRenderer, Chips, Image, MainNavBars, Multiselect, LibItem } = require('stremio/components');
const { default: Placeholder } = require('./Placeholder');
const useLibrary = require('./useLibrary');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -76,17 +77,7 @@ const Library = ({ model, urlParams, queryParams }) => {
}
{
model === 'library' && profile.auth === null ?
<div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
<Image
className={styles['image']}
src={require('/images/anonymous.png')}
alt={' '}
/>
<div className={styles['message-label']}>Library is only available for logged in users!</div>
<Button className={styles['login-button-container']} href={'#/intro'}>
<div className={styles['label']}>LOG IN</div>
</Button>
</div>
<Placeholder />
:
library.selected === null ?
<DelayedRenderer delay={500}>

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

@ -66,38 +66,6 @@
padding: 4rem;
}
&.no-user-message-container {
.login-button-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 20rem;
height: 3.5rem;
border-radius: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
background-color: var(--secondary-accent-color);
&:hover {
outline: var(--focus-outline-size) solid var(--secondary-accent-color);
background-color: transparent;
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 4.8em;
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-foreground-color);
text-align: center;
}
}
}
.image {
flex: none;
width: 12rem;