Make described checkboxes a lot more clear

Instead of a weirdly located "hover over the checkbox to get a
description" message, put the actual description underneath the
checkboxes. This removes the need for javascript for it, and make the
description a lot more readily available.

This applies only to news tags for now, since that's the only use of
described checkboxes, but hopefully it will make those more clear to
people submitting.

In passing, fix how help_text for multi-checkbox field is shown -- it
was previously shown almost as part of the field name itself, making it
very hard to make out. Now make it look like all other form field help
texts.

diff --git a/media/css/main.css b/media/css/main.css
index 0eb6e06c3cf85d9789f71f298300e31eaf2daf64..7e04d221fdc2de7eedaa4c449380eb154e0c6670 100644 (file)
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -1235,6 +1235,11 @@ th.formfieldnamecontainer {
   margin: 0.5em 0;
 }
 
+.form-check div.describedcheckbox {
+  margin-left: 3rem;
+  font-style: italic;
+}
+
 .form-check-input[type=radio] {
   margin-top: .4rem;
 }

diff --git a/media/js/forms.js b/media/js/forms.js
index eba6cca25d08cd61ec9d691152d44f1926bba6ec..cd91c8f2d434c5998ff5db84f8bd6e3524f0a563 100644 (file)
--- a/media/js/forms.js
+++ b/media/js/forms.js
@@ -10,12 +10,6 @@ $(document).ready(function(){
        update_form_toggles($(e));
     });
 
-    $('div.form-group[data-cbtitles]').each(function(idx, e) {
-       var d = $(e).data('cbtitles');
-       $.each(d, function(k,v) {
-           $(e).find('input[type=checkbox][value=' + k + ']').parent('div').prop('title', v);
-       });
-    });
 });
 
 function update_form_toggles(e) {

diff --git a/pgweb/news/migrations/0003_news_tags.py b/pgweb/news/migrations/0003_news_tags.py
index 9235725ce57fba84d24a18b68b5894b37b632d09..80e05aed09f42ee164639a64e5642bcbb2f1204b 100644 (file)
--- a/pgweb/news/migrations/0003_news_tags.py
+++ b/pgweb/news/migrations/0003_news_tags.py
@@ -29,6 +29,6 @@ class Migration(migrations.Migration):
         migrations.AddField(
             model_name='newsarticle',
             name='tags',
-            field=models.ManyToManyField(help_text='Hover mouse over tags to view full description', to='news.NewsTag'),
+            field=models.ManyToManyField(help_text='Select the tags appropriate for this post', to='news.NewsTag'),
         ),
     ]

diff --git a/pgweb/news/models.py b/pgweb/news/models.py
index 4fe6f6407729b908c1f0c1dac633475e9cfe4690..296a11d9417cb724172d43f19399a0b4840f391a 100644 (file)
--- a/pgweb/news/models.py
+++ b/pgweb/news/models.py
@@ -22,7 +22,7 @@ class NewsArticle(models.Model):
     title = models.CharField(max_length=200, null=False, blank=False)
     content = models.TextField(null=False, blank=False)
     tweeted = models.BooleanField(null=False, blank=False, default=False)
-    tags = models.ManyToManyField(NewsTag, blank=False, help_text="Hover mouse over tags to view full description")
+    tags = models.ManyToManyField(NewsTag, blank=False, help_text="Select the tags appropriate for this post")
 
     send_notification = True
     send_m2m_notification = True

diff --git a/templates/base/form_contents.html b/templates/base/form_contents.html
index 0b7904a931b203c75ee360939332bcd92f3587f2..07a8edb94739efaac18ef89b2d95fa970baac64b 100644 (file)
--- a/templates/base/form_contents.html
+++ b/templates/base/form_contents.html
@@ -25,7 +25,7 @@
           </div>
         </div>
       {% else %}{# field|ischeckbox #}
-        <div class="form-group"{%if field|ismultiplecheckboxes%} data-cbtitles="{{described_checkboxes|dictlookup:field.name|json}}"{%endif%}>
+        <div class="form-group">
           <div class="col-lg-12 {%if field|isrequired_error%} alert alert-danger{%endif%}">
             {% if not field|ismultiplecheckboxes %}
               <div class="form-check">
@@ -38,11 +38,16 @@
                 {%endif%}
               </div>
             {% else %}
-              {{ field.label_tag }} {{field.help_text|safe}}
+              {{ field.label_tag }}
+             {%if field.help_text%}<small class="form-text">{{field.help_text|safe}}</small>{%endif%}
               {% for cb in field %}
                 <div class="form-check">
                   {{ cb.tag }}
                   <label for="{{ cb.id_for_label }}" class="form-check-label">{{ cb.choice_label }}</label>
+{%if described_checkboxes|dictlookup:field.name%}
+
+                 <div class="describedcheckbox">{{described_checkboxes|dictlookup:field.name|dictlookup:cb.data.value}}</div>
+{%endif%}
                 </div>
               {% endfor %}
             {% endif %}