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

UX: Make long sign-up forms scrollable in modal

This commit is contained in:
Kris 2018-11-08 15:25:10 -05:00
parent 1a96556f38
commit 57af43b142
3 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,12 +76,6 @@ $input-width: 220px;
margin-top: 0.5em; margin-top: 0.5em;
} }
.user-fields {
margin-top: 0.75em;
padding-top: 0.25em;
border-top: 1px solid $primary-low;
}
.user-field { .user-field {
> label { > label {
width: $label-width; width: $label-width;
@ -90,6 +84,10 @@ $input-width: 220px;
margin-bottom: 0; margin-bottom: 0;
padding-top: 5px; padding-top: 5px;
} }
&:first-of-type > label {
margin-top: 0;
}
input[type="text"] { input[type="text"] {
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;

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

@ -193,7 +193,6 @@
.modal-body { .modal-body {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
overflow-y: auto;
max-height: 400px; max-height: 400px;
&.full-height-modal { &.full-height-modal {
max-height: calc(100vh - 150px); max-height: calc(100vh - 150px);

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

@ -26,10 +26,10 @@
#login-buttons:not(.hidden) { #login-buttons:not(.hidden) {
button { button {
&:first-of-type { &:first-of-type {
margin-top: 3.2em; margin-top: 2.8em;
} }
&:last-of-type { &:last-of-type {
margin-bottom: 3.2em; margin-bottom: 3em;
} }
} }
} }
@ -38,7 +38,7 @@
.create-account { .create-account {
#login-buttons:not(.hidden) { #login-buttons:not(.hidden) {
justify-content: flex-start; justify-content: flex-start;
padding-top: 1.5em; padding-top: 2.7em;
} }
} }
@ -94,10 +94,48 @@
} }
.login-form { .login-form {
position: relative;
display: flex; display: flex;
flex: 1 1 50%; flex: 1 1 50%;
align-items: center; overflow: hidden;
padding: 0 15px;
&:after,
&:before {
content: "";
display: block;
height: 25px;
position: absolute;
width: 100%;
pointer-events: none;
}
&:after {
bottom: 0;
background-image: linear-gradient(
to bottom,
rgba($secondary, 0) 0%,
rgba($secondary, 1) 100%
);
}
&:before {
top: 0;
background-image: linear-gradient(
to top,
rgba($secondary, 0) 0%,
rgba($secondary, 1) 100%
);
}
form {
box-sizing: border-box;
padding: 15px;
margin-bottom: 5px;
max-height: 450px;
@media screen and (max-height: 768px) {
max-height: 60vh;
}
overflow-x: hidden;
overflow-y: auto;
}
form, form,
table { table {
width: 100%; width: 100%;