UX: fix button alignment on log-in required page (#11965)

This commit is contained in:
Kris 2021-02-03 22:38:58 -05:00 committed by GitHub
parent 615a091707
commit 4f588a0569
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 7 deletions

View File

@ -1,13 +1,14 @@
import Controller, { inject as controller } from "@ember/controller"; import Controller, { inject as controller } from "@ember/controller";
import { ajax } from "discourse/lib/ajax"; import { ajax } from "discourse/lib/ajax";
import discourseComputed from "discourse-common/utils/decorators"; import discourseComputed from "discourse-common/utils/decorators";
import { equal } from "@ember/object/computed"; import { equal, or } from "@ember/object/computed";
import { userPath } from "discourse/lib/url"; import { userPath } from "discourse/lib/url";
export default Controller.extend({ export default Controller.extend({
application: controller(), application: controller(),
showLoginButton: equal("model.path", "login"), showLoginButton: equal("model.path", "login"),
anyButtons: or("showLoginButton", "showSignupButton"),
@discourseComputed("model.path") @discourseComputed("model.path")
bodyClass: (path) => `static-${path}`, bodyClass: (path) => `static-${path}`,

View File

@ -8,6 +8,8 @@
{{plugin-outlet name="below-static" tagName=""}} {{plugin-outlet name="below-static" tagName=""}}
{{#if anyButtons}}
<div class="body-page-button-container">
{{#if showSignupButton}} {{#if showSignupButton}}
{{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}} {{d-button action=(route-action "showCreateAccount") class="btn-primary sign-up-button" label="sign_up"}}
{{/if}} {{/if}}
@ -16,5 +18,7 @@
{{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}} {{d-button action=(route-action "showLogin") class="btn-primary login-button" icon="user" label="log_in"}}
{{/if}} {{/if}}
</div> </div>
{{/if}}
</div>
{{/watch-read}} {{/watch-read}}
{{/d-section}} {{/d-section}}

View File

@ -1,5 +1,5 @@
.body-page { .body-page {
/* intended only for /about /faq, /guidelines, /tos, and /privacy */ /* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
width: 100%; width: 100%;
max-width: 700px; max-width: 700px;
.about-page & { .about-page & {
@ -28,3 +28,10 @@
margin-left: 40px; margin-left: 40px;
} }
} }
.body-page-button-container {
display: flex;
button {
margin-right: 0.75em;
}
}