UX: Better login/signup styling for small desktop windows (#14185)

This aims to fix UI issues when authenticating sites on DiscourseHub in
iPadOS, which uses a special dialog-like window that is about 650px wide.
This commit is contained in:
Penar Musaraj 2021-08-30 15:22:05 -04:00 committed by GitHub
parent 70eca1dc4e
commit ba91041b35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 19 deletions

View File

@ -93,9 +93,6 @@
}
}
.modal-footer {
.btn-primary {
margin-right: 1.5em;
}
.inline-spinner {
display: inline-flex;
}
@ -251,7 +248,6 @@
#login-link,
#new-account-link {
cursor: pointer;
padding-left: 0;
text-align: left;
// the second button can wrap in some locales, and this helps alignment
}
@ -262,10 +258,11 @@
margin-top: 0.5em;
}
@media screen and (min-width: 701px) {
.create-account-body {
max-width: 40em;
}
}
.user-field {
input[type="text"] {
margin-bottom: 0;

View File

@ -20,6 +20,7 @@
flex-direction: column;
align-items: stretch;
min-height: 75px;
min-width: 160px;
order: 2;
&:focus-within,
@ -99,13 +100,12 @@
.login-modal:not(.hidden) {
padding: 0 !important;
.login-modal-body.has-alt-auth {
min-width: 700px;
min-width: 100%;
.login-left-side {
align-self: stretch;
width: calc(60% - 4em);
}
.login-right-side {
width: 35%;
padding: 0 3em;
display: flex;
flex-direction: column;
align-items: center;
@ -140,8 +140,8 @@
line-height: $line-height-small;
font-size: $font-up-6;
}
.login-subheader {
font-size: 1.125em !important;
p.login-subheader {
font-size: var(--font-up-1);
}
}
#credentials {
@ -204,10 +204,9 @@
// modal only
.d-modal.create-account {
.create-account-body {
min-width: 700px !important;
min-width: 100%;
}
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
max-height: 70vh !important;
.modal-body {
overflow: hidden;
}
.has-alt-auth .create-account-form {
@ -259,9 +258,9 @@
position: absolute;
width: 100%;
pointer-events: none;
top: calc(-1em - 1px);
top: calc(-2em - 1px);
left: 0;
height: 1em;
height: 2em;
background-image: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
@ -277,8 +276,8 @@
font-size: $font-up-6;
line-height: $line-height-medium;
}
.login-subheader {
font-size: 1.125em !important;
p.login-subheader {
font-size: var(--font-up-1);
align-self: start;
}
}
@ -418,3 +417,51 @@
padding-top: 40px;
}
}
// styling for small-width desktop screens
// when editing, test with DiscourseHub auth window on iPadOS
// it has a window width of ~650px
@media screen and (max-width: 700px) {
.d-modal.create-account,
.d-modal.login-modal {
.modal-inner-container {
width: 100%;
}
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
max-height: 90vh !important; // overrides base/modal.scss
}
.login-welcome-header,
.login-left-side .login-welcome-header {
padding-top: 1em;
.login-title {
font-size: var(--font-up-4);
}
p.login-subheader {
font-size: var(--font-0);
}
}
.modal-footer .btn:last-of-type {
margin-right: 0;
}
}
.d-modal.login-modal .login-modal-body.has-alt-auth {
.login-left-side {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 1em;
.modal-footer {
width: auto;
.btn-large {
padding-left: 12px;
padding-right: 12px;
}
}
}
.login-right-side {
padding: 1em;
}
}
}