diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-08-19 17:33:42 +0000 |
---|---|---|
committer | Ruben Davila <rdavila84@gmail.com> | 2016-08-19 15:22:42 -0500 |
commit | a92ab4973bc8177c7964156d462d3e99bc40ee1b (patch) | |
tree | 40be58b51b163f460cf1ad7fa661a9622ba3ed69 | |
parent | 41a19f01c5a9ab5dccd93d51703872cc3dcdb4e6 (diff) | |
download | gitlab-ce-a92ab4973bc8177c7964156d462d3e99bc40ee1b.tar.gz |
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
7 files changed, 19 insertions, 38 deletions
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6 index 2c65d4427be..a612cf0f1ae 100644 --- a/app/assets/javascripts/boards/boards_bundle.js.es6 +++ b/app/assets/javascripts/boards/boards_bundle.js.es6 @@ -38,7 +38,7 @@ $(() => { ready () { Store.disabled = this.disabled; gl.boardService.all() - .then((resp) => { + .then((resp) => { resp.json().forEach((board) => { const list = Store.addList(board); diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6 index e17784e7948..7464386e7ae 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -72,10 +72,6 @@ } }); - if (bp.getBreakpointSize() === 'xs') { - options.handle = '.js-board-drag-handle'; - } - this.sortable = Sortable.create(this.$el.parentNode, options); }, beforeDestroy () { diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index 1503d14c508..2fb2272f779 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -72,10 +72,6 @@ } }); - if (bp.getBreakpointSize() === 'xs') { - options.handle = '.js-card-drag-handle'; - } - this.sortable = Sortable.create(this.$els.list, options); // Scroll event on list to load more diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 index b7afe4897b6..b451a7d6494 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 +++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 @@ -2,6 +2,19 @@ window.gl = window.gl || {}; 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) => { let defaultSortOptions = { forceFallback: true, @@ -9,7 +22,8 @@ fallbackOnBody: true, ghostClass: 'is-ghost', filter: '.has-tooltip', - scrollSensitivity: 100, + delay: gl.issueBoards.touchEnabled ? 100 : 0, + scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100, scrollSpeed: 20, onStart () { document.body.classList.add('is-dragging'); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index c2cdd45b6e1..6ffae15008e 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -101,8 +101,8 @@ .board { display: -webkit-flex; display: flex; - min-width: calc(100vw - 15px); - max-width: calc(100vw - 15px); + min-width: calc(85vw - 15px); + max-width: calc(85vw - 15px); margin-bottom: 25px; padding-right: ($gl-padding / 2); padding-left: ($gl-padding / 2); @@ -154,14 +154,6 @@ padding: $gl-padding; font-size: 1em; border-bottom: 1px solid $border-color; - - .board-mobile-handle { - position: relative; - left: 0; - top: 1px; - margin-top: 0; - margin-right: 5px; - } } .board-search-container { @@ -269,11 +261,7 @@ list-style: none; &.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) { @@ -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 { margin: 0; font-size: 1em; diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml index f8ebf397ee2..de53a298f84 100644 --- a/app/views/projects/boards/components/_board.html.haml +++ b/app/views/projects/boards/components/_board.html.haml @@ -11,7 +11,6 @@ .board-inner %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) }" } - = icon("align-justify", class: "board-mobile-handle js-board-drag-handle", "v-if" => "(!disabled && !list.preset)") {{ list.title }} %span.pull-right{ "v-if" => "list.type !== 'blank'" } {{ list.issues.length }} diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml index b20c23f6b8e..e8b60b54d80 100644 --- a/app/views/projects/boards/components/_card.html.haml +++ b/app/views/projects/boards/components/_card.html.haml @@ -9,7 +9,6 @@ "track-by" => "id" } %li.card{ ":class" => "{ 'user-can-drag': !disabled }", ":index" => "index" } - = icon("align-justify", class: "board-mobile-handle js-card-drag-handle", "v-if" => "!disabled") %h4.card-title = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential") %a{ ":href" => "issueLinkBase + '/' + issue.id", |