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

Refurbish card layout and functionalities for pub decoration overview

pull/43/head
HardiReady 2018-07-20 22:18:50 +02:00
parent 1a59724dbc
commit e2c8714d02
9 changed files with 130 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/src/app/app.component.css
View File

@ -49,23 +49,15 @@ li {
}
#scrollTopBtn {
position: fixed; /* Fixed/sticky position */
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #101010;
color: white;
font-weight: bolder;
cursor: pointer;
padding: 7px 25px 10px 25px;
border-radius: 20px;
font-size: 22px;
background: rgba(16, 16, 16, 0.8);
}
#scrollTopBtn:hover {
background-color: rgba(25, 142, 25, 1);
background: rgba(16, 16, 16);
}
.unprocessed {

9
static/src/app/app.component.html
View File

@ -133,4 +133,11 @@
<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>
<button mat-icon-button
mat-mini-fab
id="scrollTopBtn"
*ngIf="scrollTopVisible"
matTooltip="Zum Seitenanfang"
(click)="scrollToTop()">
<mat-icon svgIcon="arrow-up"></mat-icon>
</button>

3
static/src/app/app.component.ts
View File

@ -43,7 +43,8 @@ export class AppComponent implements OnInit {
'delete': 'twotone-delete-24px',
'stats-detail': 'round-assessment-24px',
'chevron-left': 'baseline-chevron_left-24px',
'chevron-right': 'baseline-chevron_right-24px'
'chevron-right': 'baseline-chevron_right-24px',
'arrow-up': 'baseline-arrow_upward-24px'
};
version = 'v'.concat(require('./../../../package.json').version);

29
static/src/app/pub/decoration-overview/decoration-overview.component.css
View File

@ -9,3 +9,32 @@ h3 {
h1, h3 {
text-align: center;
}
.decoration-overview-container {
max-width: 1782px;
min-width: 927px;
margin:auto;
position: relative;
}
.fraction-global {
display: flow-root;
}
.fraction-global > h3 {
color: #666666;
}
.fraction-left {
float: left;
width: 50%;
padding-right:81px;
margin-bottom: 135px;
}
.fraction-right {
float: right;
width: 50%;
padding-left:81px;
margin-bottom: 135px;
}

20
static/src/app/pub/decoration-overview/decoration-overview.component.html
View File

@ -1,21 +1,21 @@
<div style="width: 1100px; margin:auto; position: relative;">
<div class="decoration-overview-container">
<h1>Übersicht über alle Auszeichnungen</h1>
<div style="float:left;">
<div class="fraction-global">
<h3>Global</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
[decoration]="decoration">
</cc-decoration-panel>
</div>
<div class="fraction-left">
<h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
[decoration]="decoration">
</cc-decoration-panel>
</div>
<div style="float:left; margin-left: 2.5%;">
<h3 style="color: #666666">Global</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
[decoration]="decoration">
</cc-decoration-panel>
</div>
<div style="float:right;">
<div class="fraction-right">
<h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
[decoration]="decoration">

60
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
View File

@ -1,4 +1,62 @@
.decoration-card {
max-width: 338px;
background: rgba(255, 255, 255, 0.87);
width: 150px;
height: 250px;
margin: 6px;
padding: 0;
overflow: hidden;
float: left;
}
.decoration-card:hover {
background: #ffffff;
overflow: visible;
box-shadow: 0 0 18px 2px #666666;
}
.decoration-card:hover .decoration-description {
background: #ffffff;
position: relative;
z-index: 5;
}
.image-head {
height: 110px;
text-align: center;
padding: 12px;
}
.decoration-card .mat-card-content > div {
padding: 8px;
}
.decoration-card .mat-card-content > div:first-child {
color: white;
display: inherit;
text-align: center;
word-wrap: break-word;
}
img.img-medal {
height: 100%;
}
img.img-ribbon {
padding-top: 20%;
width: 100%;
}
.gradient {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
height: 24px;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(255, 255, 255, 0.84)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
}

24
static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
View File

@ -1,16 +1,18 @@
<mat-card class="decoration-card">
<mat-card-header>
<mat-card-title>{{decoration.name}}</mat-card-title>
<mat-card-subtitle
[style.color]="decoration.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
{{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="image-head">
<img src="resource/decoration/{{decoration._id}}.png"
alt="{{decoration.name}}">
<p>
alt="{{decoration.name}}"
[class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
</div>
<mat-card-content>
<div [style.background]="decoration.fraction === 'BLUFOR' ?
fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
{{decoration.name}}
</div>
<div class="decoration-description">
{{decoration.description}}
</p>
</div>
<div class="gradient">
</div>
</mat-card-content>
</mat-card>

4
static/src/app/utils/fraction.enum.ts
View File

@ -1,11 +1,11 @@
export enum Fraction {
BLUFOR = 'NATO',
OPFOR = 'CSAT',
COLOR_BLUFOR = '#0000FF',
COLOR_BLUFOR = '#3c5fa1',
COLOR_BLUFOR_LIGHT = '#6666dd',
COLOR_BLUFOR_DARK = '#0C0CA6',
COLOR_BLUFOR_GREY = '#515179',
COLOR_OPFOR = '#B22222',
COLOR_OPFOR = '#a90100',
COLOR_OPFOR_DARK = '#890F0F',
COLOR_OPFOR_LIGHT = '#fb5555',
COLOR_OPFOR_GREY = '#955c5f'

4
static/src/assets/icon/baseline-arrow_upward-24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 211 B