Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: login; smaller titles, more consistent spacing, other fixes (#12317) 

* Fixes an issue where long translations cause layout issues

* Fixes an issue where the alignment shifts when switching between signup/login

* Makes some of the margin/padding more consistent

* Removes duplicate .login-modal and .create-account classes and replaces them with .login-modal-body and .create-account-body

* Adds another color transformation so we could remove prefers-color-scheme... the problem with that was that my OS' UI might be set to something different than my Discourse preferences (prefers-color-scheme only responds to OS UI settings)
This commit is contained in:
Kris 2021-03-09 17:00:46 -05:00 committed by GitHub
parent dbf6744177
commit e9a05ce161
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 104 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/create-account.js
View File

@ -2,7 +2,7 @@ import Component from "@ember/component";
import cookie from "discourse/lib/cookie";
export default Component.extend({
classNames: ["create-account"],
classNames: ["create-account-body"],
userInputFocus(event) {
let label = event.target.parentElement.previousElementSibling;

3
app/assets/javascripts/discourse/app/controllers/login.js
View File

@ -87,13 +87,12 @@ export default Controller.extend(ModalFunctionality, {
canLoginLocal,
showSecurityKey
) {
const classes = ["login-modal"];
const classes = ["login-modal-body"];
if (awaitingApproval) {
classes.push("awaiting-approval");
}
if (hasAtLeastOneLoginButton && !showSecondFactor && !showSecurityKey) {
classes.push("has-alt-auth");
document.querySelector("#discourse-modal").classList.add("has-alt-auth");
}
if (!canLoginLocal) {
classes.push("no-local-login");

4
app/assets/javascripts/discourse/tests/acceptance/auth-complete-test.js
View File

@ -29,7 +29,7 @@ acceptance("Auth Complete", function (needs) {
);
assert.ok(
exists("#discourse-modal div.create-account"),
exists("#discourse-modal div.create-account-body"),
"it shows the registration modal"
);
});
@ -41,7 +41,7 @@ acceptance("Auth Complete", function (needs) {
assert.equal(currentRouteName(), "login", "it redirects to the login page");
assert.ok(
exists("#discourse-modal div.create-account"),
exists("#discourse-modal div.create-account-body"),
"it shows the registration modal"
);
});

4
app/assets/javascripts/discourse/tests/acceptance/create-account-external-test.js
View File

@ -24,7 +24,7 @@ acceptance("Create Account - external auth", function (needs) {
await visit("/");
assert.ok(
exists("#discourse-modal div.create-account"),
exists("#discourse-modal div.create-account-body"),
"it shows the registration modal"
);
@ -36,7 +36,7 @@ acceptance("Create Account - external auth", function (needs) {
await visit("/");
assert.ok(
exists("#discourse-modal div.create-account"),
exists("#discourse-modal div.create-account-body"),
"it shows the registration modal"
);

1
app/assets/stylesheets/color_definitions.scss
View File

@ -90,6 +90,7 @@
--primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
--primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
--highlight-low-or-medium: #{$highlight-low-or-medium};
--tertiary-or-tertiary-low: #{$tertiary-or-tertiary-low};
--tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
--tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
--secondary-or-primary: #{$secondary-or-primary};

15
app/assets/stylesheets/common/base/login.scss
View File

@ -12,7 +12,7 @@
display: none;
}
#discourse-modal.login-modal:not(.has-alt-auth) .modal-inner-container {
#discourse-modal.login-modal-body:not(.has-alt-auth) .modal-inner-container {
max-width: 28em; // prevents long alerts from expanding the modal width
}
@ -88,9 +88,13 @@
color: #000000;
justify-content: flex-start;
min-width: fit-content;
margin-bottom: 0.5em;
}
}
.modal-footer {
.btn-primary {
margin-right: 1.5em;
}
.inline-spinner {
display: inline-flex;
}
@ -130,6 +134,7 @@
}
label.more-info {
color: var(--primary-medium);
min-height: 1.4em; // prevents height increase due to tips
}
label.alt-placeholder {
color: var(--primary-medium);
@ -228,8 +233,12 @@
}
}
#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
}
.create-account {
@ -238,6 +247,10 @@
margin-top: 0.5em;
}
.create-account-body {
max-width: 40em;
}
.user-field {
input[type="text"] {
margin-bottom: 0;

2
app/assets/stylesheets/common/foundation/color_transformations.scss
View File

@ -99,6 +99,8 @@ $highlight-low-or-medium: dark-light-choose(
$highlight-medium
) !default;
$tertiary-or-tertiary-low: dark-light-choose($tertiary, $tertiary-low) !default;
$tertiary-low-or-tertiary-high: dark-light-choose(
$tertiary-low,
$tertiary-high

2
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -51,7 +51,6 @@ $base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;
// Font-size defintions, multiplier ^ (step / interval)
$font-up-7: 2.639em;
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
@ -65,7 +64,6 @@ $font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;
$font-down-7: 0.3789em;
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
// with base at 15px, the below gives 16.05px

169
app/assets/stylesheets/desktop/login.scss
View File

@ -5,12 +5,7 @@
.create-account {
.modal-body {
&.has-alt-auth {
background: var(--tertiary);
}
@media (prefers-color-scheme: dark) {
&.has-alt-auth {
background: rgba(var(--tertiary-rgb), 0.5);
}
background: var(--tertiary-or-tertiary-low);
}
}
.btn-flat.btn.modal-close svg {
@ -91,62 +86,17 @@
}
}
.login-modal.modal-body:not(.hidden).second-factor {
.login-left-side {
max-width: 350px;
}
.modal-footer {
margin-top: 1em;
}
}
// styles used on
// login modal only
.login-modal:not(.hidden) {
padding: 0 !important;
&.has-alt-auth {
.login-modal-body.has-alt-auth {
min-width: 700px;
.login-left-side {
align-self: stretch;
width: calc(60% - 4em);
padding: 3em 3em 2.5em;
}
}
.login-left-side {
background: var(--secondary);
width: calc(100% - 4em);
display: flex;
flex-direction: column;
padding: 3em 3em 2.5em;
.login-welcome-header {
.login-title {
line-height: $line-height-small;
font-size: $font-up-7;
}
.login-subheader {
font-size: 1.125em !important;
}
}
#credentials {
display: flex;
flex-direction: column;
align-items: flex-start !important;
}
#login-form {
margin: 3em 0 1.25em 0;
}
.modal-footer {
display: flex;
flex-direction: row;
width: 100%;
padding: 0;
border: 0;
}
}
.login-right-side {
display: none;
}
&.has-alt-auth .login-right-side {
width: 35%;
display: flex;
flex-direction: column;
@ -169,6 +119,39 @@
}
}
}
}
.login-left-side {
background: var(--secondary);
width: calc(100% - 4em);
display: flex;
flex-direction: column;
padding: 3em 3em 2.5em;
.login-welcome-header {
.login-title {
line-height: $line-height-small;
font-size: $font-up-6;
}
.login-subheader {
font-size: 1.125em !important;
}
}
#credentials {
display: flex;
flex-direction: column;
align-items: flex-start !important;
}
#login-form {
margin: 3em 0 1.25em 0;
}
.modal-footer {
display: flex;
flex-direction: row;
width: 100%;
padding: 0;
border: 0;
}
}
.modal-body,
#credentials {
display: flex;
@ -180,7 +163,7 @@
}
}
.login-modal.second-factor.modal-body {
.login-modal-body.second-factor {
max-width: 30em;
.login-left-side {
width: 100%;
@ -191,6 +174,20 @@
#new-account-link {
display: none;
}
.modal-footer {
margin-top: 1em;
}
}
.login-form {
.tip {
&:not(:empty) {
min-height: 1.75em;
&.bad .svg-icon {
vertical-align: middle;
}
}
}
}
// styles used on the
@ -200,14 +197,17 @@
.create-account {
position: relative;
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
max-height: 65vh !important;
max-height: 70vh !important;
overflow: hidden;
}
}
.modal-footer {
padding: 2em 3em;
}
.has-alt-auth .create-account-form {
display: grid;
grid-template-columns: 65% 35%;
grid-template-rows: 20% 80%;
grid-template-rows: auto 1fr;
grid-template-areas:
"header login-buttons"
"form login-buttons";
@ -216,6 +216,22 @@
display: flex;
flex-direction: column;
width: 100%;
position: relative;
&:after {
content: "";
display: block;
position: absolute;
width: 65%;
pointer-events: none;
bottom: 0;
left: 0;
height: 1em;
background-image: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
}
.create-account-login-buttons {
display: none;
@ -226,6 +242,7 @@
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
h3 {
color: var(--secondary);
text-align: center;
@ -234,9 +251,6 @@
button:first-of-type {
margin-top: 0;
}
button {
margin-bottom: 1em;
}
}
}
.modal-body {
@ -245,9 +259,11 @@
}
.login-welcome-header {
grid-area: header;
padding: 1em;
padding: 3em 3em 1em;
.login-title {
font-size: 2.75em;
font-size: $font-up-6;
line-height: $line-height-medium;
}
.login-subheader {
font-size: 1.125em !important;
@ -264,27 +280,11 @@
.has-alt-auth .login-form,
.login-form {
background: var(--secondary);
padding: 1em;
padding: 2em 3em 0;
grid-area: form;
overflow-y: scroll;
&:after {
content: "";
display: block;
position: absolute;
width: 65%;
pointer-events: none;
z-index: 100;
margin-left: -1em;
height: 1em;
}
&:after {
bottom: 93px;
background-image: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
.input-group {
margin-bottom: 1em;
input {
@ -363,17 +363,6 @@
}
}
.login-form {
.tip {
&:not(:empty) {
min-height: 1.75em;
&.bad .svg-icon {
vertical-align: middle;
}
}
}
}
.password-reset,
.email-login,
.invites-show {

11
app/assets/stylesheets/mobile/login.scss
View File

@ -17,6 +17,14 @@
padding: 0;
}
label {
margin: 0;
}
.tip:not(:empty) {
min-height: 1.4em; // prevents height jump when tips appear
}
.login-welcome-header {
padding: 1.5em 1em;
margin: 0 auto;
@ -65,7 +73,7 @@
.input-group {
input {
height: 2.25em;
height: 2.5em;
margin-bottom: 0.25em;
}
margin-bottom: 1em;
@ -121,6 +129,7 @@
box-sizing: border-box;
margin: 0 auto;
font-size: $font-down-1;
padding: 1.25em;
}
.alert.alert-error {