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 @@ -
+ (mouseenter)="setRepeater(-10)" + (mouseleave)="clearRepeater()">
@@ -30,8 +30,8 @@
+ (mouseenter)="setRepeater(10)" + (mouseleave)="clearRepeater()">
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() {