feat: add portfolio block + aside + grid view

dpaniq · Jun 30, 2024 · 318629e · 318629e
1 parent 9524efd
commit 318629e
Show file tree

Hide file tree

Showing 12 changed files with 1,544 additions and 1,294 deletions.
diff --git a/m3-theme.scss b/m3-theme.scss
@@ -0,0 +1,148 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #000, secondary: #ccc, neutral: fff
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #3e001d,
+    20: #5e1133,
+    25: #6c1d3e,
+    30: #7b2949,
+    35: #893455,
+    40: #984061,
+    50: #b6587a,
+    60: #d57193,
+    70: #f48bae,
+    80: #ffb1c8,
+    90: #ffd9e2,
+    95: #ffecf0,
+    98: #fff8f8,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #001f24,
+    20: #00363d,
+    25: #00424a,
+    30: #004f58,
+    35: #005b66,
+    40: #006874,
+    50: #008391,
+    60: #00a0b0,
+    70: #22bccf,
+    80: #4fd8eb,
+    90: #97f0ff,
+    95: #d0f8ff,
+    98: #edfcff,
+    99: #f6feff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #2e1500,
+    20: #48290b,
+    25: #543416,
+    30: #623f20,
+    35: #6f4b2a,
+    40: #7c5635,
+    50: #986e4b,
+    60: #b48862,
+    70: #d1a27b,
+    80: #efbd94,
+    90: #ffdcc1,
+    95: #ffeee2,
+    98: #fff8f5,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    4: #000c0e,
+    6: #001316,
+    10: #001f24,
+    12: #002429,
+    17: #002f35,
+    20: #00363d,
+    22: #003b42,
+    24: #004047,
+    25: #00424a,
+    30: #004f58,
+    35: #005b66,
+    40: #006874,
+    50: #008391,
+    60: #00a0b0,
+    70: #22bccf,
+    80: #4fd8eb,
+    87: #81e9f9,
+    90: #97f0ff,
+    92: #aef3ff,
+    94: #c5f6ff,
+    95: #d0f8ff,
+    96: #daf9ff,
+    98: #edfcff,
+    99: #f6feff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #24191c,
+    20: #3a2d30,
+    25: #45383b,
+    30: #514347,
+    35: #5d4f52,
+    40: #6a5b5e,
+    50: #837377,
+    60: #9e8c90,
+    70: #b9a7aa,
+    80: #d5c2c6,
+    90: #f2dde1,
+    95: #ffecf0,
+    98: #fff8f8,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$dark-theme: mat.define-theme((
+  color: (
+    theme-type: dark,
+    primary: $_primary,
+    tertiary: $_tertiary,
+    use-system-variables: true,
+  ),
+  typography: (
+    use-system-variables: true,
+  ),
+));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -4,7 +4,7 @@ app-header {
 
 main {
   width: 800px;
-  height: 75vh;
+  /* height: 75vh; */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -69,7 +69,7 @@ dialog {
 
     --lineWidth: 5px;
     --lineLength: 140px;
-    --lineLength: calc(100px + 2vh);
+    --lineLength: calc(50px + 2vh);
     --lineColor: whitesmoke;
     --linearGradientColor: linear-gradient(var(--lineColor), var(--lineColor));
     --lineColorPair: var(--linearGradientColor), var(--linearGradientColor);

diff --git a/src/app/features/portfolio-block/portfolio-block.component.css b/src/app/features/portfolio-block/portfolio-block.component.css
@@ -0,0 +1,39 @@
+:host {
+  width: 920px;
+  height: 75vh;
+  overflow: hidden;
+  overflow-y: auto;
+
+  scrollbar-color: tomato rgba(0, 0, 0, 0.3);
+
+  section {
+    &.grid {
+      display: grid;
+      gap: 10px;
+      grid-template-rows: min-content;
+
+      img {
+        object-fit: cover;
+        filter: grayscale(1);
+
+        &:hover {
+          cursor: pointer;
+          filter: none;
+          transition: filter 0.5s;
+        }
+      }
+
+      &.view-1 {
+        grid-template-columns: repeat(1, 1fr);
+      }
+
+      &.view-2 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      &.view-3 {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+}
diff --git a/src/app/features/portfolio-block/portfolio-block.component.html b/src/app/features/portfolio-block/portfolio-block.component.html
@@ -1 +1,41 @@
-<p>portfolio-block works!</p>
+@switch (gridView()) {
+  @case (1) {
+    <section class="grid view-1">
+      @for (portfolio of portfolios(); track portfolio) {
+        <img
+          width="920"
+          height="500"
+          [ngSrc]="portfolio.preview"
+          loading="lazy"
+        />
+      }
+    </section>
+  }
+  @case (2) {
+    <section class="grid view-2">
+      @for (portfolio of portfolios(); track portfolio) {
+        <img
+          width="450"
+          height="330"
+          [ngSrc]="portfolio.preview"
+          loading="lazy"
+        />
+      }
+    </section>
+  }
+  @case (3) {
+    <section class="grid view-3">
+      @for (portfolio of portfolios(); track portfolio) {
+        <img
+          width="300"
+          height="130"
+          [ngSrc]="portfolio.preview"
+          loading="lazy"
+        />
+      }
+    </section>
+  }
+  @default {
+    No content at the moment
+  }
+}
diff --git a/src/app/features/portfolio-block/portfolio-block.component.ts b/src/app/features/portfolio-block/portfolio-block.component.ts
@@ -1,12 +1,24 @@
-import { Component } from '@angular/core';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { Component, input, signal } from '@angular/core';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatIconModule } from '@angular/material/icon';
+import { Portfolio } from '../../pages/portfolio-block-page/constants';
 
 @Component({
   selector: 'app-portfolio-block',
   standalone: true,
-  imports: [],
+  imports: [
+    CommonModule,
+    MatIconModule,
+    NgOptimizedImage,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+  ],
   templateUrl: './portfolio-block.component.html',
-  styleUrl: './portfolio-block.component.css'
+  styleUrl: './portfolio-block.component.css',
 })
 export class PortfolioBlockComponent {
-
+  public readonly portfolios = input.required<Portfolio[]>();
+  public readonly gridView = input.required<number>();
 }