mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
8ac1f6ad9a
This adds several improvements to the signup/login forms. Some of them include: - Added a minimal signup progress bar design for mobile. - Made the signup/login modals full height on mobile. - Improved the activation, account creation, and login-required pages on mobile. - Removed the subheader and emoji from the welcome component. - Removed most input instructions. - Used consistent font size for text below the inputs. - Displayed input instructions only when the field is focused. - Improved the vertical alignment of input labels. - Increased the spacing between inputs. - Fixed label positioning for custom fields. - Moved the "(optional)" text for the name input outside the instructions. - Disabled buttons during login to prevent layout shifts. - Reused the CTA component for modals as well. - Matched the invite CTA styles with the signup form. --------- Co-authored-by: Jan Cernik <jancernik12@gmail.com> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
277 lines
4.8 KiB
SCSS
277 lines
4.8 KiB
SCSS
.static-login {
|
|
#main-outlet-wrapper,
|
|
#main-outlet {
|
|
padding: 0;
|
|
}
|
|
.contents.body-page {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.login-welcome {
|
|
gap: 2em;
|
|
height: 100svh;
|
|
width: 100svw;
|
|
box-sizing: border-box;
|
|
|
|
.body-page-button-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.d-modal.login-modal .d-modal__body {
|
|
margin-top: 3.75rem;
|
|
}
|
|
|
|
.d-modal.login-modal,
|
|
.d-modal.create-account {
|
|
padding-bottom: var(--safe-area-inset-bottom);
|
|
.d-modal {
|
|
&__container {
|
|
height: 100svh;
|
|
max-height: unset;
|
|
width: 100%;
|
|
}
|
|
&__body {
|
|
flex-direction: column;
|
|
gap: unset;
|
|
padding-inline: 0.5rem;
|
|
padding-bottom: 1em;
|
|
outline: none;
|
|
}
|
|
&__footer {
|
|
padding: 1em 1.5rem;
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
&__footer-buttons {
|
|
gap: 0.5em;
|
|
}
|
|
}
|
|
|
|
.login-title {
|
|
font-size: var(--font-up-4);
|
|
}
|
|
|
|
.close {
|
|
font-size: var(--font-up-3);
|
|
}
|
|
|
|
.login-welcome-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.login-right-side {
|
|
padding: 1rem 0 0;
|
|
background: unset;
|
|
max-width: unset;
|
|
}
|
|
|
|
.login-or-separator {
|
|
border-top: 1px solid var(--primary-low);
|
|
position: relative;
|
|
margin-block: 0.75rem;
|
|
|
|
span {
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background: var(--secondary);
|
|
padding-inline: 0.5rem;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1-rem);
|
|
text-transform: uppercase;
|
|
}
|
|
}
|
|
|
|
#login-buttons {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0 1rem;
|
|
gap: 0.25em;
|
|
margin-bottom: 1rem;
|
|
height: unset;
|
|
|
|
.btn {
|
|
margin: 0;
|
|
padding-block: 0.65rem;
|
|
border: 1px solid var(--primary-low);
|
|
flex-grow: 1;
|
|
font-size: var(--font-down-1);
|
|
white-space: nowrap;
|
|
min-width: calc(50% - 0.25em);
|
|
}
|
|
}
|
|
|
|
.login-page-cta {
|
|
&__buttons {
|
|
.login-page-cta__login {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
&__signup {
|
|
background: none !important;
|
|
font-size: var(--font-down);
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.signup-page-cta {
|
|
&__buttons {
|
|
.signup-page-cta__signup {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
&__login {
|
|
background: none !important;
|
|
font-size: var(--font-down);
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.login-page-cta,
|
|
.signup-page-cta {
|
|
&__existing-account,
|
|
&__no-account-yet {
|
|
width: unset;
|
|
margin-bottom: 0;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
button {
|
|
width: fit-content;
|
|
}
|
|
}
|
|
|
|
#login-form,
|
|
.login-form {
|
|
margin: 0;
|
|
padding: 1rem 1rem 0;
|
|
|
|
.input-group {
|
|
&:not(:last-child) {
|
|
margin-bottom: 0.75em;
|
|
}
|
|
input:focus + label,
|
|
input.value-entered + label.alt-placeholder {
|
|
top: -10px;
|
|
}
|
|
input.alt-placeholder:invalid {
|
|
color: var(--primary);
|
|
}
|
|
label.more-info {
|
|
color: var(--primary-medium);
|
|
}
|
|
.more-info,
|
|
.tip,
|
|
.instructions {
|
|
font-size: var(--font-down-1-rem);
|
|
}
|
|
}
|
|
|
|
.user-fields {
|
|
display: contents;
|
|
}
|
|
}
|
|
.caps-lock-warning {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.login-modal,
|
|
.create-account,
|
|
.invites-show {
|
|
#login-form,
|
|
.login-form,
|
|
.invite-form {
|
|
.input-group {
|
|
label.alt-placeholder,
|
|
.user-field.text label.control-label {
|
|
top: 11px;
|
|
}
|
|
div.user-field:not(.dropdown)
|
|
.controls
|
|
input:focus
|
|
+ label.alt-placeholder.control-label,
|
|
div.user-field.value-entered:not(.dropdown)
|
|
.controls
|
|
label.alt-placeholder.control-label {
|
|
top: -10px;
|
|
}
|
|
.user-field.dropdown label.control-label,
|
|
.user-field.multiselect label.control-label {
|
|
top: -10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.account-created,
|
|
.activate-account {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
max-width: unset;
|
|
margin: 0;
|
|
padding: 0.75em 1rem;
|
|
box-shadow: none;
|
|
|
|
.activate-new-email {
|
|
width: 100%;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.activation-controls {
|
|
flex-direction: column;
|
|
gap: 1em;
|
|
margin-top: auto;
|
|
margin-bottom: 0.75em;
|
|
|
|
button {
|
|
height: 2.5em;
|
|
}
|
|
}
|
|
|
|
.activate-account-button {
|
|
margin-top: auto;
|
|
margin-bottom: 0.75em;
|
|
width: 100%;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.account-activated {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
.tada-image {
|
|
margin: 0;
|
|
}
|
|
|
|
.continue-button {
|
|
margin-top: auto;
|
|
margin-bottom: 0.75em;
|
|
width: 100%;
|
|
height: 2.5em;
|
|
}
|
|
}
|
|
}
|