Adjust details page UI/UX.

- Fix media height. #694 - Show loading animation on media background. #693 - Open certificate on clicking media ID. #695
numbersprotocol · May 25, 2021 · ceeade2 · ceeade2
2 parents 69a9560 + 0b790db
commit ceeade2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/src/app/features/home/details/details.page.html b/src/app/features/home/details/details.page.html
@@ -46,18 +46,15 @@
       "
     >
       <div class="slide">
-        <ng-container *ngrxLet="detailedCapture.mediaUrl$ as mediaUrl">
-          <app-media
-            *ngrxLet="detailedCapture.mediaMimeType$ as mediaMimeType"
-            [src]="mediaUrl"
-            [mimeType]="mediaMimeType"
-            [routerLink]="[
-              '/media-viewer',
-              mediaUrl,
-              { mimeType: mediaMimeType }
-            ]"
-          ></app-media>
-        </ng-container>
+        <app-media
+          [src]="detailedCapture.mediaUrl$ | ngrxPush"
+          [mimeType]="detailedCapture.mediaMimeType$ | ngrxPush"
+          [routerLink]="[
+            '/media-viewer',
+            detailedCapture.mediaUrl$ | ngrxPush,
+            { mimeType: detailedCapture.mediaMimeType$ | ngrxPush }
+          ]"
+        ></app-media>
         <ion-list lines="none">
           <ion-item>
             <ion-icon name="person" color="black" slot="start"></ion-icon>
@@ -83,7 +80,10 @@
               src="/assets/images/media-id-solid-black.svg"
               slot="start"
             ></ion-icon>
-            <ion-label *ngIf="detailedCapture.id; else notRegistered">
+            <ion-label
+              (click)="openCertificate()"
+              *ngIf="detailedCapture.id; else notRegistered"
+            >
               {{ detailedCapture.id }}
             </ion-label>
             <ng-template #notRegistered>

diff --git a/src/app/features/home/details/details.page.scss b/src/app/features/home/details/details.page.scss
@@ -16,6 +16,13 @@
   height: 100%;
   overflow: auto;
 
+  app-media {
+    min-height: 50%;
+    height: 50%;
+    object-fit: cover;
+    object-position: center;
+  }
+
   ion-item {
     --padding-start: 48px;
     --padding-end: 48px;

diff --git a/src/app/shared/media/component/media.component.scss b/src/app/shared/media/component/media.component.scss
@@ -1,6 +1,7 @@
 :host {
   display: block;
   object-fit: contain;
+  animation: loading 2.5s ease-in-out alternate infinite;
 }
 
 img,

diff --git a/src/global.scss b/src/global.scss
@@ -82,3 +82,13 @@ ion-button {
     color: white;
   }
 }
+
+@keyframes loading {
+  0% {
+    background-color: var(--loading-background-start);
+  }
+
+  100% {
+    background-color: var(--loading-background-end);
+  }
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
@@ -176,6 +176,10 @@ $app-theme: mat-light-theme(
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+
+  // loading animation
+  --loading-background-start: var(--ion-color-light-shade);
+  --loading-background-end: var(--ion-color-light);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -239,6 +243,10 @@ $app-theme: mat-light-theme(
     --ion-color-light-contrast-rgb: 255, 255, 255;
     --ion-color-light-shade: #1e2023;
     --ion-color-light-tint: #383a3e;
+
+    // loading animation
+    --loading-background-start: var(--ion-color-step-150);
+    --loading-background-end: var(--ion-color-step-100);
   }
 
   /*