From 9e546e9ddc6b26ad7281a4470c52f784ff88ec19 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Fri, 25 May 2018 20:11:22 +0800 Subject: [PATCH 1/5] FIX: Move tips into instructions div --- .../templates/modal/create-account.hbs | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/modal/create-account.hbs b/app/assets/javascripts/discourse/templates/modal/create-account.hbs index 033e31368c2..f538f9ef135 100644 --- a/app/assets/javascripts/discourse/templates/modal/create-account.hbs +++ b/app/assets/javascripts/discourse/templates/modal/create-account.hbs @@ -1,13 +1,9 @@ {{#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}} -
+
@@ -15,12 +11,13 @@ + - + {{input-tip validation=emailValidation}} + {{#if usernameRequired}} @@ -28,11 +25,11 @@ + {{input-tip validation=usernameValidation id="username-validation"}} {{/if}} @@ -43,11 +40,12 @@ + {{input-tip validation=nameValidation}} {{/if}} @@ -63,14 +61,14 @@ + {{input-tip validation=passwordValidation}} @@ -97,6 +95,10 @@ {{/if}} + + {{#unless hasAuthOptions}} + {{login-buttons externalLogin="externalLogin"}} + {{/unless}} {{/d-modal-body}} {{#if showCreateForm}} From 1a9aeca93b4338940411c8f8977e168ddecefbc1 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Fri, 25 May 2018 20:12:08 +0800 Subject: [PATCH 2/5] FIX: Move tips into instructions div --- .../discourse/templates/modal/login.hbs | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/modal/login.hbs b/app/assets/javascripts/discourse/templates/modal/login.hbs index 17a38baac9e..745d9015457 100644 --- a/app/assets/javascripts/discourse/templates/modal/login.hbs +++ b/app/assets/javascripts/discourse/templates/modal/login.hbs @@ -1,12 +1,5 @@ {{#login-modal screenX=lastX screenY=lastY loginName=loginName loginPassword=loginPassword loginSecondFactor=loginSecondFactor action="login"}} {{#d-modal-body title="login.title" class="login-modal"}} - {{#if showLoginButtons}} - {{login-buttons - canLoginLocalWithEmail=canLoginLocalWithEmail - processingEmailLink=processingEmailLink - emailLogin='emailLogin' - externalLogin='externalLogin'}} - {{/if}} {{#if canLoginLocal}} @@ -30,7 +23,7 @@ - +
{{input type="email" value=accountEmail id="new-account-email" disabled=emailValidated name="email" autofocus="autofocus"}} -  {{input-tip validation=emailValidation}}
{{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}} -  {{input-tip validation=usernameValidation id="username-validation"}}
- {{text-field value=accountName id="new-account-name"}} {{input-tip validation=nameValidation}} + {{text-field value=accountName id="new-account-name"}}
{{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}} -  {{input-tip validation=passwordValidation}}
-
+
{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}
{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}
{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}
@@ -42,6 +35,14 @@ {{/if}} {{authMessage}}
{{alert}}
+ + {{#if showLoginButtons}} + {{login-buttons + canLoginLocalWithEmail=canLoginLocalWithEmail + processingEmailLink=processingEmailLink + emailLogin='emailLogin' + externalLogin='externalLogin'}} + {{/if}} {{/d-modal-body}}
From 7f6f61cff2bb657dcee18af40a5d256999a1ae71 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Fri, 25 May 2018 20:13:06 +0800 Subject: [PATCH 3/5] FIX: Move tips into instructions div --- .../javascripts/discourse/templates/mobile/modal/login.hbs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs b/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs index 90d322ed685..36bf1bdd66c 100644 --- a/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs +++ b/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs @@ -14,7 +14,7 @@ From 1948a9912c08e98aabe8910701267374fe9c7a1f Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Fri, 25 May 2018 20:15:34 +0800 Subject: [PATCH 4/5] FEATURE: Horizontal login / create accout layout --- app/assets/stylesheets/desktop/login.scss | 243 +++++++++++++++------- 1 file changed, 173 insertions(+), 70 deletions(-) diff --git a/app/assets/stylesheets/desktop/login.scss b/app/assets/stylesheets/desktop/login.scss index b7ce599cb8e..aaed214f245 100644 --- a/app/assets/stylesheets/desktop/login.scss +++ b/app/assets/stylesheets/desktop/login.scss @@ -1,31 +1,118 @@ -// style that apply to the login popup +// -webkit- prefix needed for +// flexbox on Safari 8 +// can be removed once support +// for safari 8 is dropped -#login-buttons { - button { - margin: 0 5px 5px 0; - min-width: 180px; - &:lang(zh_CN) { - min-width: 200px; +// shared styles used +// on both the login and +// create accont modals +.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%; + align-items: center; + min-height: 200px; + border-left: 1px solid $primary-low; + + button { + margin: 0.35em; + width: 160px; + &:lang(zh_CN) { + min-width: 200px; + } } } - margin-top: 10px; - margin-bottom: 20px; -} -// Create account + #login-form { + -webkit-flex: 1 0 auto; + flex: 1 0 auto; + padding: 1em 0; + } -.create-account { - form { + tr:not(.instructions) { + td { + display: -webkit-flex; + display: flex; + padding: 5px 0 0 0; + } + } + + tr.input label { margin-bottom: 0; } - table { - width: 100%; - } - tr.input { - td { - padding-top: 10px; +} + +// styles used on +// login modal only +.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; + + tr { + display: -webkit-flex; + -webkit-flex-direction: column; + display: flex; + flex-direction: column; } - input, label { + } +} + +// styles used on the +// create account +// modal only +.d-modal.create-account { + .modal-body { + display: -webkit-flex; + -webkit-justify-content: space-evenly; + display: flex; + justify-content: space-evenly; + } + + .create-account-form tr { + display: -webkit-flex; + -webkit-flex-direction: column; + display: flex; + flex-direction: column; + } + + .login-form { + display: -webkit-flex; + -webkit-flex-basis: 50%; + -webkit-align-items: center; + display: flex; + flex-basis: 50%; + align-items: center; + + tr:not(.password-confirmation) { + display: -webkit-flex; + -webkit-flex-direction: column; + display: flex; + flex-direction: column; + margin-top: 0.15em; + } + } + + form { + margin: 0 auto; + } + + tr.input { + input, + label { margin-bottom: 0; } .tip { @@ -33,6 +120,72 @@ } } + .tip { + &:not(:empty) + td { + display: none; + } + + &:not(:empty), + &:empty + td { + min-height: 1.75em; + width: 240px; + font-size: $font-down-1; + } + } + + .invites-show { + padding-top: 20px; + + .two-col { + margin-top: 30px; + } + .col-image { + width: 200px; + img { + width: 200px; + } + } + .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; + } + } + } + + .password-reset, + .invites-show { + .col-form { + padding-left: 20px; + } + h2 { + margin-bottom: 12px; + } + .col-image img { + width: 200px; + height: 200px; + } + } + + .password-reset { + .col-form { + padding-top: 40px; + } + } + .tos-agree { margin-bottom: 12px; } @@ -52,53 +205,3 @@ padding-top: 20px; } } - -.password-reset, .invites-show { - .col-form { - padding-left: 20px; - } - h2 { - margin-bottom: 12px; - } - .col-image img { - width: 200px; - height: 200px; - } -} - -.password-reset { - .col-form { - padding-top: 40px; - } -} - -.invites-show { - padding-top: 20px; - - .two-col { - margin-top: 30px; - } - .col-image { - width: 200px; - img { - width: 200px; - } - } - .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; - } - } -} From 4a2931f43d574fc0c1b937495da869a9170e7528 Mon Sep 17 00:00:00 2001 From: Joe <33972521+hnb-ku@users.noreply.github.com> Date: Fri, 25 May 2018 20:16:38 +0800 Subject: [PATCH 5/5] FEATURE: New login / create account form layout --- app/assets/stylesheets/mobile/login.scss | 218 ++++++++++++++++------- 1 file changed, 158 insertions(+), 60 deletions(-) diff --git a/app/assets/stylesheets/mobile/login.scss b/app/assets/stylesheets/mobile/login.scss index e7b346f9ac7..7be96f1033c 100644 --- a/app/assets/stylesheets/mobile/login.scss +++ b/app/assets/stylesheets/mobile/login.scss @@ -1,62 +1,175 @@ -// style that apply to the login popup +// -webkit- prefix needed for +// flexbox on Safari 8 +// can be removed once support +// for safari 8 is dropped -.btn-social { - width: 150px; - font-size: $font-up-1; - overflow: hidden; - white-space: nowrap; -} - -#login-buttons { - button { - margin: 0 0 5px 0; +// shared styles +// used in both login and +// 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; } - display: inline-block; -} -#login-form { - - label { float: left; display: block; } - textarea, input, select { - font-size: $font-up-1; - clear: left; - margin-top: 0; + .modal-inner-container { + max-width: 350px; + } + + #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; + + button { + margin: 0.15em; + max-width: 50%; + min-width: 158px; + font-size: $font-up-1; + overflow: hidden; + white-space: nowrap; } - td { padding: 4px; } -} + } -a#new-account-link { white-space:nowrap; } + #login-form, + .login-form { + border-top: 1px solid $primary-low; + } -// Create account + form { + display: -webkit-flex; + -webkit-justify-content: center; + display: flex; + justify-content: center; + width: 320px; + } + + table { + width: 100%; + max-width: 90vw; // Iphone 5s + margin: 0 auto; + } + + tr { + &.input td label { + margin-top: 0.75em; + } + + &:not(.instructions) td { + padding: 2px 0 0 0; + } + + &:not(.password-confirmation) { + display: -webkit-flex; + -webkit-flex-direction: column; + display: flex; + flex-direction: column; + } + } + + .tip { + &:not(:empty) + td { + display: none; + } + + &:not(:empty), + &:empty + td { + font-size: $font-down-1; + } + } + + .modal-body input[type="text"], + .modal-body input[type="email"], + .modal-body input[type="password"] { + margin-top: 0; + width: 100%; + box-sizing: border-box; + } + + .modal-footer { + width: 330px; + box-sizing: border-box; + margin: 0 auto; + } -.login-modal, .create-account { .btn-primary { margin-bottom: 10px; float: left; } -} - -$label-width: 85px; -$input-width: 184px; - -.create-account .modal-body { - input[type=text], input[type=email], input[type=password] { - display: inline-block; - margin-bottom: 5px; - margin-top: 10px; - width: $input-width; + .alert.alert-error { + padding: 0.5em 1em; + margin: 0; } - tr.instructions { - label { - color: dark-light-choose($primary-medium, $secondary-medium); + #new-account-link { + white-space: nowrap; + } +} + +// Styles for the +// login modal only +.d-modal.login-modal { + .modal-body { + -webkit-flex-direction: column; + flex-direction: column; + } + + #credentials { + width: 100%; + tr { + display: -webkit-flex; + -webkit-flex-direction: column; + display: flex; + flex-direction: column; } } - tr.input { - td.label { - width: $label-width; + #login-form { + td { + padding: 0; + width: 100%; + margin: 0 auto; + } + + label { + float: left; + display: block; + } + textarea, + input, + select { + font-size: $font-up-1; + clear: left; + margin-top: 0; + } + } + + tr { + td label { + margin-top: 0.75em; + padding: 4px 0; + } + } +} + +// styles for the +// create account +// modal only +.create-account .modal-body { + tr.instructions { + label { + color: dark-light-choose($primary-medium, $secondary-medium); } } } @@ -65,31 +178,17 @@ $input-width: 184px; .user-fields { margin-top: 10px; padding-top: 15px; - border-top: 1px solid #e9e9e9; + border-top: 1px solid $primary-low; } .user-field.confirm { margin-top: 10px; margin-bottom: 10px; } - - .user-field { - label { - width: $label-width; - } - - input[type=text] { - margin-top: 0; - width: $input-width; - } - .controls { - margin-left: $label-width; - } - } } - -.password-reset, .invites-show { +.password-reset, +.invites-show { margin-top: 30px; .col-image { padding-top: 12px; @@ -120,7 +219,6 @@ $input-width: 184px; } } - .invites-show { .col-image { display: none;
- + {{text-field value=loginName type="email" placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off"}} @@ -32,10 +32,10 @@ {{/if}}
- + - {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}}   + {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}}