Update army overview & member detail style
parent
2fedfe35e0
commit
46f9a78cf7
|
|
@ -1,12 +1,14 @@
|
||||||
.overview {
|
.overview {
|
||||||
position: fixed;
|
|
||||||
overflow-y: scroll;
|
|
||||||
overflow-x: hidden;
|
|
||||||
bottom: 20px;
|
|
||||||
padding-left: 50px;
|
|
||||||
padding-top: 190px;
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
width: 90%;
|
||||||
|
padding: 5px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
left: -1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ #right {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.return-button {
|
.return-button {
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,57 @@
|
||||||
<div class="return-button">
|
|
||||||
<span class="btn btn-default" style="float:left" (click)="backToOverview()">< zurück zur Übersicht</span>
|
|
||||||
|
|
||||||
<h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
|
|
||||||
Auszeichnungen von {{user.rank?.name}} {{user.username}}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="overview">
|
<div class="overview">
|
||||||
|
<div style="width: 90%; margin:auto">
|
||||||
|
<div class="return-button">
|
||||||
|
<span class="btn btn-default" style="float:left" (click)="backToOverview()">< zurück zur Übersicht</span>
|
||||||
|
|
||||||
<div>
|
<h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
|
||||||
<img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png">
|
Auszeichnungen von {{user.rank?.name}} {{user.username}}
|
||||||
</div>
|
</h3>
|
||||||
<div class="input-group" style="width: 662px; margin-left: 13%;">
|
</div>
|
||||||
<input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
|
|
||||||
<span class="input-group-btn">
|
<div>
|
||||||
|
<img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png">
|
||||||
|
</div>
|
||||||
|
<div class="input-group" style="width: 662px; margin-left: 13%;">
|
||||||
|
<input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
|
||||||
|
<span class="input-group-btn">
|
||||||
<button class="btn btn-default" [class.btn-success]="isCopied" type="button"
|
<button class="btn btn-default" [class.btn-success]="isCopied" type="button"
|
||||||
ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
|
ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pull-left" style="margin-top:20px;">
|
|
||||||
<div class="table-container" style="width: 75%; min-width: 500px">
|
|
||||||
<table class="table table-hover">
|
|
||||||
<thead>
|
|
||||||
<tr class="table-head">
|
|
||||||
<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">Begründung</th>
|
|
||||||
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody *ngFor="let award of user.awards">
|
|
||||||
<tr *ngIf="award.confirmed === 1" class="cell-outline">
|
|
||||||
<td class="text-center" *ngIf="award.decorationId.isMedal">
|
|
||||||
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
|
|
||||||
</td>
|
|
||||||
<td class="text-center" *ngIf="!award.decorationId.isMedal">
|
|
||||||
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
|
|
||||||
</td>
|
|
||||||
<td style="font-weight: bold">
|
|
||||||
{{award.decorationId.name}}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{{award.reason}}
|
|
||||||
</td>
|
|
||||||
<td class="text-right">
|
|
||||||
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="pull-left" style="margin-top:20px;">
|
||||||
|
<div class="table-container" style="min-width: 500px">
|
||||||
|
<table class="table table-hover">
|
||||||
|
<thead>
|
||||||
|
<tr class="table-head">
|
||||||
|
<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">Begründung</th>
|
||||||
|
<th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody *ngFor="let award of user.awards">
|
||||||
|
<tr *ngIf="award.confirmed === 1" class="cell-outline">
|
||||||
|
<td class="text-center" *ngIf="award.decorationId.isMedal">
|
||||||
|
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
|
||||||
|
</td>
|
||||||
|
<td class="text-center" *ngIf="!award.decorationId.isMedal">
|
||||||
|
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
|
||||||
|
</td>
|
||||||
|
<td style="font-weight: bold">
|
||||||
|
{{award.decorationId.name}}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{award.reason}}
|
||||||
|
</td>
|
||||||
|
<td class="text-right">
|
||||||
|
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,61 @@
|
||||||
h1 {
|
.squad-layout {
|
||||||
width: 920px;
|
overflow: hidden;
|
||||||
margin-bottom: 50px;
|
|
||||||
margin-left: 25%
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div-table {
|
|
||||||
display: table;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-left: 1%;
|
|
||||||
width: auto;
|
|
||||||
border-spacing: 5px; /* cellspacing:poor IE support for this */
|
|
||||||
}
|
|
||||||
|
|
||||||
.div-table-row {
|
|
||||||
display: table-row;
|
|
||||||
width: auto;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div-table-col {
|
|
||||||
float: left; /* fix for buggy browsers */
|
|
||||||
display: table-column;
|
|
||||||
padding: 5px 15px 5px 15px;
|
padding: 5px 15px 5px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.army-head {
|
.row {
|
||||||
font-weight: bolder;
|
clear: both;
|
||||||
text-align: center
|
}
|
||||||
|
|
||||||
|
.squad-cell {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colored-row {
|
||||||
|
background: rgb(34, 34, 34);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-row {
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-row {
|
||||||
|
border-radius: 0 0 12px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle-row {
|
||||||
|
min-height: 120px;
|
||||||
|
border: rgb(34, 34, 34);
|
||||||
|
background-color: white;
|
||||||
|
border-left-style: solid;
|
||||||
|
border-right-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: whitesmoke;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-cell {
|
||||||
|
display: inherit;
|
||||||
|
margin-left: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.member-link {
|
.member-link {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -46,3 +66,9 @@ img {
|
||||||
.text-blufor {
|
.text-blufor {
|
||||||
color: blue;
|
color: blue;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.army-head {
|
||||||
|
font-weight: bolder;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,62 +1,56 @@
|
||||||
<h1>Übersicht über alle Spieler, Squads und Armeen</h1>
|
<div style="width: 1100px; margin:auto; position: relative;left: -1%;">
|
||||||
|
<h1>Übersicht über alle Spieler, Squads und Armeen</h1>
|
||||||
|
|
||||||
<div style="width: 1200px; margin-left: 25%">
|
<div class="pull-left" style="width: 45%;">
|
||||||
|
|
||||||
<div class="div-table" style="width: 490px; float:left">
|
|
||||||
<h3 class="text-blufor army-head">NATO</h3>
|
<h3 class="text-blufor army-head">NATO</h3>
|
||||||
<div *ngFor="let squad of army.NATO.squads" style="outline:1px solid #D4D4D4;">
|
<div class="squad-layout" *ngFor="let squad of army.NATO.squads">
|
||||||
<div class="div-table-row">
|
<div class="row colored-row title-row">
|
||||||
|
<div class="squad-cell pull-left"><img
|
||||||
<div class="div-table-col">
|
src="resource/squad/{{squad._id}}.png"></div>
|
||||||
<img src="resource/squad/{{squad._id}}.png">
|
<div class="squad-cell title name-cell">{{squad.name}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row middle-row">
|
||||||
|
<div class="squad-cell name-cell">
|
||||||
|
<span class="member-link text-blufor"
|
||||||
|
*ngFor="let member of squad.members"
|
||||||
|
(click)="select(member._id)">
|
||||||
|
{{member.rank}} {{member.username}}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="div-table-col">
|
</div>
|
||||||
<div class=" div-table-row">
|
<div class="row colored-row footer-row">
|
||||||
<h4>{{squad.name}}</h4>
|
<div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
|
||||||
</div>
|
Mitglieder: {{squad.memberCount}}
|
||||||
<div class=" div-table-row" style="padding-left: 8px">
|
|
||||||
<div *ngFor="let member of squad.members">
|
|
||||||
<div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
Mitglieder: {{squad.memberCount}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.NATO.memberCount}}</div>
|
||||||
<br>
|
|
||||||
<div style="padding-left: 80px">Armeemitglieder: {{army.NATO.memberCount}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="div-table" style="width: 540px; padding-left: 50px">
|
<div class="pull-right" style="width: 45%;">
|
||||||
<h3 class="text-opfor army-head">CSAT</h3>
|
<h3 class="text-opfor army-head">CSAT</h3>
|
||||||
<div *ngFor="let squad of army.CSAT.squads" style="outline:1px solid #D4D4D4;">
|
<div class="squad-layout" *ngFor="let squad of army.CSAT.squads">
|
||||||
<div class="div-table-row">
|
<div class="row colored-row title-row">
|
||||||
|
<div class="squad-cell pull-left"><img
|
||||||
<div class="div-table-col">
|
src="resource/squad/{{squad._id}}.png"></div>
|
||||||
<img src="resource/squad/{{squad._id}}.png">
|
<div class="squad-cell title name-cell">{{squad.name}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="row middle-row">
|
||||||
|
<div class="squad-cell name-cell">
|
||||||
|
<span class="member-link text-opfor"
|
||||||
|
*ngFor="let member of squad.members"
|
||||||
|
(click)="select(member._id)">
|
||||||
|
{{member.rank}} {{member.username}}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="div-table-col">
|
</div>
|
||||||
<div class=" div-table-row">
|
<div class="row colored-row footer-row">
|
||||||
<h4>{{squad.name}}</h4>
|
<div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
|
||||||
</div>
|
Mitglieder: {{squad.memberCount}}
|
||||||
<div class=" div-table-row">
|
|
||||||
<div *ngFor="let member of squad.members">
|
|
||||||
<div class="member-link text-opfor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
Mitglieder: {{squad.memberCount}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.CSAT.memberCount}}</div>
|
||||||
<br>
|
|
||||||
<div style="padding-left: 80px">Armeemitglieder: {{army.CSAT.memberCount}}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export class ArmyComponent {
|
||||||
};
|
};
|
||||||
|
|
||||||
select(memberId) {
|
select(memberId) {
|
||||||
this.router.navigate(['member', memberId], {relativeTo: this.route});
|
this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,13 @@ import {ArmyMemberComponent} from "./army-member.component";
|
||||||
export const armyRoutes: Routes = [
|
export const armyRoutes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: ArmyComponent
|
component: ArmyComponent,
|
||||||
|
outlet: 'right'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'member/:id',
|
path: 'member/:id',
|
||||||
component: ArmyMemberComponent,
|
component: ArmyMemberComponent,
|
||||||
|
outlet: 'right'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue