Optimize for mobile web, show single list per page with navigate bar

client/components/main/header.jade

@@ -7,19 +7,31 @@ template(name="header")
   unless isSandstorm
     if currentUser
       #header-quick-access(class=currentBoard.colorClass)
-        ul
-          li
-            a(href="{{pathFor 'home'}}")
-              span.fa.fa-home
-              | {{_ 'all-boards'}}
-          each currentUser.starredBoards
-            li.separator -
-            li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
-              a(href="{{pathFor 'board' id=_id slug=slug}}")
-                = title
-          else
-            li.current {{_ 'quick-access-description'}}
+        if isMiniScreen
+          ul
+            li
+              a(href="{{pathFor 'home'}}")
+                span.fa.fa-home
 
+            if currentList
+              each currentBoard.lists
+                li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
+                  a.js-select-list
+                    = title
+          #header-new-board-icon
+        else
+          ul
+            li
+              a(href="{{pathFor 'home'}}")
+                span.fa.fa-home
+                | {{_ 'all-boards'}}
+            each currentUser.starredBoards
+              li.separator -
+              li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
+                a(href="{{pathFor 'board' id=_id slug=slug}}")
+                  = title
+            else
+              li.current {{_ 'quick-access-description'}}
 
         a#header-new-board-icon.js-create-board
           i.fa.fa-plus(title="Create a new board")

client/components/main/header.js

@@ -28,4 +28,8 @@ Template.header.events({
   'click .js-close-announcement'() {
     $('.announcement').hide();
   },
+  'click .js-select-list'() {
+    Session.set('currentList', this._id);
+    Session.set('currentCard', null);
+  },
 });

client/components/main/header.styl

@@ -191,11 +191,33 @@
     bottom: 0px
 
     ul
-      width: calc(100% - 150px)
+      width: calc(100% - 60px)
       overflow: ellipsis
+      padding: 10px
+      margin: -10px
 
       li
-        height: 28px
+        height: 100%
+        padding: 12px 0px
+        margin: -10px 0px
+
+        a
+          height: 100%
+          padding: 12px 10px
+          margin: -10px 0px
+
+        .fa-home
+          font-size: 26px
+          margin-top: -2px
+
+    #header-new-board-icon
+      display: none
+
+    #header-user-bar
+      position: absolute
+      right: 0px
+      padding: 10px
+      margin: -10px
 
 .announcement,
 .offline-warning