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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
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": {

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

@ -1,24 +1,23 @@
<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'})"> {{'stats.campaign.title.all.time.overview' | translate}}
{{'stats.campaign.title.all.time.overview' | translate}} </div>
</div> <div class="campaign-entry"
<div class="campaign-entry" *ngFor="let campaign of campaigns$ | async"
*ngFor="let campaign of campaigns$ | async" [ngClass]="{active : campaign._id === selectedCampaignId}"
[ngClass]="{active : campaign._id === selectedCampaignId}" (click)="select(campaign)">
(click)="select(campaign)"> {{campaign.title}}
{{campaign.title}} <span style="display:inline-block;"
<span style="display:inline-block;" *ngIf="loginService.hasPermission(3)">
*ngIf="loginService.hasPermission(3)">
<button mat-icon-button <button mat-icon-button
[matMenuTriggerFor]="menu" [matMenuTriggerFor]="menu"
(click)="$event.stopPropagation()" (click)="$event.stopPropagation()"
@ -36,10 +35,9 @@
</button> </button>
</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()">

75
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
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,29 +6,47 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: #666666 1px 1px 4px; box-shadow: #666666 1px 1px 4px;
}
.campaign-entry { .scroll-btn-left {
border: 1px solid #222222; position: absolute;
min-width: 20%; height: 46px;
max-height: 4em; width: 32px;
padding: 10px 0; cursor: pointer;
text-align: center;
cursor: pointer;
font-size: 16px;
float: left;
background: #424242;
color: #9d9d9d;
}
.active { mat-icon {
background: #222222; height: 46px;
color: white; width: 28px;
border-bottom: 3px solid #ffd740; }
} }
.campaign-entry:hover { .scroll-btn-right {
border-bottom: 3px solid #ffd740; @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 { .campaign-select-small {