diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 07cd306a5..713b6cbcf 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -89,7 +89,7 @@ BlazeComponent.extendComponent({ helper.append(list.clone()); return helper; }, - handle: '.js-swimlane-header', + handle: '.js-swimlane-header-handle', items: '.swimlane:not(.placeholder)', placeholder: 'swimlane placeholder', distance: 7, diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 3806ce416..4c166c5cc 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -3,6 +3,8 @@ template(name="minicard") class="{{#if isLinkedCard}}linked-card{{/if}}" class="{{#if isLinkedBoard}}linked-board{{/if}}" class="minicard-{{colorClass}}") + .handle + .fa.fa-arrows if cover .minicard-cover(style="background-image: url('{{cover.url}}');") if labels @@ -15,8 +17,6 @@ template(name="minicard") if hiddenMinicardLabelText .minicard-label(class="card-label-{{color}}" title="{{name}}") .minicard-title - .handle - .fa.fa-arrows if $eq 'prefix-with-full-path' currentBoard.presentParentTask .parent-prefix | {{ parentString ' > ' }} diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index c41725726..9997fd5fd 100644 --- a/client/components/cards/minicard.styl +++ b/client/components/cards/minicard.styl @@ -105,7 +105,7 @@ right: 5px; top: 5px; display:none; - @media only screen and (max-width: 1199px) { + @media only screen { display:block; } .fa-arrows diff --git a/client/components/lists/list.js b/client/components/lists/list.js index c2b39be94..650d12953 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -31,11 +31,9 @@ BlazeComponent.extendComponent({ const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)'; const $cards = this.$('.js-minicards'); - if (window.matchMedia('(max-width: 1199px)').matches) { - $('.js-minicards').sortable({ - handle: '.handle', - }); - } + $('.js-minicards').sortable({ + handle: '.handle', + }); $cards.sortable({ connectWith: '.js-minicards:not(.js-list-full)', diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 81938c1a0..459481ea0 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -84,17 +84,16 @@ padding-left: 10px color: #a6a6a6 - .list-header-menu position: absolute padding: 27px 19px margin-top: 1px top: -7px - right: -7px + right: 3px .list-header-plus-icon color: #a6a6a6 - margin-right: 10px + margin-right: 15px .highlight color: #ce1414 @@ -165,7 +164,12 @@ @media screen and (max-width: 800px) .list-header-menu - margin-right: 30px + position: absolute + padding: 27px 19px + margin-top: 1px + top: -7px + margin-right: 50px + right: -3px .mini-list flex: 0 0 60px @@ -221,9 +225,17 @@ padding: 7px top: 50% transform: translateY(-50%) - right: 17px + margin-right: 27px font-size: 20px + .list-header-menu-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + right: 10px + font-size: 24px + .link-board-wrapper display: flex align-items: baseline diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index f930e57af..bbb944454 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -29,8 +29,10 @@ template(name="listHeader") if canSeeAddCard a.js-add-card.fa.fa-plus.list-header-plus-icon a.fa.fa-navicon.js-open-list-menu + a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle else a.list-header-menu-icon.fa.fa-angle-right.js-select-list + a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle else if currentUser.isBoardMember if isWatching i.list-header-watch-icon.fa.fa-eye @@ -39,6 +41,7 @@ template(name="listHeader") if canSeeAddCard a.js-add-card.fa.fa-plus.list-header-plus-icon a.fa.fa-navicon.js-open-list-menu + a.list-header-menu-handle.handle.fa.fa-arrows.js-list-handle template(name="editListTitleForm") .list-composer diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index 8c6aa5a37..e50b3a3f9 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -16,6 +16,7 @@ template(name="swimlaneFixedHeader") unless currentUser.isCommentOnly a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon a.fa.fa-navicon.js-open-swimlane-menu + a.swimlane-header-menu-handle.handle.fa.fa-arrows.js-swimlane-header-handle template(name="editSwimlaneTitleForm") .list-composer diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index e0857003d..81780a71d 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -56,7 +56,7 @@ function initSortable(boardComponent, $listsDom) { $listsDom.sortable({ tolerance: 'pointer', helper: 'clone', - handle: '.js-list-header', + handle: '.js-list-handle', items: '.js-list:not(.js-list-composer)', placeholder: 'list placeholder', distance: 7, @@ -156,7 +156,8 @@ BlazeComponent.extendComponent({ 'input', 'textarea', 'p', - '.js-list-header', + '.js-list-handle', + '.js-swimlane-header-handle', ]; if ( $(evt.target).closest(noDragInside.join(',')).length === 0 && diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 1056e1e35..503091eea 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -50,6 +50,14 @@ margin-left: 5px margin-right: 10px + .swimlane-header-menu-handle + position: absolute + padding: 7px + top: 50% + transform: translateY(-50%) + left: 300px + font-size: 18px + .list-group height: 100%