diff --git a/app/assets/javascripts/discourse/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
index f538f9ef135..e79b2c74544 100644
--- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/create-account.hbs
@@ -1,7 +1,11 @@
{{#create-account email=accountEmail disabled=submitDisabled action="createAccount"}}
{{#unless complete}}
{{#d-modal-body title="create_account.title"}}
-
+
+ {{#unless hasAuthOptions}}
+ {{login-buttons externalLogin="externalLogin"}}
+ {{/unless}}
+
{{#if showCreateForm}}
{{/if}}
-
- {{#unless hasAuthOptions}}
- {{login-buttons externalLogin="externalLogin"}}
- {{/unless}}
+
{{/d-modal-body}}
{{#if showCreateForm}}
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 901a2deb744..f11a157c7a2 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -13,6 +13,9 @@
}
#login-form {
+ table {
+ width: 100%;
+ }
a {
color: dark-light-choose($primary-high, $secondary-low);
}
@@ -40,6 +43,7 @@ $input-width: 220px;
td {
label, input {
margin-bottom: 0;
+ width: 100%;
}
}
}
@@ -56,9 +60,8 @@ $input-width: 220px;
}
.disclaimer {
- font-size: $font-down-1;
color: dark-light-choose($primary-medium, $secondary-medium);
- clear: both;
+ margin-top: .5em;
}
.user-field.confirm {
@@ -135,6 +138,11 @@ $input-width: 220px;
}
}
+.modal tr.instructions {
+ label {
+ color: dark-light-choose($primary-medium, $secondary-medium);
+ }
+}
// alternate login / create new account buttons should be de-emphasized
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index bf3ee57cfa5..9a10486b76c 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -80,6 +80,8 @@
}
.modal-inner-container {
+ display: table;
+ min-width: 320px;
max-width: 700px;
margin: 0 auto;
background-color: $secondary;
diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss
index aaed214f245..4ed62ea3ea2 100644
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@@ -9,18 +9,15 @@
.login-modal,
.create-account {
#login-buttons:not(.hidden) {
- display: -webkit-flex;
- -webkit-flex-direction: column;
- -webkit-justify-content: center;
- -webkit-flex-basis: 50%;
- -webkit-align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
- flex-basis: 50%;
+ flex-basis: 40%;
align-items: center;
- min-height: 200px;
+ min-height: 175px;
border-left: 1px solid $primary-low;
+ padding: 15px;
+ order: 2;
button {
margin: 0.35em;
@@ -31,10 +28,13 @@
}
}
+ .modal-inner-container {
+ min-width: 475px;
+ }
+
#login-form {
- -webkit-flex: 1 0 auto;
flex: 1 0 auto;
- padding: 1em 0;
+ padding: 0 15px;
}
tr:not(.instructions) {
@@ -55,12 +55,9 @@
.d-modal.login-modal {
.modal-body,
#credentials {
- display: -webkit-flex;
- -webkit-align-items: center;
- -webkit-justify-content: center;
display: flex;
align-items: center;
- justify-content: center;
+ padding: 15px 0;
tr {
display: -webkit-flex;
@@ -76,10 +73,8 @@
// modal only
.d-modal.create-account {
.modal-body {
- display: -webkit-flex;
- -webkit-justify-content: space-evenly;
display: flex;
- justify-content: space-evenly;
+ padding: 15px 0;
}
.create-account-form tr {
@@ -90,30 +85,29 @@
}
.login-form {
- display: -webkit-flex;
- -webkit-flex-basis: 50%;
- -webkit-align-items: center;
display: flex;
- flex-basis: 50%;
+ flex: 1 1 50%;
align-items: center;
+ padding: 0 15px;
+ form, table {
+ width: 100%;
+ }
- tr:not(.password-confirmation) {
- display: -webkit-flex;
- -webkit-flex-direction: column;
+ tr {
display: flex;
flex-direction: column;
margin-top: 0.15em;
+ &.password-confirmation {
+ display: none;
+ }
}
}
- form {
- margin: 0 auto;
- }
-
tr.input {
input,
label {
margin-bottom: 0;
+ width: 100%;
}
.tip {
max-width: 340px;
@@ -129,7 +123,6 @@
&:empty + td {
min-height: 1.75em;
width: 240px;
- font-size: $font-down-1;
}
}
@@ -194,12 +187,6 @@
margin-top: 15px;
}
- .instructions {
- label {
- color: dark-light-choose($primary-medium, $secondary-medium);
- }
- }
-
.user-fields {
border-top: 1px solid $primary-low;
padding-top: 20px;
diff --git a/app/assets/stylesheets/desktop/upload.scss b/app/assets/stylesheets/desktop/upload.scss
index 20e53afa92e..de1b7252767 100644
--- a/app/assets/stylesheets/desktop/upload.scss
+++ b/app/assets/stylesheets/desktop/upload.scss
@@ -5,9 +5,15 @@
}
.radios {
height: 60px;
+ display: flex;
+ align-items: flex-start;
+ label {
+ flex: 1 0 auto;
+ margin-right: 1em;
+ margin-top: 1px;
+ }
.inputs {
- float: right;
- width: 75%;
+ width: 100%;
input {
width: 90%;
margin: 0 0 5px 0;
diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss
index 7be96f1033c..fad1aa16457 100644
--- a/app/assets/stylesheets/mobile/login.scss
+++ b/app/assets/stylesheets/mobile/login.scss
@@ -8,42 +8,35 @@
// create account modals
.login-modal,
.create-account {
- .modal-body {
- display: -webkit-flex;
- -webkit-align-items: center;
- -webkit-flex-direction: column-reverse;
- display: flex;
- align-items: center;
- flex-direction: column-reverse;
- }
.modal-inner-container {
max-width: 350px;
}
+ .close {
+ padding: 0;
+ }
+
#login-buttons:not(.hidden) {
display: -webkit-flex;
- -webkit-flex-wrap: wrap;
- -webkit-justify-content: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
- width: 100%;
- padding-bottom: 1em;
-
+ width: 102%;
+ padding-bottom: 10px;
+ margin-left: -2%;
+
button {
- margin: 0.15em;
+ flex: 1 1 48%;
max-width: 50%;
- min-width: 158px;
+ margin: 1% 0 1% 2%;
font-size: $font-up-1;
- overflow: hidden;
white-space: nowrap;
}
- }
- #login-form,
- .login-form {
- border-top: 1px solid $primary-low;
+ + #login-form {
+ border-top: 1px solid $primary-low;
+ }
}
form {
@@ -51,13 +44,11 @@
-webkit-justify-content: center;
display: flex;
justify-content: center;
- width: 320px;
}
table {
width: 100%;
- max-width: 90vw; // Iphone 5s
- margin: 0 auto;
+ padding: 10px;
}
tr {
@@ -81,11 +72,6 @@
&:not(:empty) + td {
display: none;
}
-
- &:not(:empty),
- &:empty + td {
- font-size: $font-down-1;
- }
}
.modal-body input[type="text"],
@@ -97,14 +83,9 @@
}
.modal-footer {
- width: 330px;
box-sizing: border-box;
margin: 0 auto;
- }
-
- .btn-primary {
- margin-bottom: 10px;
- float: left;
+ font-size: $font-down-1;
}
.alert.alert-error {
@@ -120,11 +101,6 @@
// Styles for the
// login modal only
.d-modal.login-modal {
- .modal-body {
- -webkit-flex-direction: column;
- flex-direction: column;
- }
-
#credentials {
width: 100%;
tr {
@@ -136,6 +112,7 @@
}
#login-form {
+ margin-bottom: 0.75em;
td {
padding: 0;
width: 100%;
@@ -167,11 +144,20 @@
// create account
// modal only
.create-account .modal-body {
+ display: flex;
+ flex-direction: column;
tr.instructions {
label {
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
+
+ #login-buttons + .login-form {
+ border-top: 1px solid $primary-low;
+ }
+ .login-form {
+ margin-bottom: 0.75em;
+ }
}
.create-account {
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 7d2e19e7b3a..8c5f55e3e65 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -28,7 +28,7 @@
// we need a little extra room on mobile for the
// stuff inside the footer to fit
.modal-footer {
- padding: 15px 7px 10px 7px;
+ padding: 10px
}
.modal-header {