cart beta

src/app/components/cart/cart.component.html

@@ -0,0 +1,21 @@
+<div class="cart-container">
+    <div class="cart-list-items">
+        <div class="cart-item">
+            <div class="cart-item-img">
+                <p>img</p> 
+            </div>
+            <div class="cart-item-details">
+            <p>name</p> 
+            <p>price</p> 
+            <p>quantity</p> 
+            </div>
+        </div>
+    </div>
+    <div class="cart-payment-from">
+        <p>Fullname input</p>
+        <p>Address input</p>
+        <p>Credit Card Number</p>
+    </div>
+    
+</div>
+

src/app/components/cart/cart.component.scss

@@ -0,0 +1,49 @@
+$small: 600px;
+$medium: 960px;
+
+
+.cart-container {
+    width: 100%;
+    height: 100%;
+    padding-top: 30vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    
+}
+
+.cart-list-items {
+    padding-right: 12vh
+}
+
+.cart-item {
+    display: flex;
+    flex-direction: row;
+    margin-right: 10%;
+    height: 12vh;
+    width: 20vh;
+    padding: 10%;
+    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);
+}
+
+.cart-item-img {
+    padding-right: 20%;
+}
+
+img {
+    width: 100px;
+    border-radius: 10px;
+}
+
+.cart-payment-from {
+    height: 12vh;
+    padding: 4vh;
+    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);
+}
+
+
+
+
+

src/app/components/cart/cart.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CartComponent } from './cart.component';
+
+describe('CartComponent', () => {
+  let component: CartComponent;
+  let fixture: ComponentFixture<CartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/cart/cart.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.scss']
+})
+export class CartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/home/home.component.html

@@ -1,4 +1,3 @@
-<app-navbar></app-navbar>
 <div class="body-container">
     <app-product-list></app-product-list>
 </div>

src/app/components/home/home.component.scss

@@ -1,5 +1,15 @@
+$small: 600px;
+$medium: 960px;
+
 .body-container {
     width: 100%;
     height: 100%;
-    padding-top: 5%;
+    padding-top: 10%;
+    @media screen and (max-width: $medium) {
+        padding-top: 15%;
+        padding-bottom: 15%;
+    }
+    @media screen and (max-width: $small) {
+        padding-top: 25%;
+    }
 }

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

@@ -2,6 +2,6 @@
     <a routerLink="/">Shelf</a>
     <span class="nav-spacer"></span>
     <button mat-icon-button class="cart-button">
-        <mat-icon>shopping_cart</mat-icon>
+        <a routerLink="/cart"><mat-icon>shopping_cart</mat-icon></a>
     </button>
 </mat-toolbar>

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

@@ -1,4 +1,3 @@
-<app-navbar></app-navbar>
 <div class="details-container">
     <div class="details-img">
         <img src={{product.url}} class="card-img">

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

@@ -1,7 +1,16 @@
+$small: 600px;
+$medium: 960px;
+
 .details-container {
     display: flex;
     justify-content: center;
     padding-top: 10%;
+    @media screen and (max-width: $medium) {
+        padding-top: 35%;
+    }
+    @media screen and (max-width: $small) {
+        padding-top: 50%;
+    }
     
 }
 
@@ -10,6 +19,11 @@
     padding-right: 5%;
     height:50vh;
     overflow: hidden;
+
+    @media screen and (max-width: $small) {
+        width: 30%;
+    }
+    
 }
 
 .details-info {
@@ -20,6 +34,10 @@
     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);
+
+    @media screen and (max-width: $small) {
+        width: 60%;
+    }
 }
 
 .info-tilte {
@@ -39,6 +57,12 @@
     width: 30%;
     padding-top: 5%;
     flex-grow: 1;
+    @media screen and (max-width: $medium) {
+        width: 60%;
+    }
+    @media screen and (max-width: $small) {
+        width: 50%;
+    }
 }
 
 .back-button {

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

@@ -1,3 +1,7 @@
+$small: 600px;
+$medium: 960px;
+
+
 .product-card {
     display: flex;
     flex-direction: column;
@@ -46,6 +50,12 @@
     button {
         margin: 2%;
         width: 50%;
+        @media screen and (max-width: $medium) {
+            width: 65%;
+        }
+        @media screen and (max-width: $small) {
+            width: 80%;
+        }
     }
 }
 

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

@@ -1,5 +1,5 @@
-$small: 960px;
-$medium: 1360px;
+$small: 600px;
+$medium: 960px;
 
 .product-list-container {
     display: flex;
@@ -12,10 +12,10 @@ $medium: 1360px;
     width: 20%;
 
     @media screen and (max-width: $medium) {
-        width: 25%;
+        width: 33.33%;
     }
 
     @media screen and (max-width: $small) {
-        width: 33.33%;
+        width: 50%;
     }
 }

src/app/services/cart.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CartService } from './cart.service';
+
+describe('CartService', () => {
+  let service: CartService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CartService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/cart.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Product } from '../models/product';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CartService {
+  items: Product[] = []
+
+  constructor() { }
+
+  addToCart(product: Product) {
+    this.items.push(product)
+  }
+
+  getItems() {
+    return this.items
+  }
+
+  clearCart() {
+    this.items = []
+    return this.items
+  }
+
+}