Replace arcodion

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,
+  imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule, ButtonsModule.forRoot(), NgxDatatableModule,
-    AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule],
+    MatExpansionModule, MatFormFieldModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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>

static/src/app/statistic/war/war-list/war-list.component.css

@@ -1,14 +1,18 @@
-:host /deep/ .card-header {
+.top-list-entry {
-  background-color: rgba(34, 34, 34, 0.80);
+  display: flex;
-  cursor: pointer;
+  margin: 6px 0;
-  padding: 15px;
-  color: white;
-  font-weight: 600;
 }
 
-.top-list-entry {
+.top-list-entry > div {
-  margin-top: -16px;
-  margin-bottom: 10px;
   width: 50%;
   float: left;
 }
+
+.war-interaction-panel {
+  display: block;
+}
+
+.war-interaction-panel > span {
+  color: #4b4b4b;
+  padding: 0 3px;
+}

static/src/app/statistic/war/war-list/war-list.component.html

@@ -8,42 +8,39 @@
     </a>
   </div>
 
-  <accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
+  <mat-accordion *ngFor="let campaign of campaigns;">
-    <accordion-group [isOpen]="isFirstRow">
+    <mat-expansion-panel>
-      <div accordion-heading>
+      <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"
-              style="color: whitesmoke; padding-top: 0; padding-right: 10px;"
+                class="glyphicon glyphicon-edit trash">
-              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">
-              class="glyphicon glyphicon-trash trash pull-left"
-              *ngIf="loginService.hasPermission(3)">
           </span>
-        {{campaign.title}}
+        </mat-panel-description>
-        <span class="pull-right">▼</span>
+      </mat-expansion-panel-header>
-      </div>
+      <div class="top-list-entry">
-
+        <div class="fade-in list-entry"
-      <div class="fade-in list-entry top-list-entry"
              [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
-        <div style="margin: auto;">
+          <div>
-            <span style="margin:auto">
+            <span>
-              <a style="font-size: 22px;">Übersicht</a>
+              <a style="font-size: 20px;">Übersicht</a>
             </span>
           </div>
         </div>
-
+        <div class="fade-in list-entry"
-      <div class="fade-in list-entry top-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"
@@ -53,15 +50,14 @@
           [selected]="war._id == selectedWarId">
         </pjm-war-item>
       </div>
-      </div>
+    </mat-expansion-panel>
-    </accordion-group>
+  </mat-accordion>
-  </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>