From b93830993b2b708fcb0bdabc1f5bc8773e7f76ef Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Fri, 27 Jul 2018 15:00:58 +0200
Subject: [PATCH] Fix horizontal hover scrolling

---
 .../campaign-navigation.component.css               | 13 +++++++++++--
 .../campaign-navigation.component.html              | 10 +++++-----
 .../campaign-navigation.component.ts                |  3 +--
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css
index 7b90b1c..e72ddc8 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css
@@ -7,9 +7,18 @@
 
 .scroll-btn-right {
   top: 50px;
-  left: 98%;
+  left: calc(100vw - 45px);
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.89), white);
  }
 
+.scroll-btn-left {
+  background: linear-gradient(to right, white, rgba(255, 255, 255, 0.89));
+}
+
+.scroll-btn mat-icon {
+  height:53px
+}
+
 .campaign-horizontal-list {
   width: 100%;
   height: 100%;
@@ -17,7 +26,7 @@
   margin: 0;
   padding: 0;
   overflow: hidden;
-  box-shadow: #dadada 0px 1px 5px;
+  box-shadow: #dadada 0 1px 5px;
 }
 
 .campaign-entry {
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
index d71d502..30372f7 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
@@ -1,7 +1,7 @@
-<div class="scroll-btn"
+<div class="scroll-btn scroll-btn-left"
      *ngIf="isLeftScrollVisible"
-     (mouseenter)="setRepeater(-25)"
-     (mouseout)="clearRepeater()">
+     (mouseenter)="setRepeater(-10)"
+     (mouseleave)="clearRepeater()">
   <mat-icon svgIcon="chevron-left"></mat-icon>
 </div>
 
@@ -30,8 +30,8 @@
 </div>
 
 <div class="scroll-btn scroll-btn-right"
-     (mouseenter)="setRepeater(25)"
-     (mouseout)="clearRepeater()">
+     (mouseenter)="setRepeater(10)"
+     (mouseleave)="clearRepeater()">
   <mat-icon svgIcon="chevron-right"></mat-icon>
 </div>
 
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts
index cbd27f6..cb21e0c 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts
@@ -17,7 +17,6 @@ export class CampaignNavigationComponent {
   }
 
   public scrollList(scrollValue: number): void {
-    console.log("call")
     this.panel.nativeElement.scrollLeft += scrollValue;
     if (this.panel.nativeElement.scrollLeft > 0) {
       this.isLeftScrollVisible = true
@@ -28,7 +27,7 @@ export class CampaignNavigationComponent {
   }
 
   setRepeater(value: number) {
-    this.repeater = setInterval(() => this.scrollList(value), 200);
+    this.repeater = setInterval(() => this.scrollList(value), 20);
   }
 
   clearRepeater() {