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

fix(Settings): layout issue with user info on mobile

Browse source
This commit is contained in:
Tim 2023-08-24 19:10:57 +02:00
parent 19764bbe85
commit 0cb81572a0
2 changed files with 82 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Settings/Settings.js
View file

@ -202,6 +202,7 @@ const Settings = () => {
<div ref={sectionsContainerRef} className={styles['sections-container']} onScroll={sectionsContainerOnScorll}>
<div ref={generalSectionRef} className={styles['section-container']}>
<div className={classnames(styles['option-container'], styles['user-info-option-container'])}>
<div className={styles['user-info-content']}>
<div
className={styles['avatar-container']}
style={{
@ -229,6 +230,7 @@ const Settings = () => {
null
}
</div>
</div>
<Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
<div className={styles['user-panel-label']}>{ t('USER_PANEL') }</div>
</Button>

30
src/routes/Settings/styles.less
View file

@ -113,11 +113,18 @@
}
&.user-info-option-container {
height: 5rem;
gap: 1rem;
.user-info-content {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
.avatar-container {
flex: none;
align-self: stretch;
height: 5rem;
width: 5rem;
margin-right: 1rem;
border-radius: 50%;
@ -131,11 +138,9 @@
}
.email-logout-container {
flex: 1;
align-self: stretch;
flex: none;
display: flex;
flex-direction: column;
padding: 1rem 0;
.email-label-container, .logout-button-container {
display: flex;
@ -144,8 +149,6 @@
}
.email-label-container {
flex: 1 0 auto;
.email-label {
flex: 1;
font-size: 1.1rem;
@ -155,8 +158,6 @@
}
.logout-button-container {
flex: 0 1 50%;
&:hover, &:focus {
outline: none;
@ -171,6 +172,7 @@
}
}
}
}
.user-panel-container {
flex: none;
@ -180,7 +182,6 @@
width: 10rem;
height: 3.5rem;
border-radius: 3.5rem;
margin-left: 1rem;
background-color: var(--overlay-color);
&:hover {
@ -429,6 +430,17 @@
.sections-container {
padding: 0 1.5rem;
.section-container {
.user-info-option-container {
flex-direction: column;
align-items: flex-start;
.user-panel-container {
width: 100% !important;
}
}
}
}
}
}