mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-01-11 22:40:31 +00:00
feat(Calendar): add auth placeholder
This commit is contained in:
Tim
parent
4250c9bf84
commit
c7b3c31e41
4 changed files with 161 additions and 22 deletions
BIN
images/calendar_placeholder.png
Normal file
BIN
images/calendar_placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 202 KiB |
|
|
@ -6,6 +6,7 @@ import useCalendar from './useCalendar';
|
|||
import useSelectableInputs from './useSelectableInputs';
|
||||
import Table from './Table/Table';
|
||||
import List from './List/List';
|
||||
import Placeholder from './Placeholder/Placeholder';
|
||||
import styles from './Calendar.less';
|
||||
|
||||
type Props = {
|
||||
|
|
@ -22,29 +23,34 @@ const Calendar = ({ urlParams }: Props) => {
|
|||
|
||||
return (
|
||||
<MainNavBars className={styles['calendar']} route={'calendar'}>
|
||||
<div className={styles['content']}>
|
||||
<div className={styles['main']}>
|
||||
<div className={styles['inputs']}>
|
||||
{
|
||||
paginationInput !== null ?
|
||||
<PaginationInput {...paginationInput} className={styles['pagination-input']} />
|
||||
:
|
||||
null
|
||||
}
|
||||
{
|
||||
profile.auth !== null ?
|
||||
<div className={styles['content']}>
|
||||
<div className={styles['main']}>
|
||||
<div className={styles['inputs']}>
|
||||
{
|
||||
paginationInput !== null ?
|
||||
<PaginationInput {...paginationInput} className={styles['pagination-input']} />
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<Table
|
||||
items={calendar.items}
|
||||
monthInfo={calendar.monthInfo}
|
||||
onChange={setSelected}
|
||||
/>
|
||||
</div>
|
||||
<List
|
||||
items={calendar.items}
|
||||
monthInfo={calendar.monthInfo}
|
||||
profile={profile}
|
||||
onChange={setSelected}
|
||||
/>
|
||||
</div>
|
||||
<Table
|
||||
items={calendar.items}
|
||||
monthInfo={calendar.monthInfo}
|
||||
onChange={setSelected}
|
||||
/>
|
||||
</div>
|
||||
<List
|
||||
items={calendar.items}
|
||||
monthInfo={calendar.monthInfo}
|
||||
profile={profile}
|
||||
onChange={setSelected}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<Placeholder />
|
||||
}
|
||||
</MainNavBars>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
90
src/routes/Calendar/Placeholder/Placeholder.less
Normal file
90
src/routes/Calendar/Placeholder/Placeholder.less
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
// Copyright (C) 2017-2024 Smart code 203358507
|
||||
|
||||
@import (reference) '~stremio/common/screen-sizes.less';
|
||||
|
||||
.placeholder {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.title {
|
||||
flex: none;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: var(--primary-foreground-color);
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.image {
|
||||
flex: none;
|
||||
height: 14rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.overview {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.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 {
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
padding: 0 5rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary-foreground-color);
|
||||
border-radius: 3.5rem;
|
||||
background-color: var(--overlay-color);
|
||||
|
||||
&:hover {
|
||||
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @minimum) {
|
||||
.placeholder {
|
||||
padding: 1rem;
|
||||
|
||||
.overview {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
43
src/routes/Calendar/Placeholder/Placeholder.tsx
Normal file
43
src/routes/Calendar/Placeholder/Placeholder.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// Copyright (C) 2017-2024 Smart code 203358507
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Icon from '@stremio/stremio-icons/react';
|
||||
import { Button, Image } from 'stremio/common';
|
||||
import styles from './Placeholder.less';
|
||||
|
||||
const Placeholder = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className={styles['placeholder']}>
|
||||
<div className={styles['title']}>
|
||||
{t('CALENDAR_NOT_LOGGED_IN')}
|
||||
</div>
|
||||
<Image
|
||||
className={styles['image']}
|
||||
src={require('/images/calendar_placeholder.png')}
|
||||
alt={' '}
|
||||
/>
|
||||
<div className={styles['overview']}>
|
||||
<div className={styles['point']}>
|
||||
<Icon className={styles['icon']} name={'megaphone'} />
|
||||
<div className={styles['text']}>
|
||||
{t('NOT_LOGGED_IN_NOTIFICATIONS')}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles['point']}>
|
||||
<Icon className={styles['icon']} name={'calendar-thin'} />
|
||||
<div className={styles['text']}>
|
||||
{t('NOT_LOGGED_IN_CALENDAR')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button className={styles['button']} href={'#/intro'}>
|
||||
{t('LOG_IN')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Placeholder;
|
||||
Loading…
Reference in a new issue