Unify public item mouseover effect

pull/43/head
HardiReady 2018-07-20 22:33:53 +02:00
parent e2c8714d02
commit ed87dd5df1
3 changed files with 33 additions and 24 deletions

View File

@ -39,3 +39,7 @@ tbody {
.cell-outline { .cell-outline {
outline: 1px solid #D4D4D4; outline: 1px solid #D4D4D4;
} }
tr.cell-outline:hover {
background-color: #ffffff;
}

View File

@ -21,33 +21,33 @@
<div class="pull-left" style="margin-top:20px;"> <div class="pull-left" style="margin-top:20px;">
<div class="table-container" style="min-width: 500px"> <div class="table-container" style="min-width: 500px">
<table class="table table-hover"> <table class="table">
<thead> <thead>
<tr class="table-head"> <tr class="table-head">
<th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th> <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">Bezeichnung</th>
<th class="col-sm-2">Begründung</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> <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
</tr> </tr>
</thead> </thead>
<tbody *ngFor="let award of awards"> <tbody *ngFor="let award of awards">
<tr *ngIf="award.confirmed === 1" class="cell-outline"> <tr *ngIf="award.confirmed === 1" class="cell-outline">
<td class="text-center" *ngIf="award.decorationId.isMedal"> <td class="text-center" *ngIf="award.decorationId.isMedal">
<img height="90px" src="resource/decoration/{{award.decorationId._id}}.png"> <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
</td> </td>
<td class="text-center" *ngIf="!award.decorationId.isMedal"> <td class="text-center" *ngIf="!award.decorationId.isMedal">
<img width="100px" src="resource/decoration/{{award.decorationId._id}}.png"> <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
</td> </td>
<td style="font-weight: bold"> <td style="font-weight: bold">
{{award.decorationId.name}} {{award.decorationId.name}}
</td> </td>
<td> <td>
{{award.reason}} {{award.reason}}
</td> </td>
<td class="text-right"> <td class="text-right">
<span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span> <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>

View File

@ -6,6 +6,10 @@ table {
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
} }
:host /deep/ tr.mat-row:hover {
background: #ffffff;
}
td > img { td > img {
height: 120px; height: 120px;
padding: 8px; padding: 8px;
@ -17,6 +21,7 @@ h1, h3 {
h3 { h3 {
font-weight: bolder; font-weight: bolder;
margin-bottom: 20px;
} }
.column-container { .column-container {