add: support compact mode for mobile web, auto adapt to small screen/window

client/components/boards/boardBody.jade

@@ -1,7 +1,10 @@
 template(name="board")
   if isBoardReady.get
     if currentBoard
-      +boardBody
+      if onlyShowCurrentCard
+        +cardDetails(currentCard)
+      else
+        +boardBody
     else
       //- XXX We need a better error message in case the board has been archived
       +message(label="board-not-found")

client/components/boards/boardBody.js

@@ -57,6 +57,10 @@ BlazeComponent.extendComponent({
     return currentCard && currentCard.listId === listId;
   },
 
+  onlyShowCurrentCard() {
+    return Utils.isMiniScreen() && Session.get('currentCard');
+  },
+
   events() {
     return [{
       // XXX The board-overlay div should probably be moved to the parent

client/components/boards/boardColors.styl

@@ -23,9 +23,13 @@ setBoardColor(color)
   .sidebar-list li a:hover
     background-color: lighten(color, 10%)
 
-  &#header #header-quick-access ul li.current
+  &#header ul li.current, &#header-quick-access ul li.current
     border-bottom: 2px solid lighten(color, 10%)
 
+  &#header-quick-access
+    background: darken(color, 10%)
+    color: white
+
   &#header #header-main-bar .board-header-btn.emphasis
     background: complement(color)
 
@@ -47,6 +51,11 @@ setBoardColor(color)
     &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
       background: lighten(color, 97%)
 
+  @media screen and (max-width: 800px)
+    &.pop-over .header
+      background: color
+      color: white
+
 .board-color-nephritis
   setBoardColor(#27AE60)
 

client/components/boards/boardHeader.jade

@@ -5,19 +5,21 @@ template(name="boardHeaderBar")
         = title
 
   .board-header-btns.left
+
+  .board-header-btns.right
     unless isSandstorm
       if currentUser
         a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
           title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
           i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
           if showStarCounter
-            span {{_ 'board-nb-stars' currentBoard.stars}}
+            span
+              = currentBoard.stars
 
       a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}")
         i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
         span {{_ currentBoard.permission}}
 
-  .board-header-btns.right
     a.board-header-btn.js-open-filter-view(
         title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{/if}}"
         class="{{#if Filter.isActive}}emphasis{{/if}}")
@@ -39,7 +41,7 @@ template(name="boardHeaderBar")
 
     .separator
     a.board-header-btn.js-open-board-menu
-      i.board-header-btn-icon.fa.fa-cog
+      i.board-header-btn-icon.fa.fa-navicon
 
 template(name="boardMenuPopup")
   ul.pop-over-list

client/components/boards/boardsList.jade

@@ -27,7 +27,6 @@ template(name="boardList")
 
 template(name="boardListHeaderBar")
   h1 {{_ 'my-boards'}}
-
   .board-header-btns.right
     a.board-header-btn.js-open-archived-board
       i.fa.fa-archive

client/components/boards/boardsList.styl

@@ -1,7 +1,7 @@
 $spaceBetweenTiles = 16px
 
 .board-list
-  margin: $spaceBetweenTiles ($spaceBetweenTiles/-2) 0
+  margin: 0 ($spaceBetweenTiles/2)
 
   li
     float: left
@@ -24,8 +24,8 @@ $spaceBetweenTiles = 16px
     display: block
     font-weight: 700
     min-height: 18px
-    padding: 8px 12px 8px 12px
-    margin: 0 ($spaceBetweenTiles/2) $spaceBetweenTiles
+    padding: 8px
+    margin: ($spaceBetweenTiles/2)
     position: relative
     text-decoration: none
 
@@ -128,3 +128,22 @@ $spaceBetweenTiles = 16px
         font-size: 25px
         color: white
 
+@media screen and (max-width: 800px)
+  .board-list
+    height: 100%
+    overflow: scroll
+
+    li
+      width: 33.3%
+
+    .board-list-item
+      overflow: hidden
+
+    .board-list-item-sub-name
+      position: relative
+      top: -100px
+      left: -100px
+
+@media screen and (max-width: 360px)
+    li
+      width: 50%