Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: changed the postioning of the back to top button & animation added to addons-container

Browse source
This commit is contained in:
kKaskak 2023-11-22 23:45:46 +02:00
parent 05e0159953
commit 48504494f8
2 changed files with 49 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/routes/MetaDetails/StreamsList/StreamsList.js
View file

@ -173,6 +173,10 @@ const StreamsList = ({ className, video, ...props }) => {
isScrollable && countLoadingAddons === 0 ?
<React.Fragment>
<hr className={styles['line']} />
<div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
<Icon className={styles['icon']} name={'chevron-up'} />
<div className={styles['label']}>Back to Top</div>
</div>
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>
<Icon className={styles['icon']} name={'addons'} />
<div className={styles['label']}>{ t('ADDON_CATALOGUE_MORE') }</div>
@ -184,21 +188,12 @@ const StreamsList = ({ className, video, ...props }) => {
</div>
</React.Fragment>
}
<div className={classnames(styles['to-top-wrapper'], showBackToTop ? styles['active'] : null)} onClick={scrollToTop}>
<Icon className={styles['icon']} name={'chevron-up'} />
<div className={styles['label']}>Back to Top</div>
<div className={classnames(styles['addons-loading-container'], countLoadingAddons > 0 ? styles['active'] : null)}>
<div className={styles['addons-loading']}>
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
</div>
<span className={styles['addons-loading-bar']}></span>
</div>
{
countLoadingAddons > 0 ?
<div className={styles['addons-loading-container']}>
<div className={styles['addons-loading']}>
{countLoadingAddons} {t('MOBILE_ADDONS_LOADING')}
</div>
<span className={styles['addons-loading-bar']}></span>
</div>
:
null
}
{
!isScrollable && countLoadingAddons === 0 ?
<Button className={styles['install-button-container']} title={t('ADDON_CATALOGUE_MORE')} href={'#/addons'}>

77
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -45,11 +45,16 @@
display: flex;
z-index: 1;
overflow: visible;
margin: 2em 1em;
margin: 0;
gap: 1em;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 0rem;
min-height: 0rem;
opacity: 0;
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out, margin 0.5s ease-in-out;
overflow: hidden;
.addons-loading {
color: var(--primary-foreground-color);
@ -62,6 +67,13 @@
border-radius: var(--border-radius);
background-color: var(--primary-accent-color);
}
&.active {
min-height: 3rem;
max-height: 3rem;
margin: 2em 1em;
opacity: 1;
}
}
.select-choices-wrapper {
@ -140,48 +152,39 @@
opacity: 0.2;
}
.to-top-wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0 0.5rem;
cursor: pointer;
max-height: 0rem;
min-height: 0rem;
opacity: 0;
transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, min-height 0.5s ease-in-out;
overflow: hidden;
.icon {
color: var(--primary-foreground-color);
width: 2rem;
height: 2rem;
}
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
&.active {
min-height: 3rem;
max-height: 3rem;
opacity: 0.7;
}
&:hover {
opacity: 1;
}
}
.streams-container {
flex: 1 1 auto;
align-self: stretch;
margin-top: 1rem;
padding: 0 1rem;
overflow-y: auto;
.to-top-wrapper {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
gap: 0 0.5rem;
opacity: 0.7;
transition: opacity 0.5s ease-in-out;
cursor: pointer;
overflow: hidden;
.icon {
color: var(--primary-foreground-color);
width: 2rem;
height: 2rem;
}
.label {
font-size: 0.9rem;
color: var(--primary-foreground-color);
}
&:hover {
opacity: 1;
}
}
}
.install-button-container {