Add a close button to the Settings dialog, for small screens.

css/style.css

@@ -89,6 +89,8 @@ a[href="javascript:;"] {
 
 /* Header */
 .fourchan-x body {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   margin-top: 2em;
 }
 .fourchan-x #boardNavDesktop,
@@ -220,6 +222,10 @@ a[href="javascript:;"] {
 #settings > nav a {
   text-decoration: underline;
 }
+#settings > nav a.close {
+  text-decoration: none;
+  padding: 2px;
+}
 .sections-list {
   -webkit-flex: 1;
   flex: 1;
@@ -243,7 +249,7 @@ a[href="javascript:;"] {
   padding: 8px;
 }
 .section-main li {
-  padding-left: 10px;
+  padding-left: 4px;
 }
 .section-main label {
   text-decoration: underline;

src/config.coffee

@@ -14,7 +14,7 @@ Config =
     Filtering:
       'Anonymize':                    [false, 'Turn everyone Anonymous.']
       'Filter':                       [true,  'Self-moderation placebo.']
-      'Recursive Hiding':             [true,  'Filter replies of filtered posts, recursively.']
+      'Recursive Hiding':             [true,  'Hide replies of hidden posts, recursively.']
       'Thread Hiding':                [true,  'Hide entire threads.']
       'Reply Hiding':                 [true,  'Hide single replies.']
       'Thread/Reply Hiding Buttons':  [true,  'Make buttons to hide threads / replies, in addition to menu links.']

src/features.coffee

@@ -145,7 +145,7 @@ Settings =
     $.on d, 'AddSettingsSection', Settings.addSection
 
     unless $.get 'previousversion'
-      $.set 'previousversion', '<%= version %>'
+      $.set 'previousversion', g.VERSION
       $.on d, '4chanXInitFinished', Settings.open
 
     Settings.addSection 'Main',     Settings.main
@@ -171,7 +171,8 @@ Settings =
           <div class=credits>
             <a href='<%= meta.page %>' target=_blank><%= meta.name %></a> |
             <a href='<%= meta.repo %>blob/<%= meta.mainBranch %>/changelog' target=_blank><%= version %></a> |
-            <a href='<%= meta.repo %>issues' target=_blank>Issues</a>
+            <a href='<%= meta.repo %>issues' target=_blank>Issues</a> |
+            <a href=javascript:; class=close title=Close>×</a>
           </div>
         </nav>
         <hr>
@@ -179,7 +180,7 @@ Settings =
       </div>
     """
 
-    Settings.dialog = dialog = $.el 'div',
+    Settings.dialog = overlay = $.el 'div',
       id: 'overlay'
       innerHTML: html
 
@@ -192,14 +193,15 @@ Settings =
       links.push link, $.tn ' | '
     links.pop()
     links[0].click()
-    $.add $('.sections-list', dialog), links
+    $.add $('.sections-list', overlay), links
 
-    $.on dialog, 'click', Settings.close
+    $.on $('.close', overlay), 'click', Settings.close
-    $.on dialog.firstElementChild, 'click', (e) -> e.stopPropagation()
+    $.on overlay,              'click', Settings.close
+    $.on overlay.firstElementChild, 'click', (e) -> e.stopPropagation()
 
     d.body.style.width = "#{d.body.clientWidth}px"
     $.addClass d.body, 'unscroll'
-    $.add d.body, dialog
+    $.add d.body, overlay
   close: ->
     return unless Settings.dialog
     d.body.style.removeProperty 'width'
@@ -215,8 +217,7 @@ Settings =
   openSection: ->
     section = $ 'section', Settings.dialog
     section.innerHTML = null
-    section.className = null
+    section.className = "section-#{@title.toLowerCase().replace /\s+/g, '-'}"
-    $.addClass section, "section-#{@title.toLowerCase().replace /\s+/g, '-'}"
     @open section, g
 
   main: (section) ->
@@ -240,7 +241,7 @@ Settings =
         $.log post
         hiddenNum++
     li = $.el 'li',
-      innerHTML: "<button>Hidden: #{hiddenNum}</button> <span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/."
+      innerHTML: "<button>Hidden: #{hiddenNum}</button><span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/."
     $.on $('button', li), 'click', ->
       @textContent = 'Hidden: 0'
       $.delete "hiddenThreads.#{g.BOARD}"

src/qr.coffee

@@ -532,7 +532,7 @@ QR =
 
   dialog: ->
     QR.el = UI.dialog 'qr', 'top:0;right:0;', """
-    <div class=move>Quick Reply <input type=checkbox id=autohide title=Auto-hide><span> <a class=close title=Close>×</a></span></div>
+    <div class=move>Quick Reply <input type=checkbox id=autohide title=Auto-hide><span> <a href=javascript:; class=close title=Close>×</a></span></div>
     <form>
       <div class=persona><input id=dump type=button title='Dump list' value=+><input name=name title=Name placeholder=Name class=field size=1><input name=email title=E-mail placeholder=E-mail class=field size=1><input name=sub title=Subject placeholder=Subject class=field size=1></div>
       <div id=replies><div id=repliesList><a id=addReply href=javascript:; title="Add a reply">+</a></div></div>