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

client/components/lists/list.jade

@@ -2,3 +2,7 @@ template(name='list')
   .list.js-list(id="js-list-{{_id}}")
     +listHeader
     +listBody
+
+template(name='miniList')
+  a.mini-list.js-select-list.js-list(id="js-list-{{_id}}")
+    +listHeader

client/components/lists/list.js

@@ -114,3 +114,10 @@ BlazeComponent.extendComponent({
     });
   },
 }).register('list');
+
+Template.miniList.events({
+  'click .js-select-list'() {
+    const listId = this._id;
+    Session.set('currentList', listId);
+  },
+});

client/components/lists/list.styl

@@ -53,6 +53,9 @@
   &.ui-sortable-handle
     cursor: grab
 
+  .list-header-left-icon
+    display: none
+
   .list-header-name
     display: inline
     font-size: 16px
@@ -135,3 +138,49 @@
 
   div
     float: left
+
+@media screen and (max-width: 800px)
+  .mini-list
+    flex: 0 0 60px
+    height: 60px
+    width: 100%
+    border-left: 0px
+    border-bottom: 1px solid darken(white, 20%)
+
+  .list
+    display: block
+    width: 100%
+    border-left: 0px
+
+    &.ui-sortable-helper
+      flex: 0 0 60px
+      height: 60px
+      width: 100%
+      border-left: 0px
+      border-bottom: 1px solid darken(white, 20%)
+
+      .list-header.ui-sortable-handle
+        cursor: grabbing
+
+    &.placeholder
+      flex: 0 0 60px
+      height: 60px
+      width: 100%
+      border-left: 0px
+      border-bottom: 1px solid darken(white, 20%)
+
+  .list-header
+
+    .list-header-left-icon
+      display: inline
+      padding: 7px
+      padding-right: 27px
+      margin-top: 1px
+      top: -@padding
+      left: -@padding
+
+    .list-header-menu-icon
+      position: absolute
+      padding: 7px
+      top: -@padding
+      right: 17px

client/components/lists/listHeader.jade

@@ -3,19 +3,33 @@ template(name="listHeader")
     +inlinedForm
       +editListTitleForm
     else
+      if isMiniScreen
+        if currentList
+          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
       h2.list-header-name(
         class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
-        = title 
+        = title
         if wipLimit.enabled
          | (
          span(class="{{#if reachedWipLimit}}highlight{{/if}}") {{cards.count}}
          |/#{wipLimit.value})
-        
+
         if showCardsCountForList cards.count
           = cards.count
           span.lowercase
             |  {{_ 'cards'}}
-      if currentUser.isBoardMember
+      if isMiniScreen
+        if currentList
+          if isWatching
+            i.list-header-watch-icon.fa.fa-eye
+          div.list-header-menu
+            unless currentUser.isCommentOnly
+              if canSeeAddCard
+                a.js-add-card.fa.fa-plus.list-header-plus-icon
+              a.fa.fa-navicon.js-open-list-menu
+        else
+          a.list-header-menu-icon.fa.fa-angle-right.js-select-list
+      else if currentUser.isBoardMember
         if isWatching
           i.list-header-watch-icon.fa.fa-eye
         div.list-header-menu
@@ -80,8 +94,8 @@ template(name="setWipLimitPopup")
   #js-wip-limit-edit
     label {{_ 'set-wip-limit-value'}}
     ul.pop-over-list
-      li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}} 
-        if isWipLimitEnabled  
+      li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
+        if isWipLimitEnabled
           i.fa.fa-check
     if isWipLimitEnabled
       p
@@ -92,7 +106,7 @@ template(name="setWipLimitPopup")
         .soft-wip-limit
           .materialCheckBox(class="{{#if isWipLimitSoft}}is-checked{{/if}}")
         label {{_ 'soft-wip-limit'}}
-        
+
 template(name="wipLimitErrorPopup")
   .wip-limit-invalid
     p {{_ 'wipLimitErrorPopup-dialog-pt1'}}

client/components/lists/listHeader.js

@@ -41,6 +41,9 @@ BlazeComponent.extendComponent({
           position: 'top',
         });
       },
+      'click .js-unselect-list'() {
+        Session.set('currentList', null);
+      },
       submit: this.editTitle,
     }];
   },