fix: first view portfolio

dpaniq · Jul 2, 2024 · b800f0f · b800f0f
1 parent 318629e
commit b800f0f
Show file tree

Hide file tree

Showing 7 changed files with 182 additions and 33 deletions.
diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -1,10 +1,10 @@
 app-header {
-  height: 10vh;
+  height: 16vh;
 }
 
 main {
-  width: 800px;
-  /* height: 75vh; */
+  /* width: 800px; */
+  height: 69vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -58,7 +58,7 @@ dialog {
 .camera {
   pointer-events: none;
 
-  .camera-corners {
+  /* .camera-corners {
     position: absolute;
     top: 0px;
     bottom: 0px;
@@ -91,7 +91,7 @@ dialog {
       right top,
       right bottom,
       right bottom;
-  }
+  } */
 
   .rec {
     display: flex;

diff --git a/src/app/features/portfolio-block/portfolio-block.component.css b/src/app/features/portfolio-block/portfolio-block.component.css
@@ -1,16 +1,71 @@
 :host {
   width: 920px;
-  height: 75vh;
-  overflow: hidden;
-  overflow-y: auto;
+  height: 500px;
 
   scrollbar-color: tomato rgba(0, 0, 0, 0.3);
+  scrollbar-width: 5em;
+  ::-webkit-scrollbar-button {
+    background-color: green;
+    color: yellow;
+  }
 
   section {
     &.grid {
+      position: relative;
       display: grid;
       gap: 10px;
       grid-template-rows: min-content;
+      padding: 0 20px;
+
+      aspect-ratio: 2/1;
+      overflow: hidden;
+      overflow-y: scroll;
+      scroll-snap-type: y mandatory;
+      scroll-snap-points-y: repeat(500px);
+
+      div {
+        text-align: center;
+        scroll-snap-align: center;
+      }
+
+      div.placeholder-top {
+        position: relative;
+        width: 920px;
+        height: 250px;
+        background-color: black;
+
+        &::before {
+          content: 'Start';
+          position: absolute;
+          color: rgb(110, 110, 110);
+          font-size: 250px;
+          font-weight: 900;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          filter: blur(1px) drop-shadow(0 0 10px rgb(31, 31, 31));
+        }
+      }
+
+      div.placeholder-bottom {
+        position: relative;
+        width: 920px;
+        height: 250px;
+        background-color: black;
+
+        &::before {
+          content: 'End';
+          position: absolute;
+          color: rgb(110, 110, 110);
+          font-size: 250px;
+          font-weight: 900;
+          top: 50%;
+          left: 50%;
+          filter: blur(5px);
+          transform: translate(-50%, -50%);
+          filter: blur(1px) drop-shadow(0 0 10px rgb(31, 31, 31));
+        }
+      }
 
       img {
         object-fit: cover;

diff --git a/src/app/features/portfolio-block/portfolio-block.component.html b/src/app/features/portfolio-block/portfolio-block.component.html
@@ -1,13 +1,18 @@
 @switch (gridView()) {
   @case (1) {
-    <section class="grid view-1">
+    <section
+      class="grid view-1"
+      dir="ltr"
+    >
       @for (portfolio of portfolios(); track portfolio) {
-        <img
-          width="920"
-          height="500"
-          [ngSrc]="portfolio.preview"
-          loading="lazy"
-        />
+        <div>
+          <img
+            width="920"
+            height="500"
+            [ngSrc]="portfolio.preview"
+            loading="lazy"
+          />
+        </div>
       }
     </section>
   }

diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.html b/src/app/pages/portfolio-block-page/portfolio-block-page.component.html
@@ -25,7 +25,9 @@
       (change)="changeCategory($event)"
     >
       @for (category of categories; track category) {
-        <mat-chip-option>{{ category }}</mat-chip-option>
+        <mat-chip-option [selected]="actualCategory().includes(category)">
+          {{ category }}
+        </mat-chip-option>
       }
     </mat-chip-listbox>
   </aside>

diff --git a/src/app/pages/portfolio-block-page/portfolio-block-page.component.ts b/src/app/pages/portfolio-block-page/portfolio-block-page.component.ts
@@ -26,7 +26,11 @@ import { CategoryEnum, Portfolio, PORTFOLIO_CATEGORY_LIST } from './constants';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PortfolioBlockPageComponent {
-  public readonly actualCategory = signal<CategoryEnum[]>([]);
+  public readonly actualCategory = signal<CategoryEnum[]>([
+    CategoryEnum.Commercial,
+    CategoryEnum.Food,
+    CategoryEnum.Fashion,
+  ]);
 
   public readonly gridView = signal<number>(1);
 

diff --git a/src/index.html b/src/index.html
@@ -3,26 +3,65 @@
   <head>
     <!-- Main -->
     <title>Mkrecord</title>
-    <base href="/"/>
+    <base href="/" />
 
     <!-- Meta -->
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
 
     <!-- Favicon -->
-    <link rel="icon" type="image/x-icon" href="favicon.ico"/>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="favicon.ico"
+    />
 
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com"/>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""/>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap" rel="stylesheet"/>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet"/>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
-    <link rel="manifest" href="manifest.webmanifest">
-  <meta name="theme-color" content="#1976d2">
-</head>
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin=""
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      rel="manifest"
+      href="manifest.webmanifest"
+    />
+    <meta
+      name="theme-color"
+      content="#1976d2"
+    />
+  </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div class="camera">
+      <!-- Camera angles -->
+      <div class="camera-corners"></div>
+    </div>
+
     <app-root></app-root>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div class="bottom-camera">
+      <!-- Camera angles -->
+      <div class="camera-corners"></div>
+    </div>
   </body>
 </html>
diff --git a/src/styles/core.css b/src/styles/core.css
@@ -10,15 +10,59 @@ body {
   height: 100%;
 }
 
-*::-webkit-scrollbar {
+body {
+  .camera {
+    pointer-events: none;
+
+    .camera-corners {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      margin: 50px;
+      mix-blend-mode: color;
+
+      --lineWidth: 5px;
+      --lineLength: 140px;
+      --lineLength: calc(50px + 2vh);
+      --lineColor: whitesmoke;
+      --linearGradientColor: linear-gradient(
+        var(--lineColor),
+        var(--lineColor)
+      );
+      --lineColorPair: var(--linearGradientColor), var(--linearGradientColor);
+      --lineHorizontal: var(--lineLength) var(--lineWidth);
+      --lineVertical: var(--lineWidth) var(--lineLength);
+
+      background-image: var(--lineColorPair), var(--lineColorPair),
+        var(--lineColorPair), var(--lineColorPair);
+      background-repeat: no-repeat;
+      background-size: var(--lineVertical), var(--lineHorizontal),
+        var(--lineVertical), var(--lineHorizontal), var(--lineVertical),
+        var(--lineHorizontal), var(--lineVertical), var(--lineHorizontal);
+      background-position:
+        left top,
+        left top,
+        left bottom,
+        left bottom,
+        right top,
+        right top,
+        right bottom,
+        right bottom;
+    }
+  }
+}
+
+body::-webkit-scrollbar {
   width: 1em;
 }
 
-*::-webkit-scrollbar-track {
+body::-webkit-scrollbar-track {
   box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.3);
 }
 
-*::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb {
   background-color: tomato;
   outline: 1px solid #c74d38;
 }