diff --git a/src/app/kanban/kanban-board/kanban-board.component.css b/src/app/kanban/kanban-board/kanban-board.component.css index e69de29..dbf8b41 100644 --- a/src/app/kanban/kanban-board/kanban-board.component.css +++ b/src/app/kanban/kanban-board/kanban-board.component.css @@ -0,0 +1,5 @@ +:host { + display: inline-block; + height: 100vh; + overflow: scroll; +} diff --git a/src/app/kanban/kanban-board/kanban-board.component.ts b/src/app/kanban/kanban-board/kanban-board.component.ts index 0dc54e9..ebf56a2 100644 --- a/src/app/kanban/kanban-board/kanban-board.component.ts +++ b/src/app/kanban/kanban-board/kanban-board.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, HostBinding, HostDecorator, HostListener, OnInit} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {ActivatedRoute} from '@angular/router'; @@ -11,6 +11,9 @@ import { const WIP_LIMIT_INPROGRESS = 12; const WIP_LIMIT_VERIFICATION = 8; +const STYLE_HIDDEN = 'hidden'; +const STYLE_VISIBLE = 'scroll'; + @Component({ selector: 'app-kanban-board', templateUrl: './kanban-board.component.html', @@ -18,6 +21,8 @@ const WIP_LIMIT_VERIFICATION = 8; }) export class KanbanBoardComponent implements OnInit { + @HostBinding('style.overflow') hostOverflow = STYLE_HIDDEN; + constructor(private titleService: Title, private route: ActivatedRoute, private kanbanService: KanbanService) { @@ -70,4 +75,14 @@ export class KanbanBoardComponent implements OnInit { ).length > WIP_LIMIT_VERIFICATION, }; } + + @HostListener('mouseover') + private onMouseOver() { + this.hostOverflow = STYLE_VISIBLE; + } + + @HostListener('mouseout') + private onMouseOut() { + this.hostOverflow = STYLE_HIDDEN; + } } diff --git a/src/styles.css b/src/styles.css index 1489d98..4378392 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,13 +1,22 @@ /* You can add global styles to this file, and also import other style files */ +html, +body { + height: 100% !important; + overflow: hidden; +} + body { background-color: #303030 !important; color: #eeeeee !important; margin-top: 1em !important; margin-bottom: 1em !important; - overflow: hidden; font-weight: bold !important; } +app-kanban-board { + overflow: hidden; +} + .ui.fullwide-container { margin-left: 1em; margin-right: 1em;