Improve settings UI

assets/javascripts/templates/pages/settings_tmpl.coffee

@@ -8,16 +8,17 @@ app.templates.settingsPage = (settings) -> """
       <label class="_settings-label">
         <input type="checkbox" name="dark" value="1"#{if settings.dark then ' checked' else ''}>Enable dark theme
       </label>
-      <label class="_settings-label _settings-max-width">
+      <label class="_settings-label _setting-max-width">
         <input type="checkbox" name="layout" value="_max-width"#{if settings['_max-width'] then ' checked' else ''}>Enable fixed-width layout
       </label>
-      <label class="_settings-label">
+      <label class="_settings-label _hide-on-mobile">
         <input type="checkbox" name="layout" value="_sidebar-hidden"#{if settings['_sidebar-hidden'] then ' checked' else ''}>Automatically hide and show the sidebar
+        <small>Tip: drag the edge of the sidebar to resize it.</small>
       </label>
     </div>
   </div>
 
-  <div class="_settings-fieldset">
+  <div class="_settings-fieldset _hide-on-mobile">
     <h2 class="_settings-legend">Scrolling:</h2>
 
     <div class="_settings-inputs">
@@ -31,11 +32,6 @@ app.templates.settingsPage = (settings) -> """
     </div>
   </div>
 
-  <div class="_settings-fieldset">
-    <h2 class="_settings-legend">Advanced:</h2>
-
-    <div class="_settings-inputs">
-      <a href="#" class="_settings-link" data-behavior="reset">Reset all settings and data</a>
-    </div>
-  </div>
+  <p>
+    <a href="#" class="_reset-link" data-behavior="reset">Reset all settings and data</a>
 """

assets/stylesheets/components/_mobile.scss

@@ -6,6 +6,8 @@
   font-size: 100%;
   background: $contentBackground;
 
+  ._hide-on-mobile { display: none; }
+
   // Layout
 
   body { -ms-overflow-style: -ms-autohiding-scrollbar; }
@@ -36,6 +38,8 @@
     box-shadow: none;
   }
 
+  // Settings
+
   ._settings { position: relative; }
   ._settings-tabs { display: block; }
   ._header ._settings-btn { width: auto; }

assets/stylesheets/components/_settings.scss

@@ -66,15 +66,11 @@
 }
 
 @media (max-width: $maxWidth) {
-  ._settings-max-width { display: none; }
+  ._setting-max-width { display: none; }
 }
 
-._settings-link {
-  display: inline-block;
-  vertical-align: top;
-  margin-left: .375rem;
-
-  &[data-behavior="reset"] { color: $textColorRed; }
+._reset-link {
+  color: $textColorRed;
 }
 
 //