Adjustments and fixes to updated login design

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}}
         <div class="login-form">
           <form>
@@ -95,10 +99,7 @@
           </form>
         </div>
       {{/if}}
-      
-      {{#unless hasAuthOptions}}
-        {{login-buttons externalLogin="externalLogin"}}
-      {{/unless}}
+
     {{/d-modal-body}}
 
     {{#if showCreateForm}}

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
 

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;

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;

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;

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 {

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 {