From ea4d5d887f13f79b2ed55254ac928c6e752de437 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 4 Feb 2015 08:01:57 +0100 Subject: [PATCH 1/2] replace js height calculator by displayFlex --- app/coffee/modules/kanban/main.coffee | 30 ------------------- app/coffee/modules/taskboard/main.coffee | 24 --------------- .../includes/modules/kanban-table.jade | 2 +- app/partials/kanban/kanban.jade | 3 +- app/styles/layout/kanban.scss | 6 ++++ app/styles/layout/taskboard.scss | 8 +++++ .../modules/backlog/taskboard-table.scss | 3 ++ app/styles/modules/kanban/kanban-table.scss | 3 ++ app/styles/shame/shame.scss | 12 -------- 9 files changed, 22 insertions(+), 69 deletions(-) diff --git a/app/coffee/modules/kanban/main.coffee b/app/coffee/modules/kanban/main.coffee index d82a8065..65eac846 100644 --- a/app/coffee/modules/kanban/main.coffee +++ b/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 ############################################################################# diff --git a/app/coffee/modules/taskboard/main.coffee b/app/coffee/modules/taskboard/main.coffee index 00cef123..2bc15a7d 100644 --- a/app/coffee/modules/taskboard/main.coffee +++ b/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 ############################################################################# diff --git a/app/partials/includes/modules/kanban-table.jade b/app/partials/includes/modules/kanban-table.jade index a3507eac..25f32625 100644 --- a/app/partials/includes/modules/kanban-table.jade +++ b/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, diff --git a/app/partials/kanban/kanban.jade b/app/partials/kanban/kanban.jade index 3a010018..b8354946 100644 --- a/app/partials/kanban/kanban.jade +++ b/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 diff --git a/app/styles/layout/kanban.scss b/app/styles/layout/kanban.scss index 41e161d9..8421f1bd 100644 --- a/app/styles/layout/kanban.scss +++ b/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; } diff --git a/app/styles/layout/taskboard.scss b/app/styles/layout/taskboard.scss index 40f80cf1..b415fc84 100644 --- a/app/styles/layout/taskboard.scss +++ b/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); } diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index 3a75204f..23900067 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/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 { diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index d542a418..e5a3e588 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/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; diff --git a/app/styles/shame/shame.scss b/app/styles/shame/shame.scss index 436b0a6c..43772411 100644 --- a/app/styles/shame/shame.scss +++ b/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 { From e5687d217201d050a14913cc51b8a9014d6ddfd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Fri, 6 Feb 2015 09:09:32 +0100 Subject: [PATCH 2/2] Fix wrong class --- app/styles/layout/taskboard.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/styles/layout/taskboard.scss b/app/styles/layout/taskboard.scss index b415fc84..71ee04c2 100644 --- a/app/styles/layout/taskboard.scss +++ b/app/styles/layout/taskboard.scss @@ -3,7 +3,7 @@ flex-direction: column; max-height: 100vh; h1, - graphics-container, + .graphics-container, .summary { flex-shrink: 0; }