Use ion-card for consistent styling.

Author: seanwu1105

src/app/features/home/post-capture-tab/post-capture-tab.component.html

@@ -4,13 +4,10 @@
 <div class="segments" [ngSwitch]="categories">
   <ion-segment mode="ios" [(ngModel)]="categories">
     <ion-segment-button value="Photo" checked>
-      <ion-icon src="/assets/icon/apps.svg" class="series-tab-icon"></ion-icon>
+      <ion-icon src="/assets/icon/apps.svg" class="segment"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="Series">
-      <ion-icon
-        src="/assets/icon/series.svg"
-        class="series-tab-icon"
-      ></ion-icon>
+      <ion-icon src="/assets/icon/series.svg" class="segment"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   <div class="post-captures" *ngSwitchCase="'Photo'">
@@ -28,13 +25,12 @@
     </mat-grid-list>
   </div>
 
-  <div class="series-wrapper" *ngSwitchCase="'Series'">
-    <div
-      class="series-image"
+  <div class="series" *ngSwitchCase="'Series'">
+    <ion-card
       *ngFor="let series of series$ | async"
       [routerLink]="['series', { id: series.id, cover: series.cover_image }]"
     >
       <ion-img [src]="series.cover_image"></ion-img>
-    </div>
+    </ion-card>
   </div>
 </div>

src/app/features/home/post-capture-tab/post-capture-tab.component.scss

@@ -15,68 +15,55 @@
 
 .segments {
   display: flex;
-  padding: 8px;
   flex-direction: column;
   height: 100%;
 }
 
 ion-segment {
   width: 80%;
-  margin: 0 auto 16px;
+  margin: 8px auto;
   flex-shrink: 0;
-}
-
-.post-captures {
-  overflow: auto;
-}
 
-mat-grid-tile {
-  ion-img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-    overflow: hidden;
-    border-radius: 4px;
+  ion-icon.segment {
+    height: 40px;
   }
 }
 
-.series-tab-icon {
-  height: 40px;
-}
-
-.tab-content-post {
-  height: 100%;
-}
+.post-captures {
+  overflow: auto;
+  padding: 8px;
 
-mat-icon {
-  color: white;
-  z-index: 10;
-}
+  mat-grid-tile {
+    ion-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      overflow: hidden;
+      border-radius: 4px;
+    }
 
-mat-icon.from-store {
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
-  font-size: 20px;
-  opacity: 90%;
+    mat-icon.from-store {
+      color: white;
+      z-index: 10;
+      position: absolute;
+      bottom: 5px;
+      left: 5px;
+      font-size: 20px;
+      opacity: 90%;
+    }
+  }
 }
 
-.series-image {
-  margin-top: 10px;
-  margin-bottom: 20px;
-  width: 100%;
-  height: 300px;
-  max-width: 500px;
-  max-height: 300px;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 4px 0 4px #a5a5a5;
-  border-radius: 5px;
+.series {
+  height: auto;
+  overflow: auto;
 
-  ion-img {
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
+  ion-card {
+    ion-img {
+      height: 300px;
+      object-fit: cover;
+      object-position: center;
+    }
   }
 }

src/app/features/home/post-capture-tab/series/series.page.html

@@ -5,9 +5,9 @@
   <div class="toolbar-spacer"></div>
 </mat-toolbar>
 <div class="page-content">
-  <div class="series-image">
+  <ion-card>
     <ion-img [src]="cover$ | async"></ion-img>
-  </div>
+  </ion-card>
   <mat-grid-list cols="3" gutterSize="8px">
     <mat-grid-tile
       class="collection-general"

src/app/features/home/post-capture-tab/series/series.page.scss

@@ -1,28 +1,24 @@
-mat-toolbar {
-  color: white;
-
-  .mat-icon {
-    color: white;
-  }
-}
-
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-mat-grid-tile {
+ion-card {
   ion-img {
-    width: 100%;
-    height: 100%;
+    height: 300px;
     object-fit: cover;
     object-position: center;
-    overflow: hidden;
-    border-radius: 4px;
   }
 }
 
-.page-content {
-  padding: 16px;
+mat-grid-list {
+  margin: 8px;
+
+  mat-grid-tile {
+    ion-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      overflow: hidden;
+      border-radius: 4px;
+    }
+  }
 }
 
 .collection-general {
@@ -48,22 +44,3 @@ mat-grid-tile {
   border-radius: 4px;
   background: #ffaced;
 }
-
-.series-image {
-  margin-top: 10px;
-  margin-bottom: 20px;
-  width: 100%;
-  height: 300px;
-  max-width: 500px;
-  max-height: 300px;
-  overflow: hidden;
-  box-sizing: border-box;
-  box-shadow: 4px 0 4px #a5a5a5;
-  border-radius: 5px;
-
-  ion-img {
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
-  }
-}

src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts

@@ -1,4 +1,3 @@
-// tslint:disable: no-magic-numbers
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { defer, throwError } from 'rxjs';
@@ -12,11 +11,6 @@ import { BASE_URL } from '../secret';
   providedIn: 'root',
 })
 export class DiaBackendSeriesRepository {
-  constructor(
-    private readonly httpClient: HttpClient,
-    private readonly authService: DiaBackendAuthService
-  ) {}
-
   readonly fetchSeries$ = defer(() => this.authService.getAuthHeaders()).pipe(
     concatMap(headers =>
       this.httpClient.get<PaginatedResponse<DiaBackendSeries>>(
@@ -34,6 +28,11 @@ export class DiaBackendSeriesRepository {
       return throwError(err);
     })
   );
+
+  constructor(
+    private readonly httpClient: HttpClient,
+    private readonly authService: DiaBackendAuthService
+  ) {}
 }
 
 export interface DiaBackendSeries {