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

Fix misaligned score table header by flex box use

pull/48/head
HardiReady 2019-01-30 20:35:14 +01:00
parent 694edc7afe
commit 4fb2326ef6
2 changed files with 26 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
static/src/app/statistic/war/scoreboard/scoreboard.component.css
View File

@ -1,65 +1,24 @@
.scoreboard-table {
height: 60vh;
width: fit-content;
border: 1px solid #dadada;
overflow-x: auto;
margin: 56px auto auto;
}
:host /deep/ table.mat-table > thead {
position: absolute;
width: 977px;
display: inherit;
margin-left: -1px;
margin-top: -57px;
border: 1px solid #dadada;
}
:host /deep/ table.mat-table > tbody {
margin-top: 0 !important;
}
.in-table-btn {
position: absolute;
margin-top: -5px;
}
:host /deep/ table.mat-table > tbody {
margin-top: 60px;
display: block;
width: 1115px;
margin: auto;
height: 68vh;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
border-bottom: 1px solid #dadada;
}
.mat-column-name {
width: 200px;
flex: 0 0 220px;
}
.mat-column-fraction {
width: 90px;
flex: 0 0 90px;
}
.mat-column-kill, .mat-column-friendlyFire, .mat-column-revive, .mat-column-flagTouch, .mat-column-vehicleLight,
.mat-column-vehicleHeavy, .mat-column-vehicleAir, .mat-column-death, .mat-column-respawn, .mat-column-interact {
width: 67px;
text-indent: 9px;
}
.mat-column-vehicleLight mat-icon.mat-icon {
width: 28px;
margin-bottom: 5px;
}
.mat-column-vehicleHeavy mat-icon.mat-icon {
width: 33px;
margin-top: 5px;
}
.mat-column-vehicleAir mat-icon.mat-icon {
width: 35px;
margin-bottom: 5px;
}
td.mat-cell:last-child, td.mat-footer-cell:last-child, th.mat-header-cell:last-child {
padding-right: 0;
flex: 0 0 80px;
}
:host /deep/ .mat-table .mat-icon {

33
static/src/app/statistic/war/scoreboard/scoreboard.component.html
View File

@ -1,47 +1,46 @@
<div class="fade-in scoreboard-table">
<table mat-table matSort
<mat-table matSort
[dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8">
<ng-container matColumnDef="{{tableHead[0].prop}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</th>
<td mat-cell *matCellDef="let element"
<mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element"
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{element.name}}
</td>
</mat-cell>
</ng-container>
<ng-container matColumnDef="{{tableHead[1].prop}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</th>
<td mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</td>
<mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
</ng-container>
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">
<th mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
<mat-header-cell *matHeaderCellDef mat-sort-header="{{column.prop}}">
<mat-icon svgIcon="{{column.prop}}"
matTooltip="{{column.head | translate}}">
</mat-icon>
</th>
<td mat-cell *matCellDef="let element">{{element[column.prop]}}</td>
</mat-header-cell>
<mat-cell *matCellDef="let element">{{element[column.prop]}}</mat-cell>
</ng-container>
<ng-container matColumnDef="interact">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-icon-button
matTooltip="{{ 'stats.scoreboard.button.detail' | translate:{name: element.name} }}"
(click)="selectPlayerDetail(1, isSteamUUID(element['steamUUID']) ?
element['steamUUID'] : element['name'])">
<mat-icon svgIcon="stats-detail">
</mat-icon>
<mat-icon svgIcon="stats-detail"></mat-icon>
</button>
</td>
</mat-cell>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>