Merge pull request #5168 from mfilser/open_card_details_always_in_the_middle_of_the_screen

Open card details always in the middle of the screen

client/components/boards/boardBody.css

@@ -19,7 +19,6 @@
 .board-wrapper .board-canvas.is-sibling-sidebar-open {
   margin-right: 248px;
 }
-.board-wrapper .board-canvas.overlayed {overflow:hidden}
 .board-wrapper .board-canvas .board-overlay {
   position: fixed;
   left: 0;

client/components/boards/boardBody.jade

@@ -21,8 +21,7 @@ template(name="boardBody")
       .board-canvas.js-swimlanes(
         class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}"
         class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}"
-        class="{{#if draggingActive.get}}is-dragging-active{{/if}}"
-        class="{{#if showOverlay.get}}overlayed{{/if}}")
+        class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
         if showOverlay.get
           .board-overlay
         if currentBoard.isTemplatesBoard

client/components/cards/cardDetails.css

@@ -248,10 +248,10 @@
   padding-top: 10px;
 }
 @media screen and (min-width: 801px) {
-  .card-details-maximized {
+  .card-details {
     top: 97px;
-    left: 0;
-    right:0;
+    left: calc(50% - (600px / 2));
+    width: 600px;
     bottom: 0;
     position: fixed;
     resize: both;
@@ -270,6 +270,10 @@
     box-shadow: 0 0 7px 0 #b3b3b3;
     transition: flex-basis 0.1s;
     box-sizing: border-box;
+    top: 97px;
+    left: 0px;
+    height: calc(100% - 20px);
+    width: calc(100% - 20px);
     float: left;
   }
   .card-details-maximized .card-details-left {

client/components/cards/cardDetails.js

@@ -76,66 +76,6 @@ BlazeComponent.extendComponent({
     return !Utils.getPopupCardId() && ReactiveCache.getCurrentUser().hasCardMaximized();
   },
 
-  scrollParentContainer() {
-    const cardPanelWidth = 600;
-    const parentComponent = this.parentComponent();
-    /*
-        // Incomplete fix about bug where opening card scrolls to wrong place
-        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
-        // TODO sometimes parentComponent is not available, maybe because it's not
-        // yet created?!
-        //
-	// uncommented again by chrisi51
-        // only with that, the autoscroll feature is working properly
-        // after my fixes, all scrollings where correct
-    */
-	if (!parentComponent) return;
-        const bodyBoardComponent = parentComponent.parentComponent();
-
-
-    //On Mobile View Parent is Board, Not Board Body. I cant see how this funciton should work then.
-    if (bodyBoardComponent === null) return;
-    const $cardView = this.$(this.firstNode());
-    const $cardContainer = bodyBoardComponent.$('.js-swimlanes');
-
-    /*
-        // Incomplete fix about bug where opening card scrolls to wrong place
-        // https://github.com/wekan/wekan/issues/4572#issuecomment-1184149395
-        // TODO sometimes cardContainer is not available, maybe because it's not yet
-        // created?!
-        if (!$cardContainer) return;
-    */
-
-    const cardContainerScroll = $cardContainer.scrollLeft();
-    const cardContainerWidth = $cardContainer.width();
-
-    const cardViewStart = $cardView.offset().left;
-    const cardViewEnd = cardViewStart + cardPanelWidth;
-
-    let offset = false;
-    if (cardViewStart < 0) {
-      offset = cardViewStart;
-    } else if (cardViewEnd > cardContainerWidth) {
-      offset = cardViewEnd - cardContainerWidth;
-    }
-
-    if (offset) {
-      bodyBoardComponent.scrollLeft(cardContainerScroll + offset);
-    }
-
-    //Scroll top
-    const cardViewStartTop = $cardView.offset().top;
-    const cardContainerScrollTop = $cardContainer.scrollTop();
-
-    let topOffset = false;
-    if (cardViewStartTop !== 100) {
-      topOffset = cardViewStartTop - 100;
-    }
-    if (topOffset !== false) {
-      bodyBoardComponent.scrollTop(cardContainerScrollTop + topOffset);
-    }
-  },
-
   presentParentTask() {
     let result = this.currentBoard.presentParentTask;
     if (result === null || result === undefined) {
@@ -221,12 +161,6 @@ BlazeComponent.extendComponent({
       //-------------
     }
 
-    if (!Utils.isMiniScreen()) {
-      Meteor.setTimeout(() => {
-        this.scrollParentContainer();
-      }, 500);
-    }
-
     const $checklistsDom = this.$('.card-checklist-items');
 
     $checklistsDom.sortable({
@@ -452,20 +386,10 @@ BlazeComponent.extendComponent({
         'click .js-maximize-card-details'() {
           Meteor.call('toggleCardMaximized');
           autosize($('.card-details'));
-//          if (!Utils.isMiniScreen()) {
-//            Meteor.setTimeout(() => {
-//              this.scrollParentContainer();
-//            }, 500);
-//          }
         },
         'click .js-minimize-card-details'() {
           Meteor.call('toggleCardMaximized');
           autosize($('.card-details'));
-          if (!Utils.isMiniScreen()) {
-            Meteor.setTimeout(() => {
-              this.scrollParentContainer();
-            }, 500);
-          }
         },
         'click .js-vote'(e) {
           const forIt = $(e.target).hasClass('js-vote-positive');