From 41c5f3dc6ed6959d559c2bbf79cd9bd17df803e6 Mon Sep 17 00:00:00 2001
From: Florian Hartwich <hardi@noarch.de>
Date: Sun, 13 Aug 2017 16:35:42 +0200
Subject: [PATCH] Improve war list and detail style

---
 .../war-detail/war-detail.component.html      |  8 +++---
 .../statistic/war-list/war-list.component.css |  9 ++----
 .../war-list/war-list.component.html          | 28 +++++++++----------
 .../statistic/war-list/war-list.component.ts  |  4 +--
 4 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html
index 2719f75..ec53cf9 100644
--- a/static/src/app/statistic/war-detail/war-detail.component.html
+++ b/static/src/app/statistic/war-detail/war-detail.component.html
@@ -2,14 +2,14 @@
 
   <div style="min-height: 263px;">
     <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
-    <h3 class="pull-left">
+    <h3 class="pull-left" style="width: 250px">
       <h4>Endpunktestand:</h4>
       <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
       <span style="font-size: x-large">|</span>
       <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
     </h3>
 
-    <h3 class="pull-left">
+    <h3 class="pull-left" style="padding-left: 150px;">
       <h4>Teilnehmer:</h4>
       <ngx-charts-pie-chart
         [view]="[150, 150]"
@@ -23,7 +23,7 @@
       </ngx-charts-pie-chart>
     </h3>
 
-    <div style="margin-top:1%">
+    <div class="pull-left" style="padding-left: 150px; padding-top:15px">
       <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
         anzeigen</a>
       <form class="form-group">
@@ -50,7 +50,7 @@
     </div>
   </div>
 
-  <div class="pull-left" >
+  <div class="pull-left">
     <div class="table-container scoreboard-table-container">
       <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
              [(mfSortOrder)]="sortOrder">
diff --git a/static/src/app/statistic/war-list/war-list.component.css b/static/src/app/statistic/war-list/war-list.component.css
index 3a4d680..971ee7a 100644
--- a/static/src/app/statistic/war-list/war-list.component.css
+++ b/static/src/app/statistic/war-list/war-list.component.css
@@ -1,10 +1,5 @@
-.search-bar {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.rank-list {
-  width: 100%;
+.war-list {
+  padding-top: 30px;
 }
 
 :host /deep/ .card-header {
diff --git a/static/src/app/statistic/war-list/war-list.component.html b/static/src/app/statistic/war-list/war-list.component.html
index 4a86e4d..2dfae0c 100644
--- a/static/src/app/statistic/war-list/war-list.component.html
+++ b/static/src/app/statistic/war-list/war-list.component.html
@@ -1,23 +1,12 @@
 <div class="war-list">
-  <div class="input-group search-bar" style="width:100%" *ngIf="loginService.hasPermission(3)">
+  <div class="input-group search-bar" style="margin-bottom:12px" *ngIf="loginService.hasPermission(3)">
     <a class="pull-left btn btn-success" (click)="selectNewWar()">
       Schlacht hinzufügen
     </a>
   </div>
 
-  <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">
-        <a>Gesamtübersicht</a>
-      </span>
-      </div>
-    </div>
-  </div>
-
-  <accordion *ngFor="let campaign of campaigns">
-    <accordion-group>
+  <accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
+    <accordion-group [isOpen]="isFirstRow">
       <div accordion-heading (click)="selectOverview(campaign._id)">
         {{campaign.title}}
         <span class="pull-right">▼</span>
@@ -45,4 +34,15 @@
     </accordion-group>
   </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">
+        <a>Gesamtübersicht</a>
+      </span>
+      </div>
+    </div>
+  </div>
+
 </div>
diff --git a/static/src/app/statistic/war-list/war-list.component.ts b/static/src/app/statistic/war-list/war-list.component.ts
index ffdb1ad..b5eca79 100644
--- a/static/src/app/statistic/war-list/war-list.component.ts
+++ b/static/src/app/statistic/war-list/war-list.component.ts
@@ -11,7 +11,7 @@ import {LoginService} from "../../services/login-service/login-service";
 })
 export class WarListComponent implements OnInit {
 
-  selectedWarId: string | number = 'all';
+  selectedWarId: string | number;
 
   campaigns: Campaign[] = [];
 
@@ -25,7 +25,7 @@ export class WarListComponent implements OnInit {
     this.warService.getAllCampaigns().subscribe((items) => {
       this.warService.campaigns = items;
       this.campaigns = items;
-      this.router.navigate([{outlets: {'right': ['overview', 'all']}}], {relativeTo: this.route});
+      this.selectOverview(this.campaigns[0]._id);
     });
   }