From c31d7455f7b7de4198ee46c59fe0886c54bf457c Mon Sep 17 00:00:00 2001
From: nztqa <nztqa@users.noreply.github.com>
Date: Wed, 29 Nov 2017 17:06:33 +0900
Subject: Optimize for mobile web, show single list per page with navigate bar

---
 client/components/boards/boardBody.jade   | 21 +++++++++++++++------
 client/components/boards/boardBody.styl   | 15 +++++++++++++++
 client/components/boards/boardColors.styl |  3 +++
 client/components/boards/boardHeader.js   |  4 ----
 4 files changed, 33 insertions(+), 10 deletions(-)

(limited to 'client/components/boards')

diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index fe10c921..bb3d2906 100644
--- a/client/components/boards/boardBody.jade
+++ b/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
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index df5696a2..bb9beb19 100644
--- a/client/components/boards/boardBody.styl
+++ b/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
diff --git a/client/components/boards/boardColors.styl b/client/components/boards/boardColors.styl
index 57a121a2..233659ca 100644
--- a/client/components/boards/boardColors.styl
+++ b/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)
 
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
index b7807ca9..fe10dab1 100644
--- a/client/components/boards/boardHeader.js
+++ b/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'));
-- 
cgit v1.2.3-1-g7c22