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

Apply custom design for acordion component

pull/40/head
HardiReady 2018-07-01 00:02:59 +02:00
parent 5f0dcae272
commit ce86593c0f
2 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/src/app/statistic/war/war-list/war-list.component.css
View File

@ -1,6 +1,37 @@
span > a {
font-size: 20px !important;
}
mat-expansion-panel {
border: 1px solid #7d7d7d;
}
mat-panel-title {
font-size: 18px;
color: #FFFFFF;
}
mat-expansion-panel-header {
height: auto;
padding: 30px 15px;
background-color: #4e4e4e;
}
mat-expansion-panel-header.mat-expansion-panel-header:hover {
background: #222222 !important;
}
mat-expansion-panel-header.mat-expansion-panel-header:focus {
background-color: #4e4e4e;
}
.select-list > div:last-child {
margin: 20px 0;
}
.top-list-entry {
display: flex;
margin: 6px 0;
margin: 0 0 6px 0;
}
.top-list-entry > div {
@ -16,3 +47,15 @@
color: #4b4b4b;
padding: 0 3px;
}
:host /deep/ .mat-expansion-indicator::after {
color: rgba(255, 255, 255, 0.64);
}
.select-list > mat-accordion:first-child .mat-expansion-panel {
border-radius: 10px 10px 0 0;
}
.select-list > mat-accordion:first-child .mat-expansion-panel-header {
border-radius: 8px 8px 0 0;
}

20
static/src/app/statistic/war/war-list/war-list.component.html
View File

@ -8,10 +8,10 @@
</a>
</div>
<mat-accordion *ngFor="let campaign of campaigns;">
<mat-expansion-panel>
<mat-expansion-panel-header style="height:auto; padding: 30px 15px;">
<mat-panel-title style="font-size: 20px; font-weight: 700; border-bottom: 1px solid;">
<mat-accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
<mat-expansion-panel [expanded]="isFirstRow">
<mat-expansion-panel-header>
<mat-panel-title>
{{campaign.title}}
</mat-panel-title>
<mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
@ -28,15 +28,15 @@
[ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
<div>
<span>
<a style="font-size: 20px;">Übersicht</a>
<a>Übersicht</a>
</span>
</div>
</div>
<div class="fade-in list-entry"
[ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
<div style="margin: auto">
<span style="margin:auto">
<a style="font-size: 20px;">Highscore</a>
<div>
<span>
<a>Highscore</a>
</span>
</div>
</div>
@ -53,12 +53,12 @@
</mat-expansion-panel>
</mat-accordion>
<div class="fade-in list-entry" style="margin-top: 20px; margin-bottom: 20px;"
<div class="fade-in list-entry"
[ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
<div class="row">
<div class="col-xs-9">
<span>
<a style="font-size: 22px;">Gesamtübersicht</a>
<a>Gesamtübersicht</a>
</span>
</div>
</div>