github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 11:44:44 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve login modal on very narrow screens in desktop mode (#27405)

Browse Source
This commit is contained in:
Kris 2024-06-11 09:53:58 -04:00 committed by GitHub
parent 29460e1422
commit e44025b687
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/assets/stylesheets/common/modal/login-modal.scss
View File

@ -42,6 +42,7 @@
} }
.login-left-side { .login-left-side {
box-sizing: border-box;
width: 100%; width: 100%;
padding: 3rem; padding: 3rem;
overflow: auto; overflow: auto;
@ -51,12 +52,12 @@
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
overflow-wrap: anywhere;
} }
.login-title { .login-title {
font-size: var(--font-up-6); font-size: var(--font-up-6);
margin: 0; margin: 0;
line-height: var(--line-height-medium);
} }
.waving-hand { .waving-hand {
@ -122,6 +123,36 @@
display: inline; display: inline;
} }
} }
.desktop-view & {
@media screen and (max-width: 767px) {
// important to maintain narrow desktop widths
// for auth modals in Discourse Hub on iPad
.d-modal__header {
right: 0;
top: 0;
}
.has-alt-auth {
flex-direction: column;
overflow: auto;
gap: 1em;
.login-welcome-header,
.d-modal__footer {
font-size: var(--font-down-1);
}
.login-left-side {
overflow: unset;
padding: 1em 2.75em 1em 1em;
}
.login-right-side {
padding: 1em;
}
#login-form {
margin: 1.5em 0;
}
}
}
}
} }
/* end shared styles */ /* end shared styles */