Merge pull request #189 from taigaio/bug/678/backlog-scroll

fix #678 - it's possible to scroll when drag US's

app/coffee/modules/backlog/sortable.coffee

@@ -58,9 +58,7 @@ BacklogSortableDirective = ($repo, $rs, $rootscope, $tgConfirm) ->
                 containment: ".wrapper"
                 dropOnEmpty: true
                 placeholder: "row us-item-row us-item-drag sortable-placeholder"
-                # With scroll activated, it has strange behavior
-                # with not full screen browser window.
-                scroll: false
+                scroll: true
                 # A consequence of length of backlog user story item
                 # the default tolerance ("intersection") not works properly.
                 tolerance: "pointer"
@@ -153,6 +151,7 @@ SprintSortableDirective = ($repo, $rs, $rootscope) ->
             # If the user has not enough permissions we don't enable the sortable
             if project.my_permissions.indexOf("modify_us") > -1
                 $el.sortable({
+                    scroll: true
                     dropOnEmpty: true
                     connectWith: ".sprint-table,.backlog-table-body,.empty-backlog"
                 })

app/coffee/modules/backlog/sprints.coffee

@@ -29,23 +29,44 @@ module = angular.module("taigaBacklog")
 #############################################################################
 
 BacklogSprintDirective = ($repo, $rootscope) ->
+    sprintTableMinHeight = 50
+    slideOptions = {
+        duration: 500,
+        easing: 'linear'
+    }
+
+    refreshSprintTableHeight = (sprintTable) =>
+        if !sprintTable.find(".row").length
+            sprintTable.css("height", sprintTableMinHeight)
+        else
+            sprintTable.css("height", "auto")
+
+    toggleSprint = ($el) =>
+        sprintTable = $el.find(".sprint-table")
+        sprintArrow = $el.find(".icon-arrow-up")
+
+        sprintArrow.toggleClass('active')
+        sprintTable.toggleClass('open')
+
+        refreshSprintTableHeight(sprintTable)
+
     link = ($scope, $el, $attrs) ->
         $scope.$watch $attrs.tgBacklogSprint, (sprint) ->
             sprint = $scope.$eval($attrs.tgBacklogSprint)
 
             if $scope.$first
-                $el.addClass("sprint-current")
-                $el.find(".sprint-table").addClass('open')
+                toggleSprint($el)
             else if sprint.closed
                 $el.addClass("sprint-closed")
             else if not $scope.$first and not sprint.closed
+                toggleSprint($el)
                 $el.addClass("sprint-old-open")
 
         # Event Handlers
         $el.on "click", ".sprint-name > .icon-arrow-up", (event) ->
-            target = $(event.currentTarget)
-            target.toggleClass('active')
-            $el.find(".sprint-table").toggleClass('open')
+            toggleSprint($el)
+
+            $el.find(".sprint-table").slideToggle(slideOptions)
 
         $el.on "click", ".sprint-name > .icon-edit", (event) ->
             sprint = $scope.$eval($attrs.tgBacklogSprint)

app/coffee/modules/nav.coffee

@@ -121,7 +121,10 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
 
             timeout timeoutValue, ->
                 overlay.one 'transitionend', () ->
-                    $(document.body).removeClass("loading-project open-projects-nav closed-projects-nav")
+                    $(document.body)
+                        .removeClass("loading-project open-projects-nav closed-projects-nav")
+                        .css("overflow-x", "visible")
+
                     overlay.hide()
 
                 $(document.body).addClass("closed-projects-nav")
@@ -153,11 +156,12 @@ ProjectsNavigationDirective = ($rootscope, animationFrame, $timeout, tgLoader, $
 
         $scope.$on "nav:projects-list:open", ->
             if !$(document.body).hasClass("open-projects-nav")
-                animationFrame.add () ->
-                    overlay.show()
+                animationFrame.add () => overlay.show()
 
-            animationFrame.add () ->
-                $(document.body).toggleClass("open-projects-nav")
+            animationFrame.add(
+                () => $(document.body).css("overflow-x", "hidden")
+                () => $(document.body).toggleClass("open-projects-nav")
+            )
 
         $el.on "click", ".projects-list > li > a", (event) ->
             # HACK: to solve a problem with the loader when the next url

app/styles/layout/base.scss

@@ -1,6 +1,5 @@
 // Basic layout styles
 html {
-    height: 100%;
     min-height: 100%;
     width: 100%;
 }
@@ -9,9 +8,7 @@ body {
     background: #fff; // fallback
     color: #444;
     -webkit-font-smoothing: antialiased; // Fix for webkit renderin
-    height: 100%;
     min-height: 100%;
-    overflow-x: hidden; // open-projects-nav
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     width: 100%;

app/styles/modules/backlog/sprints.scss

@@ -116,10 +116,6 @@
         }
     }
     .sprint-table {
-        @include slide(1000px, overflow-x);
-        &.open {
-            min-height: 50px;
-        }
         .row {
             @include table-flex();
             border-bottom: 1px solid $gray-light;
@@ -211,13 +207,13 @@
             }
         }
     }
-    .sprint-table {
-        @include slide(1000px, overflow-y);
-    }
 }
 
 // If sprint is closed and date is old
 .sprint-closed {
+    .sprint-table {
+        display: none;
+    }
     .sprint-name {
         .icon-arrow-up {
             @include transform(rotate(180deg));
@@ -242,9 +238,6 @@
             background: darken($gray-light, 10%);
         }
     }
-    .sprint-table {
-        @include slide(1000px, overflow-y);
-    }
     .button-gray {
         background: $gray-light;
     }