From 541fd96a4523d7babf73a27e448d3ba179178dd8 Mon Sep 17 00:00:00 2001
From: "Maxence G. de Montauzan" <maxence@gdemontauzan.fr>
Date: Tue, 22 Dec 2020 17:01:22 +0100
Subject: [PATCH] (front) Improve presentation

Bit rate presentation
Improve page + if for artist/album artist
---
 .../src/app/albums/albums.component.html      | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/app/albums/albums.component.html b/dashboard/src/app/albums/albums.component.html
index d5288e9..656b17d 100644
--- a/dashboard/src/app/albums/albums.component.html
+++ b/dashboard/src/app/albums/albums.component.html
@@ -1,32 +1,38 @@
+<div class="container">
+  <h1>Albums</h1>
+
 <div class="col-md-12">
   <table class="table table-striped">
       <thead>
           <tr>
               <th>Album</th>
               <th>Track Count</th>
-              <th>Album Artist</th>
-              <th colspan="2">Bit Rate (avg / min)</th>
+              <th>Artist/Album Artist</th>
+              <th>Avg Bit Rate (min)</th>
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let album of albums">
               <td>
                 {{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>{{album['Track Count']}}</td>
               <td>
-                {{album['Album Artist'] ? album['Album Artist'] : album.Artist }}
-                <button *ngIf="album['Album Artist']; else removeArtist"
-                  class="glyphicon glyphicon-zoom-out"
-                  (click)="exlude('Album Artist', album)"></button>
-                <ng-template #removeArtist>
-                  <button class="glyphicon glyphicon-zoom-out" (click)="exlude('Artist', album)"></button>
+                {{album['Album Artist'] ? album['Album Artist'] : album.Artist}}
+                <span *ngIf="album['Album Artist']; else removeArtistButton"
+                  class="glyphicon glyphicon-remove-circle" style="cursor:pointer" (click)="exlude('Album Artist', album)"></span>
+                <ng-template #removeArtistButton>
+                  <span class="glyphicon glyphicon-remove-circle" style="cursor:pointer" (click)="exlude('Artist', album)"></span>
                 </ng-template>
               </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>
       </tbody>
   </table>
 </div>
+</div>