hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Release v1.9.4 (#59)

release/v1.9.7 v1.9.4
hardi 2019-03-03 18:09:20 +01:00 committed by Gogs
parent 35e8b14a34
commit 845593b2ec
33 changed files with 491 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.9.3", "version": "1.9.4",
"author": "Florian Hartwich <hardi@noarch.de>", "author": "Florian Hartwich <hardi@noarch.de>",
"private": true, "private": true,
"scripts": { "scripts": {

3
static/src/app/app.module.ts
View File

@ -22,7 +22,7 @@ import {HttpClientModule} from '@angular/common/http';
import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SpinnerService} from './services/user-interface/spinner/spinner.service';
import {SettingsService} from './services/settings.service'; import {SettingsService} from './services/settings.service';
import {HttpGateway} from './services/http-gateway'; import {HttpGateway} from './services/http-gateway';
import {MatListModule, MatMenuModule, MatSidenavModule, MatToolbarModule} from '@angular/material'; import {MatListModule, MatMenuModule, MatSidenavModule, MatTableModule, MatToolbarModule} from '@angular/material';
import {FlexLayoutModule} from '@angular/flex-layout'; import {FlexLayoutModule} from '@angular/flex-layout';
@NgModule({ @NgModule({
@ -38,6 +38,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
MatToolbarModule, MatToolbarModule,
MatListModule, MatListModule,
MatMenuModule, MatMenuModule,
MatTableModule,
FlexLayoutModule, FlexLayoutModule,
], ],

63
static/src/app/army/army-member/army-member.component.html
View File

@ -25,40 +25,35 @@
</span> </span>
</div> </div>
<div class="pull-left" style="margin-top:20px;"> <div class="pull-left" class="table-container">
<div class="table-container" style="min-width: 500px"> <mat-table [dataSource]="awards" class="mat-elevation-z8">
<table class="table"> <ng-container matColumnDef="award-graphics">
<thead> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<tr class="table-head"> <mat-cell *matCellDef="let element">
<th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th> <img src="resource/decoration/{{element.decorationId._id}}.png">
<th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th> </mat-cell>
<th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th> </ng-container>
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
{{'public.army.member.awards.date' | translate}} <ng-container matColumnDef="title">
</th> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.title' | translate}}</mat-header-cell>
</tr> <mat-cell *matCellDef="let element">{{element.decorationId.name}}</mat-cell>
</thead> </ng-container>
<tbody *ngFor="let award of awards">
<tr *ngIf="award.confirmed === 1" class="cell-outline"> <ng-container matColumnDef="reason">
<td class="text-center" *ngIf="award.decorationId.isMedal"> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.reason' | translate}}</mat-header-cell>
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png"> <mat-cell *matCellDef="let element">{{element.reason}}</mat-cell>
</td> </ng-container>
<td class="text-center" *ngIf="!award.decorationId.isMedal">
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png"> <ng-container matColumnDef="date">
</td> <mat-header-cell *matHeaderCellDef>{{'public.army.member.awards.date' | translate}}</mat-header-cell>
<td style="font-weight: bold"> <mat-cell *matCellDef="let element">
{{award.decorationId.name}} <span class="small text-nowrap">{{element.date | date: 'dd.MM.yyyy'}}</span>
</td> </mat-cell>
<td> </ng-container>
{{award.reason}}
</td> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<td class="text-right"> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span> </mat-table>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>

36
static/src/app/army/army-member/army-member.component.scss
View File

@ -2,7 +2,7 @@
.army-member-view { .army-member-view {
width: 90%; width: 90%;
height: 100vh; min-height: 100vh;
padding: 5px; padding: 5px;
margin: auto; margin: auto;
} }
@ -18,15 +18,11 @@
padding-left: 5px; padding-left: 5px;
} }
.table { div.table-container {
overflow-wrap: break-word; margin-top:20px;
table-layout: fixed;
}
.table-container {
margin-top: 10px;
padding: 5px; padding: 5px;
overflow-x: auto; overflow-x: auto;
min-width: 500px;
} }
.table-head { .table-head {
@ -34,14 +30,26 @@
color: white; color: white;
} }
tbody { mat-table.mat-table {
background: rgba(255, 255, 255, 0.88); background: rgba(255, 255, 255, 0.70);
.mat-column-award-graphics {
flex: 0 0 15%;
} }
.cell-outline { .mat-column-title {
outline: 1px solid #D4D4D4; flex: 0 0 25%;
} }
tr.cell-outline:hover { .mat-column-reason {
background-color: #ffffff; flex: 0 0 52%;
}
.mat-column-date {
flex: 0 0 8%;
}
}
mat-row.mat-row {
@extend mat-table.mat-table;
} }

7
static/src/app/army/army-member/army-member.component.ts
View File

@ -2,7 +2,6 @@ import {Component, OnInit} from '@angular/core';
import {Award, User} from '../../models/model-interfaces'; import {Award, User} from '../../models/model-interfaces';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {UserService} from '../../services/army-management/user.service'; import {UserService} from '../../services/army-management/user.service';
import {Subscription} from 'rxjs/Subscription';
import {AwardingService} from '../../services/army-management/awarding.service'; import {AwardingService} from '../../services/army-management/awarding.service';
import {Fraction} from '../../utils/fraction.enum'; import {Fraction} from '../../utils/fraction.enum';
import {Location} from '@angular/common'; import {Location} from '@angular/common';
@ -14,8 +13,6 @@ import {Location} from '@angular/common';
}) })
export class ArmyMemberComponent implements OnInit { export class ArmyMemberComponent implements OnInit {
subscription: Subscription;
user: User = {}; user: User = {};
awards: Award[] = []; awards: Award[] = [];
@ -26,6 +23,8 @@ export class ArmyMemberComponent implements OnInit {
readonly fraction = Fraction; readonly fraction = Fraction;
readonly displayedColumns = ['award-graphics', 'title', 'reason', 'date'];
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private userService: UserService, private userService: UserService,
@ -34,7 +33,7 @@ export class ArmyMemberComponent implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.subscription = this.route.params this.route.params
.map(params => params['id']) .map(params => params['id'])
.filter(id => id !== undefined) .filter(id => id !== undefined)
.flatMap(id => this.userService.getUser(id)) .flatMap(id => this.userService.getUser(id))

4
static/src/app/login/login.component.html
View File

@ -1,6 +1,6 @@
<form class="form-signin" (ngSubmit)="login(userName.value, password.value)"> <form class="form-signin" (ngSubmit)="login(userName.value, password.value)">
<div class="row"> <div class="row">
<h2 class="form-signin-heading">{{'login.headline' | translate}}</h2> <h2>{{'login.headline' | translate}}</h2>
<label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label> <label for="inputEmail" class="sr-only">{{'login.username' | translate}}</label>
<input #userName id="inputEmail" class="form-control" <input #userName id="inputEmail" class="form-control"
@ -11,12 +11,10 @@
<input #password type="password" id="inputPassword" class="form-control" <input #password type="password" id="inputPassword" class="form-control"
placeholder="{{'login.password' | translate}}" required=""> placeholder="{{'login.password' | translate}}" required="">
<div class="form-group">
<button mat-stroked-button type="submit"> <button mat-stroked-button type="submit">
<span *ngIf="!loading">{{'login.submit' | translate}}</span> <span *ngIf="!loading">{{'login.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button> </button>
</div> </div>
</div>
</form> </form>

40
static/src/app/login/login.component.scss
View File

@ -2,27 +2,19 @@
width: 100%; width: 100%;
padding: 15px; padding: 15px;
margin: 0 auto; margin: 0 auto;
}
.form-signin > .row { & > .row {
max-width: 400px; max-width: 400px;
margin: auto; margin: auto;
& > h2 {
text-align: center
} }
.form-signin-heading { input.form-control {
text-align: center;
}
.form-signin .form-signin-heading, .form-signin .checkbox, #inputEmail {
margin-bottom: 10px; margin-bottom: 10px;
} border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px; font-size: 16px;
height: auto; height: auto;
padding: 10px; padding: 10px;
@ -31,25 +23,11 @@
box-sizing: border-box; box-sizing: border-box;
} }
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
button { button {
width: 100%; width: 100%;
} }
}
}
/* Loading Animation */ /* Loading Animation */
.glyphicon-refresh-animate { .glyphicon-refresh-animate {

17
static/src/app/login/signup.component.html
View File

@ -1,26 +1,27 @@
<form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)"> <form class="form-signin" (ngSubmit)="signup(userName.value, password.value, secret.value)">
<div class="row" style="position: absolute;width: 500px;left: 40%;"> <div class="row">
<h2 style="text-align: center;" class="form-signin-heading">{{'signup.headline' | translate}}</h2> <h2>{{'signup.headline' | translate}}</h2>
<p [innerHtml]="'signup.description' | translate"></p> <p [innerHtml]="'signup.description' | translate"></p>
<label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label> <label for="inputEmail" class="sr-only">{{'signup.username' | translate}}</label>
<input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required="" autofocus=""> <input #userName id="inputEmail" class="form-control" placeholder="{{'signup.username' | translate}}" required=""
autofocus="">
<label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label> <label for="inputPassword" class="sr-only">{{'signup.password' | translate}}</label>
<input #password type="password" id="inputPassword" class="form-control" placeholder="{{'signup.password' | translate}}" required=""> <input #password type="password" id="inputPassword" class="form-control"
placeholder="{{'signup.password' | translate}}" required="">
<label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label> <label for="inputSecret" class="sr-only">{{'signup.secret' | translate}}</label>
<input #secret type="text" id="inputSecret" class="form-control" placeholder="{{'signup.secret.placeholder' | translate}}" <input #secret type="text" id="inputSecret" class="form-control"
placeholder="{{'signup.secret.placeholder' | translate}}"
required=""> required="">
<div class="form-group"> <button mat-stroked-button type="submit">
<button type="submit" class="btn btn-lg btn-block btn-primary">
<span *ngIf="!loading">{{'signup.submit' | translate}}</span> <span *ngIf="!loading">{{'signup.submit' | translate}}</span>
<span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> <span *ngIf="loading" class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</button> </button>
</div> </div>
</div>
</form> </form>

2
static/src/app/models/model-interfaces.ts
View File

@ -85,7 +85,7 @@ export interface Rank {
export interface Award { export interface Award {
_id?: string; _id?: string;
userId: string; userId: string | User;
decorationId?: any; // Decoration or string decorationId?: any; // Decoration or string
reason?: string; reason?: string;
proposer?: AppUser; proposer?: AppUser;

5
static/src/app/request/award/req-award.component.html
View File

@ -1,3 +1,4 @@
<div class="request-award-container">
<form #form="ngForm" class="overview"> <form #form="ngForm" class="overview">
<h3>{{'request.award.headline' | translate}}</h3> <h3>{{'request.award.headline' | translate}}</h3>
@ -61,6 +62,7 @@
[disabled]="!form.valid || user._id === '0' || decoration._id === '0'"> [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
{{'request.award.button.submit' | translate}} {{'request.award.button.submit' | translate}}
</button> </button>
</form>
<div class="table-container" *ngIf="showForm"> <div class="table-container" *ngIf="showForm">
<table class="table table-hover"> <table class="table table-hover">
@ -113,5 +115,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</form>

27
static/src/app/request/award/req-award.component.scss
View File

@ -1,18 +1,19 @@
@import url('../../style/overview.scss'); div.request-award-container {
margin: 2em auto;
width: 95%;
min-width: 835px;
.overview { form {
width: 100% !important; width: 33%;
margin-left: 25px !important; min-width: 300px;
margin: auto;
}
} }
.decoration-preview { .decoration-preview {
padding: 5px; padding: 5px;
} }
.trash {
cursor: pointer;
}
.table { .table {
overflow-wrap: break-word; overflow-wrap: break-word;
table-layout: fixed; table-layout: fixed;
@ -21,16 +22,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
min-width: 300px;
}
h3 {
margin: 80px 0 20px -20px;
}

4
static/src/app/request/confirm-award/confirm-award.component.html
View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <div class="confirm-award-container">
<h3>{{'request.confirm.award.headline' | translate}}</h3> <h3>{{'request.confirm.award.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -58,4 +58,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</form> </div>

18
static/src/app/request/confirm-award/confirm-award.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); div.confirm-award-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -10,6 +10,7 @@
.action { .action {
cursor: pointer; cursor: pointer;
line-height: 2em;
} }
.table { .table {
@ -20,14 +21,5 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
}
h3 {
margin: 80px 0 20px -20px;
}

2
static/src/app/request/confirm-award/confirm-award.component.ts
View File

@ -25,7 +25,7 @@ export class ConfirmAwardComponent implements OnInit {
}); });
} }
confirm(award: Award, decision: boolean, reason: string, rejectReason: string) { confirm(award: Award, decision: boolean, reason: string, rejectReason?: string) {
const updateObject = { const updateObject = {
_id: award._id, _id: award._id,
confirmed: decision ? 1 : 2 confirmed: decision ? 1 : 2

6
static/src/app/request/confirm-promotion/confirm-promotion.component.html
View File

@ -1,4 +1,4 @@
<form #form="ngForm" class="overview"> <div class="confirm-promotion-container">
<h3>{{'request.confirm.promotion.headline' | translate}}</h3> <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -52,7 +52,7 @@
<td class="text-right"> <td class="text-right">
<a class="action" (click)="confirm(promotion, true)"> <a class="action" (click)="confirm(promotion, true)">
{{'request.confirm.promotion.table.button.action.accept' | translate}} {{'request.confirm.promotion.table.button.action.accept' | translate}}
</a><br> </a>
<a class="action" (click)="confirm(promotion, false, rejectReason.value)"> <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
{{'request.confirm.promotion.table.button.action.reject' | translate}} {{'request.confirm.promotion.table.button.action.reject' | translate}}
</a> </a>
@ -61,4 +61,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</form> </div>

18
static/src/app/request/confirm-promotion/confirm-promotion.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); div.confirm-promotion-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -10,6 +10,7 @@
.action { .action {
cursor: pointer; cursor: pointer;
line-height: 2em;
} }
.table { .table {
@ -20,14 +21,5 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
}
h3 {
margin: 80px 0 20px -20px;
}

2
static/src/app/request/confirm-promotion/confirm-promotion.component.ts
View File

@ -33,7 +33,7 @@ export class ConfirmPromotionComponent implements OnInit {
}); });
} }
confirm(promotion: Promotion, decision: boolean, rejectReason: string) { confirm(promotion: Promotion, decision: boolean, rejectReason?: string) {
const updateObject = { const updateObject = {
_id: promotion._id, _id: promotion._id,
confirmed: decision ? 1 : 2 confirmed: decision ? 1 : 2

8
static/src/app/request/promotion/req-promotion.component.html
View File

@ -1,4 +1,5 @@
<form #form="ngForm" class="overview"> <div class="request-promotion-container">
<form #form="ngForm">
<h3>{{'request.promotion.headline' | translate}}</h3> <h3>{{'request.promotion.headline' | translate}}</h3>
<div class="form-group"> <div class="form-group">
@ -56,6 +57,7 @@
[disabled]="newLevel === user.rankLvl"> [disabled]="newLevel === user.rankLvl">
{{'request.promotion.button.submit' | translate}} {{'request.promotion.button.submit' | translate}}
</button> </button>
</form>
<div class="table-container"> <div class="table-container">
<label>Beförderungsanträge</label> <label>Beförderungsanträge</label>
@ -106,6 +108,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
</form>

26
static/src/app/request/promotion/req-promotion.component.scss
View File

@ -1,17 +1,19 @@
@import url('../../style/overview.scss'); .request-promotion-container {
margin: 2em auto;
width: 95%;
min-width: 835px;
.overview { form {
margin-left: 25px !important; width: 33%;
min-width: 300px;
margin: auto;
}
} }
.decoration-preview { .decoration-preview {
padding: 5px; padding: 5px;
} }
.trash {
cursor: pointer;
}
.table { .table {
overflow-wrap: break-word; overflow-wrap: break-word;
table-layout: fixed; table-layout: fixed;
@ -20,16 +22,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
.form-group {
width: 25%;
min-width: 300px;
}
h3 {
margin: 80px 0 20px -20px;
}

14
static/src/app/request/sql-dashboard/sql-dashboard.component.html
View File

@ -1,4 +1,4 @@
<div class="overview"> <div class="sql-dashboard-container">
<h3>{{'request.sql.dashboard.headline' | translate}}</h3> <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
<div class="table-container"> <div class="table-container">
@ -6,11 +6,11 @@
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr> <tr>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
<th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th> <th class="col-sm-2">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
<th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th> <th class="col-sm-2 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
<th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th> <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.date' | translate}}</th>
</tr> </tr>
</thead> </thead>
<tbody *ngFor="let promotion of promotions"> <tbody *ngFor="let promotion of promotions">
@ -27,7 +27,7 @@
<td> <td>
{{promotion.proposer.username}} {{promotion.proposer.username}}
</td> </td>
<td class="text-center"> <td class="text-right">
{{promotion.timestamp | date: 'dd.MM.yyyy'}} {{promotion.timestamp | date: 'dd.MM.yyyy'}}
</td> </td>
</tr> </tr>

13
static/src/app/request/sql-dashboard/sql-dashboard.component.scss
View File

@ -1,7 +1,7 @@
@import url('../../style/overview.scss'); .sql-dashboard-container {
margin: 2em auto;
.overview { width: 95%;
margin-left: 25px !important; min-width: 835px;
} }
.decoration-preview { .decoration-preview {
@ -16,11 +16,6 @@
.table-container { .table-container {
margin-top: 40px; margin-top: 40px;
overflow-x: auto; overflow-x: auto;
width: 90%;
min-width: 800px; min-width: 800px;
padding: 5px; padding: 5px;
} }
h3 {
margin: 80px 0 20px -20px;
}

8
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html
View File

@ -1,12 +1,11 @@
<div *ngIf="!isSmallLayout"> <div class="campaign-horizontal-list" #horizontalList *ngIf="!isSmallLayout">
<div class="scroll-btn" <div class="scroll-btn-left"
*ngIf="isLeftScrollVisible" *ngIf="isLeftScrollVisible"
(mouseenter)="setRepeater(-10)" (mouseenter)="setRepeater(-10)"
(mouseleave)="clearRepeater()"> (mouseleave)="clearRepeater()">
<mat-icon svgIcon="chevron-left"></mat-icon> <mat-icon svgIcon="chevron-left"></mat-icon>
</div> </div>
<div class="campaign-horizontal-list" #horizontalList>
<div class="campaign-entry" <div class="campaign-entry"
[ngClass]="{active : selectedCampaignId === 'all'}" [ngClass]="{active : selectedCampaignId === 'all'}"
(click)="select({_id:'all'})"> (click)="select({_id:'all'})">
@ -37,9 +36,8 @@
</mat-menu> </mat-menu>
</span> </span>
</div> </div>
</div>
<div class="scroll-btn scroll-btn-right" <div class="scroll-btn-right"
*ngIf="isRightScrollVisible" *ngIf="isRightScrollVisible"
(mouseenter)="setRepeater(10)" (mouseenter)="setRepeater(10)"
(mouseleave)="clearRepeater()"> (mouseleave)="clearRepeater()">

43
static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss
View File

@ -1,20 +1,3 @@
.scroll-btn {
position: absolute;
height: 46px;
width: 32px;
cursor: pointer;
}
.scroll-btn-right {
top: 0;
left: calc(100vw - 50px);
}
.scroll-btn mat-icon {
height: 46px;
width: 28px;
}
.campaign-horizontal-list { .campaign-horizontal-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -23,6 +6,23 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: #666666 1px 1px 4px; box-shadow: #666666 1px 1px 4px;
.scroll-btn-left {
position: absolute;
height: 46px;
width: 32px;
cursor: pointer;
mat-icon {
height: 46px;
width: 28px;
}
}
.scroll-btn-right {
@extend .scroll-btn-left;
top: 0;
left: calc(100vw - 32px);
} }
.campaign-entry { .campaign-entry {
@ -36,16 +36,17 @@
float: left; float: left;
background: #424242; background: #424242;
color: #9d9d9d; color: #9d9d9d;
&:hover {
border-bottom: 3px solid #ffd740;
} }
.active { &.active {
background: #222222; background: #222222;
color: white; color: white;
border-bottom: 3px solid #ffd740; border-bottom: 3px solid #ffd740;
} }
}
.campaign-entry:hover {
border-bottom: 3px solid #ffd740;
} }
.campaign-select-small { .campaign-select-small {

1
static/src/app/statistic/campaign/overview/campaign-overview.component.scss
View File

@ -10,6 +10,7 @@
.slide-chart-container { .slide-chart-container {
width: 100%; width: 100%;
min-width: unset; min-width: unset;
height: 65vh;
margin-top: 105px; margin-top: 105px;
margin-bottom: 35px; margin-bottom: 35px;
} }

2
static/src/app/statistic/stats.component.scss
View File

@ -3,7 +3,7 @@
float: left; float: left;
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
width: 100%; width: 100%!important;
} }
} }

3
static/src/app/statistic/war/fraction-stats/fraction-stats.component.html
View File

@ -1,5 +1,4 @@
<div class="fade-in" style="border-top: 1px solid #dadada; padding-top:25px;" xmlns="http://www.w3.org/1999/html"> <div class="fade-in fraction-stats-container">
<mat-button-toggle-group class="chart-select-group" <mat-button-toggle-group class="chart-select-group"
#group="matButtonToggleGroup" #group="matButtonToggleGroup"
[(ngModel)]="activeChartSelect" [(ngModel)]="activeChartSelect"

28
static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss
View File

@ -1,6 +1,11 @@
@import url('../../../style/list-entry.scss'); @import url('../../../style/list-entry.scss');
@import url('../../../style/hide-scrollbar.scss'); @import url('../../../style/hide-scrollbar.scss');
.fraction-stats-container {
border-top: 1px solid #dadada;
padding-top: 25px;
}
.chart-select-group { .chart-select-group {
display: flex; display: flex;
width: fit-content; width: fit-content;
@ -40,16 +45,29 @@
} }
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
.fraction-stats-container {
width: 93%;
margin: auto;
}
.chart-container { .chart-container {
width: 150%; width: 100%;
min-width: 0; min-width: 0;
height: 70vh padding: 0;
margin: 10px 0 0;
} }
.chart-select-group { .chart-select-group {
background: #dadada;
max-width: fit-content;
width: 200%;
flex-wrap: wrap; flex-wrap: wrap;
} }
mat-button-toggle.mat-button-toggle {
width: 50%;
border: 1px solid #dadada;
text-align: center;
& /deep/ button.mat-button-toggle-button, & /deep/ div.mat-button-toggle-label-content {
width: 100%;
}
}
} }

9
static/src/app/statistic/war/scoreboard/scoreboard.component.html
View File

@ -1,12 +1,10 @@
<div class="fade-in scoreboard-table">
<mat-table matSort <mat-table matSort
[dataSource]="sortedRows" [dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortScoreboardData($event)" (matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8"> class="mat-elevation-z8 fade-in">
<ng-container matColumnDef="{{tableHead[0].prop}}"> <ng-container matColumnDef="{{tableHead[0].prop}}" sticky>
<mat-header-cell *matHeaderCellDef <mat-header-cell *matHeaderCellDef
mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell> mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element" <mat-cell *matCellDef="let element"
@ -42,7 +40,6 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table> </mat-table>
</div>

38
static/src/app/statistic/war/scoreboard/scoreboard.component.scss
View File

@ -1,24 +1,12 @@
@import url('../../../style/list-entry.scss'); @import url('../../../style/list-entry.scss');
@import url('../../../style/hide-scrollbar.scss'); @import url('../../../style/hide-scrollbar.scss');
.scoreboard-table { mat-table.mat-table {
width: 1058px; width: 1058px;
margin: auto;
height: 68vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); margin: auto;
border-bottom: 1px solid #dadada; height: 70vh;
}
.mat-header-row {
width: 1058px;
position: absolute;
z-index: 100;
}
.mat-table > mat-row:first-of-type {
padding-top: 56px;
} }
.mat-column-name { .mat-column-name {
@ -50,7 +38,25 @@
white-space: pre-wrap; white-space: pre-wrap;
} }
.mat-header-row, .scoreboard-table { .mat-header-row, mat-table.mat-table {
width: 768px; width: 768px;
} }
} }
@media all and (max-width: 599px) {
.mat-column-name {
flex: 0 0 130px;
padding-left: 1vw;
}
.mat-header-row {
width: 755px;
}
mat-table.mat-table {
width: 100%;
height: 50vh;
overflow-x: auto;
display: grid;
}
}

13
static/src/app/statistic/war/war-header/war-header.component.html
View File

@ -1,6 +1,6 @@
<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html"> <div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
<div class="war-header-container"> <div class="war-header-container">
<div class="pull-left head-field" style="width: 250px"> <div class="pull-left head-field">
<h4>{{'stats.scoreboard.standings' | translate}}</h4> <h4>{{'stats.scoreboard.standings' | translate}}</h4>
<span [style.color]="fraction.COLOR_BLUFOR" <span [style.color]="fraction.COLOR_BLUFOR"
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span> style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
@ -9,7 +9,16 @@
style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span> style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
</div> </div>
<div class="pull-left head-field-pie-chart"> <div class="pull-left head-field" style="margin-top:0" *ngIf="isSmallLayout">
<h4>{{'stats.scoreboard.participants' | translate}}</h4>
<span [style.color]="fraction.COLOR_BLUFOR"
style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.playersBlufor}}</span>
<span style="font-size: 13px;font-weight: bold;">vs</span>
<span [style.color]="fraction.COLOR_OPFOR"
style="font-weight: bold; margin-left: 10px;">{{war.playersOpfor}} {{fraction.OPFOR}}</span>
</div>
<div class="pull-left head-field-pie-chart" *ngIf="!isSmallLayout">
<h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4> <h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
<ngx-charts-pie-chart <ngx-charts-pie-chart
class="pull-left" class="pull-left"

66
static/src/app/statistic/war/war-header/war-header.component.scss
View File

@ -16,10 +16,13 @@
font-size: 22px; font-size: 22px;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 250px;
} }
.head-field-pie-chart { .head-field-pie-chart {
@extend .head-field; font-size: 22px;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 100px; padding-left: 100px;
} }
@ -119,3 +122,64 @@ span.tab-control {
padding-left: 57px; padding-left: 57px;
} }
} }
@media all and (max-width: 599px) {
.war-header {
position: relative;
overflow: auto;
margin-bottom: 34px; /*do not cover anything with back to top bar*/
}
.nav-tabs {
width: 100%;
padding-top: 0;
}
.war-header-container {
width: 100%;
padding-top: 0;
h4 {
font-size: 16px;
margin-bottom: 0;
}
div.btn-clean-log {
padding: 2vw 4vw 38px;
width: 100%;
& > a {
margin: 0 !important;
width:100%;
}
}
}
.head-field {
width: calc(100% - 1.5vw);
text-align: center;
margin-top: 1vh;
margin-bottom: 0;
& > span {
font-size: 16px;
}
}
.nav-tabs > li {
width: 25%;
font-size: 12px;
mat-icon {
display: block;
}
}
/* radio box fraction select */
.nav-tabs > li:last-child {
width: fit-content;
position: absolute;
margin-top: -38px;
margin-left: 27%;
}
}

5
static/src/app/statistic/war/war-list/war-list.component.scss
View File

@ -91,8 +91,13 @@
border-right: 1px solid #dadada; border-right: 1px solid #dadada;
height: 100vh; height: 100vh;
top: 0; top: 0;
left: calc(20% - 1px);
z-index: -1; z-index: -1;
&.collapsed {
left: 0;
}
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
display: none; display: none;
} }

10
static/src/app/style/overview.scss
View File

@ -8,10 +8,8 @@
bottom: 10px; bottom: 10px;
} }
.absolute-label { @media all and (max-width: 959px) {
display: block; .overview {
position: absolute; left: 345px;
font-size: 12px; }
padding: 5px;
margin-left: 25%;
} }