From 59e381f70f2ae13b3618f581ac60f9c5c0f31f80 Mon Sep 17 00:00:00 2001 From: Sean Wu <seanwu1105@gmail.com> Date: Thu, 1 Apr 2021 21:54:51 +0800 Subject: [PATCH] Use ion-card for consistent styling. --- .../post-capture-tab.component.html | 14 ++-- .../post-capture-tab.component.scss | 81 ++++++++----------- .../post-capture-tab/series/series.page.html | 4 +- .../post-capture-tab/series/series.page.scss | 51 ++++-------- .../dia-backend-series-repository.service.ts | 11 ++- 5 files changed, 60 insertions(+), 101 deletions(-) diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.html b/src/app/features/home/post-capture-tab/post-capture-tab.component.html index 7a7e73436..4a90a45fc 100644 --- a/src/app/features/home/post-capture-tab/post-capture-tab.component.html +++ b/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> diff --git a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss b/src/app/features/home/post-capture-tab/post-capture-tab.component.scss index 4db677a0b..e07aa2ee8 100644 --- a/src/app/features/home/post-capture-tab/post-capture-tab.component.scss +++ b/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; + } } } diff --git a/src/app/features/home/post-capture-tab/series/series.page.html b/src/app/features/home/post-capture-tab/series/series.page.html index 594c8f44a..899ec5638 100644 --- a/src/app/features/home/post-capture-tab/series/series.page.html +++ b/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" diff --git a/src/app/features/home/post-capture-tab/series/series.page.scss b/src/app/features/home/post-capture-tab/series/series.page.scss index da69b78e9..9e9f84bff 100644 --- a/src/app/features/home/post-capture-tab/series/series.page.scss +++ b/src/app/features/home/post-capture-tab/series/series.page.scss @@ -1,30 +1,18 @@ -mat-toolbar { - color: white; - - .mat-icon { - color: white; +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; + } } } -.toolbar-spacer { - flex: 1 1 auto; -} - -mat-grid-tile { - ion-img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - overflow: hidden; - border-radius: 4px; - } -} - -.page-content { - padding: 16px; -} - .collection-general { height: 30vw; overflow: hidden; @@ -49,21 +37,10 @@ mat-grid-tile { 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-card { ion-img { + height: 300px; object-fit: cover; object-position: center; - height: 100%; } } diff --git a/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts b/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts index 0b60f8e76..dedf6610a 100644 --- a/src/app/shared/services/dia-backend/series/dia-backend-series-repository.service.ts +++ b/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 {