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",
"version": "1.9.3",
"version": "1.9.4",
"author": "Florian Hartwich <hardi@noarch.de>",
"private": true,
"scripts": {

View File

@ -1,24 +1,23 @@
<div *ngIf="!isSmallLayout">
<div class="scroll-btn"
<div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
<div class="scroll-btn-left"
*ngIf="isLeftScrollVisible"
(mouseenter)="setRepeater(-10)"
(mouseleave)="clearRepeater()">
<mat-icon svgIcon="chevron-left"></mat-icon>
</div>
<div class="campaign-horizontal-list" #horizontalList>
<div class="campaign-entry"
[ngClass]="{active : selectedCampaignId === 'all'}"
(click)="select({_id:'all'})">
{{'stats.campaign.title.all.time.overview' | translate}}
</div>
<div class="campaign-entry"
*ngFor="let campaign of campaigns$ | async"
[ngClass]="{active : campaign._id === selectedCampaignId}"
(click)="select(campaign)">
{{campaign.title}}
<span style="display:inline-block;"
*ngIf="loginService.hasPermission(3)">
<div class="campaign-entry"
[ngClass]="{active : selectedCampaignId === 'all'}"
(click)="select({_id:'all'})">
{{'stats.campaign.title.all.time.overview' | translate}}
</div>
<div class="campaign-entry"
*ngFor="let campaign of campaigns$ | async"
[ngClass]="{active : campaign._id === selectedCampaignId}"
(click)="select(campaign)">
{{campaign.title}}
<span style="display:inline-block;"
*ngIf="loginService.hasPermission(3)">
<button mat-icon-button
[matMenuTriggerFor]="menu"
(click)="$event.stopPropagation()"
@ -36,10 +35,9 @@
</button>
</mat-menu>
</span>
</div>
</div>
<div class="scroll-btn scroll-btn-right"
<div class="scroll-btn-right"
*ngIf="isRightScrollVisible"
(mouseenter)="setRepeater(10)"
(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 {
width: 100%;
height: 100%;
@ -23,29 +6,47 @@
padding: 0;
overflow: hidden;
box-shadow: #666666 1px 1px 4px;
}
.campaign-entry {
border: 1px solid #222222;
min-width: 20%;
max-height: 4em;
padding: 10px 0;
text-align: center;
cursor: pointer;
font-size: 16px;
float: left;
background: #424242;
color: #9d9d9d;
}
.scroll-btn-left {
position: absolute;
height: 46px;
width: 32px;
cursor: pointer;
.active {
background: #222222;
color: white;
border-bottom: 3px solid #ffd740;
}
mat-icon {
height: 46px;
width: 28px;
}
}
.campaign-entry:hover {
border-bottom: 3px solid #ffd740;
.scroll-btn-right {
@extend .scroll-btn-left;
top: 0;
left: calc(100vw - 32px);
}
.campaign-entry {
border: 1px solid #222222;
min-width: 20%;
max-height: 4em;
padding: 10px 0;
text-align: center;
cursor: pointer;
font-size: 16px;
float: left;
background: #424242;
color: #9d9d9d;
&:hover {
border-bottom: 3px solid #ffd740;
}
&.active {
background: #222222;
color: white;
border-bottom: 3px solid #ffd740;
}
}
}
.campaign-select-small {