diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index a50a3b8316..30f235d51a 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/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 diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss index 7f5d6d0693..4d45c1f6c8 100644 --- a/core/client/assets/sass/layouts/users.scss +++ b/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 diff --git a/core/client/tpl/settings/general.hbs b/core/client/tpl/settings/general.hbs index 3612a750a7..55842a45d2 100644 --- a/core/client/tpl/settings/general.hbs +++ b/core/client/tpl/settings/general.hbs @@ -16,10 +16,14 @@

The name of your blog

-
+
-

Describe what your blog is about

+

+ Describe what your blog is about + 0 +

+
diff --git a/core/client/tpl/settings/user-profile.hbs b/core/client/tpl/settings/user-profile.hbs index 3d6c313415..d543529f87 100644 --- a/core/client/tpl/settings/user-profile.hbs +++ b/core/client/tpl/settings/user-profile.hbs @@ -54,8 +54,10 @@
-

Write about you, in 200 characters or less.

- 0 +

+ Write about you, in 200 characters or less. + 0 +


diff --git a/core/client/views/settings.js b/core/client/views/settings.js index 7872b21e4a..9121b8c012 100644 --- a/core/client/views/settings.js +++ b/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); } });