Make army oveview mobile responsive
parent
1938d74b08
commit
5d6e3fc089
|
@ -44,6 +44,7 @@ export const RouteConfig = {
|
||||||
|
|
||||||
export const BaseConfig = {
|
export const BaseConfig = {
|
||||||
responsive: {
|
responsive: {
|
||||||
|
breakpointSmallPx: 599,
|
||||||
breakpointPx: 959,
|
breakpointPx: 959,
|
||||||
},
|
},
|
||||||
i18n: {
|
i18n: {
|
||||||
|
|
|
@ -3,6 +3,21 @@
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
.squad-layout {
|
||||||
|
width: 100vw;
|
||||||
|
padding: 1vh 1vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
right: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.name-cell {
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.squad-layout > div {
|
.squad-layout > div {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
@ -24,7 +39,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.squad-member-count {
|
.squad-member-count {
|
||||||
float:left;
|
float: left;
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
margin-left: 42px
|
margin-left: 42px
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
<div style="width: 1100px; margin:auto; position: relative;">
|
<div class="army-content-container">
|
||||||
<h1>{{'public.army.headline' | translate}}</h1>
|
<h1>{{'public.army.headline' | translate}}</h1>
|
||||||
|
|
||||||
<div class="pull-left army-column">
|
<div class="pull-left army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.BLUFOR">
|
||||||
<h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
|
<h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">
|
||||||
|
{{fraction.BLUFOR}}
|
||||||
|
<button mat-icon-button class="switch-btn-blufor"
|
||||||
|
(click)="singleViewSwitch(fraction.OPFOR)">
|
||||||
|
<mat-icon svgIcon="chevron-right"></mat-icon>
|
||||||
|
</button>
|
||||||
|
</h3>
|
||||||
<cc-army-squad *ngFor="let squad of army[0].squads"
|
<cc-army-squad *ngFor="let squad of army[0].squads"
|
||||||
[squad]="squad"
|
[squad]="squad"
|
||||||
squadFraction="BLUFOR"
|
squadFraction="BLUFOR"
|
||||||
|
@ -11,8 +17,14 @@
|
||||||
<div class="member-count">{{'public.army.members' | translate}} {{army[0].memberCount}}</div>
|
<div class="member-count">{{'public.army.members' | translate}} {{army[0].memberCount}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-right army-column">
|
<div class="pull-right army-column" *ngIf="!isSmallLayout || singleViewSelected === fraction.OPFOR">
|
||||||
<h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
|
<h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">
|
||||||
|
<button mat-icon-button class="switch-btn-opfor"
|
||||||
|
(click)="singleViewSwitch(fraction.BLUFOR)">
|
||||||
|
<mat-icon svgIcon="chevron-right"></mat-icon>
|
||||||
|
</button>
|
||||||
|
{{fraction.OPFOR}}
|
||||||
|
</h3>
|
||||||
<cc-army-squad *ngFor="let squad of army[1].squads"
|
<cc-army-squad *ngFor="let squad of army[1].squads"
|
||||||
[squad]="squad"
|
[squad]="squad"
|
||||||
squadFraction="OPFOR"
|
squadFraction="OPFOR"
|
||||||
|
|
|
@ -1,5 +1,56 @@
|
||||||
@import url('../style/background-image.scss');
|
@import url('../style/background-image.scss');
|
||||||
|
|
||||||
|
.army-content-container {
|
||||||
|
width: 1100px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.army-column-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 599px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.army-content-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.army-column {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
background: #222;
|
||||||
|
margin: 0.2em 0;
|
||||||
|
padding: 1.5vh 0;
|
||||||
|
|
||||||
|
button {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -7px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&.switch-btn-blufor {
|
||||||
|
right: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.switch-btn-opfor {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
left: 5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
width: 3em;
|
||||||
|
height: 3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.army-column {
|
.army-column {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
@ -8,6 +59,10 @@ h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h3 button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.army-head {
|
.army-head {
|
||||||
font-weight: bolder;
|
font-weight: bolder;
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
|
@ -3,6 +3,8 @@ import {Army} from '../models/model-interfaces';
|
||||||
import {ArmyService} from '../services/army-service/army.service';
|
import {ArmyService} from '../services/army-service/army.service';
|
||||||
import {ActivatedRoute, Router} from '@angular/router';
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
import {Fraction} from '../utils/fraction.enum';
|
import {Fraction} from '../utils/fraction.enum';
|
||||||
|
import {BaseConfig} from '../app.config';
|
||||||
|
import {Observable} from 'rxjs';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -12,9 +14,13 @@ import {Fraction} from '../utils/fraction.enum';
|
||||||
})
|
})
|
||||||
export class ArmyComponent implements OnInit {
|
export class ArmyComponent implements OnInit {
|
||||||
|
|
||||||
|
readonly fraction = Fraction;
|
||||||
|
|
||||||
army: Army[] = [{}, {}];
|
army: Army[] = [{}, {}];
|
||||||
|
|
||||||
readonly fraction = Fraction;
|
singleViewSelected = this.fraction.BLUFOR;
|
||||||
|
|
||||||
|
isSmallLayout;
|
||||||
|
|
||||||
constructor(private router: Router,
|
constructor(private router: Router,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
|
@ -25,9 +31,18 @@ export class ArmyComponent implements OnInit {
|
||||||
this.armyService.getArmies().subscribe(army => {
|
this.armyService.getArmies().subscribe(army => {
|
||||||
this.army = army;
|
this.army = army;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.isSmallLayout = (window.innerWidth <= BaseConfig.responsive.breakpointSmallPx);
|
||||||
|
Observable.fromEvent(window, 'resize').subscribe(event => {
|
||||||
|
this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointSmallPx;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
select(memberId) {
|
select(memberId) {
|
||||||
this.router.navigate(['member', memberId], {relativeTo: this.route});
|
this.router.navigate(['member', memberId], {relativeTo: this.route});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
singleViewSwitch(switchFraction: Fraction) {
|
||||||
|
this.singleViewSelected = switchFraction;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,11 +8,11 @@
|
||||||
|
|
||||||
@media all and (max-width: 959px) {
|
@media all and (max-width: 959px) {
|
||||||
.rank-overview-container {
|
.rank-overview-container {
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.column-container {
|
div.column-container {
|
||||||
width: 49vw;
|
width: 49%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|
Loading…
Reference in New Issue