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

client/components/boards/boardBody.jade

@@ -21,12 +21,21 @@ template(name="boardBody")
       if showOverlay.get
         .board-overlay
       .lists.js-lists
-        each currentBoard.lists
-          +list(this)
-          if currentCardIsInThisList
-            +cardDetails(currentCard)
-        if canSeeAddList
-          +addListForm
+        if isMiniScreen
+          if currentList
+            +list(currentList)
+          else
+            each currentBoard.lists
+              +miniList(this)
+            if currentUser.isBoardMember
+              +addListForm
+        else
+          each currentBoard.lists
+            +list(this)
+            if currentCardIsInThisList
+              +cardDetails(currentCard)
+          if currentUser.isBoardMember
+            +addListForm
 
 template(name="addListForm")
   .list.js-list.list-composer.js-list-composer

client/components/boards/boardBody.styl

@@ -43,3 +43,18 @@ position()
       .open-minicard-composer,
       .minicard-wrapper.is-checked
         display: none
+
+@media screen and (max-width: 800px)
+  .board-wrapper
+
+    .board-canvas
+
+      .lists
+        align-items: flex-start
+        display: flex
+        flex-direction: column
+        margin: 0
+        padding: 0 40px 0px 0
+        overflow-x: hidden
+        overflow-y: auto
+        position: cover

client/components/boards/boardColors.styl

@@ -67,6 +67,9 @@ setBoardColor(color)
       background: color
       color: white
 
+   &#header ul li.current, &#header-quick-access ul li.current
+      border-bottom: 4px solid lighten(color, 20%)
+
 .board-color-nephritis
   setBoardColor(#27AE60)
 

client/components/boards/boardHeader.js

@@ -58,10 +58,6 @@ BlazeComponent.extendComponent({
     return user && user.hasStarred(boardId);
   },
 
-  isMiniScreen() {
-    return Utils.isMiniScreen();
-  },
-
   // Only show the star counter if the number of star is greater than 2
   showStarCounter() {
     const currentBoard = Boards.findOne(Session.get('currentBoard'));

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,
     }];
   },

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

client/components/users/userHeader.jade

@@ -3,10 +3,11 @@ template(name="headerUserBar")
     a.header-user-bar-name.js-open-header-member-menu
       .header-user-bar-avatar
         +userAvatar(userId=currentUser._id)
-      if currentUser.profile.fullname
-        = currentUser.profile.fullname
-      else
-        = currentUser.username
+      unless isMiniScreen
+        if currentUser.profile.fullname
+          = currentUser.profile.fullname
+        else
+          = currentUser.username
 
 template(name="memberMenuPopup")
   ul.pop-over-list

client/config/blazeHelpers.js

@@ -16,6 +16,17 @@ Blaze.registerHelper('currentCard', () => {
   }
 });
 
+Blaze.registerHelper('currentList', () => {
+  const listId = Session.get('currentList');
+  if (listId) {
+    return Lists.findOne(listId);
+  } else {
+    return null;
+  }
+});
+
 Blaze.registerHelper('getUser', (userId) => Users.findOne(userId));
 
 Blaze.registerHelper('concat', (...args) => args.slice(0, -1).join(''));
+
+Blaze.registerHelper('isMiniScreen', () => Utils.isMiniScreen());

config/router.js

@@ -8,6 +8,7 @@ FlowRouter.route('/', {
   triggersEnter: [AccountsTemplates.ensureSignedIn],
   action() {
     Session.set('currentBoard', null);
+    Session.set('currentList', null);
     Session.set('currentCard', null);
 
     Filter.reset();
@@ -88,6 +89,7 @@ FlowRouter.route('/import/:source', {
       Session.set('fromBoard', Session.get('currentBoard'));
     }
     Session.set('currentBoard', null);
+    Session.set('currentList', null);
     Session.set('currentCard', null);
     Session.set('importSource', params.source);
 
@@ -106,6 +108,7 @@ FlowRouter.route('/setting', {
     AccountsTemplates.ensureSignedIn,
     () => {
       Session.set('currentBoard', null);
+      Session.set('currentList', null);
       Session.set('currentCard', null);
 
       Filter.reset();
@@ -126,6 +129,7 @@ FlowRouter.route('/information', {
     AccountsTemplates.ensureSignedIn,
     () => {
       Session.set('currentBoard', null);
+      Session.set('currentList', null);
       Session.set('currentCard', null);
 
       Filter.reset();
@@ -146,6 +150,7 @@ FlowRouter.route('/people', {
     AccountsTemplates.ensureSignedIn,
     () => {
       Session.set('currentBoard', null);
+      Session.set('currentList', null);
       Session.set('currentCard', null);
 
       Filter.reset();