Show character limit below blog description textarea

closes #1970
This commit is contained in:
Jakob Gillich 2014-01-17 21:34:43 +01:00
parent c82d2eadba
commit 02473ce852
5 changed files with 37 additions and 20 deletions

View File

@ -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

View File

@ -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

View File

@ -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">

View File

@ -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>
<span class="word-count">0</span>
<p>
Write about you, in 200 characters or less.
<span class="word-count">0</span>
</p>
</div>
<hr />

View File

@ -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);
}
});