(front) Improve presentation

Bit rate presentation
Improve page + if for artist/album artist
This commit is contained in:
2020-12-22 17:01:22 +01:00
parent 93272d5894
commit 541fd96a45

View File

@@ -1,32 +1,38 @@
<div class="container">
<h1>Albums</h1>
<div class="col-md-12"> <div class="col-md-12">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th>Album</th> <th>Album</th>
<th>Track Count</th> <th>Track Count</th>
<th>Album Artist</th> <th>Artist/Album Artist</th>
<th colspan="2">Bit Rate (avg / min)</th> <th>Avg Bit Rate (min)</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let album of albums"> <tr *ngFor="let album of albums">
<td> <td>
{{album.Album}} {{album.Album}}
<button class="glyphicon glyphicon-zoom-out" (click)="exlude('Album', album)"></button> <span class="glyphicon glyphicon-remove-circle" style="cursor:pointer" (click)="exlude('Album', album)"></span>
</td> </td>
<td>{{album['Track Count']}}</td> <td>{{album['Track Count']}}</td>
<td> <td>
{{album['Album Artist'] ? album['Album Artist'] : album.Artist }} {{album['Album Artist'] ? album['Album Artist'] : album.Artist}}
<button *ngIf="album['Album Artist']; else removeArtist" <span *ngIf="album['Album Artist']; else removeArtistButton"
class="glyphicon glyphicon-zoom-out" class="glyphicon glyphicon-remove-circle" style="cursor:pointer" (click)="exlude('Album Artist', album)"></span>
(click)="exlude('Album Artist', album)"></button> <ng-template #removeArtistButton>
<ng-template #removeArtist> <span class="glyphicon glyphicon-remove-circle" style="cursor:pointer" (click)="exlude('Artist', album)"></span>
<button class="glyphicon glyphicon-zoom-out" (click)="exlude('Artist', album)"></button>
</ng-template> </ng-template>
</td> </td>
<td>{{album['Avg Bit Rate']}}</td>
<td>{{album['Min Bit Rate']}}</td> <td>
{{album['Avg Bit Rate']}}
<span *ngIf="album['Avg Bit Rate'] != album['Min Bit Rate']">({{album['Min Bit Rate']}})</span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>