From 20818fca961bcc0b35bb96aa0d279755f1aeb4ac Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Tue, 9 Oct 2018 14:45:10 -0400
Subject: [PATCH] Reorganize options page and add some help text

---
 brutaldon/models.py                     |  9 ++++---
 brutaldon/static/css/brutaldon-dark.css |  6 +++++
 brutaldon/static/css/brutaldon.css      |  6 +++++
 brutaldon/templates/setup/settings.html | 34 +++++++++++++++++--------
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/brutaldon/models.py b/brutaldon/models.py
index 69b8b21..e540e98 100644
--- a/brutaldon/models.py
+++ b/brutaldon/models.py
@@ -30,9 +30,12 @@ class Preference(models.Model):
     filter_boosts = models.BooleanField(default=False)
     timezone = models.CharField(max_length=80, blank=True, null=True,
                                 choices=timezones, default='UTC')
-    no_javascript = models.BooleanField(default=False)
-    notifications = models.BooleanField(default=True)
-    click_to_load = models.BooleanField(default=False)
+    no_javascript = models.BooleanField(default=False,
+                                        help_text="""Disable all JavaScript. Overrides all other JavaScript options.""")
+    notifications = models.BooleanField(default=True,
+                                        help_text="""Display live notifications in header.""")
+    click_to_load = models.BooleanField(default=False,
+                                        help_text="""Click to load more toots in the same page, rather than using pagination.""")
 
 class Account(models.Model):
     username = models.EmailField(unique=True)
diff --git a/brutaldon/static/css/brutaldon-dark.css b/brutaldon/static/css/brutaldon-dark.css
index 7e3fb69..c72598b 100644
--- a/brutaldon/static/css/brutaldon-dark.css
+++ b/brutaldon/static/css/brutaldon-dark.css
@@ -202,3 +202,9 @@ emoji-link
 {
     margin-left: 50%;
 }
+
+.preferences-help
+{
+    max-width: 30em;
+    display: inline-block;
+}
diff --git a/brutaldon/static/css/brutaldon.css b/brutaldon/static/css/brutaldon.css
index 6c6fbe0..5ee102a 100644
--- a/brutaldon/static/css/brutaldon.css
+++ b/brutaldon/static/css/brutaldon.css
@@ -173,3 +173,9 @@ emoji-link
 {
     margin-left: 50%;
 }
+
+.preferences-help
+{
+    max-width: 30em;
+    display: inline-block;
+}
diff --git a/brutaldon/templates/setup/settings.html b/brutaldon/templates/setup/settings.html
index f3421ca..21d8fb7 100644
--- a/brutaldon/templates/setup/settings.html
+++ b/brutaldon/templates/setup/settings.html
@@ -6,6 +6,8 @@
         <h1 class="title">Settings</h1>
         <form method="post" action="{% url "settings" %}" >
             {% csrf_token %}
+
+            <h2 class="subtitle">General Options</h2>
             <div class="field">
                 <label class="label" for="theme">{{ form.theme.label }}</label>
                 <div class="control has-icons-left">
@@ -17,6 +19,18 @@
                 </div>
             </div>
 
+            <div class="field">
+                <label class="label" for="timezone">{{ form.timezone.label }}</label>
+                <div class="control has-icons-left">
+                    <div class="select">
+                        {% render_field form.timezone class+="select" %}
+                        <span class="icon is-small is-left">
+                            <span class="fa fa-clock-o"></span>
+                    </div>
+                </div>
+            </div>
+
+            <h2 class="subtitle">Timeline Options</h2>
             <div class="field">
                 <label class="label checkbox">
                     {% render_field form.filter_replies %}
@@ -29,22 +43,16 @@
                     {{ form.filter_boosts.label  }}
                 </label>
             </div>
-            <div class="field">
-                <label class="label" for="timezone">{{ form.timezone.label }}</label>
-                <div class="control has-icons-left">
-                    <div class="select">
-                        {% render_field form.timezone class+="select" %}
-                        <span class="icon is-small is-left">
-                            <span class="fa fa-clock-o"></span>
-                    </div>
-                </div>
-            </div>
 
+            <h2 class="subtitle">JavaScript Options</h2>
             <div class="field">
                 <label class="label checkbox" for="no_javascript">
                     {% render_field form.no_javascript class+="checkbox" %}
                     {{ form.no_javascript.label }}
                 </label>
+                <p class="notification is-info preferences-help">
+                    {{ form.no_javascript.help_text }}
+                </p>
             </div>
 
             <div class="field">
@@ -52,6 +60,9 @@
                     {% render_field form.notifications class+="checkbox" %}
                     {{ form.notifications.label }}
                 </label>
+                <p class="notification is-info preferences-help">
+                    {{ form.notifications.help_text }}
+                </p>
             </div>
 
             <div class="field">
@@ -59,6 +70,9 @@
                     {% render_field form.click_to_load class+="checkbox" %}
                     {{ form.click_to_load.label }}
                 </label>
+                <p class="notification is-info preferences-help">
+                        {{ form.click_to_load.help_text }}
+                    </p>
             </div>
 
             <div class="field">