diff --git a/src/app/components/cart/cart.component.scss b/src/app/components/cart/cart.component.scss
index 0a52fbe..e67be46 100644
--- a/src/app/components/cart/cart.component.scss
+++ b/src/app/components/cart/cart.component.scss
@@ -112,8 +112,7 @@ img {
flex-direction: column;
justify-content: center;
align-items: center;
- padding-top: 2%;
- padding-bottom: 2%;
+ padding: 5vh;
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);
diff --git a/src/app/components/product-item/product-item.component.html b/src/app/components/product-item/product-item.component.html
index 20712a5..455d7f8 100644
--- a/src/app/components/product-item/product-item.component.html
+++ b/src/app/components/product-item/product-item.component.html
@@ -1,4 +1,5 @@
+
favorite
@@ -10,6 +11,7 @@
+
diff --git a/src/app/components/product-item/product-item.component.scss b/src/app/components/product-item/product-item.component.scss
index 1f8221a..df2a09c 100644
--- a/src/app/components/product-item/product-item.component.scss
+++ b/src/app/components/product-item/product-item.component.scss
@@ -1,6 +1,19 @@
$small: 600px;
$medium: 960px;
+.favorite {
+ position: absolute;
+ pointer-events: none;
+ cursor: not-allowed;
+ margin-top: 1%;
+ margin-left: 13%;
+ @media screen and (max-width: $medium) {
+ margin-left: 22%;
+ }
+ @media screen and (max-width: $small) {
+ margin-left: 33%;
+ }
+}
.product-card {
display: flex;
@@ -26,8 +39,6 @@ $medium: 960px;
}
}
-
-
.card-details-container {
height: max-content;
padding-top: 15%;
@@ -63,9 +74,9 @@ $medium: 960px;
padding-bottom: 5%;
button {
margin: 2%;
- width: 50%;
+ width: 45%;
@media screen and (max-width: $medium) {
- width: 65%;
+ width: 50%;
}
@media screen and (max-width: $small) {
width: 80%;
diff --git a/src/app/components/product-item/product-item.component.ts b/src/app/components/product-item/product-item.component.ts
index f19d180..416943a 100644
--- a/src/app/components/product-item/product-item.component.ts
+++ b/src/app/components/product-item/product-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Product } from 'src/app/models/product';
@Component({
@@ -16,6 +16,9 @@ export class ProductItemComponent implements OnInit {
description: "",
quantity: 0
}
+
+@Output() marked: EventEmitter = new EventEmitter;
+
constructor() { }
ngOnInit(): void {
diff --git a/src/app/components/product-list/product-list.component.html b/src/app/components/product-list/product-list.component.html
index 7f2e52b..8bc719c 100644
--- a/src/app/components/product-list/product-list.component.html
+++ b/src/app/components/product-list/product-list.component.html
@@ -1,4 +1,4 @@
diff --git a/src/app/components/product-list/product-list.component.ts b/src/app/components/product-list/product-list.component.ts
index 4a9e56d..2069020 100644
--- a/src/app/components/product-list/product-list.component.ts
+++ b/src/app/components/product-list/product-list.component.ts
@@ -18,4 +18,9 @@ export class ProductListComponent implements OnInit {
})
}
+ markAsFavorite(product: any): void {
+ console.log(`${product.name} has been added to favorites.`);
+ product.favorite = true
+ }
+
}
diff --git a/src/app/models/product.ts b/src/app/models/product.ts
index 80b5790..f3cdb75 100644
--- a/src/app/models/product.ts
+++ b/src/app/models/product.ts
@@ -4,5 +4,6 @@ export interface Product {
price: number,
url : string
description: string,
- quantity: number
+ quantity: number,
+ favorite?: boolean,
}
\ No newline at end of file