From fee3746ea02051b3ec47646f92a91a20e1d263d2 Mon Sep 17 00:00:00 2001
From: Magnus Hagander <magnus@hagander.net>
Date: Sat, 4 Jul 2020 14:53:04 +0200
Subject: [PATCH] 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.
---
 media/css/main.css                      | 5 +++++
 media/js/forms.js                       | 6 ------
 pgweb/news/migrations/0003_news_tags.py | 2 +-
 pgweb/news/models.py                    | 2 +-
 templates/base/form_contents.html       | 9 +++++++--
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/media/css/main.css b/media/css/main.css
index 0eb6e06c..7e04d221 100644
--- 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 eba6cca2..cd91c8f2 100644
--- 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 9235725c..80e05aed 100644
--- 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 4fe6f640..296a11d9 100644
--- 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 0b7904a9..07a8edb9 100644
--- 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 %}
-- 
2.39.5