Merge branch 'release/1-3-2' of hardi/opt-cc into master

api/config/api-url.js

@@ -1,18 +1,19 @@
 const rootRoute = '/api';
 
 module.exports = {
+  account: rootRoute + '/account',
   auth: rootRoute + '/authenticate',
-  signUp: rootRoute + '/authenticate/signup',
   awards: rootRoute + '/awardings',
-  command: rootRoute + '/cmd',
+  campaigns: rootRoute + '/campaigns',
   cmdCreateSig: rootRoute + '/cmd/createSignature',
+  command: rootRoute + '/cmd',
   decorations: rootRoute + '/decorations',
   overview: rootRoute + '/overview',
   ranks: rootRoute + '/ranks',
+  request: rootRoute + '/request',
   signatures: '/signatures',
+  signUp: rootRoute + '/authenticate/signup',
   squads: rootRoute + '/squads',
   users: rootRoute + '/users',
-  account: rootRoute + '/account',
-  request: rootRoute + '/request',
   wars: rootRoute + '/wars'
 };

api/models/campaign.js

@@ -0,0 +1,18 @@
+"use strict";
+
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const CampaignSchema = new Schema({
+  title: {
+    type: String,
+    required: true
+  }
+}, {
+  collection: 'campaign',
+  timestamps: {createdAt: 'timestamp'}
+});
+// optional more indices
+CampaignSchema.index({timestamp: 1});
+
+module.exports = mongoose.model('Campaign', CampaignSchema);

api/models/war.js

@@ -35,6 +35,10 @@ const WarSchema = new Schema({
     get: v => Math.round(v),
     set: v => Math.round(v),
     default: 0
+  },
+  campaign: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: 'Campaign'
   }
 }, {
   collection: 'war',

api/routes/campaigns.js

@@ -0,0 +1,65 @@
+"use strict";
+
+// modules
+const express = require('express');
+const logger = require('debug')('cc:campaigns');
+
+// HTTP status codes by name
+const codes = require('./http-codes');
+
+const routerHandling = require('../middleware/router-handling');
+const apiAuthenticationMiddleware = require('../middleware/auth-middleware');
+const checkMT = require('../middleware/permission-check').checkMT;
+
+// Mongoose Model using mongoDB
+const CampaignModel = require('../models/campaign');
+
+const campaigns = express.Router();
+
+// routes **********************
+campaigns.route('/')
+
+  .post(apiAuthenticationMiddleware, checkMT, (req, res, next) => {
+    const campaign = new CampaignModel(req.body);
+    // timestamp and default are set automatically by Mongoose Schema Validation
+    campaign.save((err) => {
+      if (err) {
+        err.status = codes.wrongrequest;
+        err.message += ' in fields: ' + Object.getOwnPropertyNames(err.errors);
+        return next(err);
+      }
+      res.status(codes.created);
+      res.locals.items = campaign;
+      next();
+    });
+  })
+
+  .all(
+    routerHandling.httpMethodNotAllowed
+  );
+
+campaigns.route('/:id')
+  .get((req, res, next) => {
+    CampaignModel.findById(req.params.id, (err, item) => {
+      if (err) {
+        err.status = codes.servererror;
+        return next(err);
+      }
+      else if (!item) {
+        err = new Error("item not found");
+        err.status = codes.notfound;
+        return next(err);
+      }
+      res.locals.items = item;
+      return next();
+    });
+  })
+  .all(
+    routerHandling.httpMethodNotAllowed
+  );
+
+// this middleware function can be used, if you like or remove it
+// it looks for object(s) in res.locals.items and if they exist, they are send to the client as json
+campaigns.use(routerHandling.emptyResponse);
+
+module.exports = campaigns;

api/routes/wars.js

@@ -18,6 +18,7 @@ const checkMT = require('../middleware/permission-check').checkMT;
 const routerHandling = require('../middleware/router-handling');
 
 // Mongoose Model using mongoDB
+const CampaignModel = require('../models/campaign');
 const WarModel = require('../models/war');
 const PlayerModel = require('../models/player');
 
@@ -26,20 +27,37 @@ const wars = express.Router();
 // routes **********************
 wars.route('/')
   .get((req, res, next) => {
-    const filter = {};
-    WarModel.find(filter, {}, {sort: {date: 'desc'}}, (err, items) => {
+    let result = [];
+    CampaignModel.find({}, {}, {sort: {timestamp: 'desc'}}, (err, campaigns) => {
       if (err) {
         err.status = codes.servererror;
         return next(err);
       }
-      if (items) {
-        res.locals.items = items;
-      } else {
-        res.locals.items = [];
+      if (campaigns) {
+        WarModel.find({}, {}, {sort: {date: 'desc'}}, (err, wars) => {
+            if (err) {
+              err.status = codes.servererror;
+              return next(err);
+            }
+            if (wars) {
+              campaigns.forEach(campaign => {
+                let entry = {_id: campaign._id, title: campaign.title, wars: []};
+                wars.forEach((war) => {
+                  if (String(campaign._id) === String(war.campaign)) {
+                    entry.wars.push(war);
+                  }
+                });
+                result.push(entry);
+              });
+              res.locals.items = result;
             }
             res.locals.processed = true;
             next();
-    });
+          }
+        )
+        ;
+      }
+    })
   })
 
   .post(apiAuthenticationMiddleware, checkMT, upload.single('log'), (req, res, next) => {
@@ -64,7 +82,6 @@ wars.route('/')
             if (err) {
               return next(err);
             }
-            //TODO: combine run and clean in one script, so log file gets touched only once
             exec(__dirname + '/../war-parser/run.sh ' + folderName + ' ' + war._id, (error, stdout) => {
               if (error) {
                 return next(error);
@@ -75,7 +92,9 @@ wars.route('/')
                 }
                 let obj = JSON.parse(`${stdout}`);
                 for (let i = 0; i < obj.length; i++) {
-                  if (obj[i].fraction === 'BLUFOR') {
+                  if (!obj[i].fraction) {
+                    obj.splice(i, 1);
+                  } else if (obj[i].fraction === 'BLUFOR') {
                     war.playersBlufor++;
                   } else {
                     war.playersOpfor++;

api/server.js

@@ -32,6 +32,7 @@ const awardingRouter = require('./routes/awardings');
 const requestRouter = require('./routes/request');
 const signatureRouter = require('./routes/signatures');
 const commandRouter = require('./routes/command');
+const campaignRouter = require('./routes/campaigns');
 const warRouter = require('./routes/wars');
 
 // Configuration ***********************************
@@ -79,6 +80,7 @@ app.use(urls.decorations, decorationRouter);
 app.use(urls.request, requestRouter);
 app.use(urls.awards, awardingRouter);
 app.use(urls.wars, warRouter);
+app.use(urls.campaigns,campaignRouter);
 app.use(urls.command, apiAuthenticationMiddleware, checkAdmin, commandRouter);
 app.use(urls.account, apiAuthenticationMiddleware, checkAdmin, accountRouter);
 

package.json

@@ -15,11 +15,11 @@
     "start-e2e": "npm run deploy-static && npm run e2e --prefix ./api",
     "test-e2e": "npm run e2e --prefix ./static"
   },
+  "dependencies": {
+    "uglify-js": "^3.0.26"
+  },
   "devDependencies": {
     "concurrently": "^3.4.0",
     "wait-on": "^2.0.2"
-  },
-  "dependencies": {
-    "uglify-js": "^3.0.26"
   }
 }

static/package-lock.json

@@ -523,12 +523,6 @@
       "integrity": "sha1-dMt3+2BS7a/yqJhN2v2I1BnyXKw=",
       "dev": true
     },
-    "@types/socket.io-client": {
-      "version": "1.4.29",
-      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.29.tgz",
-      "integrity": "sha1-+HQwcM7pMXXjbgtqd6ivc+WMyzI=",
-      "dev": true
-    },
     "abbrev": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
@@ -4865,6 +4859,11 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.18.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+      "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -4894,6 +4893,14 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "ngx-bootstrap": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-1.8.1.tgz",
+      "integrity": "sha512-f6l1HmyQPY72bvprKd0yt1WkrEFzynbps8+OvEp4KE0beg/UYPoBXAmPyv7sOtn7grOTBUJJcMO147LEqKjW0Q==",
+      "requires": {
+        "moment": "2.18.1"
+      }
+    },
     "ngx-clipboard": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-8.0.2.tgz",

static/package.json

@@ -30,6 +30,7 @@
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
+    "ngx-bootstrap": "^1.8.1",
     "ngx-clipboard": "^8.0.2",
     "rxjs": "^5.2.0",
     "ts-helpers": "^1.1.1",

static/src/app/app.module.ts

@@ -35,10 +35,11 @@ import {WarService} from "./services/war-service/war.service";
 import {DataTableModule} from "angular2-datatable";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {AccordionModule} from "ngx-bootstrap";
 
 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
-    BrowserAnimationsModule, NgxChartsModule],
+    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()],
   providers: [
     HttpClient,
     LoginService,

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -1,7 +1,7 @@
 <div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
-    <div class="col-xs-9">
+    <div class="col-xs-8">
       <span>
         <a>{{decoration.name}}</a>
       </span>
@@ -12,7 +12,7 @@
       <small> - Sortierung: {{decoration.sortingNumber}}</small>
     </div>
 
-    <div class="col-xs-3">
+    <div class="col-xs-4">
       <img src="{{imageSrc}}"
            [style.max-height]="imgStyle.height"
            [style.max-width]="imgStyle.width"

static/src/app/models/model-interfaces.ts

@@ -11,7 +11,7 @@ export interface User {
   _id?: string;
   boardUserId?: number;
   username?: string;
-  squad?: any; //Squad or string
+  squad?: any; //Squad or id-string
   rank?: Rank;
   awards?: Award[];
 }
@@ -28,6 +28,11 @@ export interface Player {
   respawn?: number;
   flagTouch?: number;
 }
+export interface Campaign {
+  _id?: string;
+  title?: string;
+  wars?: War[];
+}
 export interface War {
   _id?: string;
   title?: string;
@@ -36,7 +41,8 @@ export interface War {
   ptOpfor?: number;
   playersBlufor?: number;
   playersOpfor?: number;
-  players: Player[];
+  players?: Player[];
+  campaign?: string;
 }
 
 export interface Squad {

static/src/app/ranks/rank-list/rank-item.component.html

@@ -1,7 +1,7 @@
 <div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
-    <div class="col-xs-9">
+    <div class="col-xs-8">
       <span>
         <a>{{rank.name}}</a>
       </span>
@@ -11,7 +11,7 @@
       <small> - Stufe {{rank.level}}</small>
     </div>
 
-    <div class="col-xs-3">
+    <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
       <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>

static/src/app/services/war-service/war.service.ts

@@ -1,16 +1,18 @@
 import {Injectable} from "@angular/core";
-import {War} from "../../models/model-interfaces";
+import {Campaign, War} from "../../models/model-interfaces";
 import {AppConfig} from "../../app.config";
 import {HttpClient} from "../http-client";
 
 @Injectable()
 export class WarService {
 
+  campaigns :Campaign[];
+
   constructor(private http: HttpClient,
               private config: AppConfig) {
   }
 
-  getAllWars() {
+  getAllCampaigns() {
     return this.http.get(this.config.apiWarPath)
       .map(res => res.json())
   }

static/src/app/squads/squad-list/squad-item.component.html

@@ -1,7 +1,7 @@
 <div class="fade-in list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
-    <div class="col-xs-9">
+    <div class="col-xs-8">
       <span>
         <a>{{squad.name}}</a>
       </span>
@@ -10,7 +10,7 @@
       <small *ngIf="squad.fraction == 'BLUFOR'">NATO</small>
     </div>
 
-    <div class="col-xs-3">
+    <div class="col-xs-4">
       <img src="{{imageSrc}}" height="50px"  class="squad-list-preview">
       <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash"></span>
     </div>

static/src/app/statistic/overview/stats-overview.component.css

@@ -1,9 +1,3 @@
-h3 {
-  width: 920px;
-  margin-left: 5%;
-}
-
 .chart-container {
   width: 1200px;
-  margin-left: 5%;
 }

static/src/app/statistic/overview/stats-overview.component.html

@@ -1,3 +1,5 @@
+<h2>{{title}}</h2>
+
 <h3>Punkte</h3>
 
 <div class="chart-container">

static/src/app/statistic/overview/stats-overview.component.ts

@@ -1,14 +1,20 @@
 import {Component} from "@angular/core";
 import {WarService} from "../../services/war-service/war.service";
+import {Campaign, War} from "../../models/model-interfaces";
+import {WarListComponent} from "../war-list/war-list.component";
+import {ActivatedRoute} from "@angular/router";
 
 
 @Component({
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
-  styleUrls: ['./stats-overview.component.css']
+  styleUrls: ['./stats-overview.component.css'],
+  inputs: ['campaigns']
 })
 export class StatisticOverviewComponent {
 
+  title = "";
+
   pointData: any[] = [];
   playerData: any[] = [];
 
@@ -16,12 +22,40 @@ export class StatisticOverviewComponent {
     domain: ['#0000FF', '#B22222']
   };
 
-  constructor(private warService: WarService) {
+  constructor(private route: ActivatedRoute,
+              private warService: WarService) {
   }
 
   ngOnInit() {
-    this.warService.getAllWars().subscribe(items => {
-      this.initChart(items);
+    this.route.params
+      .map(params => params['id'])
+      .subscribe((id) => {
+        if (this.warService.campaigns) {
+          this.initWars(this.warService.campaigns, id);
+        } else {
+          this.warService.getAllCampaigns().subscribe(campaigns => {
+            this.initWars(campaigns, id);
+          })
+        }
+      });
+  }
+
+  initWars(campaigns, id) {
+
+    let wars = [];
+    let itemsProcessed = 0;
+    campaigns = campaigns.filter(campaign => id === 'all' || campaign._id === id);
+    campaigns.forEach(campaign => {
+      if (id === 'all') {
+        this.title = "Gesamtübersicht"
+      } else {
+        this.title = campaign.title
+      }
+      wars = wars.concat(campaign.wars);
+      itemsProcessed++;
+      if (itemsProcessed === campaigns.length) {
+        this.initChart(wars);
+      }
     })
   }
 

static/src/app/statistic/stats.component.css

@@ -1,9 +0,0 @@
-#left {
-  width: 320px;
-  float: left;
-  padding-right: 10px;
-}
-
-#right {
-  overflow: hidden
-}

static/src/app/statistic/stats.routing.ts

@@ -17,7 +17,7 @@ export const statsRoutes: Routes = [{
   ]
 },
   {
-    path: 'overview',
+    path: 'overview/:id',
     component: StatisticOverviewComponent,
     outlet: 'right'
   },

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

@@ -1,6 +1,6 @@
 <div class="overview" xmlns="http://www.w3.org/1999/html">
 
-  <div style="margin-left: 2%; min-height: 263px;">
+  <div style="min-height: 263px;">
     <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
     <h3 class="pull-left">
       <h4>Endpunktestand:</h4>
@@ -9,7 +9,7 @@
       <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
     </h3>
 
-    <h3 class="pull-left" style="padding-left: 6%;">
+    <h3 class="pull-left">
       <h4>Teilnehmer:</h4>
       <ngx-charts-pie-chart
         [view]="[150, 150]"
@@ -23,7 +23,7 @@
       </ngx-charts-pie-chart>
     </h3>
 
-    <div style="margin-left: 600px; margin-top:1%">
+    <div style="margin-top:1%">
       <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" style="margin-left: 2%">
+  <div class="pull-left" >
     <div class="table-container scoreboard-table-container">
       <table class="table table-hover" [mfData]="players" #mf="mfDataTable" [(mfSortBy)]="sortBy"
              [(mfSortOrder)]="sortOrder">

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

@@ -6,3 +6,10 @@
 .rank-list {
   width: 100%;
 }
+
+:host /deep/ .card-header {
+  background-color: slategray;
+  padding: 15px;
+  color: white;
+  font-weight: 600;
+}

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

@@ -5,20 +5,44 @@
     </a>
   </div>
 
-  <div class="fade-in list-entry" style="margin-top: 30px; margin-bottom: 30px;" [ngClass]="{selected : selectedWarId == '0'}" (click)="selectOverview()">
+  <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>Zusammenfassung</a>
+        <a>Gesamtübersicht</a>
       </span>
       </div>
     </div>
   </div>
 
-  <pjm-war-item *ngFor="let war of wars"
+  <accordion *ngFor="let campaign of campaigns">
+    <accordion-group>
+      <div accordion-heading (click)="selectOverview(campaign._id)">
+        {{campaign.title}}
+        <span class="pull-right">▼</span>
+      </div>
+
+      <div class="fade-in list-entry" style="margin-top: -16px; margin-bottom: 10px;"
+           [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
+        <div class="row">
+          <div class="col-xs-9">
+      <span style="margin:auto">
+        <a>Kampagnenübersicht</a>
+      </span>
+          </div>
+        </div>
+      </div>
+
+      <div *ngFor="let war of campaign.wars">
+        <pjm-war-item
           [war]="war"
           (warDelete)="deleteWar(war)"
           (warSelected)="selectWar($event)"
           [selected]="war._id == selectedWarId">
         </pjm-war-item>
       </div>
+    </accordion-group>
+  </accordion>
+
+</div>

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import {War} from "../../models/model-interfaces";
+import {Campaign, War} from "../../models/model-interfaces";
 import {WarService} from "../../services/war-service/war.service";
 import {LoginService} from "../../services/login-service/login-service";
 
@@ -11,9 +11,9 @@ import {LoginService} from "../../services/login-service/login-service";
 })
 export class WarListComponent implements OnInit {
 
-  selectedWarId: string | number = '0';
+  selectedWarId: string | number = 'all';
 
-  wars: War[] = [];
+  campaigns: Campaign[] = [];
 
   constructor(private warService: WarService,
               private loginService: LoginService,
@@ -22,9 +22,10 @@ export class WarListComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.warService.getAllWars().subscribe((items) => {
-      this.wars = items;
-      this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
+    this.warService.getAllCampaigns().subscribe((items) => {
+      this.warService.campaigns = items;
+      this.campaigns = items;
+      this.router.navigate([{outlets: {'right': ['overview', 'all']}}], {relativeTo: this.route});
     });
   }
 
@@ -33,14 +34,18 @@ export class WarListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
   }
 
-  selectWar(warId: string | number) {
+  selectWar(warId) {
+    if (this.selectedWarId != warId) {
       this.selectedWarId = warId;
       this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route});
     }
+  }
 
-  selectOverview() {
-    this.selectedWarId = '0';
-    this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route});
+  selectOverview(overviewId) {
+    if (this.selectedWarId != overviewId) {
+      this.selectedWarId = overviewId;
+      this.router.navigate([{outlets: {'right': ['overview', overviewId]}}], {relativeTo: this.route});
+    }
   }
 
   deleteWar(war: War) {
@@ -48,10 +53,11 @@ export class WarListComponent implements OnInit {
       this.warService.deleteWar(war._id)
         .subscribe((res) => {
           if (this.selectedWarId === war._id) {
-            this.selectOverview();
+            this.selectOverview('all');
           }
-          this.wars.splice(this.wars.indexOf(war), 1);
+          this.campaigns.splice(this.campaigns.indexOf(war), 1);
         })
     }
   }
+
 }

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

@@ -42,6 +42,19 @@
     <show-error text="Punkte CSAT" path="ptopf"></show-error>
   </div>
 
+  <div class="form-group">
+    <label for="campaign">Kampagne</label>
+    <select class="form-control"
+            name="campaign"
+            id="campaign"
+            [(ngModel)]="war.campaign"
+            required>
+      <option *ngFor="let campaign of warService.campaigns" [ngValue]="campaign._id">
+        {{campaign.title}}
+      </option>
+    </select>
+  </div>
+
   <div class="form-group">
     <label for="log">Logfile</label>
     <input id="log" name="log" class="ui-button form-control" type="file"

static/src/app/style/entry-form.css

@@ -13,6 +13,7 @@ label {
 .overview {
   position: fixed;
   width: 25%;
+  min-width: 500px;
   border-left: thin solid lightgrey;
   padding-left: 50px;
   padding-top: 20px;

static/src/app/style/list-entry.css

@@ -1,7 +1,6 @@
 div.list-entry, a.list-entry,
 div.user-list-entry, a.user-list-entry {
   padding: 8px;
-  width: 475px;
   border-radius: 2px;
   border: lightgrey solid 1px;
   cursor: cell;

static/src/app/users/user-list/user-item.component.html

@@ -1,7 +1,7 @@
 <div class="fade-in user-list-entry" [ngClass]="{selected : selected}" (click)="select()">
 
   <div class="row">
-    <div class="col-sm-9">
+    <div class="col-sm-8">
       <span>
         <a>{{user.username}}</a>
       </span>
@@ -11,7 +11,7 @@
       <small *ngIf="!user.squad">ohne Squad/Fraktion</small>
     </div>
 
-    <div class="col-sm-3">
+    <div class="col-sm-4">
       <span (click)="delete(); $event.stopPropagation()" title="Löschen" class="glyphicon glyphicon-trash trash pull-right"></span>
       <span (click)="award(); $event.stopPropagation()" title="Auszeichnungen" class="icon-award pull-right"></span>
     </div>

static/src/styles.css

@@ -40,16 +40,14 @@ form {
 }
 
 #left {
-  width:480px;
+  width: 20%;
+  min-width: 350px;
+  max-width: 450px;
   float: left;
   padding-right: 10px;
+
 }
 #right {
-  overflow: hidden
-}
-
-.chat-button {
-  position: absolute;
-  bottom: 0px;
-  right: 10px;
+  overflow: hidden;
+  padding-left: 4%;
 }