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

UX: Invite signup page styling + separation (#24293) 

* UX: separate invite-signup styling

* UX: invite page centering

* remove old invites-show css

* UX: invite signup page – mobile

* remove class references in general file

* add styling for instructions
This commit is contained in:
chapoi 2023-11-08 13:57:06 +02:00 committed by GitHub
parent 82506096b7
commit fe0b0edf57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 112 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,3 +18,4 @@
@import "common/topic-timeline";
@import "common/loading-slider";
@import "common/float-kit/_index";
@import "common/login/_index";

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

@ -41,7 +41,6 @@ body.invite-page {
// Create Account + Login
.d-modal.create-account,
.d-modal.login-modal,
.invites-show,
.admin-invite-page {
.modal-inner-container {
position: relative;
@ -348,95 +347,6 @@ body.invite-page {
}
}
// admin invite page
.invites-show {
display: grid;
justify-content: center;
.two-col {
position: relative;
display: grid;
margin-top: 5px;
}
.invite-form,
.invite-success {
border-radius: 8px;
margin-top: 25px;
border: 1px solid var(--primary-low);
background-color: var(--secondary);
}
.invite-form {
margin-bottom: 50px;
box-shadow: 0 4px 19px 6px rgba(0, 0, 0, 0.05);
max-width: calc(30em);
.tip {
display: block;
}
.col-image {
display: none;
}
.disclaimer {
margin: 1em 0 0;
}
}
#login-buttons {
.btn {
background-color: var(--primary-low);
color: var(--primary);
}
}
.col-image {
position: relative;
margin-right: 20px;
justify-self: center;
@media screen and (max-width: 600px) {
display: none;
}
}
form {
.controls,
.input {
margin-bottom: 10px;
}
.instructions {
color: var(--primary-medium);
margin: 0;
font-size: var(--font-down-1);
font-weight: normal;
line-height: var(--line-height-medium);
}
.tip {
font-size: var(--font-down-1);
&:not(:empty) {
margin-bottom: 0.25em;
}
}
}
.invitation-cta {
display: flex;
align-items: center;
margin-top: 2em;
&__accept {
margin-right: 1em;
}
&__signed-up {
margin-right: 0.5em;
}
&__sign-in {
padding: 0;
&.btn-flat.btn-text:not([disabled]):active {
background-color: transparent;
background-image: none;
}
}
}
}
.auth-message {
padding: 0 15px 15px 15px;
&:empty {

1
app/assets/stylesheets/common/login/_index.scss Normal file
View File

@ -0,0 +1 @@
@import "invite-signup";

81
app/assets/stylesheets/common/login/invite-signup.scss Normal file
View File

@ -0,0 +1,81 @@
#main-outlet-wrapper:has(.invites-show) {
display: block;
height: 100vh;
.sidebar-wrapper {
display: none;
}
#main-outlet {
padding: 0;
height: 100%;
}
}
.invites-show {
padding: 2rem 3rem;
background: var(--secondary);
.login-welcome-header {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
overflow-wrap: anywhere;
}
.login-title {
font-size: var(--font-up-6);
margin: 0;
}
.waving-hand {
width: 35px;
height: 35px;
margin-left: 0.5em;
align-self: center;
}
.login-subheader {
font-size: var(--font-up-1);
margin: 0;
}
.user-info {
align-items: center;
gap: 0.5em;
}
.avatar {
width: 30px;
height: 30px;
}
.col-image {
display: none;
}
.create-account__password {
&-info {
display: flex;
justify-content: space-between;
}
&-tip-validation {
display: flex;
flex-direction: column;
}
}
.invitation-cta {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
}
.instructions {
color: var(--primary-medium);
}
.disclaimer {
color: var(--primary-medium);
margin-top: 0.5em;
}
}

1
app/assets/stylesheets/desktop/_index.scss
View File

@ -6,6 +6,7 @@
@import "edit-category";
@import "group";
@import "header";
@import "invite-signup";
@import "latest-topic-list";
@import "login";
@import "menu-panel";

10
app/assets/stylesheets/desktop/invite-signup.scss Normal file
View File

@ -0,0 +1,10 @@
.invites-show {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 500px;
padding: 2rem 3rem;
background: var(--secondary);
box-shadow: var(--shadow-menu-panel);
}

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

@ -358,40 +358,12 @@
flex-direction: column;
}
.invites-show {
padding-top: 20px;
.two-col {
margin-top: 30px;
}
.col-form {
margin-left: 200px;
.inline-invite-img {
display: none;
}
}
form {
.controls,
.input {
margin-left: 20px;
}
input,
label {
margin-bottom: 0;
}
.user-field .control-label:not(.checkbox-label) {
margin-left: 20px;
}
}
}
.tos-agree {
margin-bottom: 12px;
}
}
.password-reset,
.invites-show {
.password-reset {
.col-form {
padding: 0.5em 2em 1em;
max-width: 30em;
@ -412,10 +384,6 @@
// 80% width on checkboxes messes up the layout for custom fields
width: 80%;
}
.invite-form,
.invite-success {
box-shadow: var(--shadow-card);
}
}
.password-reset {

1
app/assets/stylesheets/mobile/_index.scss
View File

@ -14,6 +14,7 @@
@import "emoji";
@import "group";
@import "header";
@import "invite-signup";
@import "lightbox";
@import "login";
@import "menu-panel";

15
app/assets/stylesheets/mobile/invite-signup.scss Normal file
View File

@ -0,0 +1,15 @@
#main-outlet-wrapper:has(.invites-show) {
padding: 0;
}
.invites-show {
height: 100vh;
width: 100vw;
box-sizing: border-box;
.invitation-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 2rem;
}
}

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

@ -230,8 +230,7 @@
}
.password-reset,
.email-login,
.invites-show {
.email-login {
margin-top: 30px;
.col-image {
padding-top: 12px;
@ -262,15 +261,6 @@
}
}
.invites-show {
.col-image {
display: none;
}
h1.login-title {
font-size: var(--font-up-3);
}
}
.email-login {
width: 90%;
}