Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Placeholder): improve styles on mobile

Browse source
This commit is contained in:
Botzy 2025-02-21 13:41:59 +02:00
parent dfe509d93f
commit 7b0c013dc0
2 changed files with 93 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,7 +13,9 @@
overflow-y: auto;
.title {
flex: none;
display: flex;
flex: 4;
align-items: flex-end;
font-size: 1.75rem;
font-weight: 400;
text-align: center;
@ -22,19 +24,26 @@
opacity: 0.5;
}
.image {
flex: none;
height: 14rem;
margin: 1.5rem 0;
.image-container {
display: flex;
flex: 4;
align-items: center;
padding: 1.5rem 0;
.image {
height: 100%;
max-height: 14rem;
object-fit: contain;
}
}
.overview {
flex: none;
flex: 2;
display: flex;
flex-direction: row;
align-items: center;
gap: 4rem;
margin-bottom: 3rem;
margin-bottom: 1rem;
.point {
display: flex;
@ -61,21 +70,57 @@
}
}
.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 {
display: flex;
flex: 2;
align-items: flex-start;
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 {
flex: 1;
margin-bottom: 0;
}
.image-container {
flex: 3;
padding: 1rem;
.image {
max-height: 10rem;
}
}
.overview {
flex: 2;
}
.button-container {
flex: 2;
margin: 1rem 0 0;
}
}
}
@ -83,17 +128,27 @@
@media only screen and (max-width: @minimum) {
.placeholder {
padding: 1rem 2rem;
.image {
height: 10rem;
.title {
flex: 2;
}
.overview {
flex-direction: column;
flex: 2;
gap: 1rem;
.point {
.text {
font-size: 1rem;
}
}
}
.button {
width: 100%;
.button-container {
flex: 3;
.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>
);
};