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

feat: improve mobile design

Browse source
This commit is contained in:
IEduStu 2024-04-17 01:13:30 +00:00 committed by Timothy Z
parent 96ceafa458
commit 9ca41aa8c0
4 changed files with 57 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -11,11 +11,13 @@
background-color: transparent;
border-radius: 0.75rem;
&:hover {
background-color: var(--overlay-color);
@media (pointer: fine) {
&:hover {
background-color: var(--overlay-color);
.label {
opacity: 0.6;
.label {
opacity: 0.6;
}
}
}

29
src/routes/MetaDetails/MetaDetails.js
View file

@ -76,8 +76,23 @@ const MetaDetails = ({ urlParams, queryParams }) => {
setSeason(event.value);
}, [setSeason]);
const renderBackgroundImageFallback = React.useCallback(() => null, []);
const canRenderBackground = metaPath !== null && metaDetails.metaItem !== null && metaDetails.metaItem.content.type !== 'Err' && metaDetails.metaItem.content.type !== 'Loading' &&
typeof metaDetails.metaItem.content.content.background === 'string' && metaDetails.metaItem.content.content.background.length > 0;
return (
<div className={styles['metadetails-container']}>
{
canRenderBackground &&
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
}
<HorizontalNavBar
className={styles['nav-bar']}
backButton={true}
@ -120,20 +135,6 @@ const MetaDetails = ({ urlParams, queryParams }) => {
<MetaPreview.Placeholder className={styles['meta-preview']} />
:
<React.Fragment>
{
typeof metaDetails.metaItem.content.content.background === 'string' &&
metaDetails.metaItem.content.content.background.length > 0 ?
<div className={styles['background-image-layer']}>
<Image
className={styles['background-image']}
src={metaDetails.metaItem.content.content.background}
renderFallback={renderBackgroundImageFallback}
alt={' '}
/>
</div>
:
null
}
<MetaPreview
className={classnames(styles['meta-preview'], 'animation-fade-in')}
name={metaDetails.metaItem.content.content.name}

56
src/routes/MetaDetails/styles.less
View file

@ -21,6 +21,31 @@
padding-right: env(safe-area-inset-right, 0rem);
box-sizing: border-box;
--navbar-assumed-height: 84px;
--top-overlay-size: var(--navbar-assumed-height);
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
.background-image-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
opacity: 0.3;
}
}
.nav-bar {
z-index: 1;
flex: none;
@ -35,30 +60,21 @@
display: flex;
flex-direction: row;
margin-top: calc(var(--navbar-assumed-height) * -1);
padding-top: var(--navbar-assumed-height);
padding-bottom: var(--calculated-bottom-safe-inset, 0px);
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100%
);
.vertical-nav-bar {
flex: none;
}
.background-image-layer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top left;
opacity: 0.3;
}
}
.meta-message-container {
align-self: stretch;
display: flex;

1
src/routes/Search/styles.less
View file

@ -18,7 +18,6 @@
.search-content {
width: 100%;
height: 100%;
overflow-y: auto;
.search-row {