Compare commits
No commits in common. "0fa09b56dccbe2d54e2e8b1ba58f26c71e26d696" and "5d6e3fc0897ca468f2326c294a03a7cd88da0073" have entirely different histories.
0fa09b56dc
...
5d6e3fc089
|
|
@ -14,7 +14,7 @@
|
|||
</mat-sidenav>
|
||||
</mat-sidenav-container>
|
||||
|
||||
<div style="overflow-x: auto;position: relative;min-height: calc(100vh - 50px);" (click)="sidenav.close()">
|
||||
<div (click)="sidenav.close()">
|
||||
<router-outlet></router-outlet>
|
||||
<div id="left">
|
||||
<router-outlet name="left"></router-outlet>
|
||||
|
|
|
|||
|
|
@ -22,14 +22,4 @@ mat-sidenav {
|
|||
&:hover {
|
||||
background: #101010;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
border-radius: 3px 3px 0 0;
|
||||
background: #101010;
|
||||
min-height: 34px;
|
||||
height: 3vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
@media all and (max-width: 599px) {
|
||||
.squad-layout {
|
||||
width: 100vw;
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
|
||||
img {
|
||||
right: 3vw;
|
||||
max-width: 27%;
|
||||
}
|
||||
|
||||
div.name-cell {
|
||||
|
|
@ -61,10 +61,7 @@
|
|||
img {
|
||||
position: absolute;
|
||||
margin-top: 8px;
|
||||
margin-left: 2%;
|
||||
@media all and (max-width: 959px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -75,7 +72,7 @@ img {
|
|||
|
||||
.name-cell {
|
||||
display: inherit;
|
||||
margin-left: 38%;
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
@import url('../style/background-image.scss');
|
||||
|
||||
.army-content-container {
|
||||
width: 90%;
|
||||
max-width: 1100px;
|
||||
width: 1100px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.army-column-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media all and (max-width: 599px) {
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
|
|
@ -18,17 +21,16 @@
|
|||
}
|
||||
|
||||
div.army-column {
|
||||
width: 100%!important;
|
||||
width: 100%;
|
||||
|
||||
h3 {
|
||||
background: #222;
|
||||
font-size: 18px;
|
||||
margin: 0.2em 0;
|
||||
padding: 1.5vh 0;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
margin-top: -10px;
|
||||
margin-top: -7px;
|
||||
display: inline-block;
|
||||
|
||||
&.switch-btn-blufor {
|
||||
|
|
@ -41,23 +43,14 @@
|
|||
}
|
||||
|
||||
mat-icon {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
div.army-column {
|
||||
width: 49%;
|
||||
}
|
||||
.army-content-container {
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
|
||||
.army-column {
|
||||
width: 45%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.form-signin > .row {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.form-signin-heading {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ h1 {
|
|||
.decoration-overview-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin: auto 4vw 0;
|
||||
margin: auto 140px 30px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
|
|
@ -73,10 +73,6 @@ h1 {
|
|||
background: #222222;;
|
||||
box-shadow: #666666 2px 2px 8px;
|
||||
|
||||
& > div:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
width: 100%;
|
||||
height: 50px
|
||||
|
|
|
|||
|
|
@ -52,9 +52,8 @@ img.img-medal {
|
|||
}
|
||||
|
||||
img.img-ribbon {
|
||||
padding-top: 20px;
|
||||
width: 60%;
|
||||
max-width: 130px;
|
||||
padding-top: 10%;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mat-column-picture {
|
||||
|
|
@ -31,7 +30,6 @@
|
|||
|
||||
.mat-column-name {
|
||||
max-width: 7.5vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
td.mat-cell:first-child {
|
||||
|
|
@ -41,9 +39,12 @@
|
|||
td > img {
|
||||
height: 13vh !important;
|
||||
max-height: 120px;
|
||||
max-width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
:host {
|
||||
margin-bottom: -50vh;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
<div *ngIf="!isSmallLayout">
|
||||
<div class="scroll-btn"
|
||||
*ngIf="isLeftScrollVisible"
|
||||
(mouseenter)="setRepeater(-10)"
|
||||
(mouseleave)="clearRepeater()">
|
||||
<mat-icon svgIcon="chevron-left"></mat-icon>
|
||||
</div>
|
||||
<div class="scroll-btn"
|
||||
*ngIf="isLeftScrollVisible"
|
||||
(mouseenter)="setRepeater(-10)"
|
||||
(mouseleave)="clearRepeater()">
|
||||
<mat-icon svgIcon="chevron-left"></mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="campaign-horizontal-list" #horizontalList>
|
||||
<div class="campaign-entry"
|
||||
[ngClass]="{active : selectedCampaignId === 'all'}"
|
||||
(click)="select({_id:'all'})">
|
||||
{{'stats.campaign.title.all.time.overview' | translate}}
|
||||
</div>
|
||||
<div class="campaign-entry"
|
||||
*ngFor="let campaign of campaigns$ | async"
|
||||
[ngClass]="{active : campaign._id === selectedCampaignId}"
|
||||
(click)="select(campaign)">
|
||||
{{campaign.title}}
|
||||
<span style="display:inline-block;"
|
||||
*ngIf="loginService.hasPermission(3)">
|
||||
<div class="campaign-horizontal-list" #horizontalList>
|
||||
<div class="campaign-entry"
|
||||
[ngClass]="{active : selectedCampaignId === 'all'}"
|
||||
(click)="select({_id:'all'})">
|
||||
{{'stats.campaign.title.all.time.overview' | translate}}
|
||||
</div>
|
||||
<div class="campaign-entry"
|
||||
*ngFor="let campaign of campaigns$ | async"
|
||||
[ngClass]="{active : campaign._id === selectedCampaignId}"
|
||||
(click)="select(campaign)">
|
||||
{{campaign.title}}
|
||||
<span style="display:inline-block;"
|
||||
*ngIf="loginService.hasPermission(3)">
|
||||
<button mat-icon-button
|
||||
[matMenuTriggerFor]="menu"
|
||||
(click)="$event.stopPropagation()"
|
||||
|
|
@ -36,34 +35,13 @@
|
|||
</button>
|
||||
</mat-menu>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-btn scroll-btn-right"
|
||||
*ngIf="isRightScrollVisible"
|
||||
(mouseenter)="setRepeater(10)"
|
||||
(mouseleave)="clearRepeater()">
|
||||
<mat-icon svgIcon="chevron-right"></mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="isSmallLayout" class="campaign-select-small">
|
||||
<mat-list-item [matMenuTriggerFor]="menuCampaign">
|
||||
<div matline class="select-menu-text">
|
||||
<span *ngIf="selectedCampaignId === 'all'">{{'stats.campaign.title.all.time.overview' | translate}}</span>
|
||||
<span *ngIf="selectedCampaignId !== 'all' && selectedCampaign">{{selectedCampaign.title}}</span>
|
||||
<span class="caret"></span>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuCampaign="matMenu">
|
||||
<button mat-menu-item (click)="select({_id:'all'})">
|
||||
{{'stats.campaign.title.all.time.overview' | translate}}
|
||||
</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item *ngFor="let campaign of campaigns$ | async"
|
||||
(click)="select(campaign)">
|
||||
{{campaign.title}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
<div class="scroll-btn scroll-btn-right"
|
||||
*ngIf="isRightScrollVisible"
|
||||
(mouseenter)="setRepeater(10)"
|
||||
(mouseleave)="clearRepeater()">
|
||||
<mat-icon svgIcon="chevron-right"></mat-icon>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.scroll-btn-right {
|
||||
top: 0;
|
||||
top: 50px;
|
||||
left: calc(100vw - 50px);
|
||||
}
|
||||
|
||||
|
|
@ -36,6 +36,10 @@
|
|||
float: left;
|
||||
background: #424242;
|
||||
color: #9d9d9d;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
min-width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
@ -47,21 +51,3 @@
|
|||
.campaign-entry:hover {
|
||||
border-bottom: 3px solid #ffd740;
|
||||
}
|
||||
|
||||
.campaign-select-small {
|
||||
background: #424242;
|
||||
height: 3em;
|
||||
color: #9d9d9d;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #9d9d9d;
|
||||
|
||||
.select-menu-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:host /deep/ div.mat-list-item-content {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,12 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {
|
||||
Component,
|
||||
ElementRef,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import {Campaign} from '../../../models/model-interfaces';
|
||||
import {LoginService} from '../../../services/app-user-service/login-service';
|
||||
import {Observable} from 'rxjs';
|
||||
|
|
@ -9,14 +17,12 @@ import {CampaignService} from '../../../services/logs/campaign.service';
|
|||
templateUrl: './campaign-navigation.component.html',
|
||||
styleUrls: ['./campaign-navigation.component.scss']
|
||||
})
|
||||
export class CampaignNavigationComponent implements OnInit, OnChanges {
|
||||
export class CampaignNavigationComponent implements OnInit {
|
||||
|
||||
campaigns$: Observable<Campaign[]>;
|
||||
|
||||
@Input() selectedCampaignId;
|
||||
|
||||
@Input() isSmallLayout;
|
||||
|
||||
@Output() campaignSelect = new EventEmitter();
|
||||
|
||||
@Output() campaignEdit = new EventEmitter();
|
||||
|
|
@ -25,8 +31,6 @@ export class CampaignNavigationComponent implements OnInit, OnChanges {
|
|||
|
||||
@ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
|
||||
|
||||
selectedCampaign;
|
||||
|
||||
isLeftScrollVisible = false;
|
||||
|
||||
isRightScrollVisible = true;
|
||||
|
|
@ -44,18 +48,8 @@ export class CampaignNavigationComponent implements OnInit, OnChanges {
|
|||
});
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
this.campaigns$.subscribe(campaigns => {
|
||||
const campaignIdx = campaigns.findIndex(c => c._id === this.selectedCampaignId);
|
||||
if (campaignIdx !== -1) {
|
||||
this.selectedCampaign = campaigns[campaignIdx];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
select(campaign) {
|
||||
if (campaign && campaign._id) {
|
||||
this.selectedCampaign = campaign;
|
||||
this.selectedCampaignId = campaign._id;
|
||||
this.campaignSelect.emit(campaign);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ h2 {
|
|||
|
||||
.search-field {
|
||||
width: 40%;
|
||||
min-width: $highscore-table-width;
|
||||
margin: 50px 0 50px 8%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,26 +4,21 @@
|
|||
height: 650px;
|
||||
margin: auto;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.slide-chart-container {
|
||||
@media all and (max-width: 959px) {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
margin-top: 105px;
|
||||
margin-bottom: 35px;
|
||||
padding-top: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-select-group {
|
||||
.chart-select-group {
|
||||
@media all and (max-width: 959px) {
|
||||
display: inline-grid;
|
||||
width: 70%;
|
||||
text-align: center;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.chart-select-group /deep/ button.mat-button-toggle-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
mat-button-toggle.mat-button-toggle-checked {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
<div>
|
||||
<campaign-navigation
|
||||
[selectedCampaignId]="selectedCampaign._id"
|
||||
[isSmallLayout]="isSmallLayout"
|
||||
(campaignSelect)="switchCampaign($event)"
|
||||
(campaignEdit)="editCampaign($event)"
|
||||
(campaignDelete)="deleteCampaign($event)">
|
||||
</campaign-navigation>
|
||||
</div>
|
||||
<campaign-navigation
|
||||
[selectedCampaignId]="selectedCampaign._id"
|
||||
(campaignSelect)="switchCampaign($event)"
|
||||
(campaignEdit)="editCampaign($event)"
|
||||
(campaignDelete)="deleteCampaign($event)">
|
||||
</campaign-navigation>
|
||||
|
||||
<div [ngClass]="{collapsed: collapsed}"
|
||||
[style.display]="selectedCampaign._id === 'all' ? 'none' : 'block'"
|
||||
class="side-bar">
|
||||
<div class="side-bar"
|
||||
[ngClass]="{collapsed: collapsed}"
|
||||
[style.display]="selectedCampaign._id === 'all' ? 'none' : 'block'">
|
||||
<war-list
|
||||
[collapsed]="collapsed"
|
||||
[campaign]="selectedCampaign"
|
||||
[isSmallLayout]="isSmallLayout">
|
||||
[campaign]="selectedCampaign">
|
||||
</war-list>
|
||||
<div *ngIf="!isSmallLayout" class="button-container">
|
||||
<div class="button-container" *ngIf="collapseBtnVisible">
|
||||
<button mat-icon-button
|
||||
class="sidebar-toggle-btn"
|
||||
(click)="toggleCollapse()">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
.side-bar {
|
||||
width: 20%;
|
||||
float: left;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
|
|
@ -14,13 +10,13 @@
|
|||
.button-container {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
& > button {
|
||||
position: fixed;
|
||||
top: calc(100vh - 35px);
|
||||
left: -10px;
|
||||
background: #424242;
|
||||
border: 1px solid #dadada;
|
||||
box-shadow: #ffd740 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-container > button {
|
||||
position: fixed;
|
||||
top: calc(100vh - 35px);
|
||||
left: -10px;
|
||||
background: #424242;
|
||||
border: 1px solid #dadada;
|
||||
box-shadow: #ffd740 0 0 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export class StatisticComponent implements OnInit {
|
|||
|
||||
collapsed = false;
|
||||
|
||||
isSmallLayout = false;
|
||||
collapseBtnVisible = true;
|
||||
|
||||
constructor(private campaignService: CampaignService,
|
||||
private warService: WarService,
|
||||
|
|
@ -40,9 +40,17 @@ export class StatisticComponent implements OnInit {
|
|||
this.resolveCampaignFromUrl();
|
||||
});
|
||||
|
||||
this.isSmallLayout = window.innerWidth <= BaseConfig.responsive.breakpointPx;
|
||||
if (window.innerWidth <= BaseConfig.responsive.breakpointPx) {
|
||||
this.collapsed = true;
|
||||
this.collapseBtnVisible = false;
|
||||
}
|
||||
Observable.fromEvent(window, 'resize').subscribe(event => {
|
||||
this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx;
|
||||
if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
|
||||
this.collapsed = true;
|
||||
this.collapseBtnVisible = false;
|
||||
} else {
|
||||
this.collapseBtnVisible = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ import {NgxChartsModule} from '@swimlane/ngx-charts';
|
|||
import {CampaignService} from '../services/logs/campaign.service';
|
||||
import {PlayerService} from '../services/logs/player.service';
|
||||
import {LogsService} from '../services/logs/logs.service';
|
||||
import {MatButtonToggleModule, MatListModule, MatMenuModule, MatSortModule, MatTableModule} from '@angular/material';
|
||||
import {MatButtonToggleModule, MatMenuModule, MatSortModule, MatTableModule} from '@angular/material';
|
||||
import {HttpClient} from '@angular/common/http';
|
||||
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
|
||||
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
|
||||
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
|
||||
|
||||
export function createTranslateLoader(http: HttpClient) {
|
||||
return new TranslateHttpLoader(http, './assets/i18n/statistics/', '.json');
|
||||
|
|
@ -27,7 +27,6 @@ export function createTranslateLoader(http: HttpClient) {
|
|||
MatTableModule,
|
||||
MatSortModule,
|
||||
MatMenuModule,
|
||||
MatListModule,
|
||||
statsRouterModule,
|
||||
|
||||
TranslateModule.forChild({
|
||||
|
|
|
|||
|
|
@ -38,18 +38,3 @@
|
|||
padding: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.chart-container {
|
||||
width: 150%;
|
||||
min-width: 0;
|
||||
height: 70vh
|
||||
}
|
||||
|
||||
.chart-select-group {
|
||||
background: #dadada;
|
||||
max-width: fit-content;
|
||||
width: 200%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@ export class FractionStatsComponent implements OnInit, OnChanges {
|
|||
|
||||
@Input() logData: any;
|
||||
|
||||
@Input() isSmallLayout: boolean;
|
||||
|
||||
startDateObj: Date;
|
||||
|
||||
initialized: any;
|
||||
|
|
|
|||
|
|
@ -33,24 +33,8 @@
|
|||
.mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-travelDistance, .mat-column-driverDistance,
|
||||
.mat-column-death, .mat-column-respawn, .mat-column-interact {
|
||||
flex: 0 0 62px;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
flex: 0 0 50px;
|
||||
}
|
||||
}
|
||||
|
||||
:host /deep/ .mat-table .mat-icon {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.mat-column-name {
|
||||
flex: 0 0 160px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.mat-header-row, .scoreboard-table {
|
||||
width: 768px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,6 @@ export class ScoreboardComponent implements OnChanges {
|
|||
|
||||
@Input() fractionFilterSelected: string;
|
||||
|
||||
@Input() isSmallLayout: boolean;
|
||||
|
||||
@Output() playerTabSwitch = new EventEmitter();
|
||||
|
||||
tableHead = PlayerUtils.attributeDisplayNames;
|
||||
|
|
@ -49,16 +47,8 @@ export class ScoreboardComponent implements OnChanges {
|
|||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['isSmallLayout'] && changes['isSmallLayout'].previousValue !== changes['isSmallLayout'].currentValue) {
|
||||
const colIdxFraction = this.displayedColumns.findIndex(c => c === 'fraction');
|
||||
if (this.isSmallLayout) {
|
||||
this.displayedColumns.splice(colIdxFraction, 1);
|
||||
} else if (colIdxFraction === -1) {
|
||||
this.displayedColumns.splice(1, 0, 'fraction');
|
||||
}
|
||||
}
|
||||
|
||||
if (changes.war) {
|
||||
|
||||
changes.war.currentValue.players
|
||||
.filter(player => !player.initalized)
|
||||
.forEach(player => {
|
||||
|
|
|
|||
|
|
@ -38,12 +38,3 @@
|
|||
padding: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.chart-container {
|
||||
width: 200%;
|
||||
margin: 1%;
|
||||
min-width: 0;
|
||||
height: 80vh
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
|
||||
</div>
|
||||
|
||||
<div class="pull-left head-field-pie-chart">
|
||||
<div class="pull-left head-field " style="padding-left: 100px;">
|
||||
<h4 class="pull-left" style="margin-bottom: 0;">{{'stats.scoreboard.participants' | translate}}</h4>
|
||||
<ngx-charts-pie-chart
|
||||
class="pull-left"
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</ngx-charts-pie-chart>
|
||||
</div>
|
||||
|
||||
<div class="btn-clean-log">
|
||||
<div class="pull-left " style="padding-left: 100px; padding-top:15px">
|
||||
<a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">
|
||||
{{'stats.scoreboard.show.logs' | translate}}
|
||||
</a>
|
||||
|
|
@ -83,9 +83,7 @@
|
|||
{{fraction.OPFOR}}
|
||||
</label>
|
||||
</form>
|
||||
<span class="btn btn-default pull-left tab-control"
|
||||
*ngIf="!isSmallLayout"
|
||||
(click)="scoreBoardComponent.exportCSV()">
|
||||
<span class="btn btn-default pull-left tab-control" (click)="scoreBoardComponent.exportCSV()">
|
||||
{{'stats.scoreboard.download.csv' | translate}}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -99,14 +97,12 @@
|
|||
#scoreboard
|
||||
[war]="war"
|
||||
[fractionFilterSelected]="fractionFilterSelected"
|
||||
[isSmallLayout]="isSmallLayout"
|
||||
(playerTabSwitch)="switchToPlayerTab($event)">
|
||||
</cc-scoreboard>
|
||||
<war-detail-fraction
|
||||
*ngIf="tab === 1 && logData"
|
||||
[war]="war"
|
||||
[logData]="logData"
|
||||
[isSmallLayout]="isSmallLayout">
|
||||
[logData]="logData">
|
||||
</war-detail-fraction>
|
||||
<campaign-player-detail
|
||||
*ngIf="tab === 2 && singlePlayerView === 1"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
@import url('../../../style/list-entry.scss');
|
||||
@import url('../../../style/hide-scrollbar.scss');
|
||||
|
||||
.war-header {
|
||||
padding-left: 1.5vw;
|
||||
}
|
||||
|
||||
.war-header-container {
|
||||
width: 920px;
|
||||
min-height: 165px;
|
||||
|
|
@ -18,11 +14,6 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.head-field-pie-chart {
|
||||
@extend .head-field;
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
form.tab-control {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -89,33 +80,3 @@ span.tab-control {
|
|||
cursor: pointer !important;
|
||||
color: #666666 !important;
|
||||
}
|
||||
|
||||
.btn-clean-log {
|
||||
padding-left: 100px;
|
||||
padding-top: 15px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.war-header {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
margin-bottom: 34px; /*do not cover anything with back to top bar*/
|
||||
}
|
||||
|
||||
.war-header-container, .nav-tabs {
|
||||
width: 768px;
|
||||
}
|
||||
|
||||
.head-field-pie-chart {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.nav-tabs > li:last-child {
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
div.btn-clean-log {
|
||||
padding-left: 57px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@ import {ChartUtils} from '../../../utils/chart-utils';
|
|||
import {Fraction} from '../../../utils/fraction.enum';
|
||||
import {LogsService} from '../../../services/logs/logs.service';
|
||||
import {ScoreboardComponent} from '../scoreboard/scoreboard.component';
|
||||
import {BaseConfig} from '../../../app.config';
|
||||
import {Observable} from 'rxjs';
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -39,8 +37,6 @@ export class WarHeaderComponent implements OnInit {
|
|||
|
||||
fractionFilterSelected: string;
|
||||
|
||||
isSmallLayout = false;
|
||||
|
||||
playerChart: any[] = [];
|
||||
|
||||
colorScheme = {
|
||||
|
|
@ -68,11 +64,6 @@ export class WarHeaderComponent implements OnInit {
|
|||
ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
|
||||
Object.assign(this, [this.playerChart]);
|
||||
});
|
||||
|
||||
this.isSmallLayout = window.innerWidth <= BaseConfig.responsive.breakpointPx;
|
||||
Observable.fromEvent(window, 'resize').subscribe(event => {
|
||||
this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx;
|
||||
});
|
||||
}
|
||||
|
||||
switchTab(index: number) {
|
||||
|
|
|
|||
|
|
@ -1,79 +1,53 @@
|
|||
<div *ngIf="!isSmallLayout">
|
||||
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
|
||||
<button mat-stroked-button (click)="selectNewCampaign()">
|
||||
{{'stats.sidebar.campaign.add' | translate}}
|
||||
</button>
|
||||
<button mat-stroked-button (click)="selectNewWar()">
|
||||
{{'stats.sidebar.battle.add' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="list-header"
|
||||
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
|
||||
<div class="select-indicator-container">
|
||||
<div class="select-indicator"></div>
|
||||
</div>
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="stats-chart"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="list-header"
|
||||
[ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
|
||||
<div class="select-indicator-container">
|
||||
<div class="select-indicator"></div>
|
||||
</div>
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="highscore"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="list-header-battles">
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="battle"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="battle-list">
|
||||
<div *ngFor="let war of campaign.wars$ | async">
|
||||
<cc-war-item
|
||||
[war]="war"
|
||||
(warEdit)="editWar($event)"
|
||||
(warDelete)="deleteWar(war)"
|
||||
(warSelected)="selectWar($event)"
|
||||
[collapsed]="collapsed"
|
||||
[selected]="war._id == selectedWarId">
|
||||
</cc-war-item>
|
||||
</div>
|
||||
<div class="fill-vertical-border"
|
||||
[ngClass]="{collapsed: collapsed}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
|
||||
<button mat-stroked-button (click)="selectNewCampaign()">
|
||||
{{'stats.sidebar.campaign.add' | translate}}
|
||||
</button>
|
||||
<button mat-stroked-button (click)="selectNewWar()">
|
||||
{{'stats.sidebar.battle.add' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="war-select-small" *ngIf="isSmallLayout">
|
||||
<mat-list-item [matMenuTriggerFor]="menuWars">
|
||||
<div matline class="select-menu-text">
|
||||
<span *ngIf="selectedWarId === (campaign._id + highscore)">{{'stats.sidebar.highscore' | translate}}</span>
|
||||
<span *ngIf="selectedWarId === campaign._id">{{'stats.sidebar.overview' | translate}}</span>
|
||||
<span *ngIf="selectedWar">{{selectedWar.title}}</span>
|
||||
<span class="caret"></span>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-menu #menuWars="matMenu">
|
||||
<button mat-menu-item (click)="selectOverview(campaign._id)">
|
||||
{{'stats.sidebar.overview' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item (click)="selectHighscore(campaign._id)">
|
||||
{{'stats.sidebar.highscore' | translate}}
|
||||
</button>
|
||||
<mat-divider></mat-divider>
|
||||
<button mat-menu-item *ngFor="let war of campaign.wars$ | async"
|
||||
(click)="selectWar(war._id)">
|
||||
{{war.title}}
|
||||
</button>
|
||||
</mat-menu>
|
||||
<div class="list-header"
|
||||
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
|
||||
<div class="select-indicator-container">
|
||||
<div class="select-indicator"></div>
|
||||
</div>
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="stats-chart"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="list-header"
|
||||
[ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
|
||||
<div class="select-indicator-container">
|
||||
<div class="select-indicator"></div>
|
||||
</div>
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="highscore"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="list-header-battles">
|
||||
<mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
|
||||
matTooltipPosition="right"
|
||||
svgIcon="battle"></mat-icon>
|
||||
<span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
|
||||
</div>
|
||||
|
||||
<div class="battle-list">
|
||||
<div *ngFor="let war of campaign.wars$ | async">
|
||||
<cc-war-item
|
||||
[war]="war"
|
||||
(warEdit)="editWar($event)"
|
||||
(warDelete)="deleteWar(war)"
|
||||
(warSelected)="selectWar($event)"
|
||||
[collapsed]="collapsed"
|
||||
[selected]="war._id == selectedWarId">
|
||||
</cc-war-item>
|
||||
</div>
|
||||
<div class="fill-vertical-border"
|
||||
[ngClass]="{collapsed: collapsed}">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -98,24 +98,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.war-select-small {
|
||||
background: #424242;
|
||||
height: 3em;
|
||||
color: #9d9d9d;
|
||||
text-align: center;
|
||||
|
||||
.select-menu-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:host /deep/ div.mat-list-item-content {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* Table Scrollbar BEGIN */
|
||||
|
||||
.battle-list::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -18,12 +18,8 @@ export class WarListComponent implements OnChanges {
|
|||
|
||||
@Input() collapsed: boolean;
|
||||
|
||||
@Input() isSmallLayout: boolean;
|
||||
|
||||
selectedWarId: string | number;
|
||||
|
||||
selectedWar: War;
|
||||
|
||||
changeCount = 0;
|
||||
|
||||
toolTipTranslation = {};
|
||||
|
|
@ -69,30 +65,15 @@ export class WarListComponent implements OnChanges {
|
|||
} else if (changes.campaign) {
|
||||
this.selectOverview(this.campaign._id);
|
||||
}
|
||||
|
||||
this.fetchSelectedWar(this.selectedWarId);
|
||||
}
|
||||
|
||||
fetchSelectedWar(newSelect) {
|
||||
this.campaign.wars$.subscribe(wars => {
|
||||
const warIdx = wars.findIndex(w => w._id === newSelect);
|
||||
if (warIdx !== -1) {
|
||||
this.selectedWar = wars[warIdx];
|
||||
} else {
|
||||
this.selectedWar = null;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectNewCampaign() {
|
||||
this.selectedWarId = null;
|
||||
this.selectedWar = null;
|
||||
this.router.navigate([{outlets: {'right': ['campaign']}}], {relativeTo: this.route});
|
||||
}
|
||||
|
||||
selectWar(warId) {
|
||||
if (this.selectedWarId !== warId) {
|
||||
this.fetchSelectedWar(warId);
|
||||
this.selectedWarId = warId;
|
||||
this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route});
|
||||
}
|
||||
|
|
@ -101,7 +82,6 @@ export class WarListComponent implements OnChanges {
|
|||
selectOverview(campaignId) {
|
||||
if (this.selectedWarId !== campaignId) {
|
||||
this.selectedWarId = campaignId;
|
||||
this.selectedWar = null;
|
||||
this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route});
|
||||
}
|
||||
}
|
||||
|
|
@ -109,7 +89,6 @@ export class WarListComponent implements OnChanges {
|
|||
selectHighscore(campaignId) {
|
||||
if (this.selectedWarId !== campaignId + this.highscore) {
|
||||
this.selectedWarId = campaignId + this.highscore;
|
||||
this.selectedWar = null;
|
||||
this.router.navigate([{outlets: {'right': ['highscore', campaignId]}}], {relativeTo: this.route});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue