hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Fix horizontal hover scrolling

pull/43/head
Florian Hartwich 2018-07-27 15:00:58 +02:00
parent da6037d001
commit b93830993b
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.css
View File

@ -7,9 +7,18 @@
.scroll-btn-right { .scroll-btn-right {
top: 50px; 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 { .campaign-horizontal-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -17,7 +26,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: #dadada 0px 1px 5px; box-shadow: #dadada 0 1px 5px;
} }
.campaign-entry { .campaign-entry {

10
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
View File

@ -1,7 +1,7 @@
<div class="scroll-btn" <div class="scroll-btn scroll-btn-left"
*ngIf="isLeftScrollVisible" *ngIf="isLeftScrollVisible"
(mouseenter)="setRepeater(-25)" (mouseenter)="setRepeater(-10)"
(mouseout)="clearRepeater()"> (mouseleave)="clearRepeater()">
<mat-icon svgIcon="chevron-left"></mat-icon> <mat-icon svgIcon="chevron-left"></mat-icon>
</div> </div>
@ -30,8 +30,8 @@
</div> </div>
<div class="scroll-btn scroll-btn-right" <div class="scroll-btn scroll-btn-right"
(mouseenter)="setRepeater(25)" (mouseenter)="setRepeater(10)"
(mouseout)="clearRepeater()"> (mouseleave)="clearRepeater()">
<mat-icon svgIcon="chevron-right"></mat-icon> <mat-icon svgIcon="chevron-right"></mat-icon>
</div> </div>

3
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts
View File

@ -17,7 +17,6 @@ export class CampaignNavigationComponent {
} }
public scrollList(scrollValue: number): void { public scrollList(scrollValue: number): void {
console.log("call")
this.panel.nativeElement.scrollLeft += scrollValue; this.panel.nativeElement.scrollLeft += scrollValue;
if (this.panel.nativeElement.scrollLeft > 0) { if (this.panel.nativeElement.scrollLeft > 0) {
this.isLeftScrollVisible = true this.isLeftScrollVisible = true
@ -28,7 +27,7 @@ export class CampaignNavigationComponent {
} }
setRepeater(value: number) { setRepeater(value: number) {
this.repeater = setInterval(() => this.scrollList(value), 200); this.repeater = setInterval(() => this.scrollList(value), 20);
} }
clearRepeater() { clearRepeater() {