Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #845 from Stremio/fix/calendar-mobile-placeholder
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
Calendar: Fix placeholder responsiveness
This commit is contained in:
Timothy Z. 2025-02-24 15:26:18 +02:00 committed by GitHub
commit 235d09f960
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 75 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/MainNavBars/MainNavBars.less
View file

@ -29,8 +29,7 @@
.nav-content-container {
position: absolute;
padding-top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
top: 0;
top: calc(var(--horizontal-nav-bar-size) + var(--safe-area-inset-top));
right: 0;
bottom: 0;
left: var(--vertical-nav-bar-size);
@ -43,7 +42,7 @@
.main-nav-bars-container {
.nav-content-container {
left: 0;
padding-bottom: var(--vertical-nav-bar-size);
bottom: var(--vertical-nav-bar-size);
}
.vertical-nav-bar {

89
src/routes/Calendar/Placeholder/Placeholder.less
View file

@ -8,12 +8,11 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 100%;
width: 100%;
overflow-y: auto;
.title {
flex: none;
font-size: 1.75rem;
font-weight: 400;
text-align: center;
@ -22,19 +21,22 @@
opacity: 0.5;
}
.image {
flex: none;
height: 14rem;
margin: 1.5rem 0;
.image-container {
padding: 1.5rem 0;
.image {
height: 100%;
max-height: 14rem;
object-fit: contain;
}
}
.overview {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 4rem;
margin-bottom: 3rem;
margin-bottom: 1rem;
.point {
display: flex;
@ -61,21 +63,47 @@
}
}
.button {
flex: none;
justify-content: center;
height: 4rem;
line-height: 4rem;
padding: 0 5rem;
font-size: 1.1rem;
color: var(--primary-foreground-color);
text-align: center;
border-radius: 3.5rem;
background-color: var(--overlay-color);
.button-container {
margin: 1rem 0;
.button {
display: flex;
justify-content: center;
height: 4rem;
line-height: 4rem;
padding: 0 5rem;
font-size: 1.1rem;
color: var(--primary-foreground-color);
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;
&:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
background-color: transparent;
}
}
}
}
@media only screen and (max-width: @xsmall) {
.placeholder {
padding: 1rem 2rem;
.title {
margin-bottom: 0;
}
.image-container {
padding: 1rem;
.image {
max-height: 10rem;
}
}
.button-container {
margin: 1rem 0 0;
}
}
}
@ -84,16 +112,21 @@
.placeholder {
padding: 1rem 2rem;
.image {
height: 10rem;
}
.overview {
flex-direction: column;
gap: 1rem;
.point {
.text {
font-size: 1rem;
}
}
}
.button {
width: 100%;
.button-container {
.button {
width: 100%;
}
}
}
}

20
src/routes/Calendar/Placeholder/Placeholder.tsx
View file

@ -14,11 +14,13 @@ const 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['image-container']}>
<Image
className={styles['image']}
src={require('/images/calendar_placeholder.png')}
alt={' '}
/>
</div>
<div className={styles['overview']}>
<div className={styles['point']}>
<Icon className={styles['icon']} name={'megaphone'} />
@ -33,9 +35,11 @@ const Placeholder = () => {
</div>
</div>
</div>
<Button className={styles['button']} href={'#/intro?form=login'}>
{t('LOG_IN')}
</Button>
<div className={styles['button-container']}>
<Button className={styles['button']} href={'#/intro?form=login'}>
{t('LOG_IN')}
</Button>
</div>
</div>
);
};