added product-item-details

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar color="primary">
+<mat-toolbar color="primary" class="navbar">
     <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">

src/app/components/navbar/navbar.component.scss

@@ -1,7 +1,13 @@
+.navbar {
+    position: fixed;
+    z-index: 10;
+}
+
 .nav-spacer {
     flex: 1 1 auto;
 }
 
+
 a {
     text-decoration: none;
     color: #fff;

src/app/components/product-item-details/product-item-details.component.html

@@ -1,11 +1,30 @@
 <app-navbar></app-navbar>
 <div class="details-container">
     <div class="details-img">
-        <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" class="card-img">
+        <img src={{product.url}} class="card-img">
     </div>
     <div class="details-info">
-        <label class="info-tilte">Title</label>
-        <label>Price</label>
-        <label class="info-description">Description</label>
+        <label class="info-tilte">{{product.name}}</label>
+        <label class="info-price">{{product.price}} $</label>
+        <label class="info-description">{{product.description}}</label>
+        <mat-form-field appearance="fill" class="details-quantity">
+            <mat-label>Quantity</mat-label>
+            <mat-select>
+              <mat-option value="option1">1</mat-option>
+              <mat-option value="option2">2</mat-option>
+              <mat-option value="option3">3</mat-option>
+              <mat-option value="option3">4</mat-option>
+              <mat-option value="option3">5</mat-option>
+              <mat-option value="option3">6</mat-option>
+              <mat-option value="option3">7</mat-option>
+              <mat-option value="option3">8</mat-option>
+              <mat-option value="option3">9</mat-option>
+              <mat-option value="option3">10</mat-option>
+            </mat-select>
+          </mat-form-field> 
+        <div class="details-buttons">
+            <button mat-raised-button color="primary" routerLink="/" class="back-button">Back</button>
+            <button mat-raised-button color="primary">Add to cart</button>
+        </div>
     </div>
 </div>

src/app/components/product-item-details/product-item-details.component.scss

@@ -7,14 +7,16 @@
 
 .details-img {
     width: 25%;
-    padding-right: 10%;
+    padding-right: 5%;
+    height:50vh;
+    overflow: hidden;
 }
 
 .details-info {
     display: flex;
     flex-direction: column;
     padding: 2%;
-    padding-top: 5%;
+    padding-top: 2%;
     width: 30%;
     box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
     transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -22,11 +24,25 @@
 
 .info-tilte {
     font-size: 4vh;
-    padding-bottom: 5%;
+    padding-bottom: 2%;
+}
+
+.info-price {
+    font-size: 2.5vh;
 }
 
 .info-description {
+    padding-top: 10%;
+}
+
+.details-quantity {
+    width: 30%;
     padding-top: 5%;
+    flex-grow: 1;
+}
+
+.back-button {
+    margin-right: 5%;
 }
 
 img {
@@ -35,7 +51,21 @@ img {
     transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
     width: 100%;
     height: auto;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
   }
+
+  @media screen and (max-width:800px) {
+        .details-img > img {
+        min-width:650px;
+        top: 0;
+        left: 50%;
+        transform: translatex(-50%);
+        }
+    }
   
   .select-input {
     width: 108px; 

src/app/components/product-item-details/product-item-details.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { Product } from '../../models/product'
+import { Product } from '../../models/product';
+import { ActivatedRoute } from "@angular/router"
 import { HttpService } from 'src/app/services/http.service';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-product-item-details',
@@ -8,10 +10,27 @@ import { HttpService } from 'src/app/services/http.service';
   styleUrls: ['./product-item-details.component.scss']
 })
 export class ProductItemDetailsComponent implements OnInit {
+  disableSelect = new FormControl(false);
+  product: Product = 
+    {
+      id: 1,
+      name: "",
+      price: 0,
+      url: "",
+      description: ""
+    }
+  productId: number = 0
 
-  constructor() { }
+  constructor(private httpService: HttpService, private route: ActivatedRoute ) { 
+  }
 
   ngOnInit(): void {
+    this.productId = parseInt(this.route.snapshot.paramMap.get('id') as string, 10);
+
+    this.httpService.getProducts().subscribe((res: Product[]) => {
+      this.product = res.filter(item => item.id === this.productId)[0];
+    })
+
   }
 
 }

src/app/components/product-item/product-item.component.html

@@ -1,7 +1,7 @@
 <div class="product-card">
     <div class="card-content">
         <div class="card-img-container">
-            <img src={{product.url}} class="card-img">
+            <img src={{product.url}} class="card-img" alt="{{product.name}}">
         </div>
         <div class="card-details-container">
             <div class="card-info">

src/app/components/product-item/product-item.component.scss

@@ -33,6 +33,7 @@
     justify-content: center;
     align-items: center;
     height: 80%;
+    flex-grow: 1;
 }
 
 .card-buttons {

src/app/components/product-item/product-item.component.ts

@@ -8,13 +8,13 @@ import { Product } from 'src/app/models/product';
 })
 export class ProductItemComponent implements OnInit {
 @Input() product: Product = 
-    {
-      id: 1,
-      name: "",
-      price: 0,
-      url: "",
-      description: ""
-    } 
+  {
+    id: 1,
+    name: "",
+    price: 0,
+    url: "",
+    description: ""
+  } 
   constructor() { }
 
   ngOnInit(): void {