From 5f0dcae272ab27a1b7f4db7fe4305f8bb9eafe71 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 30 Jun 2018 22:22:46 +0200
Subject: [PATCH] Replace arcodion

---
 static/src/app/statistic/stats.module.ts      |  5 +-
 .../war/war-list/war-item.component.html      |  2 +-
 .../war/war-list/war-list.component.css       | 22 ++---
 .../war/war-list/war-list.component.html      | 80 +++++++++----------
 4 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts
index 1060671..9c375d5 100644
--- a/static/src/app/statistic/stats.module.ts
+++ b/static/src/app/statistic/stats.module.ts
@@ -9,11 +9,12 @@ import {CampaignService} from '../services/logs/campaign.service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
 import {PlayerService} from '../services/logs/player.service';
 import {LogsService} from '../services/logs/logs.service';
+import {MatExpansionModule, MatFormFieldModule} from '@angular/material';
 
 @NgModule({
   declarations: statsRoutingComponents,
-  imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule],
+  imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, ButtonsModule.forRoot(), NgxDatatableModule,
+    MatExpansionModule, MatFormFieldModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {
diff --git a/static/src/app/statistic/war/war-list/war-item.component.html b/static/src/app/statistic/war/war-list/war-item.component.html
index 1672969..c9566b1 100644
--- a/static/src/app/statistic/war/war-list/war-item.component.html
+++ b/static/src/app/statistic/war/war-list/war-item.component.html
@@ -3,7 +3,7 @@
   <div class="row">
     <div [ngClass]="[loginService.hasPermission(3) ? 'col-xs-9' : 'col-xs-11']">
       <span>
-        <a style="font-size: 22px;">{{war.title}}</a>
+        <a style="font-size: 20px;">{{war.title}}</a>
       </span>
       <br>
       <small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>
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 56fdf99..6517010 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,14 +1,18 @@
-:host /deep/ .card-header {
-  background-color: rgba(34, 34, 34, 0.80);
-  cursor: pointer;
-  padding: 15px;
-  color: white;
-  font-weight: 600;
+.top-list-entry {
+  display: flex;
+  margin: 6px 0;
 }
 
-.top-list-entry {
-  margin-top: -16px;
-  margin-bottom: 10px;
+.top-list-entry > div {
   width: 50%;
   float: left;
 }
+
+.war-interaction-panel {
+  display: block;
+}
+
+.war-interaction-panel > span {
+  color: #4b4b4b;
+  padding: 0 3px;
+}
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 8d604ad..94ae37d 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,60 +8,56 @@
     </a>
   </div>
 
-  <accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
-    <accordion-group [isOpen]="isFirstRow">
-      <div accordion-heading>
-        <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
-              style="color: whitesmoke; padding-top: 0; padding-right: 10px;"
-              class="glyphicon glyphicon-edit trash pull-left"
-              *ngIf="loginService.hasPermission(3)">
-        </span>
-        <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
-              style="color: whitesmoke; padding-top: 0; padding-right: 10px;"
-              class="glyphicon glyphicon-trash trash pull-left"
-              *ngIf="loginService.hasPermission(3)">
-        </span>
-        {{campaign.title}}
-        <span class="pull-right">▼</span>
-      </div>
-
-      <div class="fade-in list-entry top-list-entry"
-           [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-        <div style="margin: auto;">
-            <span style="margin:auto">
-              <a style="font-size: 22px;">Übersicht</a>
+  <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;">
+          {{campaign.title}}
+        </mat-panel-title>
+        <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
+          <span (click)="editCampaign(campaign); $event.stopPropagation()" title="Bearbeiten"
+                class="glyphicon glyphicon-edit trash">
+          </span>
+          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" title="Löschen"
+                class="glyphicon glyphicon-trash trash">
+          </span>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <div class="top-list-entry">
+        <div class="fade-in list-entry"
+             [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
+          <div>
+            <span>
+              <a style="font-size: 20px;">Übersicht</a>
             </span>
+          </div>
         </div>
-      </div>
-
-      <div class="fade-in list-entry top-list-entry"
-           [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
-        <div style="margin: auto">
+        <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: 22px;">Highscore</a>
+              <a style="font-size: 20px;">Highscore</a>
             </span>
+          </div>
         </div>
       </div>
-
-      <div style="padding-top: 40px;">
-        <div *ngFor="let war of campaign.wars">
-          <pjm-war-item
-            [war]="war"
-            (warEdit)="editWar($event)"
-            (warDelete)="deleteWar(war)"
-            (warSelected)="selectWar($event)"
-            [selected]="war._id == selectedWarId">
-          </pjm-war-item>
-        </div>
+      <div *ngFor="let war of campaign.wars">
+        <pjm-war-item
+          [war]="war"
+          (warEdit)="editWar($event)"
+          (warDelete)="deleteWar(war)"
+          (warSelected)="selectWar($event)"
+          [selected]="war._id == selectedWarId">
+        </pjm-war-item>
       </div>
-    </accordion-group>
-  </accordion>
+    </mat-expansion-panel>
+  </mat-accordion>
 
   <div class="fade-in list-entry" style="margin-top: 20px; margin-bottom: 20px;"
        [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
     <div class="row">
       <div class="col-xs-9">
-      <span style="margin:auto">
+      <span>
         <a style="font-size: 22px;">Gesamtübersicht</a>
       </span>
       </div>