From e69a9f17b8b3c2265f1d6c0992e28bd3939d3a57 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Wed, 21 Jun 2023 23:08:35 +0200 Subject: [PATCH 1/4] open card details always in the center of the screen --- client/components/cards/cardDetails.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css index 15ef09a60..dc2716c3e 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -248,6 +248,14 @@ padding-top: 10px; } @media screen and (min-width: 801px) { + .card-details { + top: 97px; + left: calc(50% - (600px / 2)); + width: 600px; + bottom: 0; + position: fixed; + resize: both; + } .card-details-maximized { top: 97px; left: 0; From 0f1b57fee41e4b8072263450f62f58ed86172cdf Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 26 Sep 2023 22:36:54 +0200 Subject: [PATCH 2/4] remove old open card code --- client/components/boards/boardBody.css | 1 - client/components/boards/boardBody.jade | 3 +-- client/components/cards/cardDetails.css | 13 +++++-------- client/components/cards/cardDetails.js | 26 ++++++++----------------- 4 files changed, 14 insertions(+), 29 deletions(-) diff --git a/client/components/boards/boardBody.css b/client/components/boards/boardBody.css index f928e721d..cb091b57d 100644 --- a/client/components/boards/boardBody.css +++ b/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; diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index aab03d40a..edeb25464 100644 --- a/client/components/boards/boardBody.jade +++ b/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 diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css index dc2716c3e..41815583d 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -256,14 +256,6 @@ position: fixed; resize: both; } - .card-details-maximized { - top: 97px; - left: 0; - right:0; - bottom: 0; - position: fixed; - resize: both; - } .card-details-maximized { padding: 0; flex-shrink: 0; @@ -278,6 +270,11 @@ box-shadow: 0 0 7px 0 #b3b3b3; transition: flex-basis 0.1s; box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + height: calc(100% - 20px); + width: calc(100% - 20px); float: left; } .card-details-maximized .card-details-left { diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 6904add59..a12c9a471 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -79,19 +79,15 @@ BlazeComponent.extendComponent({ 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; + 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; @@ -221,12 +217,6 @@ BlazeComponent.extendComponent({ //------------- } - if (!Utils.isMiniScreen()) { - Meteor.setTimeout(() => { - this.scrollParentContainer(); - }, 500); - } - const $checklistsDom = this.$('.card-checklist-items'); $checklistsDom.sortable({ @@ -452,11 +442,11 @@ BlazeComponent.extendComponent({ 'click .js-maximize-card-details'() { Meteor.call('toggleCardMaximized'); autosize($('.card-details')); -// if (!Utils.isMiniScreen()) { -// Meteor.setTimeout(() => { -// this.scrollParentContainer(); -// }, 500); -// } + if (!Utils.isMiniScreen()) { + Meteor.setTimeout(() => { + this.scrollParentContainer(); + }, 500); + } }, 'click .js-minimize-card-details'() { Meteor.call('toggleCardMaximized'); From 05df419a467be739fb71ca17de677f4e8b4d9fa5 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 26 Sep 2023 22:44:48 +0200 Subject: [PATCH 3/4] maximized card is now always visible --- client/components/cards/cardDetails.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css index 41815583d..286d6d883 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -270,9 +270,8 @@ box-shadow: 0 0 7px 0 #b3b3b3; transition: flex-basis 0.1s; box-sizing: border-box; - position: absolute; - top: 0; - left: 0; + top: 97px; + left: 0px; height: calc(100% - 20px); width: calc(100% - 20px); float: left; From a22631915b82ffa1d51d4b4a75ab5237efea952d Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 26 Sep 2023 22:59:16 +0200 Subject: [PATCH 4/4] remove old open card code to scroll the screen --- client/components/cards/cardDetails.js | 66 -------------------------- 1 file changed, 66 deletions(-) diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index a12c9a471..0351ee94f 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -76,62 +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?! - 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) { @@ -442,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');