Separate icons and "stats" in the shortcuts element

src/General/Header.coffee

@@ -53,7 +53,7 @@ Header =
     $.on d, 'CreateNotification', @createNotification
 
     @enableDesktopNotifications()
-    @addShortcut menuButton
+    @addShortcut menuButton, true
 
     $.asap (-> d.body), =>
       return unless Main.isThisPageLegit()
@@ -70,8 +70,11 @@ Header =
   notify: $.el 'div',
     id: 'notifications'
 
-  shortcuts: $.el 'span',
+  stats: $.el 'span',
-    id: 'shortcuts'
+    id: 'a-stats'
+  
+  icons: $.el 'span',
+    id: 'a-icons'
 
   hover: $.el 'div',
     id: 'hoverUI'
@@ -81,6 +84,7 @@ Header =
 
   setBoardList: ->
     fourchannav = $.id 'boardNavDesktop'
+    
     if a = $ "a[href*='/#{g.BOARD}/']", fourchannav
       a.className = 'current'
     boardList = $.el 'span',
@@ -91,11 +95,16 @@ Header =
     $.on btn, 'click', Header.toggleBoardList
 
     $.rm $ '#navtopright', fullBoardList
-
+    
-    $.prepend d.body, $.id 'navtopright'
+    shortcuts = $.el 'span',
+      id: 'shortcuts'
+    
+    $.add shortcuts, [Header.stats, Header.icons]
+    
+    $.prepend d.body, shortcuts
 
     $.add boardList, fullBoardList
-    $.add Header.bar, [Header.shortcuts, boardList, Header.notify, Header.toggle]
+    $.add Header.bar, [boardList, Header.notify, Header.toggle]
 
     Header.setCustomNav Conf['Custom Board Navigation']
     Header.generateBoardList Conf['boardnav'].replace /(\r\n|\n|\r)/g, ' '
@@ -269,9 +278,10 @@ Header =
       top -= headRect.top + headRect.height
     window.scrollBy 0, top
 
-  addShortcut: (el) ->
+  addShortcut: (el, icon) ->
     $.addClass el, 'shortcut'
-    $.add Header.shortcuts, el
+    
+    $.add Header[if icon then 'icons' else 'stats'], el
 
   menuToggle: (e) ->
     Header.menu.toggle e, @, g

src/General/css/layout.css

@@ -374,28 +374,49 @@ th {
   display: <%= flex %>;
   top: 0;
   z-index: 16;
+  <%= flex %>-direction: row;
+  max-height: 1.3em;
+  overflow: visible;
 }
 .shortcut {
   margin: 0 1px;
 }
-.icon-orientation-vertical #shortcuts {
+#a-icons,
-  <%= flex %>-direction: column;
+#a-stats {
+  <%= order %>: 0;
+  display: <%= flex %>;
+}
+#a-icons {
+  <%= order %>: 10;
 }
 .sidebar-location-right #shortcuts {
   right: 0;
 }
-.sidebar-location-right .shortcut {
-  <%= align %>-self: flex-end;
-}
 .sidebar-location-left #shortcuts {
   left: 0;
 }
-.icon-orientation-horizontal #shortcuts {
+.sidebar-location-right .shortcut {
+  <%= align %>-self: flex-end;
+}
+.icon-orientation-vertical #a-icons{
+  <%= flex %>-direction: column;
+  height: 200px;
+}
+.icon-orientation-horizontal #a-stats,
+.icon-orientation-horizontal #a-icons,
+.sidebar-location-left #shortcuts {
   <%= flex %>-direction: row-reverse;
 }
-.icon-orientation-horizontal.sidebar-location-left #shortcuts {
+.icon-orientation-horizontal.sidebar-location-left #a-stats,
+.icon-orientation-horizontal.sidebar-location-left #a-icons {
   <%= flex %>-direction: row;
 }
+#thread-stats {
+  <%= order %>: 0;
+}
+#updater {
+  <%= order %>: 10;
+}
 #main-menu {
   <%= order %>: 0;
 }
@@ -435,12 +456,6 @@ th {
 #returnIcon {
   <%= order %>: 100;
 }
-#thread-stats {
-  <%= order %>: 110;
-}
-#updater {
-  <%= order %>: 120;
-}
 .icon-orientation-horizontal #so-psa #globalMessage,
 .icon-orientation-horizontal #so-watcher  #thread-watcher,
 .icon-orientation-horizontal #so-nav #boardNavDesktopFoot {

src/Images/FappeTyme.coffee

@@ -11,7 +11,7 @@ FappeTyme =
 
       $.on el, 'click', FappeTyme.cb.fappe
 
-      Header.addShortcut el
+      Header.addShortcut el, true
     
     if Conf['Werk Tyme']
       el = $.el 'a',
@@ -23,7 +23,7 @@ FappeTyme =
 
       $.on el, 'click', FappeTyme.cb.werk
 
-      Header.addShortcut el
+      Header.addShortcut el, true
     
 
     Post::callbacks.push

src/Images/Gallery.coffee

@@ -11,7 +11,7 @@ Gallery =
 
     $.on el, 'click', @cb.toggle
 
-    Header.addShortcut el
+    Header.addShortcut el, true
 
     Post::callbacks.push
       name: 'Gallery'

src/Images/ImageExpand.coffee

@@ -10,7 +10,7 @@ ImageExpand =
 
     $.on @EAI, 'click', ImageExpand.cb.toggleAll
 
-    Header.addShortcut @EAI
+    Header.addShortcut @EAI, true
 
     Post::callbacks.push
       name: 'Image Expansion'

src/Miscellaneous/CatalogLinks.coffee

@@ -57,5 +57,5 @@ CatalogLinks =
     if catalogLink = ($('.pages.cataloglink a', d.body) or $ '[href=".././catalog"]', d.body)
       catalogLink.textContent = ''
       catalogLink.className = 'a-icon'
-      Header.addShortcut catalogLink
+      Header.addShortcut catalogLink, true
       catalogLink.id = 'catalog'

src/Miscellaneous/Nav.coffee

@@ -15,8 +15,8 @@ Nav =
       href: 'javascript:;'
       id:   'navNext'
 
-    Header.addShortcut prev
+    Header.addShortcut prev, true
-    Header.addShortcut next
+    Header.addShortcut next, true
 
     $.on prev, 'click', @prev
     $.on next, 'click', @next

src/Monitoring/ThreadWatcher.coffee

@@ -46,7 +46,7 @@ ThreadWatcher =
       el = $.el 'div',
         id: 'so-watcher'
         innerHTML: '<i class=a-icon></a>'
-      Header.addShortcut el
+      Header.addShortcut el, true
     else
       el = d.body
 

src/Posting/QuickReply.coffee

@@ -31,7 +31,7 @@ QR =
         QR.close()
       $.toggleClass @, 'disabled'
 
-    return Header.addShortcut sc if Conf['Header Shortcut']
+    return Header.addShortcut sc, true if Conf['Header Shortcut']
 
     $.addClass sc, 'on-page'
     $.rmClass  sc, 'icon'

src/Theming/Style.coffee

@@ -172,7 +172,7 @@ Style =
       id: 'so-nav'
       innerHTML: '<i class=a-icon></a>'
     $.add slideNav, $.id('boardNavDesktopFoot')
-    Header.addShortcut slideNav if Conf['Slideout Navigation'] isnt 'hide'
+    Header.addShortcut slideNav, true if Conf['Slideout Navigation'] isnt 'hide'
 
     # Announcements
     if Conf['Announcements'] is 'slideout'
@@ -181,14 +181,14 @@ Style =
           id: 'so-psa'
           innerHTML: '<i class=a-icon></a>'
         $.add psa, psaIcon
-        Header.addShortcut psaIcon
+        Header.addShortcut psaIcon, true
 
     if g.VIEW is 'thread'
       el = $('body > div.navLinks > a')
       el.textContent = ''
       el.id = 'returnIcon'
       el.className = 'a-icon'
-      Header.addShortcut el
+      Header.addShortcut el, true
 
   padding: ->
     Style.padding.nav   = Header.bar