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

3 files changed, 53 insertions, 1 deletions

diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade
index 3a5c7fdb..893b5164 100644
--- a/client/components/sidebar/sidebar.jade
+++ b/client/components/sidebar/sidebar.jade
@@ -4,6 +4,8 @@ template(name="sidebar")
       class="{{#if isTongueHidden}}is-hidden{{/if}}")
       i.fa.fa-angle-left
     .sidebar-content.js-board-sidebar-content.js-perfect-scrollbar
+      a.hide-btn.js-hide-sidebar
+        i.fa.fa-angle-right
       unless isDefaultView
         h2
           a.fa.fa-chevron-left.js-back-home
diff --git a/client/components/sidebar/sidebar.js b/client/components/sidebar/sidebar.js
index ec3ebcf6..4bb53d4d 100644
--- a/client/components/sidebar/sidebar.js
+++ b/client/components/sidebar/sidebar.js
@@ -18,7 +18,8 @@ BlazeComponent.extendComponent({
   },
 
   onCreated() {
-    this._isOpen = new ReactiveVar(!Session.get('currentCard'));
+    const initOpen = Utils.isMiniScreen() ? false : (!Session.get('currentCard'));
+    this._isOpen = new ReactiveVar(initOpen);
     this._view = new ReactiveVar(defaultView);
     Sidebar = this;
   },
@@ -96,6 +97,7 @@ BlazeComponent.extendComponent({
     // XXX Hacky, we need some kind of `super`
     const mixinEvents = this.getMixin(Mixins.InfiniteScrolling).events();
     return [...mixinEvents, {
+      'click .js-hide-sidebar': this.hide,
       'click .js-toggle-sidebar': this.toggle,
       'click .js-back-home': this.setView,
     }];
diff --git a/client/components/sidebar/sidebar.styl b/client/components/sidebar/sidebar.styl
index 151a8f19..9007af59 100644
--- a/client/components/sidebar/sidebar.styl
+++ b/client/components/sidebar/sidebar.styl
@@ -19,6 +19,9 @@
     overflow-x: hidden
     overflow-y: auto
 
+    .hide-btn
+      display: none
+
     h3
       color: darken(white, 50%)
       font-size: 1em
@@ -130,3 +133,48 @@
     margin: 0
     margin-bottom: 5px
     padding: 0 2px 0 10px
+
+@media screen and (max-width: 800px)
+  .board-sidebar
+    width: 100%
+    right: -@width
+
+    .sidebar-content
+      .hide-btn
+        width: 40px
+        height: @width
+        position: absolute
+        right: 5px
+        top: 5px
+        display: block
+        z-index: 15
+        background: darken(white, 3%)
+        transition: left .1s
+        color: darken(white, 50%)
+        border-radius: 50%
+        border: 1px solid darken(white, 30%)
+        box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
+        color: darken(white, 50%)
+
+        i.fa
+          padding: 8px 16px
+          font-size: 24px
+          font-weight: bold
+
+  .sidebar-tongue
+    width: 40px
+    height: @width
+    left: -@width - 7px
+    top: 5px
+    display: block
+    border-radius: 50%
+    border: 1px solid darken(white, 30%)
+    box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
+    color: darken(white, 50%)
+
+    .board-sidebar.is-open &
+      display: none
+
+    i.fa
+      padding: 8px 0px 8px 16px
+      font-weight: bold