Fix campaign nav header chevron positioning and sass
parent
35e8b14a34
commit
c56b5a8a62
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "opt-cc",
|
||||
"version": "1.9.3",
|
||||
"version": "1.9.4",
|
||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
@ -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()">
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue