Reorganize options page and add some help text

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)
+    no_javascript = models.BooleanField(default=False,
-    notifications = models.BooleanField(default=True)
+                                        help_text="""Disable all JavaScript. Overrides all other JavaScript options.""")
-    click_to_load = models.BooleanField(default=False)
+    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)

brutaldon/static/css/brutaldon-dark.css

@@ -202,3 +202,9 @@ emoji-link
 {
     margin-left: 50%;
 }
+
+.preferences-help
+{
+    max-width: 30em;
+    display: inline-block;
+}

brutaldon/static/css/brutaldon.css

@@ -173,3 +173,9 @@ emoji-link
 {
     margin-left: 50%;
 }
+
+.preferences-help
+{
+    max-width: 30em;
+    display: inline-block;
+}

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">