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

4 files changed, 28 insertions, 2 deletions

diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index 5746c92c..0282aa77 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -9,7 +9,7 @@ template(name="cardDetails")
       else
         a.fa.fa-times-thin.close-card-details.js-close-card-details
         if currentUser.isBoardMember
-          a.fa.fa-ellipsis-v.card-details-menu.js-open-card-details-menu
+          a.fa.fa-navicon.card-details-menu.js-open-card-details-menu
         h2.card-details-title.js-card-title(
           class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}")
             = title
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index b4fdca52..ea1363b5 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -48,7 +48,7 @@ BlazeComponent.extendComponent({
   },
 
   onRendered() {
-    this.scrollParentContainer();
+    if (!Utils.isMiniScreen()) this.scrollParentContainer();
   },
 
   onDestroyed() {
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index 8d71c54d..4ac0578b 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -94,3 +94,20 @@ input[type="submit"].attachment-add-link-submit
   margin: 0 0 8px 4px
   padding: 6px 12px
   width: 18%
+
+@media screen and (max-width: 800px)
+  .card-details
+    width: calc(100% - 40px)
+    padding: 0px 20px 0px 20px
+    margin: 0px
+    transition: none
+
+    .card-details-canvas
+      width: 100%
+
+    .card-details-header
+      .close-card-details
+        margin-right: 0px
+
+      .card-details-menu
+        margin-right: 10px
diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl
index 47d160f4..edef8657 100644
--- a/client/components/cards/minicard.styl
+++ b/client/components/cards/minicard.styl
@@ -136,3 +136,12 @@
       min-height: 36px
       margin-bottom: 20px
       overflow-y: auto
+
+@media screen and (max-width: 800px)
+  .minicard
+    .is-selected &
+      transform: translateX(0px)
+      border-bottom-right-radius: 0
+      border-top-right-radius: 0
+      z-index: 15
+      box-shadow: 0 1px 2px rgba(0,0,0,.15)