Commit a92ab497 authored by Jacob Schatz's avatar Jacob Schatz Committed by Ruben Davila

Merge branch 'issue-boards-mobile-improvements' into 'master'

Improvements to issue boards on mobile

- Removes the drag handles
- Adds a delay before dragging can start otherwise you can't scroll the page

See merge request !5897
parent 41a19f01
...@@ -72,10 +72,6 @@ ...@@ -72,10 +72,6 @@
} }
}); });
if (bp.getBreakpointSize() === 'xs') {
options.handle = '.js-board-drag-handle';
}
this.sortable = Sortable.create(this.$el.parentNode, options); this.sortable = Sortable.create(this.$el.parentNode, options);
}, },
beforeDestroy () { beforeDestroy () {
......
...@@ -72,10 +72,6 @@ ...@@ -72,10 +72,6 @@
} }
}); });
if (bp.getBreakpointSize() === 'xs') {
options.handle = '.js-card-drag-handle';
}
this.sortable = Sortable.create(this.$els.list, options); this.sortable = Sortable.create(this.$els.list, options);
// Scroll event on list to load more // Scroll event on list to load more
......
...@@ -2,6 +2,19 @@ ...@@ -2,6 +2,19 @@
window.gl = window.gl || {}; window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {}; window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.onStart = () => {
$('.has-tooltip').tooltip('hide')
.tooltip('disable');
document.body.classList.add('is-dragging');
};
gl.issueBoards.onEnd = () => {
$('.has-tooltip').tooltip('enable');
document.body.classList.remove('is-dragging');
};
gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
gl.issueBoards.getBoardSortableDefaultOptions = (obj) => { gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
let defaultSortOptions = { let defaultSortOptions = {
forceFallback: true, forceFallback: true,
...@@ -9,7 +22,8 @@ ...@@ -9,7 +22,8 @@
fallbackOnBody: true, fallbackOnBody: true,
ghostClass: 'is-ghost', ghostClass: 'is-ghost',
filter: '.has-tooltip', filter: '.has-tooltip',
scrollSensitivity: 100, delay: gl.issueBoards.touchEnabled ? 100 : 0,
scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
scrollSpeed: 20, scrollSpeed: 20,
onStart () { onStart () {
document.body.classList.add('is-dragging'); document.body.classList.add('is-dragging');
......
...@@ -101,8 +101,8 @@ ...@@ -101,8 +101,8 @@
.board { .board {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
min-width: calc(100vw - 15px); min-width: calc(85vw - 15px);
max-width: calc(100vw - 15px); max-width: calc(85vw - 15px);
margin-bottom: 25px; margin-bottom: 25px;
padding-right: ($gl-padding / 2); padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2); padding-left: ($gl-padding / 2);
...@@ -154,14 +154,6 @@ ...@@ -154,14 +154,6 @@
padding: $gl-padding; padding: $gl-padding;
font-size: 1em; font-size: 1em;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
.board-mobile-handle {
position: relative;
left: 0;
top: 1px;
margin-top: 0;
margin-right: 5px;
}
} }
.board-search-container { .board-search-container {
...@@ -269,12 +261,8 @@ ...@@ -269,12 +261,8 @@
list-style: none; list-style: none;
&.user-can-drag { &.user-can-drag {
padding-left: ($gl-padding * 2);
@media (min-width: $screen-sm-min) {
padding-left: $gl-padding; padding-left: $gl-padding;
} }
}
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 5px; margin-bottom: 5px;
...@@ -294,17 +282,6 @@ ...@@ -294,17 +282,6 @@
} }
} }
.board-mobile-handle {
position: absolute;
left: 10px;
top: 50%;
margin-top: (-15px / 2);
@media (min-width: $screen-sm-min) {
display: none;
}
}
.card-title { .card-title {
margin: 0; margin: 0;
font-size: 1em; font-size: 1em;
......
...@@ -11,7 +11,6 @@ ...@@ -11,7 +11,6 @@
.board-inner .board-inner
%header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" } %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
%h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" } %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
= icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !list.preset)")
{{ list.title }} {{ list.title }}
%span.pull-right{ "v-if" => "list.type !== 'blank'" } %span.pull-right{ "v-if" => "list.type !== 'blank'" }
{{ list.issues.length }} {{ list.issues.length }}
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
"track-by" => "id" } "track-by" => "id" }
%li.card{ ":class" => "{ 'user-can-drag': !disabled }", %li.card{ ":class" => "{ 'user-can-drag': !disabled }",
":index" => "index" } ":index" => "index" }
= icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled")
%h4.card-title %h4.card-title
= icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential") = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
%a{ ":href" => "issueLinkBase + '/' + issue.id", %a{ ":href" => "issueLinkBase + '/' + issue.id",
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment