diff options
author | Phil Hughes <me@iamphill.com> | 2016-08-19 16:16:07 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-08-19 18:37:46 +0300 |
commit | 888c04818c1b0eeaa29dd9ef2e9f2600bd8cc1a1 (patch) | |
tree | 26fcbbf7e95034361558ef231bc545596d2d36c1 /app/assets | |
parent | 206375c84fef349c4dce8abcc7bbadfd27be0df8 (diff) |
Improvements to issue boards on mobile
Diffstat (limited to 'app/assets')
5 files changed, 34 insertions, 36 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 5ef6a1b2277..0bf7d632be3 100644 --- a/app/assets/javascripts/boards/components/board.js.es6 +++ b/app/assets/javascripts/boards/components/board.js.es6 @@ -72,11 +72,21 @@ } }); - if (bp.getBreakpointSize() === 'xs') { - options.handle = '.js-board-drag-handle'; - } - this.sortable = Sortable.create(this.$el.parentNode, options); + + // if (gl.issueBoards.touchEnabled) { + // this.$on('scroll', () => { + // if (!startedDragging) { + // this.sortable.option("disabled", true); + // } + // this.$broadcast('scroll'); + // }); + // + // this.$on('scrollend', () => { + // this.sortable.option("disabled", false); + // this.$broadcast('scrollend'); + // }); + // } }, beforeDestroy () { Store.state.lists.$remove(this.list); diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6 index dceacb25452..f735ef10f9f 100644 --- a/app/assets/javascripts/boards/components/board_list.js.es6 +++ b/app/assets/javascripts/boards/components/board_list.js.es6 @@ -74,10 +74,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 @@ -86,6 +82,18 @@ this.loadNextPage(); } }; + + // if (gl.issueBoards.touchEnabled) { + // this.$on('scroll', () => { + // if (!startedDragging) { + // this.sortable.option("disabled", true); + // } + // }); + // + // this.$on('scrollend', () => { + // this.sortable.option("disabled", false); + // }); + // } } }); })(); 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 8e8d13ede5a..44addb3ea98 100644 --- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 +++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 @@ -13,6 +13,8 @@ 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, @@ -20,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: gl.issueBoards.onStart, onEnd: gl.issueBoards.onEnd diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 2d1cb547f95..38f7a08fec2 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -105,8 +105,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); @@ -158,14 +158,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 { @@ -268,11 +260,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) { @@ -293,17 +281,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; |