Fix campaign nav header chevron positioning and sass

pull/59/head
HardiReady 2019-03-01 23:49:11 +01:00
parent 35e8b14a34
commit c56b5a8a62
3 changed files with 54 additions and 55 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.9.3", "version": "1.9.4",
"author": "Florian Hartwich <hardi@noarch.de>", "author": "Florian Hartwich <hardi@noarch.de>",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@ -1,12 +1,11 @@
<div *ngIf="!isSmallLayout"> <div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
<div class="scroll-btn" <div class="scroll-btn-left"
*ngIf="isLeftScrollVisible" *ngIf="isLeftScrollVisible"
(mouseenter)="setRepeater(-10)" (mouseenter)="setRepeater(-10)"
(mouseleave)="clearRepeater()"> (mouseleave)="clearRepeater()">
<mat-icon svgIcon="chevron-left"></mat-icon> <mat-icon svgIcon="chevron-left"></mat-icon>
</div> </div>
<div class="campaign-horizontal-list" #horizontalList>
<div class="campaign-entry" <div class="campaign-entry"
[ngClass]="{active : selectedCampaignId === 'all'}" [ngClass]="{active : selectedCampaignId === 'all'}"
(click)="select({_id:'all'})"> (click)="select({_id:'all'})">
@ -37,9 +36,8 @@
</mat-menu> </mat-menu>
</span> </span>
</div> </div>
</div>
<div class="scroll-btn scroll-btn-right" <div class="scroll-btn-right"
*ngIf="isRightScrollVisible" *ngIf="isRightScrollVisible"
(mouseenter)="setRepeater(10)" (mouseenter)="setRepeater(10)"
(mouseleave)="clearRepeater()"> (mouseleave)="clearRepeater()">

View File

@ -1,20 +1,3 @@
.scroll-btn {
position: absolute;
height: 46px;
width: 32px;
cursor: pointer;
}
.scroll-btn-right {
top: 0;
left: calc(100vw - 50px);
}
.scroll-btn mat-icon {
height: 46px;
width: 28px;
}
.campaign-horizontal-list { .campaign-horizontal-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -23,6 +6,23 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: #666666 1px 1px 4px; box-shadow: #666666 1px 1px 4px;
.scroll-btn-left {
position: absolute;
height: 46px;
width: 32px;
cursor: pointer;
mat-icon {
height: 46px;
width: 28px;
}
}
.scroll-btn-right {
@extend .scroll-btn-left;
top: 0;
left: calc(100vw - 32px);
} }
.campaign-entry { .campaign-entry {
@ -36,16 +36,17 @@
float: left; float: left;
background: #424242; background: #424242;
color: #9d9d9d; color: #9d9d9d;
&:hover {
border-bottom: 3px solid #ffd740;
} }
.active { &.active {
background: #222222; background: #222222;
color: white; color: white;
border-bottom: 3px solid #ffd740; border-bottom: 3px solid #ffd740;
} }
}
.campaign-entry:hover {
border-bottom: 3px solid #ffd740;
} }
.campaign-select-small { .campaign-select-small {