From 2c99565b13ff748cdfdd66d5f84c817c0f2b953a Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Mon, 11 Feb 2019 21:55:16 +0100
Subject: [PATCH 1/2] Add war list mouseover and background color select state

---
 .../war/war-list/war-item.component.css       |  5 +
 .../war/war-list/war-list.component.css       | 15 +++
 .../war/war-list/war-list.component.html      | 96 ++++++++++---------
 3 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css
index d31d7ab..b863a03 100644
--- a/static/src/app/statistic/war/war-list/war-item.component.css
+++ b/static/src/app/statistic/war/war-list/war-item.component.css
@@ -3,6 +3,11 @@
   border-right: 1px solid #dadada;
 }
 
+.war-item:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+  border-bottom: 1px solid #dadada;
+}
+
 .war-item-box {
   padding-top: 15px;
 }
diff --git a/static/src/app/statistic/war/war-list/war-list.component.css b/static/src/app/statistic/war/war-list/war-list.component.css
index 4e67fa8..ac840c5 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.css
+++ b/static/src/app/statistic/war/war-list/war-list.component.css
@@ -9,6 +9,21 @@
   cursor: pointer;
 }
 
+.list-header:hover, .selected{
+  background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
+}
+
+.list-header-battles {
+  border-bottom: 1px solid #dadada;
+  border-right: 1px solid #dadada;
+  border-left: 4px solid transparent;
+  padding: 25px;
+  font-size: 16px;
+  text-transform: uppercase;
+  color: #333333;
+  border-bottom: 1px solid #f1f1f1;
+}
+
 .mat-icon {
   color: #666666;
   vertical-align: middle;
diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html
index 61486c2..e6fdc72 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.html
+++ b/static/src/app/statistic/war/war-list/war-list.component.html
@@ -1,54 +1,56 @@
-<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
-  <button mat-stroked-button (click)="selectNewCampaign()">
-    {{'stats.sidebar.campaign.add' | translate}}
-  </button>
-  <button mat-stroked-button (click)="selectNewWar()">
-    {{'stats.sidebar.battle.add' | translate}}
-  </button>
-</div>
-
-<div class="list-header"
-     [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-  <div class="select-indicator-container">
-    <div class="select-indicator"></div>
+<div class="war-menu">
+  <div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
+    <button mat-stroked-button (click)="selectNewCampaign()">
+      {{'stats.sidebar.campaign.add' | translate}}
+    </button>
+    <button mat-stroked-button (click)="selectNewWar()">
+      {{'stats.sidebar.battle.add' | translate}}
+    </button>
   </div>
-  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
-            matTooltipPosition="right"
-            svgIcon="stats-chart"></mat-icon>
-  <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
-</div>
 
-<div class="list-header"
-     [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-  <div class="select-indicator-container">
-    <div class="select-indicator"></div>
+  <div class="list-header"
+       [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
+    <div class="select-indicator-container">
+      <div class="select-indicator"></div>
+    </div>
+    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
+              matTooltipPosition="right"
+              svgIcon="stats-chart"></mat-icon>
+    <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
   </div>
-  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
-            matTooltipPosition="right"
-            svgIcon="highscore"></mat-icon>
-  <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
-</div>
 
-<div class="list-header" style="cursor: default; border-bottom: 1px solid #f1f1f1;">
-  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
-            matTooltipPosition="right"
-            svgIcon="battle"></mat-icon>
-  <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
-</div>
+  <div class="list-header"
+       [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
+    <div class="select-indicator-container">
+      <div class="select-indicator"></div>
+    </div>
+    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
+              matTooltipPosition="right"
+              svgIcon="highscore"></mat-icon>
+    <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
+  </div>
 
-<div class="battle-list">
-  <div *ngFor="let war of campaign.wars$ | async">
-    <cc-war-item
-      [war]="war"
-      (warEdit)="editWar($event)"
-      (warDelete)="deleteWar(war)"
-      (warSelected)="selectWar($event)"
-      [collapsed]="collapsed"
-      [selected]="war._id == selectedWarId">
-    </cc-war-item>
+  <div class="list-header-battles">
+    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
+              matTooltipPosition="right"
+              svgIcon="battle"></mat-icon>
+    <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
+  </div>
+
+  <div class="battle-list">
+    <div *ngFor="let war of campaign.wars$ | async">
+      <cc-war-item
+        [war]="war"
+        (warEdit)="editWar($event)"
+        (warDelete)="deleteWar(war)"
+        (warSelected)="selectWar($event)"
+        [collapsed]="collapsed"
+        [selected]="war._id == selectedWarId">
+      </cc-war-item>
+    </div>
+  </div>
+
+  <div class="fill-vertical-border"
+       [ngClass]="{collapsed: collapsed}">
   </div>
 </div>
-
-<div class="fill-vertical-border"
-     [ngClass]="{collapsed: collapsed}">
-</div>

From 22340d32e860b5542222d7059ac706e63147d659 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Mon, 11 Feb 2019 21:56:00 +0100
Subject: [PATCH 2/2] Add war list mouseover and background color select state

---
 .../war/war-list/war-list.component.html      | 94 +++++++++----------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html
index e6fdc72..bb0781e 100644
--- a/static/src/app/statistic/war/war-list/war-list.component.html
+++ b/static/src/app/statistic/war/war-list/war-list.component.html
@@ -1,56 +1,54 @@
-<div class="war-menu">
-  <div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
-    <button mat-stroked-button (click)="selectNewCampaign()">
-      {{'stats.sidebar.campaign.add' | translate}}
-    </button>
-    <button mat-stroked-button (click)="selectNewWar()">
-      {{'stats.sidebar.battle.add' | translate}}
-    </button>
-  </div>
+<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
+  <button mat-stroked-button (click)="selectNewCampaign()">
+    {{'stats.sidebar.campaign.add' | translate}}
+  </button>
+  <button mat-stroked-button (click)="selectNewWar()">
+    {{'stats.sidebar.battle.add' | translate}}
+  </button>
+</div>
 
-  <div class="list-header"
-       [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-    <div class="select-indicator-container">
-      <div class="select-indicator"></div>
-    </div>
-    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
-              matTooltipPosition="right"
-              svgIcon="stats-chart"></mat-icon>
-    <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
+<div class="list-header"
+     [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
+  <div class="select-indicator-container">
+    <div class="select-indicator"></div>
   </div>
+  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
+            matTooltipPosition="right"
+            svgIcon="stats-chart"></mat-icon>
+  <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
+</div>
 
-  <div class="list-header"
-       [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-    <div class="select-indicator-container">
-      <div class="select-indicator"></div>
-    </div>
-    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
-              matTooltipPosition="right"
-              svgIcon="highscore"></mat-icon>
-    <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
+<div class="list-header"
+     [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
+  <div class="select-indicator-container">
+    <div class="select-indicator"></div>
   </div>
+  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
+            matTooltipPosition="right"
+            svgIcon="highscore"></mat-icon>
+  <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
+</div>
 
-  <div class="list-header-battles">
-    <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
-              matTooltipPosition="right"
-              svgIcon="battle"></mat-icon>
-    <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
-  </div>
+<div class="list-header-battles">
+  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
+            matTooltipPosition="right"
+            svgIcon="battle"></mat-icon>
+  <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
+</div>
 
-  <div class="battle-list">
-    <div *ngFor="let war of campaign.wars$ | async">
-      <cc-war-item
-        [war]="war"
-        (warEdit)="editWar($event)"
-        (warDelete)="deleteWar(war)"
-        (warSelected)="selectWar($event)"
-        [collapsed]="collapsed"
-        [selected]="war._id == selectedWarId">
-      </cc-war-item>
-    </div>
-  </div>
-
-  <div class="fill-vertical-border"
-       [ngClass]="{collapsed: collapsed}">
+<div class="battle-list">
+  <div *ngFor="let war of campaign.wars$ | async">
+    <cc-war-item
+      [war]="war"
+      (warEdit)="editWar($event)"
+      (warDelete)="deleteWar(war)"
+      (warSelected)="selectWar($event)"
+      [collapsed]="collapsed"
+      [selected]="war._id == selectedWarId">
+    </cc-war-item>
   </div>
 </div>
+
+<div class="fill-vertical-border"
+     [ngClass]="{collapsed: collapsed}">
+</div>