Get Flex actually working

Gruntfile.coffee

@@ -145,18 +145,32 @@ module.exports = (grunt) ->
     pkg = grunt.config 'pkg' 
     pkg.type = type;
     grunt.config 'pkg', pkg
+
     pkg.sizing = if type is 'crx'
       'box-sizing'
     else
       '-moz-box-sizing'
+
     pkg.filter = if type is 'crx'
       '-webkit-filter'
     else
       'filter'
+
     pkg.transform = if type is 'crx'
       '-webkit-transform'
     else
       'transform'
+
+    pkg.flex = if type is 'crx'
+      '-webkit-flex'
+    else
+      'flex'
+
+    pkg.order = if type is 'crx'
+      '-webkit-order'
+    else
+      'order'
+
     grunt.log.ok 'pkg.type = %s', type
 
   grunt.registerTask 'build', [

src/General/Header.coffee

@@ -53,7 +53,7 @@ Header =
     $.on d, 'CreateNotification', @createNotification
 
     @enableDesktopNotifications()
-    @addShortcut menuButton, [110, 100]
+    @addShortcut menuButton
 
     $.asap (-> d.body), =>
       return unless Main.isThisPageLegit()
@@ -269,16 +269,9 @@ Header =
       top -= headRect.top + headRect.height
     window.scrollBy 0, top
 
-  addShortcut: do ->
+  addShortcut: (el) ->
-    span = $.el 'span',
+    $.addClass el, 'shortcut'
-      className: 'shortcut'
+    $.add Header.shortcuts, el
-  
-    (el, order) ->
-      order = order[if Conf["Icon Orientation"] is "horizontal" then 0 else 1]
-      shortcut = span.cloneNode()
-      shortcut.style.cssText = "order: #{order}; -webkit-order: #{order};"
-      $.add shortcut, el
-      $.prepend Header.shortcuts, shortcut
 
   menuToggle: (e) ->
     Header.menu.toggle e, @, g

src/General/css/icons.base.css

@@ -1,87 +0,0 @@
-#main-menu,
-#returnIcon,
-#sowIcon,
-#psaIcon,
-#slideNav,
-#img-controls,
-#catalog,
-#fappeTyme,
-.shortcut .icon {
-  z-index: 18;
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-  content: "";
-  opacity: 0.5;
-  cursor: pointer;
-}
-.invisible-icons #main-menu,
-.invisible-icons #returnIcon,
-.invisible-icons #sowIcon,
-.invisible-icons #psaIcon,
-.invisible-icons #slideNav,
-.invisible-icons #img-controls,
-.invisible-icons #catalog,
-.invisible-icons #fappeTyme,
-.invisible-icons #navPrev,
-.invisible-icons #navNext,
-.invisible-icons .shortcut .icon {
-  opacity: 0;
-}
-#navtopright .exlinksOptionsLink,
-#returnIcon,
-#{if Conf['Slideout Watcher'] then '#thread-watcher,' else ''}
-#{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
-#boardNavDesktopFoot,
-#catalog {
-  z-index: 16;
-}
-#navtopright .exlinksOptionsLink:hover,
-#returnIcon:hover,
-#thread-watcher:hover,
-#globalMessage:hover,
-#slideNav:hover,
-#img-controls,
-#catalog:hover {
-  z-index: 17;
-}
-#main-menu {
-  background-position: 0 0;
-}
-#returnIcon {
-  background-position: 0 -15px;
-}
-#sowIcon {
-  background-position: 0 -30px;
-}
-#psaIcon {
-  background-position: 0 -45px;
-}
-#slideNav {
-  background-position: 0 -60px;
-}
-#img-controls {
-  background-position: 0 -90px;
-}
-#catalog {
-  background-position: 0 -120px;
-}
-#fappeTyme {
-  background-position: 0 -135px;
-}
-#slideNav:hover,
-#psaIcon:hover,
-#img-controls:hover,
-#navPrev:hover,
-#navNext:hover,
-#appchanOptions:hover,
-#main-menu:hover,
-#qr #qrtab,
-#sowIcon:hover,
-.thumbnail#selected,
-#returnIcon:hover,
-#catalog:hover,
-#fappeTyme:hover,
-.shortcut .icon:hover {
-  opacity: 1 !important;
-}

src/General/css/layout.css

@@ -189,7 +189,9 @@ th {
   border-right: 6px solid transparent;
   border-left: 6px solid transparent;
   opacity: 0.5;
-  margin: 3px 2px;
+  margin: 2px 1px;
+  width: 0;
+  height: 0;
 }
 #navPrev {
   border-bottom: 11px solid rgb(130,130,130);
@@ -201,7 +203,7 @@ th {
 #header-bar {
   z-index: 6;
   border-width: 1px;
-  padding: 0 2px;
+  padding: 1px 2px;
   border-style: solid;
 }
 .pagination-sticky-top .pagelist,
@@ -253,19 +255,6 @@ th {
   color: transparent;
   word-spacing: 2px;
 }
-#shortcuts {
-  position: fixed;
-  display: flex;
-  display: -webkit-flex;
-  top: 1px;
-}
-.sidebar-location-right #shortcuts {
-  right: 0;
-  text-align: right;
-}
-.sidebar-location-left #shortcuts {
-  left: 0;
-}
 .fixed #header-bar.autohide {
   z-index: 24;
 }
@@ -375,6 +364,161 @@ th {
   width: 100%;
   overflow: auto;
 }
+/* Shortcuts */
+#shortcuts {
+  position: fixed;
+  display: <%= flex %>;
+  top: 0;
+}
+.shortcut {
+  margin: 1px;
+}
+.icon-orientation-vertical #shortcuts {
+  <%= flex %>-direction: column;
+}
+.sidebar-location-right #shortcuts {
+  right: 0;
+  text-align: right;
+}
+.sidebar-location-right .shortcut {
+  align-self: flex-end;
+  -webkit-align-self: flex-end;
+}
+.sidebar-location-left #shortcuts {
+  left: 0;
+}
+.icon-orientation-horizontal #shortcuts {
+  <%= flex %>-direction: row-reverse;
+}
+.icon-orientation-horizontal.sidebar-location-left #shortcuts {
+  <%= flex %>-direction: row;
+}
+#main-menu {
+  <%= order %>: 0;
+}
+#qr-shortcut {
+  <%= order %>: 10;
+}
+#img-controls {
+  <%= order %>: 20;
+}
+#fappeTyme {
+  <%= order %>: 30;
+}
+#slideNav {
+  <%= order %>: 40;
+}
+#sowIcon {
+  <%= order %>: 50;
+}
+#psaIcon {
+  <%= order %>: 60;
+}
+#navPrev {
+  <%= order %>: 70;
+}
+#navNext {
+  <%= order %>: 80;
+}
+#catalog {
+  <%= order %>: 90;
+}
+#returnIcon {
+  <%= order %>: 100;
+}
+#thread-stats {
+  <%= order %>: 110;
+}
+#updater {
+  <%= order %>: 120;
+}
+#main-menu,
+#returnIcon,
+#sowIcon,
+#psaIcon,
+#slideNav,
+#img-controls,
+#catalog,
+#fappeTyme,
+#shortcuts .icon {
+  z-index: 18;
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  content: "";
+  opacity: 0.5;
+  cursor: pointer;
+}
+.invisible-icons #main-menu,
+.invisible-icons #returnIcon,
+.invisible-icons #sowIcon,
+.invisible-icons #psaIcon,
+.invisible-icons #slideNav,
+.invisible-icons #img-controls,
+.invisible-icons #catalog,
+.invisible-icons #fappeTyme,
+.invisible-icons #navPrev,
+.invisible-icons #navNext,
+.invisible-icons #shortcuts .icon {
+  opacity: 0;
+}
+#navtopright .exlinksOptionsLink,
+#returnIcon,
+#{if Conf['Slideout Watcher'] then '#thread-watcher,' else ''}
+#{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
+#boardNavDesktopFoot,
+#catalog {
+  z-index: 16;
+}
+#navtopright .exlinksOptionsLink:hover,
+#returnIcon:hover,
+#thread-watcher:hover,
+#globalMessage:hover,
+#slideNav:hover,
+#img-controls,
+#catalog:hover {
+  z-index: 17;
+}
+#main-menu {
+  background-position: 0 0;
+}
+#returnIcon {
+  background-position: 0 -15px;
+}
+#sowIcon {
+  background-position: 0 -30px;
+}
+#psaIcon {
+  background-position: 0 -45px;
+}
+#slideNav {
+  background-position: 0 -60px;
+}
+#img-controls {
+  background-position: 0 -90px;
+}
+#catalog {
+  background-position: 0 -120px;
+}
+#fappeTyme {
+  background-position: 0 -135px;
+}
+#slideNav:hover,
+#psaIcon:hover,
+#img-controls:hover,
+#navPrev:hover,
+#navNext:hover,
+#appchanOptions:hover,
+#main-menu:hover,
+#qr #qrtab,
+#sowIcon:hover,
+.thumbnail#selected,
+#returnIcon:hover,
+#catalog:hover,
+#fappeTyme:hover,
+#shortcuts .icon:hover {
+  opacity: 1 !important;
+}
 /* Updater / Thread Stats */
 .float #thread-stats,
 .float #updater {

src/Images/FappeTyme.coffee

@@ -8,7 +8,7 @@ FappeTyme =
 
     $.on el, 'click', FappeTyme.toggle
 
-    Header.addShortcut el, [30, 30]
+    Header.addShortcut el
 
     Post::callbacks.push
       name: 'Fappe Tyme'

src/Images/ImageExpand.coffee

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

src/Miscellaneous/CatalogLinks.coffee

@@ -56,5 +56,5 @@ CatalogLinks =
   ready: ->
     if catalogLink = ($('.pages.cataloglink a', d.body) or $ '[href=".././catalog"]', d.body)
       catalogLink.textContent = ''
-      Header.addShortcut catalogLink, [70, 70]
+      Header.addShortcut catalogLink
       catalogLink.id = 'catalog'

src/Miscellaneous/Nav.coffee

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

src/Monitoring/ThreadStats.coffee

@@ -4,11 +4,11 @@ ThreadStats =
 
     if Conf['Updater and Stats in Header']
       @dialog = sc = $.el 'span',
-        innerHTML: "<span id=post-count>0</span> / <span id=file-count>0</span>#{if Conf["Page Count in Stats"] then " / <span id=page-count>0</span>" else ""}"
+        innerHTML: "[<span id=post-count>0</span> / <span id=file-count>0</span>#{if Conf["Page Count in Stats"] then " / <span id=page-count>0</span>" else ""}]"
         id:        'thread-stats'
         title: 'Post Count / File Count' + (if Conf["Page Count in Stats"] then " / Page Count" else "")
       $.ready ->
-        Header.addShortcut [$.tn('['), sc, $.tn("]\u00A0")], [10,10]
+        Header.addShortcut sc
     else 
       @dialog = sc = UI.dialog 'thread-stats', 'bottom: 0px; right: 0px;',
         "<div class=move title='Post Count / File Count#{if Conf["Page Count in Stats"] then " / Page Count" else ""}'><span id=post-count>0</span> / <span id=file-count>0</span>#{if Conf["Page Count in Stats"] then " / <span id=page-count>0</span>" else ""}</div>"

src/Monitoring/ThreadUpdater.coffee

@@ -6,10 +6,10 @@ ThreadUpdater =
 
     if Conf['Updater and Stats in Header']
       @dialog = sc = $.el 'span',
-        innerHTML: "<span id=update-status></span><span id=update-timer title='Update now'></span>"
+        innerHTML: "[<span id=update-status></span><span id=update-timer title='Update now'></span>]\u00A0"
         id:        'updater'
       $.ready ->
-        Header.addShortcut [$.tn('['), sc, $.tn("]\u00A0")], [0,0]
+        Header.addShortcut sc
     else 
       @dialog = sc = UI.dialog 'updater', 'bottom: 0px; left: 0px;',
         "<div class=move><span id=update-status></span><span id=update-timer title='Update now'></span></div>"

src/Monitoring/ThreadWatcher.coffee

@@ -44,7 +44,7 @@ ThreadWatcher =
 
     if Conf['Slideout Watcher']
       el = $.el 'i', id: 'sowIcon'
-      Header.addShortcut el, [80, 70]
+      Header.addShortcut el
     else
       el = d.body
 

src/Posting/QuickReply.coffee

@@ -31,7 +31,7 @@ QR =
         QR.close()
       $.toggleClass @, 'disabled'
 
-    return Header.addShortcut sc, [20, 140] if Conf['Header Shortcut']
+    return Header.addShortcut sc if Conf['Header Shortcut']
 
     $.addClass sc, 'on-page'
     sc.textContent = if g.VIEW is 'thread' then 'Reply to Thread' else 'Start a Thread'

src/Theming/Style.coffee

@@ -178,20 +178,20 @@ Style =
     # Slideout Navigation
     slideNav = $.el 'i', id: 'slideNav'
     $.add $.id('boardNavDesktopFoot'), slideNav
-    Header.addShortcut slideNav, [50, 110] if Conf['Slideout Navigation'] isnt 'hide'
+    Header.addShortcut slideNav if Conf['Slideout Navigation'] isnt 'hide'
 
     # Announcements
     if Conf['Announcements'] is 'slideout'
       if (psa = $.id '#globalMessage') and !psa.hidden
         psaIcon = $.el 'i', id: 'psaIcon'
         $.add psa, psaIcon
-        Header.addShortcut psaIcon, [90, 80]
+        Header.addShortcut psaIcon
 
     if g.VIEW is 'thread'
       el = $('body > div.navLinks > a')
       el.textContent = ''
       el.id = 'returnIcon'
-      Header.addShortcut el, [40, 40]
+      Header.addShortcut el
 
     Style.icons.textContent = css