Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-31 14:48:48 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #5168 from mfilser/open_card_details_always_in_the_middle_of_the_screen

Browse source 
Open card details always in the middle of the screen
This commit is contained in:
Lauri Ojansivu 2023-10-20 01:38:37 +03:00 • committed by GitHub
commit c8f1d99fe6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/components/boards/boardBody.css
View file

@ -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;

3
client/components/boards/boardBody.jade
View file

@ -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

10
client/components/cards/cardDetails.css
View file

@ -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 {

76
client/components/cards/cardDetails.js
View file

@ -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');