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 {
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 {

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"
(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>

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 {
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() {