completed styling change for the category/tag selector and fixed some usability issues in the tag editor

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>