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

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

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

@ -202,32 +202,34 @@ 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['avatar-container']}
style={{
backgroundImage: profile.auth === null ?
`url('${require('/images/anonymous.png')}')`
:
profile.auth.user.avatar ?
`url('${profile.auth.user.avatar}')`
<div className={styles['user-info-content']}>
<div
className={styles['avatar-container']}
style={{
backgroundImage: profile.auth === null ?
`url('${require('/images/anonymous.png')}')`
:
`url('${require('/images/default_avatar.png')}')`
}}
/>
<div className={styles['email-logout-container']}>
<div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
<div className={styles['email-label']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
profile.auth.user.avatar ?
`url('${profile.auth.user.avatar}')`
:
`url('${require('/images/default_avatar.png')}')`
}}
/>
<div className={styles['email-logout-container']}>
<div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
<div className={styles['email-label']}>
{profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
</div>
</div>
{
profile.auth !== null ?
<Button className={styles['logout-button-container']} title={ t('LOG_OUT') } onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>{ t('LOG_OUT') }</div>
</Button>
:
null
}
</div>
{
profile.auth !== null ?
<Button className={styles['logout-button-container']} title={ t('LOG_OUT') } onClick={logoutButtonOnClick}>
<div className={styles['logout-label']}>{ t('LOG_OUT') }</div>
</Button>
:
null
}
</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>

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

@ -113,61 +113,63 @@
}
&.user-info-option-container {
height: 5rem;
gap: 1rem;
.avatar-container {
flex: none;
align-self: stretch;
width: 5rem;
margin-right: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
opacity: 0.9;
background-color: var(--primary-foreground-color);
}
.email-logout-container {
.user-info-content {
flex: 1;
align-self: stretch;
display: flex;
flex-direction: column;
padding: 1rem 0;
flex-direction: row;
align-items: center;
.email-label-container, .logout-button-container {
.avatar-container {
flex: none;
align-self: stretch;
height: 5rem;
width: 5rem;
margin-right: 1rem;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
background-clip: content-box;
opacity: 0.9;
background-color: var(--primary-foreground-color);
}
.email-logout-container {
flex: none;
display: flex;
flex-direction: row;
align-items: center;
}
flex-direction: column;
.email-label-container {
flex: 1 0 auto;
.email-label {
flex: 1;
font-size: 1.1rem;
color: var(--primary-foreground-color);
opacity: 0.7;
.email-label-container, .logout-button-container {
display: flex;
flex-direction: row;
align-items: center;
}
}
.logout-button-container {
flex: 0 1 50%;
&:hover, &:focus {
outline: none;
.logout-label {
text-decoration: underline;
.email-label-container {
.email-label {
flex: 1;
font-size: 1.1rem;
color: var(--primary-foreground-color);
opacity: 0.7;
}
}
.logout-label {
flex: 1;
color: var(--primary-accent-color);
.logout-button-container {
&:hover, &:focus {
outline: none;
.logout-label {
text-decoration: underline;
}
}
.logout-label {
flex: 1;
color: var(--primary-accent-color);
}
}
}
}
@ -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;
}
}
}
}
}
}