fine till now more to copu

Author: esteecodes

src/app/pages/series/[slug].page.ts

@@ -5,72 +5,117 @@ import { Observable, switchMap } from "rxjs";
 import { Post } from "src/app/models/post";
 import { BlogService } from "../../services/blog.service";
 
+import { MatCardModule } from '@angular/material/card';
+
 @Component({
 	selector: "app-series",
 	standalone: true,
-	imports: [RouterLink, AsyncPipe, SlicePipe],
+	imports: [RouterLink, AsyncPipe, SlicePipe, MatCardModule],
 	template: `
 		<div class="series-view">
 			<div class="cards-wrapper grid">
 				@for (post of postsInSeries$ | async; track post) {
-				<a [routerLink]="['/post', post.slug]" class="card">
-					<div class="card-image">
-						<img [src]="post.coverImage.url" />
-					</div>
-					<div class="card-title">
-						<h3>
-							{{
-								post.title.length > 90
-									? (post.title | slice : 0 : 90) + "..."
-									: post.title
-							}}
-						</h3>
-					</div>
-				</a>
+				<mat-card>
+					<a [routerLink]="['/post', post.slug]">
+						<div class="card-image">
+							<img [src]="post.coverImage.url" />
+						</div>
+						<div class="card-title">
+							<h3>
+								{{
+									post.title.length > 90
+										? (post.title | slice : 0 : 90) + "..."
+										: post.title
+								}}
+							</h3>
+						</div>
+					</a>
+				</mat-card>
 				}
 			</div>
 		</div>
 	`,
-		styles: [
-      `
-        .series-view {
-          width: 80vw;
-          min-height: 67.2vh;
-          padding: 0.5rem 0;
-          margin: 0 auto 2rem;
+	styles: [
+		`
+			.series-view {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				min-height: 67.2vh;
+				padding: 0.5rem 0;
+
+				.layout-control {
+					display: flex;
+					justify-content: flex-end;
+				}
+
+				.cards-wrapper {
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: center;
+					margin: 2rem 1rem;
+
+					mat-card {
+						width: 25rem;
+						margin: 1rem;
+						padding: 0;
+						cursor: pointer;
+
+						&:hover {
+							transform: scale(1.01);
+							box-shadow: 0 4px 8px #00000033;
+							transition: all 0.3s ease-in-out;
+						}
 
-          .layout-control {
-            display: flex;
-            justify-content: flex-end;
-          }
+						a {
+							padding: 0;
+							margin: 0;
 
-          .cards-wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            margin: 2rem 1rem 1rem;
+							.card-image {
+								width: 25rem;
+								border-radius: 0.3rem;
+								overflow: hidden;
 
-            &.grid {
-              .card {
-                &:hover {
-                  transform: scale(1.1);
-                  transition: all 0.3s ease-in-out;
-                }
-              }
-            }
-          }
+								img {
+									width: 100%;
+									object-fit: cover;
+								}
+							}
 
-          .load-more-posts {
-            display: flex;
-            justify-content: center;
-            button {
-              font-size: 1rem;
-              text-transform: uppercase;
-            }
-          }
-        }
-      `,
-    ],
+							.card-title {
+								padding: 0 1rem;
+							}
+						}
+					}
+				}
+			}
+
+			@media (max-width: 600px) {
+				.series-view {
+					align-items: flex-start;
+
+					.cards-wrapper {
+						width: 90vw;
+						mat-card {
+							width: 90%;
+							margin: 0.5rem 0;
+							a {
+								.card-image {
+									width: unset;
+								}
+
+								.card-title {
+									h3 {
+										font-size: 1.1rem;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		`,
+	],
 })
 export default class SeriesComponent implements OnInit {
 	blogURL!: string;