Move index sort to a <select> at the top of the page.

Subset of Mayhem 3ec442fc25457d4ad653c57223d191565abcf165
with necessary edits as usual.

src/General/Index.coffee

@@ -47,21 +47,6 @@ Index =
       input = label.el.firstChild
       $.on input, 'change', @cb.mode
 
-    sortEntry =
-      el: $.el 'span', textContent: 'Sort by'
-      subEntries: [
-        { el: $.el 'label', <%= html('<input type="radio" name="Index Sort" value="bump"> Bump order') %> }
-        { el: $.el 'label', <%= html('<input type="radio" name="Index Sort" value="lastreply"> Last reply') %> }
-        { el: $.el 'label', <%= html('<input type="radio" name="Index Sort" value="birth"> Creation date') %> }
-        { el: $.el 'label', <%= html('<input type="radio" name="Index Sort" value="replycount"> Reply count') %> }
-        { el: $.el 'label', <%= html('<input type="radio" name="Index Sort" value="filecount"> File count') %> }
-      ]
-    for label in sortEntry.subEntries
-      input = label.el.firstChild
-      input.checked = Conf['Index Sort'] is input.value
-      $.on input, 'change', $.cb.value
-      $.on input, 'change', @cb.sort
-
     repliesEntry = el: UI.checkbox 'Show Replies',          ' Show replies'
     anchorEntry  = el: UI.checkbox 'Anchor Hidden Threads', ' Anchor hidden threads'
     refNavEntry  = el: UI.checkbox 'Refreshed Navigation',  ' Refreshed navigation'
@@ -81,7 +66,7 @@ Index =
       el: $.el 'span',
         textContent: 'Index Navigation'
       order: 98
-      subEntries: [repliesEntry, anchorEntry, refNavEntry, modeEntry, sortEntry]
+      subEntries: [repliesEntry, anchorEntry, refNavEntry, modeEntry]
 
     $.addClass doc, 'index-loading', "#{Conf['Index Mode'].replace /\ /g, '-'}-mode"
     @root     = $.el 'div', className: 'board'
@@ -94,6 +79,7 @@ Index =
     $('.cataloglink a', @navLinks).href = if Conf['Use 4chan X Catalog'] then '#catalog' else "/#{g.BOARD}/catalog"
     @searchInput = $ '#index-search', @navLinks
     @hideLabel   = $ '#hidden-label', @navLinks
+    @selectSort  = $ '#index-sort',   @navLinks
     @currentPage = @getCurrentPage()
     $.on window, 'popstate', @cb.popstate
 
@@ -102,6 +88,9 @@ Index =
     $.on @searchInput, 'input', @onSearchInput
     $.on $('#index-search-clear', @navLinks), 'click', @clearSearch
     $.on $('#hidden-toggle a',    @navLinks), 'click', @cb.toggleHiddenThreads
+    @selectSort.value = Conf[@selectSort.name]
+    $.on @selectSort, 'change', $.cb.value
+    $.on @selectSort, 'change', @cb.sort
 
     @update()
     $.asap (-> $('.board', doc) or d.readyState isnt 'loading'), ->

src/General/css/style.css

@@ -501,6 +501,9 @@ hr + div.center:not(.ad-cnt):not(.topad):not(.middlead):not(.bottomad) {
 #index-search:not([data-searching]) + #index-search-clear {
   display: none;
 }
+#index-sort {
+  float: right;
+}
 .summary {
   text-decoration: none;
 }

src/General/html/Features/Index-navlinks.html

@@ -5,3 +5,11 @@
 <input type="search" id="index-search" class="field" placeholder="Search">
 <a id="index-search-clear" href="javascript:;" title="Clear search">×</a>
 <span id="hidden-label" hidden> &mdash; <span id="hidden-count"></span> <span id="hidden-toggle">[<a href="javascript:;">Show</a>]</span></span>
+<select id="index-sort" name="Index Sort">
+  <option disabled>Index Sort</option>
+  <option value="bump">Bump order</option>
+  <option value="lastreply">Last reply</option>
+  <option value="birth">Creation date</option>
+  <option value="replycount">Reply count</option>
+  <option value="filecount">File count</option>
+</select>