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

View File

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