From ce86593c0f1c36742b2ec532e39cd8efbe15cc4d Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sun, 1 Jul 2018 00:02:59 +0200
Subject: [PATCH] Apply custom design for acordion component

---
 .../war/war-list/war-list.component.css       | 45 ++++++++++++++++++-
 .../war/war-list/war-list.component.html      | 20 ++++-----
 2 files changed, 54 insertions(+), 11 deletions(-)

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 6517010..76f9e9e 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
@@ -1,6 +1,37 @@
+span > a {
+  font-size: 20px !important;
+}
+
+mat-expansion-panel {
+  border: 1px solid #7d7d7d;
+}
+
+mat-panel-title {
+  font-size: 18px;
+  color: #FFFFFF;
+}
+
+mat-expansion-panel-header {
+  height: auto;
+  padding: 30px 15px;
+  background-color: #4e4e4e;
+}
+
+mat-expansion-panel-header.mat-expansion-panel-header:hover {
+  background: #222222 !important;
+}
+
+mat-expansion-panel-header.mat-expansion-panel-header:focus {
+  background-color: #4e4e4e;
+}
+
+.select-list > div:last-child {
+  margin: 20px 0;
+}
+
 .top-list-entry {
   display: flex;
-  margin: 6px 0;
+  margin: 0 0 6px 0;
 }
 
 .top-list-entry > div {
@@ -16,3 +47,15 @@
   color: #4b4b4b;
   padding: 0 3px;
 }
+
+:host /deep/ .mat-expansion-indicator::after {
+  color: rgba(255, 255, 255, 0.64);
+}
+
+.select-list > mat-accordion:first-child .mat-expansion-panel {
+  border-radius: 10px 10px 0 0;
+}
+
+.select-list > mat-accordion:first-child .mat-expansion-panel-header {
+  border-radius: 8px 8px 0 0;
+}
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 94ae37d..f453fe9 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
@@ -8,10 +8,10 @@
     </a>
   </div>
 
-  <mat-accordion *ngFor="let campaign of campaigns;">
-    <mat-expansion-panel>
-      <mat-expansion-panel-header style="height:auto; padding: 30px 15px;">
-        <mat-panel-title style="font-size: 20px; font-weight: 700; border-bottom: 1px solid;">
+  <mat-accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
+    <mat-expansion-panel [expanded]="isFirstRow">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
           {{campaign.title}}
         </mat-panel-title>
         <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
@@ -28,15 +28,15 @@
              [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
           <div>
             <span>
-              <a style="font-size: 20px;">Übersicht</a>
+              <a>Übersicht</a>
             </span>
           </div>
         </div>
         <div class="fade-in list-entry"
              [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-          <div style="margin: auto">
-            <span style="margin:auto">
-              <a style="font-size: 20px;">Highscore</a>
+          <div>
+            <span>
+              <a>Highscore</a>
             </span>
           </div>
         </div>
@@ -53,12 +53,12 @@
     </mat-expansion-panel>
   </mat-accordion>
 
-  <div class="fade-in list-entry" style="margin-top: 20px; margin-bottom: 20px;"
+  <div class="fade-in list-entry"
        [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
     <div class="row">
       <div class="col-xs-9">
       <span>
-        <a style="font-size: 22px;">Gesamtübersicht</a>
+        <a>Gesamtübersicht</a>
       </span>
       </div>
     </div>