Make described checkboxes a lot more clear

mhagander · mhagander · commit fee3746ea020 · 2020-07-04T14:54:06.000+02:00
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 %}

Original file line number	Diff line number	Diff line change
`@@ -1235,6 +1235,11 @@ th.formfieldnamecontainer {`
`1235`	`1235`	`margin: 0.5em 0;`
`1236`	`1236`	`}`
`1237`	`1237`
	`1238`	`+.form-check div.describedcheckbox {`
	`1239`	`+ margin-left: 3rem;`
	`1240`	`+ font-style: italic;`
	`1241`	`+}`
	`1242`	`+`
`1238`	`1243`	`.form-check-input[type=radio] {`
`1239`	`1244`	`margin-top: .4rem;`
`1240`	`1245`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,6 @@ class Migration(migrations.Migration):`
`29`	`29`	`migrations.AddField(`
`30`	`30`	`model_name='newsarticle',`
`31`	`31`	`name='tags',`
`32`		`- field=models.ManyToManyField(help_text='Hover mouse over tags to view full description', to='news.NewsTag'),`
	`32`	`+ field=models.ManyToManyField(help_text='Select the tags appropriate for this post', to='news.NewsTag'),`
`33`	`33`	`),`
`34`	`34`	`]`