replace js height calculator by displayFlex
parent
a4b10210a7
commit
ea4d5d887f
|
@ -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
|
||||
#############################################################################
|
||||
|
|
|
@ -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
|
||||
#############################################################################
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -1,4 +1,10 @@
|
|||
.kanban {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
header {
|
||||
min-height: 70px;
|
||||
}
|
||||
.kanban-settings {
|
||||
float: right;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue