UX: Move modal footer into better container (#12429)
* UX: Move modal footer into better container This commit moves the modal footer under the sign-up form for a more cohesive feel between the login + create account modals.
This commit is contained in:
Jordan Vidrine
GitHub
parent
44153cde18
commit
74dbf2b1dc
|
|
@ -147,30 +147,29 @@
|
|||
{{/if}}
|
||||
</form>
|
||||
</div>
|
||||
{{#if showCreateForm}}
|
||||
<div class="modal-footer">
|
||||
{{d-button
|
||||
class="btn-large btn-primary"
|
||||
action=(action "createAccount")
|
||||
disabled=submitDisabled
|
||||
label="create_account.title"
|
||||
isLoading=formSubmitted
|
||||
}}
|
||||
|
||||
{{#unless hasAuthOptions}}
|
||||
{{d-button class="btn-large" id="login-link" action=(route-action "showLogin") disabled=formSubmitted label="log_in"}}
|
||||
{{/unless}}
|
||||
|
||||
<div class="disclaimer">
|
||||
{{html-safe disclaimerHtml}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{plugin-outlet name="create-account-after-modal-footer" tagName=""}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/d-modal-body}}
|
||||
|
||||
{{#if showCreateForm}}
|
||||
<div class="modal-footer">
|
||||
{{d-button
|
||||
class="btn-large btn-primary"
|
||||
action=(action "createAccount")
|
||||
disabled=submitDisabled
|
||||
label="create_account.title"
|
||||
isLoading=formSubmitted
|
||||
}}
|
||||
|
||||
{{#unless hasAuthOptions}}
|
||||
{{d-button class="btn-large" id="login-link" action=(route-action "showLogin") disabled=formSubmitted label="log_in"}}
|
||||
{{/unless}}
|
||||
|
||||
<div class="disclaimer">
|
||||
{{html-safe disclaimerHtml}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{plugin-outlet name="create-account-after-modal-footer" tagName=""}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
{{/create-account}}
|
||||
|
|
|
|||
|
|
@ -23,12 +23,6 @@
|
|||
order: 2;
|
||||
|
||||
button {
|
||||
&:first-of-type {
|
||||
margin-top: 2.8em;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
margin: 0.35em;
|
||||
&:lang(zh_CN) {
|
||||
min-width: 200px;
|
||||
|
|
@ -194,15 +188,12 @@
|
|||
// create account
|
||||
// modal only
|
||||
.d-modal.create-account {
|
||||
.create-account {
|
||||
position: relative;
|
||||
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
|
||||
max-height: 70vh !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.create-account-body {
|
||||
min-width: 700px !important;
|
||||
}
|
||||
.modal-footer {
|
||||
padding: 2em 3em;
|
||||
.modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown) {
|
||||
max-height: 70vh !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.has-alt-auth .create-account-form {
|
||||
display: grid;
|
||||
|
|
@ -210,28 +201,14 @@
|
|||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"header login-buttons"
|
||||
"form login-buttons";
|
||||
"form login-buttons"
|
||||
"footer login-buttons";
|
||||
}
|
||||
.create-account-form {
|
||||
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;
|
||||
|
|
@ -257,9 +234,29 @@
|
|||
display: flex;
|
||||
padding: 0;
|
||||
}
|
||||
.modal-footer {
|
||||
grid-area: footer;
|
||||
background-color: var(--secondary);
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
top: calc(-1em - 1px);
|
||||
left: 0;
|
||||
height: 1em;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(var(--secondary-rgb), 0),
|
||||
rgba(var(--secondary-rgb), 1)
|
||||
);
|
||||
}
|
||||
}
|
||||
.login-welcome-header {
|
||||
grid-area: header;
|
||||
padding: 3em 3em 1em;
|
||||
padding: 3em 2em 1em;
|
||||
|
||||
.login-title {
|
||||
font-size: $font-up-6;
|
||||
|
|
@ -280,18 +277,24 @@
|
|||
.has-alt-auth .login-form,
|
||||
.login-form {
|
||||
background: var(--secondary);
|
||||
padding: 2em 3em 0;
|
||||
|
||||
padding: 1em 0 0 0;
|
||||
grid-area: form;
|
||||
overflow-y: scroll;
|
||||
|
||||
.input-group {
|
||||
padding: 0 2em;
|
||||
margin-bottom: 1em;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
input:not(.value-entered):not(:focus) + label.alt-placeholder {
|
||||
top: 12px;
|
||||
left: 3em;
|
||||
}
|
||||
input:focus + label.alt-placeholder,
|
||||
input.value-entered + label.alt-placeholder {
|
||||
top: -8px;
|
||||
left: calc(3em - 0.25em);
|
||||
}
|
||||
}
|
||||
.password-confirmation {
|
||||
|
|
@ -324,6 +327,16 @@
|
|||
}
|
||||
|
||||
.user-field {
|
||||
&.text {
|
||||
label.control-label {
|
||||
left: 3em !important;
|
||||
max-width: calc(100% - 6em) !important;
|
||||
}
|
||||
&.value-entered label.control-label,
|
||||
label.control-label.value-entered {
|
||||
left: calc(3em - 0.25em) !important;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.confirm {
|
||||
|
|
|
|||
Loading…
Reference in New Issue