Card Details as Popup

client/components/cards/cardDetails.jade

@@ -1,5 +1,8 @@
+template(name="cardDetailsPopup")
+  +cardDetails
+
 template(name="cardDetails")
-  section.card-details.js-card-details(class='{{#if cardMaximized}}card-details-maximized{{/if}}'): .card-details-canvas
+  section.card-details.js-card-details(class='{{#if cardMaximized}}card-details-maximized{{/if}}' class='{{#if isMiniScreen}}card-details-popup{{/if}}'): .card-details-canvas
     .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
       +inlinedForm(classNames="js-card-details-title")
         +editCardTitleForm
@@ -18,7 +21,6 @@ template(name="cardDetails")
               title="{{_ 'copy-card-link-to-clipboard'}}"
             )
         if isMiniScreen
-          a.fa.fa-times-thin.close-card-details-mobile-web.js-close-card-details(title="{{_ 'close-card'}}")
           if currentUser.isBoardMember
             a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
             a.fa.fa-link.card-copy-mobile-button

client/components/cards/cardDetails.js

@@ -34,11 +34,14 @@ BlazeComponent.extendComponent({
   onCreated() {
     this.currentBoard = Boards.findOne(Session.get('currentBoard'));
     this.isLoaded = new ReactiveVar(false);
-    const boardBody = this.parentComponent().parentComponent();
+
-    //in Miniview parent is Board, not BoardBody.
+    if (this.parentComponent() && this.parentComponent().parentComponent()) {
-    if (boardBody !== null) {
+      const boardBody = this.parentComponent().parentComponent();
-      boardBody.showOverlay.set(true);
+      //in Miniview parent is Board, not BoardBody.
-      boardBody.mouseHasEnterCardDetails = false;
+      if (boardBody !== null) {
+        boardBody.showOverlay.set(true);
+        boardBody.mouseHasEnterCardDetails = false;
+      }
     }
     this.calculateNextPeak();
 
@@ -297,6 +300,7 @@ BlazeComponent.extendComponent({
   },
 
   onDestroyed() {
+    if (this.parentComponent() === null) return;
     const parentComponent = this.parentComponent().parentComponent();
     //on mobile view parent is Board, not board body.
     if (parentComponent === null) return;
@@ -408,6 +412,7 @@ BlazeComponent.extendComponent({
         'click .js-show-positive-votes': Popup.open('positiveVoteMembers'),
         'click .js-show-negative-votes': Popup.open('negativeVoteMembers'),
         'mouseenter .js-card-details'() {
+          if (this.parentComponent() === null) return;
           const parentComponent = this.parentComponent().parentComponent();
           //on mobile view parent is Board, not BoardBody.
           if (parentComponent === null) return;

client/components/cards/cardDetails.styl

@@ -315,6 +315,18 @@ input[type="submit"].attachment-add-link-submit
       .minimize-card-details
         margin-right: 40px
 
+  .card-details-popup
+    padding: 0px
+
+  .pop-over > .content-wrapper > .popup-container-depth-0
+    width: 100%
+
+    & > .content
+      width: calc(100% - 10px)
+
+    & > .content > .card-details-popup
+      overflow-y: auto
+
 card-details-color(background, color...)
   background: background !important
   if color

client/components/lists/listBody.jade

@@ -16,13 +16,22 @@ template(name="listBody")
               +viewer
                 = formattedCurrencyCustomFieldValue(value)
       each (cardsWithLimit (idOrNull ../../_id))
-        a.minicard-wrapper.js-minicard(href=originRelativeUrl
+        if isMiniScreen
-          class="{{#if cardIsSelected}}is-selected{{/if}}"
+          a.minicard-wrapper.js-minicard.js-minicard-popup(
-          class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            class="{{#if cardIsSelected}}is-selected{{/if}}"
-          if MultiSelection.isActive
+            class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
-            .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+            if MultiSelection.isActive
-              class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+              .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
-          +minicard(this)
+                class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            +minicard(this)
+        else
+          a.minicard-wrapper.js-minicard(href=originRelativeUrl
+            class="{{#if cardIsSelected}}is-selected{{/if}}"
+            class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            if MultiSelection.isActive
+              .materialCheckBox.multi-selection-checkbox.js-toggle-multi-selection(
+                class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
+            +minicard(this)
       if (showSpinner (idOrNull ../../_id))
         +spinnerList
 

client/components/lists/listBody.js

@@ -220,6 +220,7 @@ BlazeComponent.extendComponent({
     return [
       {
         'click .js-minicard': this.clickOnMiniCard,
+        'click .js-minicard-popup': Popup.open("cardDetails"),
         'click .js-toggle-multi-selection': this.toggleMultiSelection,
         'click .open-minicard-composer': this.scrollToBottom,
         submit: this.addCard,

client/components/main/popup.styl

@@ -13,9 +13,6 @@ $popupWidth = 300px
   z-index: 99999
   margin-top: 5px
 
-  hr
-    margin: 4px -10px
-    width: $popupWidth
 
   p,
   textarea,
@@ -324,11 +321,6 @@ $popupWidth = 300px
         margin: 0px 0px
         border-bottom: 1px solid #eee
 
-    hr
-      width: 100%
-      height: 20px
-      margin: 0px 0px
-      color: #eee
 
     for depth in (1..6)
       .popup-container-depth-{depth}

i18n/en.i18n.json

@@ -1086,5 +1086,6 @@
   "request": "Request",
   "requests": "Requests",
   "help-request": "Help Request",
-  "editCardSortOrderPopup-title": "Change Sorting"
+  "editCardSortOrderPopup-title": "Change Sorting",
+  "cardDetailsPopup-title": "Card Details"
 }