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}}
@@ -95,10 +99,7 @@
{{/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 {