Added Sprints transitions

app/coffee/modules/backlog/main.coffee

@@ -375,6 +375,7 @@ BacklogSprintDirective = ($repo) ->
         sprint = $scope.$eval($attrs.tgBacklogSprint)
         if $scope.$first
             $el.addClass("sprint-current")
+            $el.find(".sprint-table").addClass('open')
 
         else if sprint.closed
             $el.addClass("sprint-closed")
@@ -387,8 +388,10 @@ BacklogSprintDirective = ($repo) ->
         $el.find(".current-progress").css("width", "#{progressPercentage}%")
 
         # Event Handlers
-        $el.on "click", ".sprint-name > a", (event) ->
+        $el.on "click", ".sprint-name > .icon-arrow-up", (event) ->
-            $el.find(".sprint-table").toggle()
+            target = $(event.currentTarget)
+            target.toggleClass('active')
+            $el.find(".sprint-table").toggleClass('open')
 
     #########################
     ## Drag & Drop Link
@@ -571,7 +574,7 @@ UsPointsDirective = ($repo) ->
             values = _.filter(values, (num) -> num?)
             if values.length == 0
                 return "?"
-                
+
             return _.reduce(values, (acc, num) -> acc + num)
 
         updatePoints(null)

app/partials/views/modules/sprints.jade

@@ -15,6 +15,7 @@ section.sprints
             div.sprint-name
                 a.icon.icon-arrow-up(href="", title="compact Sprint")
                 span {{ sprint.name }}
+                a.icon.icon-edit(href="", title="Edit Sprint")
             div.sprint-summary
                 div.sprint-date(tg-date-range="sprint.estimated_start,sprint.estimated_finish")
                 ul

app/styles/modules/sprints.scss

@@ -23,12 +23,42 @@
     }
     .sprint {
         margin-bottom: 2rem;
+        position: relative;
+        &:hover {
+            .icon-edit {
+                @include transition (opacity .2s ease-in);
+                opacity: 1;
+            }
+        }
         .icon {
             display: inline-block;
+        }
+        .icon-arrow-up {
+            @include transform(rotate(180deg));
+            vertical-align: baseline;
+            &:hover,
+            &.active {
+                @include transform(rotate(0));
+                @include transition (all .2s ease-in);
+            }
+            &.active {
+                &:hover {
+                    @include transition (all .2s ease-in);
+                    @include transform(rotate(180deg));
+                }
+            }
+        }
+        .icon-edit {
+            @include transition (opacity .2s ease-in);
+            color: $gray-light;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
             vertical-align: baseline;
             &:hover {
-                @include transform(rotate(180deg));
+                @include transition (color .2s ease-in);
-                @include transition (all .2s ease-in);
+                color: $green-taiga;
             }
         }
         .number {
@@ -81,28 +111,10 @@
         }
     }
     .sprint-table {
-        align-content: stretch;
+        @include slide(1000px, overflow-y);
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        width: 100%;
-        @for $i from 1 through 8 {
-            .width-#{$i} {
-                flex-basis: 50px;
-                flex-grow: $i;
-                flex-shrink: 0;
-            }
-        }
         .row {
-            align-content: stretch;
+            @include table-flex();
-            align-items: stretch;
             border-bottom: 1px solid $gray-light;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
             padding: .5em 0;
             text-align: left;
             width: 100%;
@@ -116,17 +128,19 @@
             }
         }
         .column-us {
+            @include table-flex-child(3, 0, 0);
             @extend %small;
             padding: 0 4px;
         }
+        .column-points {
+            @include table-flex-child(1, 0, 0);
+            padding: 0 4px;
+            text-align: right;
+        }
         .us-name {
             @include ellipsis(250px);
             display: block;
         }
-        .column-points {
-            padding: 0 4px;
-            text-align: right;
-        }
     }
     .button-gray {
         display: block;
@@ -153,28 +167,42 @@
 // If Sprint is open but date is old
 .sprint-old-open {
     .sprint-name {
-        .icon {
+        .icon-arrow-up {
             @include transform(rotate(180deg));
-            &:hover {
+            &:hover,
+            &.active {
                 @include transform(rotate(0));
                 @include transition (all .2s ease-in);
             }
+            &.active {
+                &:hover {
+                    @include transform(rotate(180deg));
+                    @include transition (all .2s ease-in);
+                }
+            }
         }
     }
     .sprint-table {
-        display: none;
+        @include slide(1000px, overflow-y);
     }
 }
 
 // If sprint is closed and date is old
 .sprint-closed {
     .sprint-name {
-        .icon {
+        .icon-arrow-up {
             @include transform(rotate(180deg));
-            &:hover {
+            &:hover,
+            &.active {
                 @include transform(rotate(0));
                 @include transition (all .2s ease-in);
             }
+            &.active {
+                &:hover {
+                    @include transform(rotate(180deg));
+                    @include transition (all .2s ease-in);
+                }
+            }
         }
     }
     .number,
@@ -187,7 +215,7 @@
         }
     }
     .sprint-table {
-        display: none;
+        @include slide(1000px, overflow-y);
     }
     .button-gray {
         background: lighten($grayer, 40%);