refactor: improve library account views

src/app/modules/library/account/fines/fines-page.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>{{
+      'library.account.pages.fines.title' | translate | titlecase
+    }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-list *ngIf="fines; else loading">
+    <stapps-fee-item *ngFor="let fine of fines" [fee]="fine"></stapps-fee-item>
+  </ion-list>
+  <ng-template #loading>
+    <stapps-skeleton-list-item
+      *ngFor="let _ of [].constructor(2)"
+      hideThumbnail="true"
+    >
+    </stapps-skeleton-list-item>
+  </ng-template>
+  <ion-grid>
+    <ion-row *ngIf="amount; else amount_loading" class="ion-float-right">
+      <ion-col size="auto">
+        {{ 'library.account.pages.fines.labels.total_amount' | translate }}:
+      </ion-col>
+      <ion-col size="auto">
+        {{ amount }}
+      </ion-col>
+    </ion-row>
+    <ng-template #amount_loading>
+      <ion-row class="ion-float-right">
+        <ion-col size="auto">
+          <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
+        </ion-col>
+      </ion-row>
+    </ng-template>
+  </ion-grid>
+</ion-content>