* 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 {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;
}
}

View File

@ -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;