mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-01-11 22:40:31 +00:00
fix(Library): align guest Placeholder with Calendar Placeholder layout and styles on mobile
This commit is contained in:
Botzy
parent
1608448b8c
commit
3890001085
3 changed files with 108 additions and 60 deletions
|
|
@ -59,55 +59,58 @@ const Library = ({ model, urlParams, queryParams }) => {
|
|||
}, [hasNextPage, loadNextPage]);
|
||||
const onScroll = useOnScrollToBottom(onScrollToBottom, SCROLL_TO_BOTTOM_TRESHOLD);
|
||||
React.useLayoutEffect(() => {
|
||||
if (profile.auth !== null && library.selected && library.selected.request.page === 1 && library.catalog.length !== 0 ) {
|
||||
if (profile.auth !== null && library.selected && library.selected.request.page === 1 && library.catalog.length !== 0) {
|
||||
scrollContainerRef.current.scrollTop = 0;
|
||||
}
|
||||
}, [profile.auth, library.selected]);
|
||||
return (
|
||||
<MainNavBars className={styles['library-container']} route={model}>
|
||||
<div className={styles['library-content']}>
|
||||
{
|
||||
model === 'continue_watching' || profile.auth !== null ?
|
||||
<div className={styles['selectable-inputs-container']}>
|
||||
<Multiselect {...typeSelect} className={styles['select-input-container']} />
|
||||
<Chips {...sortChips} className={styles['select-input-container']} />
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
model === 'library' && profile.auth === null ?
|
||||
<Placeholder />
|
||||
:
|
||||
library.selected === null ?
|
||||
<DelayedRenderer delay={500}>
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
|
||||
</div>
|
||||
</DelayedRenderer>
|
||||
:
|
||||
library.catalog.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['message-label']}>Empty {model === 'library' ? 'Library' : 'Continue Watching'}</div>
|
||||
{
|
||||
profile.auth === null ?
|
||||
<Placeholder />
|
||||
: <div className={styles['library-content']}>
|
||||
{
|
||||
model === 'continue_watching' ?
|
||||
<div className={styles['selectable-inputs-container']}>
|
||||
<Multiselect {...typeSelect} className={styles['select-input-container']} />
|
||||
<Chips {...sortChips} className={styles['select-input-container']} />
|
||||
</div>
|
||||
:
|
||||
<div ref={scrollContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll}>
|
||||
{library.catalog.map((libItem, index) => (
|
||||
<LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
null
|
||||
}
|
||||
{
|
||||
model === 'library' ?
|
||||
library.selected === null ?
|
||||
<DelayedRenderer delay={500}>
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['message-label']}>{model === 'library' ? 'Library' : 'Continue Watching'} not loaded!</div>
|
||||
</div>
|
||||
</DelayedRenderer>
|
||||
:
|
||||
library.catalog.length === 0 ?
|
||||
<div className={styles['message-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/empty.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['message-label']}>Empty {model === 'library' ? 'Library' : 'Continue Watching'}</div>
|
||||
</div>
|
||||
:
|
||||
<div ref={scrollContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll}>
|
||||
{library.catalog.map((libItem, index) => (
|
||||
<LibItem {...libItem} notifications={notifications} removable={model === 'library'} key={index} />
|
||||
))}
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</MainNavBars>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,14 +8,11 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
|
@ -25,9 +22,6 @@
|
|||
}
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
padding: 1.5rem 0;
|
||||
|
||||
.image {
|
||||
|
|
@ -37,14 +31,43 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
.overview {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
margin: 1rem 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.point {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
width: 18rem;
|
||||
|
||||
.icon {
|
||||
flex: none;
|
||||
height: 3.25rem;
|
||||
width: 3.25rem;
|
||||
color: var(--primary-foreground-color);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: auto;
|
||||
font-size: 1.1rem;
|
||||
font-size: 500;
|
||||
color: var(--primary-foreground-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin: 1rem 0;
|
||||
|
||||
.button {
|
||||
flex: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
|
|
@ -54,7 +77,7 @@
|
|||
text-align: center;
|
||||
border-radius: 3.5rem;
|
||||
background-color: var(--overlay-color);
|
||||
|
||||
|
||||
&:hover {
|
||||
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
|
||||
background-color: transparent;
|
||||
|
|
@ -68,11 +91,10 @@
|
|||
padding: 1rem 2rem;
|
||||
|
||||
.title {
|
||||
flex: 0.5;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 2;
|
||||
padding: 1rem;
|
||||
|
||||
.image {
|
||||
|
|
@ -88,9 +110,17 @@
|
|||
|
||||
@media only screen and (max-width: @minimum) {
|
||||
.placeholder {
|
||||
padding: 1rem 2rem;
|
||||
|
||||
.image-container {
|
||||
flex: 1;
|
||||
.overview {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
.point {
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Icon from '@stremio/stremio-icons/react';
|
||||
import { Button, Image } from 'stremio/components';
|
||||
import styles from './Placeholder.less';
|
||||
|
||||
|
|
@ -16,10 +17,24 @@ const Placeholder = () => {
|
|||
<div className={styles['image-container']}>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/media_carousel.png')}
|
||||
src={require('/images/library_placeholder.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles['overview']}>
|
||||
<div className={styles['point']}>
|
||||
<Icon className={styles['icon']} name={'cloud-library'} />
|
||||
<div className={styles['text']}>
|
||||
{t('NOT_LOGGED_IN_CLOUD')}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['point']}>
|
||||
<Icon className={styles['icon']} name={'actors'} />
|
||||
<div className={styles['text']}>
|
||||
{t('NOT_LOGGED_IN_RECOMMENDATIONS')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['button-container']}>
|
||||
<Button className={styles['button']} href={'#/intro?form=login'}>
|
||||
{t('LOG_IN')}
|
||||
|
|
|
|||
Loading…
Reference in a new issue