Merge pull request #22 from grammerjam/standard-card

Standard card

base-client/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
+    "dev": "concurrently 'ng serve --host 0.0.0.0 --port 4200' 'npx json-server --watch src/data.json'",
     "start": "ng serve --host 0.0.0.0 --port 4200",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
@@ -22,6 +23,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "concurrently": "^9.0.0",
     "json-server": "^1.0.0-beta.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

base-client/src/app/app.component.scss

@@ -9,6 +9,6 @@
 
 main {
   display: grid;
-  height: 100dvh;
+  min-height: 100dvh;
   grid-template-rows: auto auto 1fr;
 }

base-client/src/app/components/regular-card/regular-card.component.html

@@ -1,8 +1,17 @@
- <ul>
-      <li>{{selectionData.title}}</li>
-      <li>{{selectionData.category}}</li>
-      <li>{{selectionData.isBookmarked}}</li>
-      <li>{{selectionData.isTrending}}</li>
-      <li>{{selectionData.rating}}</li>
-      <li>{{selectionData.year}}</li>
-</ul>
+<article class="regular-card">
+  <img class="regular-thumbnail" [src]="selectionData.thumbnail.regular.small" [srcset]="" [alt]="selectionData.title">
+  <app-bookmark [isBookmarked]="selectionData.isBookmarked" />
+  <div class="regular-card-data-container">
+    <div class="regular-card-data">
+      <span class="op-75">{{selectionData.year}}</span>
+      <span class="op-50">•</span>
+        <img class="regular-category-icon"
+          [src]="selectionData.category === 'Movie' ? './assets/icon-category-movie.svg' : './assets/icon-category-tv.svg'"
+          [alt]="selectionData.category">
+        <span class="op-75">{{selectionData.category}}</span>
+      <span class="op-50">•</span>
+      <span class="op-75">{{selectionData.rating}}</span>
+    </div>
+    <h3>{{selectionData.title}}</h3>
+  </div>
+</article>