Show character limit below blog description textarea

closes #1970

core/client/assets/sass/layouts/settings.scss

@@ -309,6 +309,17 @@
             @include breakpoint(550px) { padding: 0 15px 40px; }
         }
 
+        .description-container, .bio-container {
+            max-width: 370px;
+        }
+
+        .word-count {
+            margin-right: 30px;
+            float: right;
+            font-weight: bold;
+            color: darken($brown, 5%);
+        }
+
     }//.settings-content
 
 }//.settings

core/client/assets/sass/layouts/users.scss

@@ -242,19 +242,4 @@
         margin: -30px 0 0 0;
     }
 
-    .bio-container {
-        max-width: 370px;
-    }
-
-    .bio-desc {
-        display: inline-block;
-    }
-
-    .word-count {
-        margin-right: 30px;
-        float: right;
-        font-weight: bold;
-        color: darken($brown, 5%);
-    }
-
 } //.settings

core/client/tpl/settings/general.hbs

@@ -16,10 +16,14 @@
                 <p>The name of your blog</p>
             </div>
 
-            <div class="form-group">
+            <div class="form-group description-container">
                 <label for="blog-description">Blog Description</label>
                 <textarea id="blog-description">{{description}}</textarea>
-                <p>Describe what your blog is about</p>
+                <p>
+                    Describe what your blog is about
+                    <span class="word-count">0</span>
+                </p>
+
             </div>
         </fieldset>
             <div class="form-group">

core/client/tpl/settings/user-profile.hbs

@@ -54,8 +54,10 @@
             <div class="form-group bio-container">
                 <label for="user-bio">Bio</label>
                 <textarea id="user-bio">{{bio}}</textarea>
-                <p class="bio-desc">Write about you, in 200 characters or less.</p>
+                <p>
-                <span class="word-count">0</span>
+                    Write about you, in 200 characters or less.
+                    <span class="word-count">0</span>
+                </p>
             </div>
 
             <hr />

core/client/views/settings.js

@@ -235,8 +235,23 @@
         templateName: 'settings/general',
 
         afterRender: function () {
-            this.$('#permalinks').prop('checked', this.model.get('permalinks') === '/:slug/' ? false : true);
+            var self = this;
+
+            this.$('#permalinks').prop('checked', this.model.get('permalinks') !== '/:slug/');
             this.$('.js-drop-zone').upload();
+
+            Countable.live(document.getElementById('blog-description'), function (counter) {
+                var descriptionContainer = self.$('.description-container .word-count');
+                if (counter.all > 180) {
+                    descriptionContainer.css({color: "#e25440"});
+                } else {
+                    descriptionContainer.css({color: "#9E9D95"});
+                }
+
+                descriptionContainer.text(200 - counter.all);
+
+            });
+
             Settings.Pane.prototype.afterRender.call(this);
         }
     });