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

Fix war detail alignment

pull/11/head
Florian Hartwich 2017-10-07 09:38:02 +02:00
parent 1bb917add5
commit 148160dcb7
6 changed files with 108 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
View File

@ -8,10 +8,6 @@
height: 100vh; height: 100vh;
} }
::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
}
h2 { h2 {
padding: 10px; padding: 10px;
} }

2
static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts
View File

@ -9,7 +9,7 @@ import {Location} from '@angular/common';
@Component({ @Component({
selector: 'campaign-player-detail', selector: 'campaign-player-detail',
templateUrl: './campaign-player-detail.component.html', templateUrl: './campaign-player-detail.component.html',
styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css'] styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
}) })
export class CampaignPlayerDetailComponent { export class CampaignPlayerDetailComponent {

23
static/src/app/statistic/war-detail/war-detail.component.css
View File

@ -1,13 +1,26 @@
.vertical-spacer {
height: 100vh;
float: left;
width: 4%;
}
@media screen and (min-width: 1500px) {
.vertical-spacer {
width: 15%;
}
}
@media screen and (min-width: 2000px) {
.vertical-spacer {
width: 20%;
}
}
.overview { .overview {
position: fixed;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-left: thin solid lightgrey; border-left: thin solid lightgrey;
bottom: 20px; bottom: 20px;
width: 100%;
padding-left: 50px;
padding-top: 70px;
margin-left: 10px;
height: 100vh; height: 100vh;
} }

155
static/src/app/statistic/war-detail/war-detail.component.html
View File

@ -1,84 +1,87 @@
<div class="overview fade-in" xmlns="http://www.w3.org/1999/html"> <div class="overview fade-in" xmlns="http://www.w3.org/1999/html">
<div class=vertical-spacer>
<div style="min-height: 263px;">
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
<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" style="padding-left: 150px;">
<h4>Teilnehmer:</h4>
<ngx-charts-pie-chart
[view]="[150, 150]"
[scheme]="{domain: ['#B22222', '#0000FF']}"
[results]="playerChart"
[legend]="false"
[explodeSlices]="false"
[labels]="false"
[doughnut]="false"
[gradient]="false">
</ngx-charts-pie-chart>
</h3>
<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">
<label class="radio-inline">
<input type="radio" name="fractSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
[(ngModel)]="fractionRadioSelect"
(change)="filterPlayersByFraction()">Alle
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="BLUFOR"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="OPFOR"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
</label>
<br>
</form>
</div> </div>
</div> <div style="overflow:hidden">
<div style="width: 920px;min-height: 263px;">
<h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
<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>
<ngx-datatable <h3 class="pull-left" style="padding-left: 150px;">
[rows]="rows" <h4>Teilnehmer:</h4>
[reorderable]="reorderable" <ngx-charts-pie-chart
[sorts]="[{prop: 'kill', dir: 'desc'}]" [view]="[150, 150]"
[messages]="{emptyMessage: 'Loading...'}" [scheme]="{domain: ['#B22222', '#0000FF']}"
[headerHeight]="cellHeight" [results]="playerChart"
[rowHeight]="cellHeight" [legend]="false"
[cssClasses]='customClasses' [explodeSlices]="false"
[selectionType]="'single'" [labels]="false"
(select)="selectPlayerDetail($event)"> [doughnut]="false"
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px"> [gradient]="false">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value"> </ngx-charts-pie-chart>
</h3>
<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">
<label class="radio-inline">
<input type="radio" name="fractSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
[(ngModel)]="fractionRadioSelect"
(change)="filterPlayersByFraction()">Alle
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="BLUFOR"
[(ngModel)]="fractionRadioSelect"
#fractRadioBufor
(change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
</label>
<label class="radio-inline">
<input type="radio" name="fractSelect" value="OPFOR"
[(ngModel)]="fractionRadioSelect"
#fractRadioOpfor
(change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
</label>
<br>
</form>
</div>
</div>
<ngx-datatable
[rows]="rows"
[reorderable]="reorderable"
[sorts]="[{prop: 'kill', dir: 'desc'}]"
[messages]="{emptyMessage: 'Loading...'}"
[headerHeight]="cellHeight"
[rowHeight]="cellHeight"
[cssClasses]='customClasses'
[selectionType]="'single'"
(select)="selectPlayerDetail($event)">
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name" <span class="player-name"
[ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'"> [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
{{value}} {{value}}
</span> </span>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="Fraktion" prop="fraction" [width]="100"> <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
<ng-template ngx-datatable-cell-template let-value="value"> <ng-template ngx-datatable-cell-template let-value="value">
{{value === 'BLUFOR' ? 'NATO' : 'CSAT'}} {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column> <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
<ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column> <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
<ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column> <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
</ngx-datatable> </ngx-datatable>
</div>
</div> </div>

2
static/src/app/statistic/war-detail/war-detail.component.ts
View File

@ -7,7 +7,7 @@ import {War} from "../../models/model-interfaces";
@Component({ @Component({
selector: 'war-detail', selector: 'war-detail',
templateUrl: './war-detail.component.html', templateUrl: './war-detail.component.html',
styleUrls: ['./war-detail.component.css', '../../style/list-entry.css'] styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
}) })
export class WarDetailComponent { export class WarDetailComponent {

9
static/src/app/style/hide-scrollbar.css Normal file
View File

@ -0,0 +1,9 @@
::-webkit-scrollbar {
/*width: 0px; !* remove scrollbar space *!*/
background: transparent; /* just make scrollbar invisible */
}
/* show position indicator in red */
::-webkit-scrollbar-thumb {
background: rgb(234, 234, 234);
}