Mobile and Desktop drag handles part 1.

Thanks to xet7 !

Related #2081
This commit is contained in:
Lauri Ojansivu 2019-09-13 03:45:55 +03:00
parent 0fcfc3a340
commit ff550e9110
9 changed files with 39 additions and 16 deletions

View file

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

View file

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

View file

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