Merge pull request #315 from taigaio/bug/2106/empty-kanban-in-firefox

replace js height calculator by displayFlex

app/coffee/modules/kanban/main.coffee

@@ -293,36 +293,6 @@ KanbanDirective = ($repo, $rootscope) ->
 
 module.directive("tgKanban", ["$tgRepo", "$rootScope", KanbanDirective])
 
-
-#############################################################################
-## Kanban Column Height Fixer Directive
-#############################################################################
-
-KanbanColumnHeightFixerDirective = ->
-    mainPadding = 32 # px
-    scrollPadding = 0 # px
-
-    renderSize = ($el) ->
-        elementOffset = $el.parent().parent().offset().top
-        windowHeight = angular.element(window).height()
-        columnHeight = windowHeight - elementOffset - mainPadding - scrollPadding
-        $el.css("height", "#{columnHeight}px")
-
-    link = ($scope, $el, $attrs) ->
-        timeout(500, -> renderSize($el))
-
-        $scope.$on "resize", ->
-            renderSize($el)
-
-        $scope.$on "$destroy", ->
-            $el.off()
-
-    return {link:link}
-
-
-module.directive("tgKanbanColumnHeightFixer", KanbanColumnHeightFixerDirective)
-
-
 #############################################################################
 ## Kanban Archived Status Column Header Control
 #############################################################################

app/coffee/modules/taskboard/main.coffee

@@ -297,30 +297,6 @@ TaskboardTaskDirective = ($rootscope) ->
 
 module.directive("tgTaskboardTask", ["$rootScope", TaskboardTaskDirective])
 
-#############################################################################
-## Taskboard Table Height Fixer Directive
-#############################################################################
-
-TaskboardTableHeightFixerDirective = ->
-    mainPadding = 32 # px
-
-    renderSize = ($el) ->
-        elementOffset = $el.offset().top
-        windowHeight = angular.element(window).height()
-        columnHeight = windowHeight - elementOffset - mainPadding
-        $el.css("height", "#{columnHeight}px")
-
-    link = ($scope, $el, $attrs) ->
-        timeout(500, -> renderSize($el))
-
-        $scope.$on "resize", ->
-            renderSize($el)
-
-    return {link:link}
-
-
-module.directive("tgTaskboardTableHeightFixer", TaskboardTableHeightFixerDirective)
-
 #############################################################################
 ## Taskboard Squish Column Directive
 #############################################################################

app/partials/includes/modules/kanban-table.jade

@@ -32,7 +32,7 @@ div.kanban-table(tg-kanban-squish-column)
                                     tg-kanban-archived-status-header="s")
 
     div.kanban-table-body
-        div.kanban-table-inner(tg-kanban-row-width-fixer)
+        div.kanban-table-inner
             div.kanban-uses-box.task-column(ng-class='{vfold:folds[s.id]}',
                                             ng-repeat="s in usStatusList track by s.id",
                                             tg-kanban-sortable,

app/partials/kanban/kanban.jade

@@ -1,8 +1,7 @@
 div.wrapper(tg-kanban, ng-controller="KanbanController as ctrl"
             ng-init="section='kanban'")
     section.main.kanban
-        header
-            include ../includes/components/mainTitle
+        include ../includes/components/mainTitle
         //-    div.kanban-settings
         //-        // a.button.button-trans(href="", title="Filter")
         //-        //     span.icon.icon-filter

app/styles/layout/kanban.scss

@@ -1,4 +1,10 @@
 .kanban {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    header {
+        min-height: 70px;
+    }
     .kanban-settings {
         float: right;
     }

app/styles/layout/taskboard.scss

@@ -1,4 +1,12 @@
 .taskboard {
+    display: flex;
+    flex-direction: column;
+    max-height: 100vh;
+    h1,
+    .graphics-container,
+    .summary {
+        flex-shrink: 0;
+    }
     .graphics-container {
         @include slide(300px, hidden);
     }

app/styles/modules/backlog/taskboard-table.scss

@@ -45,12 +45,15 @@ $column-margin: 0 10px 0 0;
 }
 
 .taskboard-table {
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
     width: 100%;
 }
 
 .taskboard-table-header {
     margin-bottom: .5rem;
+    min-height: 40px;
     position: relative;
     width: 100%;
     .taskboard-table-inner {

app/styles/modules/kanban/kanban-table.scss

@@ -7,6 +7,8 @@ $column-shrink: 0;
 $column-margin: 0 10px 0 0;
 
 .kanban-table {
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
     width: 100%;
     .vfold {
@@ -48,6 +50,7 @@ $column-margin: 0 10px 0 0;
 .kanban-table-header {
     margin-bottom: .5rem;
     position: relative;
+    min-height: 40px;
     width: 100%;
     .kanban-table-inner {
         display: flex;

app/styles/shame/shame.scss

@@ -1,17 +1,5 @@
 // Shame SCSS decalrations to be refactorized
 
-////TASKBOARD-TABLE.SCSS && TASKBOARD-TABLE.JADE////
-
-//Taskboard table header brokes when added position relative and positionabsolute to its child
-// No clearfix or known hack fixes it
-// Could be because of flexbox?
-// height of the table has been set manually, wich is ugly.
-.taskboard-table-header,
-.kanban-table-header {
-    height: 40px;
-}
-
-
 _:-ms-fullscreen,
 :root .taskboard-table-body {
     .task-row {