0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00

Merge pull request #1972 from jgillich/character-limit

Show character limit below blog description textarea
This commit is contained in:
Hannah Wolfe 2014-01-27 14:32:52 -08:00
commit 1f32428296
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

@ -232,8 +232,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);
}
});