hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Update army overview & member detail style

pull/13/head
Florian Hartwich 2017-10-03 18:30:29 +02:00
parent 2fedfe35e0
commit 46f9a78cf7
6 changed files with 158 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/src/app/army/army-member.component.css
View File

@ -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 {

13
static/src/app/army/army-member.component.html
View File

@ -1,13 +1,12 @@
<div class="return-button"> <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> <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%;"> <h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
Auszeichnungen von {{user.rank?.name}} {{user.username}} Auszeichnungen von {{user.rank?.name}} {{user.username}}
</h3> </h3>
</div> </div>
<div class="overview">
<div> <div>
<img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png"> <img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png">
@ -21,7 +20,7 @@
</div> </div>
<div class="pull-left" style="margin-top:20px;"> <div class="pull-left" style="margin-top:20px;">
<div class="table-container" style="width: 75%; min-width: 500px"> <div class="table-container" style="min-width: 500px">
<table class="table table-hover"> <table class="table table-hover">
<thead> <thead>
<tr class="table-head"> <tr class="table-head">
@ -54,5 +53,5 @@
</div> </div>
</div> </div>
</div>
</div> </div>

88
static/src/app/army/army.component.css
View File

@ -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
}

74
static/src/app/army/army.component.html
View File

@ -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>
<div class="div-table-col"> <div class="row middle-row">
<div class=" div-table-row"> <div class="squad-cell name-cell">
<h4>{{squad.name}}</h4> <span class="member-link text-blufor"
</div> *ngFor="let member of squad.members"
<div class=" div-table-row" style="padding-left: 8px"> (click)="select(member._id)">
<div *ngFor="let member of squad.members"> {{member.rank}} {{member.username}}
<div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}} </span>
</div> </div>
</div> </div>
<br> <div class="row colored-row footer-row">
<br> <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
Mitglieder: {{squad.memberCount}} Mitglieder: {{squad.memberCount}}
</div> </div>
</div> </div>
</div> </div>
</div> <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.NATO.memberCount}}</div>
<br>
<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>
<div class="div-table-col"> <div class="row middle-row">
<div class=" div-table-row"> <div class="squad-cell name-cell">
<h4>{{squad.name}}</h4> <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-row">
<div *ngFor="let member of squad.members">
<div class="member-link text-opfor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
</div> </div>
<br> <div class="row colored-row footer-row">
<br> <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
Mitglieder: {{squad.memberCount}} Mitglieder: {{squad.memberCount}}
</div> </div>
</div> </div>
</div> </div>
</div> <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.CSAT.memberCount}}</div>
<br>
<br>
<div style="padding-left: 80px">Armeemitglieder: {{army.CSAT.memberCount}}</div>
</div> </div>
</div> </div>

2
static/src/app/army/army.component.ts
View File

@ -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});
} }
} }

4
static/src/app/army/army.routing.ts
View File

@ -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'
} }
]; ];