Merge pull request #439 from appirio-tech/feature/tom-settings-v2

changes round 2

Author: tladendo

app/settings/edit-profile/edit-profile.jade

@@ -17,7 +17,7 @@
             .buttons
               button.file-upload.tc-btn.tc-btn-primary.tc-btn-s
                 span Change Image
-                input(type="file", name="image", on-file-change)
+                input(type="file", name="image", on-file-change="on-file-change")
 
               .file-delete
                 button.tc-btn.tc-btn-secondary.tc-btn-s(ng-click="vm.deleteImage()", type="button") Delete
@@ -43,8 +43,9 @@
 
         .bio
           .form-label(style="width: 100%;") short bio
-            span(style="float:right;") {{vm.userData.description.length || 0}}/256
-          textarea.tc-input(name="description", ng-model="vm.userData.description", data-ng-trim="false", maxlength="256")
+            span.char-count {{vm.userData.description.length || 0}}
+              span.grey  / 256
+          textarea.tc-input(name="description", ng-model="vm.userData.description", data-ng-trim="false", maxlength="256", placeholder="E.g., I'm JS architect interested in creating new data interchange formats. I love sci-fi and riding my motorcycle.")
 
     .settings-section.tracks
       .section-info

assets/css/settings/edit-profile.scss

@@ -11,7 +11,8 @@
       border-radius: 50%;
       border: 1px solid #d1d3d4;
       margin-right: 20px;
-      width: 100px;
+      width: 120px;
+      padding: 2px;
     }
 
     .upload-image {

assets/css/settings/settings.scss

@@ -41,6 +41,7 @@
     font-size: 15px;
     font-family: 'Merriweather Sans';
     font-weight: 400;
+    padding-left: 15px;
   }
   input:focus, textarea:focus {
     outline: 1px solid #4cb5ff;
@@ -178,6 +179,15 @@
           color: #0096ff;
           float: right;
         }
+
+        .char-count {
+          font-family: 'Source Sans Pro';
+          float: right;
+        }
+
+        .grey {
+          color: #a3a3ae;
+        }
       }
       .form-field {
         @include form-field;