chore: add img to card

LKL2017 · Dec 18, 2023 · 923e293 · 923e293
1 parent b09a49a
commit 923e293
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 10 deletions.
diff --git a/src/assets/images/harmonic-preview.png b/src/assets/images/harmonic-preview.png
diff --git a/src/di/mock.ts b/src/di/mock.ts
@@ -4,13 +4,13 @@ export interface Artifact {
   type: 'harmonic' | 'gravity' | 'dancing'
   title: string;
   description?: string;
-  // preview: string;
+  preview: string;
 }
 
 export const ArtifactToken = new InjectionToken<Artifact[]>('gallery-list');
 
 export const MOCK_ARTIFACTS: Artifact[] = [
-  {type: 'harmonic', title: 'Harmonic Motion'},
-  {type: 'gravity', title: 'Gravity'},
-  {type: 'dancing', title: 'Dancing Pixels'}
+  {type: 'harmonic', title: 'Harmonic Motion', preview: 'assets/images/harmonic-preview.png'},
+  {type: 'gravity', title: 'Gravity', preview: ''},
+  {type: 'dancing', title: 'Dancing Pixels', preview: ''}
 ]
diff --git a/src/gallery/gallery-home/gallery-home.component.html b/src/gallery/gallery-home/gallery-home.component.html
@@ -1,7 +1,17 @@
 <section class="container">
   @for (artifact of artifacts; track artifact.title) {
-    <mat-card class="item" (click)="toDetail(artifact)">
-      <mat-card-title>{{ artifact.title }}</mat-card-title>
+    <mat-card class="item">
+      <mat-card-header>
+        <mat-card-title>{{ artifact.title }}</mat-card-title>
+      </mat-card-header>
+      @if (artifact.preview) {
+        <img [src]="artifact.preview"  mat-card-image alt="">
+      } @else {
+        <mat-card-content>Developing</mat-card-content>
+      }
+      <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="toDetail(artifact)" [disabled]="!artifact.preview">Detail</button>
+      </mat-card-actions>
     </mat-card>
   }
 </section>

diff --git a/src/gallery/gallery-home/gallery-home.component.scss b/src/gallery/gallery-home/gallery-home.component.scss
@@ -1,20 +1,27 @@
 .container {
   display: flex;
   flex-flow: column wrap;
-  margin: 0 25%;
+  width: 800px;
+  margin: 0 auto;
 
   .item {
     flex: 0 1 300px;
     align-self: flex-start;
-    width: 200px;
-    cursor: pointer;
+    width: 240px;
+    margin: 1.5rem;
+    transition: all ease 0.3s;
 
     &:nth-of-type(2n) {
       align-self: flex-end;
     }
 
     &:nth-of-type(n+2) {
-      //margin-top: -50px;
+      margin-top: -50px;
+    }
+
+    &:hover {
+      transform: scale(1.1) rotate(2deg);
+      box-shadow: 0 0 6px 6px #aaf6;
     }
   }
 }