From c56b5a8a62ee4f185c52bdcec7ae0f9a808a4371 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Fri, 1 Mar 2019 23:49:11 +0100
Subject: [PATCH] Fix campaign nav header chevron positioning and sass

---
 package.json                                  |  2 +-
 .../campaign-navigation.component.html        | 32 ++++----
 .../campaign-navigation.component.scss        | 75 ++++++++++---------
 3 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/package.json b/package.json
index 0fa12db..daa0228 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
index 83a11d5..65827b9 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
@@ -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()">
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
index d4f1a4a..6ce072c 100644
--- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
+++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
@@ -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 {