diff options
author | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2012-05-14 12:09:43 -0400 |
---|---|---|
committer | Evgeny Fadeev <evgeny.fadeev@gmail.com> | 2012-05-14 12:09:43 -0400 |
commit | 516c8746c11586c156b20a4faeedc8989843ef78 (patch) | |
tree | e7fd166bc32cb6b795f59bdbe0d9c2d6dcfb3c0c | |
parent | ad755bc881d99e1ff77a8b16cdfd727af47b2219 (diff) | |
download | askbot-516c8746c11586c156b20a4faeedc8989843ef78.tar.gz askbot-516c8746c11586c156b20a4faeedc8989843ef78.tar.bz2 askbot-516c8746c11586c156b20a4faeedc8989843ef78.zip |
completed styling change for the category/tag selector and fixed some usability issues in the tag editor
-rw-r--r-- | askbot/forms.py | 2 | ||||
-rw-r--r-- | askbot/skins/common/media/js/post.js | 16 | ||||
-rw-r--r-- | askbot/skins/common/templates/widgets/edit_post.html | 3 | ||||
-rw-r--r-- | askbot/skins/default/media/style/style.less | 47 | ||||
-rw-r--r-- | askbot/skins/default/templates/widgets/tag_editor.html | 5 | ||||
-rw-r--r-- | askbot/skins/default/templates/widgets/three_column_category_selector.html | 3 |
6 files changed, 54 insertions, 22 deletions
diff --git a/askbot/forms.py b/askbot/forms.py index 252c002e..3fd3d705 100644 --- a/askbot/forms.py +++ b/askbot/forms.py @@ -162,7 +162,7 @@ class TitleField(forms.CharField): ) self.max_length = 255 self.label = _('title') - self.help_text = _('please enter a descriptive title for your question') + self.help_text = _('Please enter a descriptive title for your question') self.initial = '' def clean(self, value): diff --git a/askbot/skins/common/media/js/post.js b/askbot/skins/common/media/js/post.js index 4b9349e8..87e00688 100644 --- a/askbot/skins/common/media/js/post.js +++ b/askbot/skins/common/media/js/post.js @@ -2401,7 +2401,7 @@ TagEditor.prototype.setSelectedTags = function(tag_names) { TagEditor.prototype.addSelectedTag = function(tag_name) { var tag_names = this._hidden_tags_input.val(); this._hidden_tags_input.val(tag_names + ' ' + tag_name); - this._prompt.hide(); + $('.acResults').hide();//a hack to hide the autocompleter }; TagEditor.prototype.removeSelectedTag = function(tag_name) { @@ -2409,9 +2409,6 @@ TagEditor.prototype.removeSelectedTag = function(tag_name) { var idx = $.inArray(tag_name, tag_names); if (idx !== -1) { tag_names.splice(idx, 1) - if (tag_names.length === 0) { - this._prompt.show(); - } } this.setSelectedTags(tag_names); }; @@ -2429,6 +2426,7 @@ TagEditor.prototype.addTag = function(tag_name) { tag.setDeleteHandler(function(){ me.removeSelectedTag(tag_name); tag.dispose(); + $('.acResults').hide();//a hack to hide the autocompleter }); this._tags_container.append(tag.getElement()); this.addSelectedTag(tag_name); @@ -2513,7 +2511,6 @@ TagEditor.prototype.decorate = function(element) { this._element = element; this._hidden_tags_input = element.find('input[name="tags"]');//this one is hidden this._tags_container = element.find('ul.tags'); - this._prompt = element.find('.enter-tags-prompt'); var visible_tags_input = element.find('.new-tags-input'); this._visible_tags_input = visible_tags_input; @@ -2521,7 +2518,9 @@ TagEditor.prototype.decorate = function(element) { var me = this; var tagsAc = new AutoCompleter({ url: askbot['urls']['get_tag_list'], - onItemSelect: function(){ me.completeTagInput() }, + onItemSelect: function(){ + me.completeTagInput(); + }, preloadData: true, minChars: 1, useCache: true, @@ -2531,6 +2530,11 @@ TagEditor.prototype.decorate = function(element) { }); tagsAc.decorate(visible_tags_input); visible_tags_input.keyup(this.getTagInputKeyHandler()); + + element.click(function(e) { + visible_tags_input.focus(); + return false; + }); }; var CategorySelector = function() { diff --git a/askbot/skins/common/templates/widgets/edit_post.html b/askbot/skins/common/templates/widgets/edit_post.html index cb62e674..a589a419 100644 --- a/askbot/skins/common/templates/widgets/edit_post.html +++ b/askbot/skins/common/templates/widgets/edit_post.html @@ -18,8 +18,9 @@ {% if post_type == 'question' %} <div class="form-item"> {% if use_category_selector %} - {% include "widgets/tag_editor.html" %} {% include "widgets/three_column_category_selector.html" %} + <div class="tags-desc">{% trans %}Tags{% endtrans %}</div> + {% include "widgets/tag_editor.html" %} {% else %} {% if tags_are_required %} <label for=id_tags"> diff --git a/askbot/skins/default/media/style/style.less b/askbot/skins/default/media/style/style.less index 7d62d1b9..fe0d6e34 100644 --- a/askbot/skins/default/media/style/style.less +++ b/askbot/skins/default/media/style/style.less @@ -1373,6 +1373,14 @@ ul#related-tags li { margin-bottom: 5px; } +.ask-page { + .title-desc, .tags-desc { + color: @info-text; + font-style: italic; + font-size: 16px; + } +} + #fmanswer input.submit, .ask-page input.submit, .edit-question-page input.submit { @@ -3540,32 +3548,53 @@ textarea.tipped-input { /* category selector */ .category-selector { + border-spacing: 0; + ul.select-box { + height: 150px; + width: 235px; + overflow: auto; + border: #ccc 3px solid; + } td { vertical-align: top; } li { position: relative; - width: 232px; - color: #525252; + color: @info-text; } li.selected.tree:after { - content: ">"; + content: ">>"; position: absolute; right: 5px; font-weight: bold; color: #C09853; } + th { + color: @info-text; + font-style: italic; + font-size: 16px; + font-weight: normal; + padding-top: 5px; + text-align: left; + } } /* tag editor */ .tag-editor { - height: 25px; - .enter-tags-prompt { - margin: 0px 10px; - color: #525252; - } + height: 36px; + border: #ccc 3px solid; + padding-left: 8px; ul.tags { - margin: 15px 0 0 5px; + margin: 7px 0 0 0; + li { + margin-top: 1px; + } + } + input.new-tags-input { + line-height: 16px; + font-size: 15px; + font-color: @info-text; + border-style: none; } } diff --git a/askbot/skins/default/templates/widgets/tag_editor.html b/askbot/skins/default/templates/widgets/tag_editor.html index d834f6ca..d6befb02 100644 --- a/askbot/skins/default/templates/widgets/tag_editor.html +++ b/askbot/skins/default/templates/widgets/tag_editor.html @@ -18,11 +18,6 @@ value="{% if tag_names %}{{tag_names|join(' ')}}{% endif %}" /> <span class="form-error" style="display:block;"></span> - <p class="enter-tags-prompt" - {% if tag_names %}style="display:none"{% endif %} - > - {% trans %}Please label your question with the categories below:{% endtrans %} - </p> {# tag input is hidden because we want to edit the list visually we also want to eventually allow multiword tags, which are diff --git a/askbot/skins/default/templates/widgets/three_column_category_selector.html b/askbot/skins/default/templates/widgets/three_column_category_selector.html index 2eb9d728..9c7b7e6d 100644 --- a/askbot/skins/default/templates/widgets/three_column_category_selector.html +++ b/askbot/skins/default/templates/widgets/three_column_category_selector.html @@ -1,5 +1,8 @@ {# just a skeleton for the category selector - filled by js #} <table class="category-selector"> + <thead> + <th colspan="3">{% trans %}Categorize your question using this tag selector or entering text in tag box{% endtrans %}</th> + </thead> <tbody> <tr> <td><ul class="select-box cat-col-0"></ul></td> |