* scrollbar visible on desktop when mouse is hovered over the site

This commit is contained in:
Dávid Danyi 2017-08-28 13:06:45 +02:00
parent 6fc65e54d5
commit 4704a6a0d1
3 changed files with 31 additions and 2 deletions

View File

@ -0,0 +1,5 @@
:host {
display: inline-block;
height: 100vh;
overflow: scroll;
}

View File

@ -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 {Title} from '@angular/platform-browser';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
@ -11,6 +11,9 @@ import {
const WIP_LIMIT_INPROGRESS = 12; const WIP_LIMIT_INPROGRESS = 12;
const WIP_LIMIT_VERIFICATION = 8; const WIP_LIMIT_VERIFICATION = 8;
const STYLE_HIDDEN = 'hidden';
const STYLE_VISIBLE = 'scroll';
@Component({ @Component({
selector: 'app-kanban-board', selector: 'app-kanban-board',
templateUrl: './kanban-board.component.html', templateUrl: './kanban-board.component.html',
@ -18,6 +21,8 @@ const WIP_LIMIT_VERIFICATION = 8;
}) })
export class KanbanBoardComponent implements OnInit { export class KanbanBoardComponent implements OnInit {
@HostBinding('style.overflow') hostOverflow = STYLE_HIDDEN;
constructor(private titleService: Title, constructor(private titleService: Title,
private route: ActivatedRoute, private route: ActivatedRoute,
private kanbanService: KanbanService) { private kanbanService: KanbanService) {
@ -70,4 +75,14 @@ export class KanbanBoardComponent implements OnInit {
).length > WIP_LIMIT_VERIFICATION, ).length > WIP_LIMIT_VERIFICATION,
}; };
} }
@HostListener('mouseover')
private onMouseOver() {
this.hostOverflow = STYLE_VISIBLE;
}
@HostListener('mouseout')
private onMouseOut() {
this.hostOverflow = STYLE_HIDDEN;
}
} }

View File

@ -1,13 +1,22 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
html,
body {
height: 100% !important;
overflow: hidden;
}
body { body {
background-color: #303030 !important; background-color: #303030 !important;
color: #eeeeee !important; color: #eeeeee !important;
margin-top: 1em !important; margin-top: 1em !important;
margin-bottom: 1em !important; margin-bottom: 1em !important;
overflow: hidden;
font-weight: bold !important; font-weight: bold !important;
} }
app-kanban-board {
overflow: hidden;
}
.ui.fullwide-container { .ui.fullwide-container {
margin-left: 1em; margin-left: 1em;
margin-right: 1em; margin-right: 1em;