github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 22:21:55 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: cleaning up some invite page styles (#25247)

Browse Source
This commit is contained in:
Kris 2024-01-12 17:15:01 -05:00 committed by GitHub
parent 92197b9c64
commit 7639591552
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/templates/account-created/index.hbs
View File

@ -1,3 +1,4 @@
{{body-class "account-activation-page"}}
<div class="container invites-show"> <div class="container invites-show">
<div class="login-welcome-header"> <div class="login-welcome-header">
<h1 class="login-title">{{this.welcomeTitle}}</h1> <h1 class="login-title">{{this.welcomeTitle}}</h1>

53
app/assets/stylesheets/common/base/activation.scss
View File

@ -1,26 +1,43 @@
// Styles used before the user is logged into discourse. For example, activating their // Styles used before the user is logged into discourse. For example, activating their
// account or changing their email. // account or changing their email.
#simple-container { .account-activation-page {
border-radius: 10px; .desktop-view & {
background-color: var(--secondary); background: var(--primary-very-low);
padding: 20px; }
width: 550px; #main-outlet-wrapper {
margin: 0 auto; display: block;
.sidebar-wrapper {
.account-created { display: none;
.ac-message {
font-size: var(--font-up-1);
line-height: var(--line-height-large);
} }
.activation-controls { }
button { #main-outlet {
margin-right: 0.5em; padding: 0;
height: 100%;
}
#simple-container {
display: flex;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
width: 100%;
padding: 20px;
justify-content: center;
margin-top: var(--header-offset);
.account-created {
.ac-message {
font-size: var(--font-up-1);
line-height: var(--line-height-large);
}
.activation-controls {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.ac-page {
border-radius: 10px;
margin-top: 25px;
} }
}
.ac-page {
border-radius: 10px;
margin-top: 25px;
} }
} }
} }

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

@ -1,7 +1,9 @@
body.invite-page { body.invite-page {
background-color: var(--primary-50);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif; Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
#main-outlet-wrapper {
padding: 0;
}
} }
.invites-show, .invites-show,

13
app/assets/stylesheets/common/login/invite-signup.scss
View File

@ -1,16 +1,3 @@
#main-outlet-wrapper:has(.invites-show) {
display: block;
height: 100vh;
.sidebar-wrapper {
display: none;
}
#main-outlet {
padding: 0;
height: 100%;
}
}
.invites-show { .invites-show {
padding: 2rem 3rem; padding: 2rem 3rem;
background: var(--secondary); background: var(--secondary);

12
app/assets/stylesheets/desktop/invite-signup.scss
View File

@ -1,10 +1,14 @@
.invite-page {
background: var(--primary-50);
}
.invites-show { .invites-show {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 500px; max-width: 500px;
padding: 2rem 3rem; padding: 2rem 3rem;
background: var(--secondary); background: var(--secondary);
box-shadow: var(--shadow-menu-panel); box-shadow: var(--shadow-menu-panel);
margin: 10vh auto 1em auto;
@media screen and (max-height: 700px) {
margin: 1em auto 1em auto;
}
} }

5
app/assets/stylesheets/mobile/invite-signup.scss
View File

@ -1,10 +1,7 @@
#main-outlet-wrapper:has(.invites-show) {
padding: 0;
}
.invites-show { .invites-show {
height: 100vh;
width: 100vw; width: 100vw;
box-sizing: border-box; box-sizing: border-box;
padding: 0 1em 1em;
.invitation-cta { .invitation-cta {
display: flex; display: flex;