Merge pull request #5875 from hnb-ku/master

FEATURE: New design for the login / create account forms
2018-05-25 20:28:08 +08:00 · 2018-05-25 20:28:08 +08:00 · 0ca2a1ce92
parent a8901efafe 4a2931f43d
commit 0ca2a1ce92
5 changed files with 357 additions and 153 deletions
--- a/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/modal/login.hbs
@ -14,7 +14,7 @@
          <table>
            <tr>
              <td>
-                <label for='login-account-name'>{{i18n 'login.username'}}&nbsp;</label>
+                <label for='login-account-name'>{{i18n 'login.username'}}</label>
              </td>
              <td>
                {{text-field value=loginName type="email" placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off"}}
@ -32,10 +32,10 @@
            {{/if}}
            <tr>
              <td>
-                <label for='login-account-password'>{{i18n 'login.password'}}&nbsp;</label>
+                <label for='login-account-password'>{{i18n 'login.password'}}</label>
              </td>
              <td>
-                {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}} &nbsp;
+                {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}}
              </td>
            </tr>
            <tr>
--- 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}}
-        <div>
+        <div class="login-form">
          <form>
          <table>

@ -15,12 +11,13 @@
                <td class="label"><label for='new-account-email'>{{i18n 'user.email.title'}}</label></td>
                <td>
                {{input type="email" value=accountEmail id="new-account-email" disabled=emailValidated name="email" autofocus="autofocus"}}
-                &nbsp;{{input-tip validation=emailValidation}}
                </td>
          </tr>
+          
          <tr class="instructions create-account-email">
            <td></td>
-            <td><label>{{i18n 'user.email.instructions'}}</label></td>
+                {{input-tip validation=emailValidation}}
+                <td><label>{{i18n 'user.email.instructions'}}</label></td>
          </tr>

          {{#if usernameRequired}}
@ -28,11 +25,11 @@
                  <td class="label"><label for='new-account-username'>{{i18n 'user.username.title'}}</label></td>
                  <td>
                  {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}}
-                  &nbsp;{{input-tip validation=usernameValidation id="username-validation"}}
                  </td>
            </tr>
            <tr class="instructions">
              <td></td>
+              {{input-tip validation=usernameValidation id="username-validation"}}
              <td><label>{{i18n 'user.username.instructions'}}</label></td>
            </tr>
          {{/if}}
@ -43,11 +40,12 @@
                <label for='new-account-name'>{{i18n 'user.name.title'}}</label>
              </td>
              <td>
-                {{text-field value=accountName id="new-account-name"}}&nbsp;{{input-tip validation=nameValidation}}
+                {{text-field value=accountName id="new-account-name"}}
              </td>
            </tr>
            <tr class="instructions">
              <td></td>
+              {{input-tip validation=nameValidation}}
              <td><label>{{nameInstructions}}</label></td>
            </tr>
          {{/if}}
@ -63,14 +61,14 @@
                <td class="label"><label for='new-account-password'>{{i18n 'user.password.title'}}</label></td>
                <td>
                {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}}
-                &nbsp;{{input-tip validation=passwordValidation}}
                </td>
            </tr>
            <tr class="instructions">
              <td></td>
+              {{input-tip validation=passwordValidation}}
              <td>
                <label>{{passwordInstructions}}</label>
-                <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
+                <div class="caps-lock-warning {{unless capsLockOn 'hidden'}}">
                  {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
              </td>
            </tr>
@ -97,6 +95,10 @@
          </form>
        </div>
      {{/if}}
+      
+      {{#unless hasAuthOptions}}
+        {{login-buttons externalLogin="externalLogin"}}
+      {{/unless}}
    {{/d-modal-body}}

    {{#if showCreateForm}}
--- 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}}
      <form id='login-form' method='post'>
@ -30,7 +23,7 @@
            </tr>
            <tr>
              <td></td>
-              <td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div></td>
+              <td><div class="caps-lock-warning {{unless capsLockOn 'hidden'}}">{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div></td>
              <td></td>
            </tr>
          </table>
@ -42,6 +35,14 @@
    {{/if}}
    {{authMessage}}
    <div id='login-alert' class={{alertClass}}>{{alert}}</div>
+    
+    {{#if showLoginButtons}}
+      {{login-buttons
+        canLoginLocalWithEmail=canLoginLocalWithEmail
+        processingEmailLink=processingEmailLink
+        emailLogin='emailLogin'
+        externalLogin='externalLogin'}}
+    {{/if}}
  {{/d-modal-body}}

  <div class="modal-footer">
--- 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;
-    }
-  }
-}
--- 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;