From 31b3aae64b8b796a58df098fdb24907f46b7b46c Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Tue, 29 Nov 2016 06:22:47 +0100
Subject: [PATCH] Implementation of the space

---
 .../keymap/header/keymap-header.component.scss       |  4 ++++
 src/components/popover/popover.component.scss        |  4 ++++
 src/components/popover/popover.component.ts          | 12 ++++++++----
 .../svg/wrap/svg-keyboard-wrap.component.scss        |  4 ++++
 .../svg/wrap/svg-keyboard-wrap.component.ts          |  5 +++++
 src/main-app/main-app.component.scss                 |  3 +--
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/keymap/header/keymap-header.component.scss b/src/components/keymap/header/keymap-header.component.scss
index 593cb72c..8e33c95a 100644
--- a/src/components/keymap/header/keymap-header.component.scss
+++ b/src/components/keymap/header/keymap-header.component.scss
@@ -1,5 +1,9 @@
 @import '../../../main-app/global-styles';
 
+:host {
+    display: block;
+}
+
 .keymap {
     &__is-default {
 
diff --git a/src/components/popover/popover.component.scss b/src/components/popover/popover.component.scss
index b335624a..6f537f2f 100644
--- a/src/components/popover/popover.component.scss
+++ b/src/components/popover/popover.component.scss
@@ -26,6 +26,10 @@
     }
 }
 
+.nav-tabs > li {
+    overflow: hidden;
+}
+
 .arrowCustom {
     position: absolute;
     top: -16px;
diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts
index c7f60f20..5c33386e 100644
--- a/src/components/popover/popover.component.ts
+++ b/src/components/popover/popover.component.ts
@@ -53,9 +53,12 @@ enum TabName {
                 ]))
             ]),
             transition('closed => opened', [
+                style({
+                    visibility: 'visible'
+                }),
                 animate('200ms ease-out', keyframes([
-                    style({ transform: 'translateY(30px)', visibility: 'visible', opacity: 0, offset: 0 }),
-                    style({ transform: 'translateY(0)', visibility: 'visible', opacity: 1, offset: 1 })
+                    style({ transform: 'translateY(30px)', opacity: 0, offset: 0 }),
+                    style({ transform: 'translateY(0)', opacity: 1, offset: 1 })
                 ]))
             ])
         ])
@@ -148,7 +151,7 @@ export class PopoverComponent implements OnChanges {
     }
 
     private calculatePosition() {
-        const offsetLeft: number = this.wrapPosition.left + 265;
+        const offsetLeft: number = this.wrapPosition.left + 265; // 265 is a width of the side menu with a margin
         const popover: HTMLElement = this.popoverHost.nativeElement;
         let newLeft: number = this.keyPosition.left + (this.keyPosition.width / 2);
 
@@ -163,7 +166,8 @@ export class PopoverComponent implements OnChanges {
             newLeft -= popover.offsetWidth / 2;
         }
 
-        this.topPosition = this.keyPosition.top + this.keyPosition.height + 7;
+        // 7 is a space between a bottom key position and a popover
+        this.topPosition = this.keyPosition.top + this.keyPosition.height + 7 + window.scrollY;
         this.leftPosition = newLeft;
     }
 }
diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.scss b/src/components/svg/wrap/svg-keyboard-wrap.component.scss
index 28d5cb2b..72abb6b3 100644
--- a/src/components/svg/wrap/svg-keyboard-wrap.component.scss
+++ b/src/components/svg/wrap/svg-keyboard-wrap.component.scss
@@ -1,6 +1,10 @@
 :host {
     width: 100%;
     display: block;
+
+    &.space {
+        margin-bottom: 405px;
+    }
 }
 
 svg-keyboard {
diff --git a/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/src/components/svg/wrap/svg-keyboard-wrap.component.ts
index 697e54a1..32c6b182 100644
--- a/src/components/svg/wrap/svg-keyboard-wrap.component.ts
+++ b/src/components/svg/wrap/svg-keyboard-wrap.component.ts
@@ -2,6 +2,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     ElementRef,
+    HostBinding,
     HostListener,
     Input,
     OnChanges,
@@ -107,6 +108,10 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     private wrapHost: HTMLElement;
     private keyElement: HTMLElement;
 
+    @HostBinding('class.space') get space() {
+        return this.popoverEnabled;
+    }
+
     @HostListener('window:resize')
     onResize() {
         if (this.wrapHost) {
diff --git a/src/main-app/main-app.component.scss b/src/main-app/main-app.component.scss
index a4c5d6ea..49520954 100644
--- a/src/main-app/main-app.component.scss
+++ b/src/main-app/main-app.component.scss
@@ -1,6 +1,6 @@
 main-app {
     display: block;
-    height: 100vh;
+    min-height: 100vh;
     width: 100%;
     overflow: hidden;
     position: relative;
@@ -11,7 +11,6 @@ main-app {
 }
 
 .main-content {
-    height: 100%;
     margin-left: 250px;
 }