From de5b02170dff129b420b6153f0090ca668f5a23a Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Tue, 1 Oct 2019 18:58:56 -0600
Subject: [PATCH] Organize Settings page into sections/categories

---
 tildes/scss/modules/_settings.scss      |  20 +++-
 tildes/scss/themes/_theme_base.scss     |   9 ++
 tildes/tildes/templates/settings.jinja2 | 126 ++++++++++++++----------
 3 files changed, 103 insertions(+), 52 deletions(-)

diff --git a/tildes/scss/modules/_settings.scss b/tildes/scss/modules/_settings.scss
index 24fa8ad..fb28299 100644
--- a/tildes/scss/modules/_settings.scss
+++ b/tildes/scss/modules/_settings.scss
@@ -7,7 +7,23 @@
   }
 
   // Nested settings list
-  ul li {
-    margin-bottom: unset;
+  ul {
+    margin-top: 0;
+
+    li {
+      margin-bottom: unset;
+      margin-top: 0;
+    }
+  }
+}
+
+.settings-section {
+  .settings-list {
+    margin-left: 1rem;
+  }
+
+  h2 {
+    font-size: 1rem;
+    border-bottom: 1px solid;
   }
 }
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index 2065f44..6332ea1 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -82,6 +82,15 @@
     border-color: map-get($theme, "border");
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    border-color: map-get($theme, "border");
+  }
+
   hr {
     border-color: map-get($theme, "border");
   }
diff --git a/tildes/tildes/templates/settings.jinja2 b/tildes/tildes/templates/settings.jinja2
index 2c74390..bfd9d58 100644
--- a/tildes/tildes/templates/settings.jinja2
+++ b/tildes/tildes/templates/settings.jinja2
@@ -8,6 +8,9 @@
 {% block main_heading %}User settings{% endblock %}
 
 {% block content %}
+<section class="settings-section">
+  <h2>Display settings</h2>
+
   <ul class="settings-list">
     <li>
       <label for="theme">Choose a display theme:</label>
@@ -57,47 +60,20 @@
         </div>
       </form>
     </li>
-
     <li>
-      <form
-        name="interact-mark-notifications-read"
-        autocomplete="off"
-        data-ic-patch-to="{{ request.route_url('ic_user', username=request.user.username) }}"
-      >
-        <div class="form-group">
-          <label class="form-checkbox">
-            <input
-              type="checkbox"
-              id="interact_mark_notifications_read"
-              name="interact_mark_notifications_read"
-              data-js-autosubmit-on-change
-              {% if request.user.interact_mark_notifications_read %}checked{% endif %}
-            >
-            <i class="form-icon"></i> Automatically mark notifications read when you interact with the source comment (by voting, labeling, replying, etc.)
-          </label>
-        </div>
-      </form>
+      <a href="/settings/filters">Define topic tag filters</a>
+      <div class="text-small text-secondary">Define a list of topic tags to filter out of listings by default</div>
     </li>
+  </ul>
+</section>
+
+<section class="settings-section">
+  <h2>Site behavior settings</h2>
 
+  <ul class="settings-list">
     <li>
-      <form
-        name="auto-mark-notifications-read"
-        autocomplete="off"
-        data-ic-patch-to="{{ request.route_url('ic_user', username=request.user.username) }}"
-      >
-        <div class="form-group">
-          <label class="form-checkbox">
-            <input
-              type="checkbox"
-              id="auto_mark_notifications_read"
-              name="auto_mark_notifications_read"
-              data-js-autosubmit-on-change
-              {% if request.user.auto_mark_notifications_read %}checked{% endif %}
-            >
-            <i class="form-icon"></i> Automatically mark all notifications read when you view the Unread Notifications page
-          </label>
-        </div>
-      </form>
+      <a href="/settings/comment_visits">Configure marking new comments (currently {{ 'enabled' if request.user.track_comment_visits else 'disabled' }})</a>
+      <div class="text-small text-secondary">Marks new comments in topics since your last visit, and which topics have any</div>
     </li>
 
     <li>
@@ -153,11 +129,71 @@
         </ul>
       </form>
     </li>
-    <li><a href="/settings/password_change">Change your password</a></li>
+  </ul>
+</section>
+
+<section class="settings-section">
+  <h2>Notification settings</h2>
+
+  <ul class="settings-list">
+    <li>
+      <form
+        name="interact-mark-notifications-read"
+        autocomplete="off"
+        data-ic-patch-to="{{ request.route_url('ic_user', username=request.user.username) }}"
+      >
+        <div class="form-group">
+          <label class="form-checkbox">
+            <input
+              type="checkbox"
+              id="interact_mark_notifications_read"
+              name="interact_mark_notifications_read"
+              data-js-autosubmit-on-change
+              {% if request.user.interact_mark_notifications_read %}checked{% endif %}
+            >
+            <i class="form-icon"></i> Automatically mark notifications read when you interact with the source comment (by voting, labeling, replying, etc.)
+          </label>
+        </div>
+      </form>
+    </li>
+
+    <li>
+      <form
+        name="auto-mark-notifications-read"
+        autocomplete="off"
+        data-ic-patch-to="{{ request.route_url('ic_user', username=request.user.username) }}"
+      >
+        <div class="form-group">
+          <label class="form-checkbox">
+            <input
+              type="checkbox"
+              id="auto_mark_notifications_read"
+              name="auto_mark_notifications_read"
+              data-js-autosubmit-on-change
+              {% if request.user.auto_mark_notifications_read %}checked{% endif %}
+            >
+            <i class="form-icon"></i> Automatically mark all notifications read when you view the Unread Notifications page
+          </label>
+        </div>
+      </form>
+    </li>
+
+  </ul>
+</section>
+
+<section class="settings-section">
+  <h2>Account settings</h2>
+
+  <ul class="settings-list">
+    <li>
+      <a href="/settings/bio">Edit your user bio</a>
+      <div class="text-small text-secondary">Tell others about yourself with a short bio on your user page</div>
+    </li>
     <li>
       <a href="/settings/account_recovery">Set up account recovery</a>
       <div class="text-small text-secondary">To be able to regain access in case of lost password, compromise, etc.</div>
     </li>
+    <li><a href="/settings/password_change">Change your password</a></li>
     <li>
       {% if not request.user.two_factor_enabled %}
         <a href="/settings/two_factor">Enable two-factor authentication</a>
@@ -167,17 +203,7 @@
         <div class="text-small text-secondary">Disabling two-factor authentication requires a code from your device or a backup code.</div>
       {% endif %}
     </li>
-    <li>
-      <a href="/settings/comment_visits">Configure marking new comments (currently {{ 'enabled' if request.user.track_comment_visits else 'disabled' }})</a>
-      <div class="text-small text-secondary">Marks new comments in topics since your last visit, and which topics have any</div>
-    </li>
-    <li>
-      <a href="/settings/filters">Define topic tag filters</a>
-      <div class="text-small text-secondary">Define a list of topic tags to filter out of listings by default</div>
-    </li>
-    <li>
-      <a href="/settings/bio">Edit your user bio</a>
-      <div class="text-small text-secondary">Tell others about yourself with a short bio on your user page</div>
-    </li>
   </ul>
+</section>
+
 {% endblock %}