diff --git a/static/src/app/army/army.component.css b/static/src/app/army/army.component.css index 634c812..4d9c552 100644 --- a/static/src/app/army/army.component.css +++ b/static/src/app/army/army.component.css @@ -27,7 +27,7 @@ .middle-row { min-height: 120px; border: rgb(34, 34, 34); - background-color: white; + background-color: #ffffffe0; border-left-style: solid; border-right-style: solid; } diff --git a/static/src/app/army/army.component.ts b/static/src/app/army/army.component.ts index 3cf8566..a7e100f 100644 --- a/static/src/app/army/army.component.ts +++ b/static/src/app/army/army.component.ts @@ -1,8 +1,9 @@ -import {Component} from "@angular/core"; +import {Component, Inject} from "@angular/core"; import {Army} from "../models/model-interfaces"; import {ArmyService} from "../services/army-service/army.service"; import {ActivatedRoute, Router} from "@angular/router"; import {Fraction} from "../utils/fraction.enum"; +import {DOCUMENT} from "@angular/common"; @Component({ @@ -18,16 +19,30 @@ export class ArmyComponent { constructor(private router: Router, private route: ActivatedRoute, - private armyService: ArmyService) { + private armyService: ArmyService, + @Inject(DOCUMENT) private document) { } ngOnInit() { + // set background image css + const backgroundCss = ' background-image: url(../assets/bg.jpg);\n' + + ' background-size: cover;\n' + + ' background-attachment: fixed;\n' + + ' background-position: center;\n' + + ' background-repeat: no-repeat;'; + this.document.getElementById('right').setAttribute('style', backgroundCss); + + // init army data this.armyService.getArmy() .subscribe(army => { this.army = army; }); }; + ngOnDestroy() { + this.document.getElementById('right').setAttribute('style', ''); + } + select(memberId) { this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route}); } diff --git a/static/src/assets/bg.jpg b/static/src/assets/bg.jpg new file mode 100644 index 0000000..7a560c0 Binary files /dev/null and b/static/src/assets/bg.jpg differ