Add unified material return navigation button

pull/43/head
HardiReady 2018-07-24 21:43:09 +02:00
parent 8dd1abff55
commit 51b11cb2a1
8 changed files with 60 additions and 33 deletions

View File

@ -12,6 +12,7 @@
} }
.return-button { .return-button {
position: absolute;
display: block; display: block;
width: auto; width: auto;
} }

View File

@ -1,13 +1,17 @@
<div class="army-member-view"> <div class="army-member-view">
<div class="army-member-view-container"> <div class="army-member-view-container">
<div class="return-button"> <div class="return-button">
<span class="btn btn-default" style="position:absolute;" (click)="backToOverview()">< zurück zur Übersicht</span> <button mat-raised-button (click)="backToOverview()">
<h3 class="text-center" style="font-weight: 600" <mat-icon svgIcon="chevron-left"></mat-icon>
[style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"> Zurück
Auszeichnungen von {{user.username}} </button>
</h3>
</div> </div>
<h3 class="text-center" style="font-weight: 600"
[style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
Auszeichnungen von {{user.username}}
</h3>
<div class="text-center"> <div class="text-center">
<img src="{{signatureUrl}}"> <img src="{{signatureUrl}}">
</div> </div>
@ -23,31 +27,31 @@
<div class="table-container" style="min-width: 500px"> <div class="table-container" style="min-width: 500px">
<table class="table"> <table class="table">
<thead> <thead>
<tr class="table-head"> <tr class="table-head">
<th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th> <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
<th class="col-sm-2">Bezeichnung</th> <th class="col-sm-2">Bezeichnung</th>
<th class="col-sm-2">Begründung</th> <th class="col-sm-2">Begründung</th>
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th> <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
</tr> </tr>
</thead> </thead>
<tbody *ngFor="let award of awards"> <tbody *ngFor="let award of awards">
<tr *ngIf="award.confirmed === 1" class="cell-outline"> <tr *ngIf="award.confirmed === 1" class="cell-outline">
<td class="text-center" *ngIf="award.decorationId.isMedal"> <td class="text-center" *ngIf="award.decorationId.isMedal">
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png"> <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
</td> </td>
<td class="text-center" *ngIf="!award.decorationId.isMedal"> <td class="text-center" *ngIf="!award.decorationId.isMedal">
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png"> <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
</td> </td>
<td style="font-weight: bold"> <td style="font-weight: bold">
{{award.decorationId.name}} {{award.decorationId.name}}
</td> </td>
<td> <td>
{{award.reason}} {{award.reason}}
</td> </td>
<td class="text-right"> <td class="text-right">
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span> <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -7,6 +7,12 @@
min-height: calc(100vh - 95px); min-height: calc(100vh - 95px);
} }
.return-button {
display: block;
width: auto;
float: left;
}
.show-panel { .show-panel {
display: inline-block; display: inline-block;
margin: inherit; margin: inherit;

View File

@ -1,6 +1,12 @@
<div class="tracer-container"> <div class="tracer-container">
<h1>Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}</h1> <h1>Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}</h1>
<div class="return-button" style="position:absolute;">
<button mat-raised-button (click)="navigateBack()">
<mat-icon svgIcon="chevron-left"></mat-icon>Zurück
</button>
</div>
<div class="show-panel" <div class="show-panel"
*ngIf="isRank"> *ngIf="isRank">
<cc-rank-panel [rank]="traceItem"> <cc-rank-panel [rank]="traceItem">

View File

@ -1,6 +1,6 @@
import {Component, Inject, OnDestroy, OnInit} from '@angular/core'; import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {DOCUMENT} from '@angular/common'; import {DOCUMENT, Location} from '@angular/common';
import {Fraction} from '../../utils/fraction.enum'; import {Fraction} from '../../utils/fraction.enum';
import {CSSHelpers} from '../../utils/global.helpers'; import {CSSHelpers} from '../../utils/global.helpers';
import {RouteConfig} from '../../app.config'; import {RouteConfig} from '../../app.config';
@ -29,6 +29,7 @@ export class TraceOverviewComponent implements OnInit, OnDestroy {
constructor(private router: Router, constructor(private router: Router,
private route: ActivatedRoute, private route: ActivatedRoute,
private location: Location,
private userService: UserService, private userService: UserService,
private rankService: RankService, private rankService: RankService,
private decorationService: DecorationService, private decorationService: DecorationService,
@ -67,6 +68,10 @@ export class TraceOverviewComponent implements OnInit, OnDestroy {
this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]); this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
} }
navigateBack() {
this.location.back();
}
ngOnDestroy() { ngOnDestroy() {
if (!this.router.url.includes(RouteConfig.overviewPath)) { if (!this.router.url.includes(RouteConfig.overviewPath)) {
this.document.getElementById('right').setAttribute('style', ''); this.document.getElementById('right').setAttribute('style', '');

View File

@ -2,7 +2,9 @@
<h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2> <h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2>
<h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2> <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
<span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span> <button class="btn-back" mat-raised-button (click)="navigateBack()">
<mat-icon svgIcon="chevron-left"></mat-icon>Zurück
</button>
<div class="sum-container"> <div class="sum-container">
<div class="gauge-container pull-left"> <div class="gauge-container pull-left">

View File

@ -1,10 +1,9 @@
.scoreboard-table { .scoreboard-table {
height: 68vh; height: 60vh;
width:fit-content; width:fit-content;
border: 1px solid #dadada; border: 1px solid #dadada;
overflow-x: auto; overflow-x: auto;
margin: auto; margin: 56px auto auto;
margin-top: 56px;
} }
:host /deep/ table.mat-table > thead { :host /deep/ table.mat-table > thead {

View File

@ -1,3 +1,7 @@
.select-list {
min-height: calc(100vh - 50px);
}
.war-list-header { .war-list-header {
margin: auto; margin: auto;
} }