From b5a249b9d613893f528a0df5df7c1be953ad95a4 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 03:59:29 +0200 Subject: [PATCH 01/34] Modifying borders of productcard --- webapp/src/css/MainProducts.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/src/css/MainProducts.scss b/webapp/src/css/MainProducts.scss index 3b54954..6a14c2e 100644 --- a/webapp/src/css/MainProducts.scss +++ b/webapp/src/css/MainProducts.scss @@ -13,7 +13,7 @@ background-color: white; justify-content: center; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); - + border-radius: 5px; } .product-card:hover{ @@ -31,7 +31,7 @@ &:hover{ background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.12)) } - + border-bottom: 5px solid #9B59B6; } .product-media{ grid-column: 1; @@ -41,7 +41,9 @@ img{ width: 100%; height: 100%; + border-top-left-radius: 5px; } + } .product-content{ width: 70%; From b6e1240366900f9dff198479bcecc5e7b80a3d54 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 03:59:57 +0200 Subject: [PATCH 02/34] ReviewsView with scroll in smaller devices --- webapp/src/components/products/ReviewsView.css | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/src/components/products/ReviewsView.css b/webapp/src/components/products/ReviewsView.css index a5693c2..caef4e9 100644 --- a/webapp/src/components/products/ReviewsView.css +++ b/webapp/src/components/products/ReviewsView.css @@ -1,6 +1,7 @@ .review-box{ border-top: 3px dashed #bbb; font-family: inherit; + overflow: auto; } .review-top{ margin-top: 10px; From a789fe6fcc888c8345f9532a902f2535c2d6da51 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 04:00:25 +0200 Subject: [PATCH 03/34] Img to the left --- webapp/src/components/checkout-shipping/CheckoutItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.tsx b/webapp/src/components/checkout-shipping/CheckoutItem.tsx index 1b82716..bede651 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.tsx +++ b/webapp/src/components/checkout-shipping/CheckoutItem.tsx @@ -25,8 +25,7 @@ function CheckoutItem(props: CheckoutItemProps) { From cb5c792a702e23f4b9c3adb4e946269a39b286a6 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 04:01:12 +0200 Subject: [PATCH 04/34] Modification of layout. Now items in order is scrollable. --- .../components/checkout-shipping/Checkout.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/webapp/src/components/checkout-shipping/Checkout.tsx b/webapp/src/components/checkout-shipping/Checkout.tsx index 3e91681..32002ef 100644 --- a/webapp/src/components/checkout-shipping/Checkout.tsx +++ b/webapp/src/components/checkout-shipping/Checkout.tsx @@ -59,12 +59,18 @@ function Checkout(props: CheckoutProps): JSX.Element { - - + + {loadItemsCheckout()} - + + + + + + Cart Totals: @@ -72,17 +78,14 @@ function Checkout(props: CheckoutProps): JSX.Element { {total.toFixed(2).toString().concat(" €")} - - - - {props.items.length > 0 ? : <>} - ); From 3901c7a7bd921af14108d9eca8122406be95e1ff Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 04:05:37 +0200 Subject: [PATCH 05/34] Moving img to left in cartitem --- webapp/src/components/cart/CartItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index f0eb128..9a49217 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -50,7 +50,7 @@ function CartItem(props: CartItemProps) { image={imgPath} //image={require("path/to/image.jpg")} FOR TESTING //set max height to 100px - sx={{ height: 200, width: 100, margin: 3 }} + style={{ flex: 2 }} /> From 89c13f550ffa22b777600c1644a70a8afd8bd9e8 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 04:06:31 +0200 Subject: [PATCH 06/34] Now items in cart are scrollable --- webapp/src/components/cart/ShoppingCart.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index 650b66b..86c8861 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -108,10 +108,12 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { - + + + {loadItems()} - + From 07209d734dc53b3d461f79dd7889da3d81b91b89 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 13:03:59 +0200 Subject: [PATCH 07/34] Changing review layout to adapt to multiple devices --- webapp/src/components/products/ReviewsView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/products/ReviewsView.css b/webapp/src/components/products/ReviewsView.css index caef4e9..f4842e9 100644 --- a/webapp/src/components/products/ReviewsView.css +++ b/webapp/src/components/products/ReviewsView.css @@ -5,7 +5,7 @@ } .review-top{ margin-top: 10px; - display: flex; + display: grid; justify-content: space-between; align-items: center; margin-bottom: 10px; From bf3bd995de7108c8804bb7cf2b6340503ebbc484 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 13:32:12 +0200 Subject: [PATCH 08/34] Ratings adaptable --- webapp/src/components/products/ReviewView.tsx | 2 +- webapp/src/components/products/ReviewsView.css | 13 +++++++++++-- webapp/src/css/MainProducts.scss | 1 - 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/products/ReviewView.tsx b/webapp/src/components/products/ReviewView.tsx index d72c3b1..369ecbc 100644 --- a/webapp/src/components/products/ReviewView.tsx +++ b/webapp/src/components/products/ReviewView.tsx @@ -14,7 +14,7 @@ function ReviewView(props: ReviewViewProps): JSX.Element {
{props.review.userId}
-
+
diff --git a/webapp/src/components/products/ReviewsView.css b/webapp/src/components/products/ReviewsView.css index f4842e9..3177042 100644 --- a/webapp/src/components/products/ReviewsView.css +++ b/webapp/src/components/products/ReviewsView.css @@ -1,15 +1,24 @@ .review-box{ border-top: 3px dashed #bbb; font-family: inherit; - overflow: auto; + } + .review-top{ margin-top: 10px; - display: grid; + display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } +@media (max-width: 380px) { + .review-top{ + margin-top: 10px; + display: grid; + align-items: center; + margin-bottom: 10px; + } +} .author{ font-size: 1.2rem; display:flex; diff --git a/webapp/src/css/MainProducts.scss b/webapp/src/css/MainProducts.scss index 6a14c2e..4ab4000 100644 --- a/webapp/src/css/MainProducts.scss +++ b/webapp/src/css/MainProducts.scss @@ -31,7 +31,6 @@ &:hover{ background: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.12)) } - border-bottom: 5px solid #9B59B6; } .product-media{ grid-column: 1; From 99cbd137bec46fda74cba6e3f677889d127ee436 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 14:22:52 +0200 Subject: [PATCH 09/34] Fix main products layout with filtering --- .../src/components/products/MainProducts.tsx | 21 ++++++++++--------- .../components/products/image-gallery.scss | 2 +- webapp/src/css/MainProducts.scss | 13 ++++++++++++ 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/products/MainProducts.tsx b/webapp/src/components/products/MainProducts.tsx index 7b8b844..c215adf 100644 --- a/webapp/src/components/products/MainProducts.tsx +++ b/webapp/src/components/products/MainProducts.tsx @@ -156,29 +156,30 @@ function MainProducts(props: MainProductsProps): JSX.Element { return ( <> +
+
FILTER +
+ +
- - + {products.map((p, i) => ( - + - + ))} - - +
+
Date: Fri, 29 Apr 2022 14:36:18 +0200 Subject: [PATCH 10/34] Fix width in filter by brand combobox --- webapp/src/components/products/MainProducts.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/products/MainProducts.tsx b/webapp/src/components/products/MainProducts.tsx index c215adf..df5641c 100644 --- a/webapp/src/components/products/MainProducts.tsx +++ b/webapp/src/components/products/MainProducts.tsx @@ -304,7 +304,7 @@ function MainProducts(props: MainProductsProps): JSX.Element { >
{['All','Toyota', 'Volvo', 'Renault', 'Nissan', 'Plymouth', 'BMW', 'Subaru', 'Honda', 'Lamborghini', 'Volkswagen', 'Chevy', 'Polestar', 'Porsche'].map((text, index) => ( - +
{ filterBrand(text) }} id={"li" + index}> @@ -313,6 +313,9 @@ function MainProducts(props: MainProductsProps): JSX.Element { +

+
+ ))}
From 6668834395b64f7a0ef68ea478beb6280a57d3a0 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 14:40:02 +0200 Subject: [PATCH 11/34] Changing width size to adapt reviews --- webapp/src/components/products/ReviewsView.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/products/ReviewsView.css b/webapp/src/components/products/ReviewsView.css index 3177042..f1245bc 100644 --- a/webapp/src/components/products/ReviewsView.css +++ b/webapp/src/components/products/ReviewsView.css @@ -11,7 +11,7 @@ align-items: center; margin-bottom: 10px; } -@media (max-width: 380px) { +@media (max-width: 450px) { .review-top{ margin-top: 10px; display: grid; From 3f3c6e7d78279ba20de446ac51ee55cbb689ab19 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:05:33 +0200 Subject: [PATCH 12/34] Changing icon in reviews to emoji --- webapp/src/components/products/ProductPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/products/ProductPage.tsx b/webapp/src/components/products/ProductPage.tsx index 7152d1d..19be835 100644 --- a/webapp/src/components/products/ProductPage.tsx +++ b/webapp/src/components/products/ProductPage.tsx @@ -6,7 +6,7 @@ import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; import { useParams } from "react-router-dom"; import './ProductPage.css'; -import ReviewsIcon from '@mui/icons-material/Reviews'; + import { Button, CardActions, List, Rating } from '@mui/material'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; @@ -131,7 +131,7 @@ function ProductPage(prop: ProductPageProps): JSX.Element { - Reviews of the product + Reviews of the product ✨✨ {product.reviews.map((review) => ( From 0e2ef45664b09b072935cd6829631e985f8a0413 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:41:00 +0200 Subject: [PATCH 13/34] Adding scroll to orders in adminView --- webapp/src/components/administrator/AdminView.tsx | 3 +++ webapp/src/components/administrator/OrderAdminCard.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/administrator/AdminView.tsx b/webapp/src/components/administrator/AdminView.tsx index ffe2448..d0bd6ae 100644 --- a/webapp/src/components/administrator/AdminView.tsx +++ b/webapp/src/components/administrator/AdminView.tsx @@ -154,11 +154,14 @@ function AdminView(): JSX.Element { +
{orders.sort((a, b) => { return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); }).map(order => ( ))} +
+ diff --git a/webapp/src/components/administrator/OrderAdminCard.tsx b/webapp/src/components/administrator/OrderAdminCard.tsx index c9cdfa1..6209b29 100644 --- a/webapp/src/components/administrator/OrderAdminCard.tsx +++ b/webapp/src/components/administrator/OrderAdminCard.tsx @@ -37,7 +37,7 @@ export default function OrderAdminCard(props: OrderAdminCardProps) { }; return ( - + Order {props.order.createdAt.toString().substring(0, 10)} From 0ad4ec68f0d1e0574549fcdd8f9a5d0fafd4e59b Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 18:14:19 +0200 Subject: [PATCH 14/34] Adapting Checkout to mobilephones --- .../checkout-shipping/CheckoutItem.css | 67 +++++++++++++++++++ .../checkout-shipping/CheckoutItem.tsx | 38 +++++------ 2 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 webapp/src/components/checkout-shipping/CheckoutItem.css diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.css b/webapp/src/components/checkout-shipping/CheckoutItem.css new file mode 100644 index 0000000..86f31da --- /dev/null +++ b/webapp/src/components/checkout-shipping/CheckoutItem.css @@ -0,0 +1,67 @@ +@media(min-width: 451px){ + .card-item{ + display: grid; + grid-template-columns: 1.5fr 2fr; + align-items: left; + margin-bottom: 5px; + background-color:white; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); + border-radius: 5px; + + flex-wrap: wrap; + + } + .item-img{ + border-top-left-radius:5px; + border-bottom-left-radius:5px; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); + grid-column: 1; + width: 80%; + + } + .item-info{ + margin-left:"10px" ; + grid-column: 2; + display: 'grid'; + justify-content:'left'; + overflow-wrap: break-word; + + + } + .item-name{ + font-size:2.5em; + font-weight: bold; + + } + .item-price-quantity{ + font-size:1.5em; + font-weight:bold; + } +} +@media(max-width: 450px) { + .card-item{ + grid-template-areas: "img" + "info" ; + margin-bottom: 5px; + background-color:white; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); + border-radius: 5px; + + } + .item-img{ + grid-area: "img"; + border-bottom: 5px solid #9B59B6; + width: 100%; + } + .item-info{ + grid-area: "info"; + display: grid; + justify-content: center; + } + .item-name{ + font-size: 1.4rem; + } + .item-price-quantity{ + font-size: 1rem; + } +} \ No newline at end of file diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.tsx b/webapp/src/components/checkout-shipping/CheckoutItem.tsx index bede651..4c5e4e3 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.tsx +++ b/webapp/src/components/checkout-shipping/CheckoutItem.tsx @@ -1,9 +1,9 @@ import { ItemCart } from "../../shared/shareddtypes"; import Typography from "@mui/material/Typography"; -import { Card, CardContent, Box, CardMedia } from "@mui/material"; +import { Card, CardContent, Box, CardMedia, useMediaQuery } from "@mui/material"; import { baseApiEndPoint, getProductImages } from '../../api/api'; import { useState,useEffect } from 'react'; - +import './CheckoutItem.css' type CheckoutItemProps = { item: ItemCart; updateTotal: () => void; @@ -19,32 +19,32 @@ function CheckoutItem(props: CheckoutItemProps) { useEffect(() => { getImage(); }, []); - - + return ( - - - - - +
+ {props.item.product.name} + +
+ +
{props.item.product.name} - - +
+ +

x{props.item.quantity}

Price: {props.item.product.price.toString().concat(" €")}

- - +
+ - +
- +
); + } export default CheckoutItem; From b13b61b0a5e059a66321c77afa5bc99d8a620e38 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 21:45:58 +0200 Subject: [PATCH 15/34] Styling navbar to be properly adaptable for mobilephones --- webapp/src/components/fragments/NavBar.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/fragments/NavBar.tsx b/webapp/src/components/fragments/NavBar.tsx index e0a4c59..097a190 100644 --- a/webapp/src/components/fragments/NavBar.tsx +++ b/webapp/src/components/fragments/NavBar.tsx @@ -32,7 +32,7 @@ export default function PrimarySearchAppBar(props: NavBarProps) { } const SearchBar = () => ( - +
( @@ -79,7 +78,7 @@ const SearchBar = () => ( ( aria-haspopup="true" color="inherit" href="/login" - style={{ marginRight: "5%" }} + style={{ marginRight: "4%", marginLeft:"1%" }} > From 10a638e3763d3c16de24a922cb95fd07f92647af Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 22:32:42 +0200 Subject: [PATCH 16/34] Checkout adaptable to small screens --- .../components/checkout-shipping/Checkout.tsx | 14 ++-- .../checkout-shipping/CheckoutItem.css | 84 ++++++++++++------- 2 files changed, 59 insertions(+), 39 deletions(-) diff --git a/webapp/src/components/checkout-shipping/Checkout.tsx b/webapp/src/components/checkout-shipping/Checkout.tsx index 32002ef..b1ba385 100644 --- a/webapp/src/components/checkout-shipping/Checkout.tsx +++ b/webapp/src/components/checkout-shipping/Checkout.tsx @@ -54,14 +54,14 @@ function Checkout(props: CheckoutProps): JSX.Element { return ( - +
Checkout - +
- + + gridColumnStart:1, gridColumnEnd:4}}> {loadItemsCheckout()} @@ -70,7 +70,7 @@ function Checkout(props: CheckoutProps): JSX.Element { - + Cart Totals: @@ -78,10 +78,10 @@ function Checkout(props: CheckoutProps): JSX.Element { {total.toFixed(2).toString().concat(" €")} - - {props.items.length > 0 ? : diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.css b/webapp/src/components/checkout-shipping/CheckoutItem.css index 86f31da..8575076 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.css +++ b/webapp/src/components/checkout-shipping/CheckoutItem.css @@ -1,67 +1,87 @@ -@media(min-width: 451px){ - .card-item{ +@media(min-width: 451px) { + .card-item { display: grid; grid-template-columns: 1.5fr 2fr; align-items: left; + margin-top:5px; margin-bottom: 5px; - background-color:white; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); + background-color: white; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 5px; - + height: 200px; flex-wrap: wrap; } - .item-img{ - border-top-left-radius:5px; - border-bottom-left-radius:5px; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); + + .item-img { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); grid-column: 1; - width: 80%; + width: 70%; + max-height:100%; } - .item-info{ - margin-left:"10px" ; + + .item-info { + margin-left: "10px"; grid-column: 2; display: 'grid'; - justify-content:'left'; + justify-content: 'left'; overflow-wrap: break-word; - + } - .item-name{ - font-size:2.5em; + + .item-name { + font-size: 2.2em; font-weight: bold; - + } - .item-price-quantity{ - font-size:1.5em; - font-weight:bold; + + .item-price-quantity { + font-size: 1.5em; + font-weight: bold; } } + @media(max-width: 450px) { - .card-item{ + .card-item { grid-template-areas: "img" - "info" ; - margin-bottom: 5px; - background-color:white; - box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.12); - border-radius: 5px; - + "info"; + margin-top:4px; + margin-bottom: 6px; + background-color: white; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + border-radius: 5px; + box-shadow: 0 2px 5px 0 #7c4dff, 0 2px 10px rgba(0, 0, 0, 0.12); + } - .item-img{ + + .item-img { grid-area: "img"; - border-bottom: 5px solid #9B59B6; + border-bottom: 5px solid #7c4dff; width: 100%; + height: 150px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } - .item-info{ + + .item-info { grid-area: "info"; display: grid; justify-content: center; } - .item-name{ + + .item-name { font-size: 1.4rem; + font-weight: bold; } - .item-price-quantity{ + + .item-price-quantity { font-size: 1rem; + font-weight: bold; + } } \ No newline at end of file From 1e633a2f6dad26757f614e1d7f58dddf70e43202 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 22:41:34 +0200 Subject: [PATCH 17/34] Adapting Shipping view to mobile devices --- webapp/src/components/checkout-shipping/Shipping.tsx | 2 +- webapp/src/components/user/address.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/checkout-shipping/Shipping.tsx b/webapp/src/components/checkout-shipping/Shipping.tsx index adf3a97..7a6ad54 100644 --- a/webapp/src/components/checkout-shipping/Shipping.tsx +++ b/webapp/src/components/checkout-shipping/Shipping.tsx @@ -65,7 +65,7 @@ export default function Shipping(props: ShippingProps) { return ( - + Shipping Information diff --git a/webapp/src/components/user/address.tsx b/webapp/src/components/user/address.tsx index ed34faf..7ac7add 100644 --- a/webapp/src/components/user/address.tsx +++ b/webapp/src/components/user/address.tsx @@ -49,7 +49,7 @@ export default function AddressComponent() { disablePortal id="combo-box-address" options={addressesString} - sx={{ width: 600 }} + sx={{ width: '80%', marginTop:'1%' }} renderInput={(params) => } onChange={(_e, value) => { if (value != null) { From 0d766c8da200f81515030ee0b9ad68bd9851f027 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 22:55:56 +0200 Subject: [PATCH 18/34] Adapting some things in UserProfile to mobile devices --- webapp/src/components/user/AddressForm.tsx | 10 +++++----- webapp/src/components/user/UserProfile.tsx | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/webapp/src/components/user/AddressForm.tsx b/webapp/src/components/user/AddressForm.tsx index ae74c6c..1ed8e6c 100644 --- a/webapp/src/components/user/AddressForm.tsx +++ b/webapp/src/components/user/AddressForm.tsx @@ -107,19 +107,19 @@ export default function AddressForm() { Create / Update DedEx Address

- + Example: Valdés Salas.

- + Example: Oviedo.

- + Example: Asturias.

- + Example: 33007.

- + Example: Spain. diff --git a/webapp/src/components/user/UserProfile.tsx b/webapp/src/components/user/UserProfile.tsx index 732eac9..fd80236 100644 --- a/webapp/src/components/user/UserProfile.tsx +++ b/webapp/src/components/user/UserProfile.tsx @@ -120,7 +120,7 @@ export default function UserProfile() { datasetUrl={webId} thingUrl={webId} > - + Welcome, } spacing={2} + style={{overflow:'auto'}} > {orders.map(order => ( From 821a5a865a723473a8d33e0923aaba172dbb0bb4 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Fri, 29 Apr 2022 22:58:25 +0200 Subject: [PATCH 19/34] Getting rid of bug 'unexpected 'box-shadow' It was duplicated and sonarcloud complained! --- webapp/src/components/checkout-shipping/CheckoutItem.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.css b/webapp/src/components/checkout-shipping/CheckoutItem.css index 8575076..5ad4199 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.css +++ b/webapp/src/components/checkout-shipping/CheckoutItem.css @@ -50,11 +50,11 @@ grid-template-areas: "img" "info"; margin-top:4px; - margin-bottom: 6px; + margin-bottom: 8px; background-color: white; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 5px; - box-shadow: 0 2px 5px 0 #7c4dff, 0 2px 10px rgba(0, 0, 0, 0.12); + } From 27956602d3fa70f80f7c8eece2fccfa15bf475be Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 00:35:46 +0200 Subject: [PATCH 20/34] Refactoring directory of css file --- .../CheckoutItem.css | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) rename webapp/src/{components/checkout-shipping => css}/CheckoutItem.css (72%) diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.css b/webapp/src/css/CheckoutItem.css similarity index 72% rename from webapp/src/components/checkout-shipping/CheckoutItem.css rename to webapp/src/css/CheckoutItem.css index 5ad4199..84dcd3b 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.css +++ b/webapp/src/css/CheckoutItem.css @@ -3,12 +3,11 @@ display: grid; grid-template-columns: 1.5fr 2fr; align-items: left; - margin-top:5px; margin-bottom: 5px; background-color: white; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 5px; - height: 200px; + flex-wrap: wrap; } @@ -18,8 +17,7 @@ border-bottom-left-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); grid-column: 1; - width: 70%; - max-height:100%; + width: 80%; } @@ -34,14 +32,14 @@ } .item-name { - font-size: 2.2em; + font-size: 1.9em; font-weight: bold; } .item-price-quantity { font-size: 1.5em; - font-weight: bold; + } } @@ -49,23 +47,17 @@ .card-item { grid-template-areas: "img" "info"; - margin-top:4px; - margin-bottom: 8px; + margin-bottom: 5px; background-color: white; - box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 5px; - } .item-img { grid-area: "img"; - border-bottom: 5px solid #7c4dff; + border-bottom: 5px solid #9B59B6; width: 100%; - height: 150px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } .item-info { @@ -76,12 +68,9 @@ .item-name { font-size: 1.4rem; - font-weight: bold; } .item-price-quantity { font-size: 1rem; - font-weight: bold; - } } \ No newline at end of file From 17ba0883b1a42af4dc9342ae186870967e8b63c0 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 00:36:09 +0200 Subject: [PATCH 21/34] CheckOut view is ready for merge --- webapp/src/components/checkout-shipping/Checkout.tsx | 7 ++++--- webapp/src/components/checkout-shipping/CheckoutItem.tsx | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/checkout-shipping/Checkout.tsx b/webapp/src/components/checkout-shipping/Checkout.tsx index b1ba385..c98190c 100644 --- a/webapp/src/components/checkout-shipping/Checkout.tsx +++ b/webapp/src/components/checkout-shipping/Checkout.tsx @@ -54,14 +54,15 @@ function Checkout(props: CheckoutProps): JSX.Element { return ( -
+
Checkout
- + {loadItemsCheckout()} diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.tsx b/webapp/src/components/checkout-shipping/CheckoutItem.tsx index 4c5e4e3..8e5989c 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.tsx +++ b/webapp/src/components/checkout-shipping/CheckoutItem.tsx @@ -3,7 +3,7 @@ import Typography from "@mui/material/Typography"; import { Card, CardContent, Box, CardMedia, useMediaQuery } from "@mui/material"; import { baseApiEndPoint, getProductImages } from '../../api/api'; import { useState,useEffect } from 'react'; -import './CheckoutItem.css' +import './../../css/CheckoutItem.css' type CheckoutItemProps = { item: ItemCart; updateTotal: () => void; From 5c77808d6be6eeeb828618fb017148d4bbca3c52 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 00:36:44 +0200 Subject: [PATCH 22/34] Shopping cart adaptable to mobile devices --- webapp/src/components/cart/CartItem.tsx | 113 +++++++++----------- webapp/src/components/cart/ShoppingCart.tsx | 39 ++++--- webapp/src/css/CartItem.css | 94 ++++++++++++++++ 3 files changed, 170 insertions(+), 76 deletions(-) create mode 100644 webapp/src/css/CartItem.css diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index 9a49217..4d54cdb 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -1,13 +1,13 @@ -import { useState,useEffect } from 'react'; +import { useState, useEffect } from 'react'; import { ItemCart, Product } from "../../shared/shareddtypes"; -import { addToCart,apiEndPoint,baseApiEndPoint, getProductImages } from '../../api/api'; +import { addToCart, apiEndPoint, baseApiEndPoint, getProductImages } from '../../api/api'; import Typography from "@mui/material/Typography"; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; import { Card, CardContent, Box, Divider, CardMedia } from "@mui/material"; import DeleteIcon from '@mui/icons-material/Delete'; - +import './../../css/CartItem.css' type CartItemProps = { item: ItemCart; updateTotal: () => void; @@ -17,20 +17,20 @@ type CartItemProps = { function CartItem(props: CartItemProps) { const [quantity, setQuantity] = useState(props.item.quantity); - const[imgPath,setImgPath] = useState(""); + const [imgPath, setImgPath] = useState(""); async function changeQuantityBy(item: ItemCart, factor: number): Promise { item.quantity += factor; setQuantity(item.quantity); - addToCart(item,factor); + addToCart(item, factor); props.updateTotal(); props.refreshCartList(); }; const getImage = async () => { - setImgPath(baseApiEndPoint+(await getProductImages(props.item.product.id)as string[])[0]); - }; + setImgPath(baseApiEndPoint + (await getProductImages(props.item.product.id) as string[])[0]); + }; useEffect(() => { setQuantity(props.item.quantity); @@ -40,61 +40,54 @@ function CartItem(props: CartItemProps) { return ( - - - - - - - {props.item.product.name} - - - {props.item.product.description} - - -
- - - - - {quantity} - - - - - + +
+ {props.item.product.name} +
+ +
+ {props.item.product.name} +
+
+ {props.item.product.description}
- - - +
{props.item.product.price.toString().concat(" €")} - - - +
+
+ + + + + {quantity} + + + + + +
+
+ + + + + +
+ ); } diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index 86c8861..52aacad 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -88,7 +88,7 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { //console.log("Length: " + props.items.length) let res = props.items.map((item: ItemCart) => { if (item !== null && item.quantity > 0) { - return + return } } ) @@ -102,18 +102,23 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { return ( - +
Shopping cart - +
+
+ +
+ - - - - + + {loadItems()} - + @@ -123,20 +128,22 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element { {total.toFixed(2).toString().concat(" €")} - {props.items.length > 0 ? : <>} +
- - + + {props.items.length > 0 ? : <>} + -
); diff --git a/webapp/src/css/CartItem.css b/webapp/src/css/CartItem.css new file mode 100644 index 0000000..f09796c --- /dev/null +++ b/webapp/src/css/CartItem.css @@ -0,0 +1,94 @@ +@media(min-width: 601px) { + .card-item { + display: grid; + grid-template-columns: 1.5fr 2fr; + align-items: left; + margin-top:5px; + margin-bottom: 9px; + background-color: white; + box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + border-radius: 5px; + height: 200px; + flex-wrap: wrap; + + } + + .item-img { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + grid-column: 1; + width: 80%; + height: 200px; + + + } + + .item-info { + margin-left: "5px"; + grid-column: 2; + display: 'grid'; + justify-content: 'left'; + overflow-wrap: break-word; + + + } + + .item-name { + font-size: 1.5rem; + font-weight: bold; + } + .item-description{ + font-size: 1rem; + + } + .item-price { + font-size: 1.8rem; + font-weight: bold; + + } + +} + +@media(max-width: 600px) { + .card-item { + grid-template-areas: "img" + "info"; + margin-top:4px; + margin-bottom: 10px; + background-color: white; + box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + border-radius: 5px; + + + } + + .item-img { + grid-area: "img"; + width: 100%; + height: 150px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + + } + + .item-info { + grid-area: "info"; + display: grid; + justify-content: center; + } + + .item-name { + font-size: 1.4rem; + font-weight: bold; + } + .item-description{ + font-size: 1rem; + font-style: italic; + } + .item-price { + font-size: 1.4rem; + font-weight: bold; + + } +} \ No newline at end of file From 1989adfe7215b20f1bb80dcbd576b4a380736cf6 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 00:39:00 +0200 Subject: [PATCH 23/34] Deleting emojis --- webapp/src/components/cart/ShoppingCart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index 52aacad..ee51afa 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -109,7 +109,7 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {
From 3c0bc52e7714658a97335e66530b04056583d25a Mon Sep 17 00:00:00 2001 From: Luis Miguel Alonso Date: Sat, 30 Apr 2022 02:10:50 +0200 Subject: [PATCH 24/34] Updated Some Graphic Elements --- webapp/src/components/cart/CartItem.tsx | 10 ++- webapp/src/components/cart/ShoppingCart.tsx | 14 +-- .../components/checkout-shipping/Checkout.tsx | 72 ++++++++------- .../checkout-shipping/CheckoutItem.tsx | 38 ++++---- .../src/components/products/MainProducts.tsx | 88 +++++++++---------- webapp/src/css/CartItem.css | 61 ++++++------- webapp/src/css/CheckoutItem.css | 34 +++---- 7 files changed, 166 insertions(+), 151 deletions(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index 4d54cdb..ec315d6 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -41,7 +41,8 @@ function CartItem(props: CartItemProps) { return ( -
+ //
+ {props.item.product.name}
@@ -60,7 +61,8 @@ function CartItem(props: CartItemProps) { @@ -85,8 +87,8 @@ function CartItem(props: CartItemProps) { - -
+ + /*
*/ ); } diff --git a/webapp/src/components/cart/ShoppingCart.tsx b/webapp/src/components/cart/ShoppingCart.tsx index ee51afa..c6c0f50 100644 --- a/webapp/src/components/cart/ShoppingCart.tsx +++ b/webapp/src/components/cart/ShoppingCart.tsx @@ -108,18 +108,21 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {
+

+

+

- + {loadItems()} - - +

+ Total Amount: @@ -145,6 +148,7 @@ function ShoppingCart(props: ShoppingCartProps): JSX.Element {
+

); } diff --git a/webapp/src/components/checkout-shipping/Checkout.tsx b/webapp/src/components/checkout-shipping/Checkout.tsx index c98190c..9330415 100644 --- a/webapp/src/components/checkout-shipping/Checkout.tsx +++ b/webapp/src/components/checkout-shipping/Checkout.tsx @@ -8,7 +8,7 @@ import Button from "@mui/material/Button"; import { styled } from "@mui/material/styles"; -import { Card, Box, Divider} from "@mui/material"; +import { Card, Box, Divider, Grid } from "@mui/material"; import CheckoutItem from "./CheckoutItem"; @@ -20,12 +20,12 @@ type CheckoutProps = { function Checkout(props: CheckoutProps): JSX.Element { const [total, setTotal] = useState(0); - + const updateTotal = async () => { let cart = getCart(); setTotal(cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0)); - }; + }; useEffect(() => { setTotal(props.items.reduce((acc, item) => acc + item.product.price * item.quantity, 0)); @@ -36,7 +36,7 @@ function Checkout(props: CheckoutProps): JSX.Element { function loadItemsCheckout(): JSX.Element { - + let res = props.items.map((item: ItemCart) => { if (item !== null && item.quantity > 0) { return @@ -48,46 +48,56 @@ function Checkout(props: CheckoutProps): JSX.Element { {res}
); - + } return ( -
+
Checkout
- - - + + {loadItemsCheckout()} + +

+ + + Cart Totals: + + + {total.toFixed(2).toString().concat(" €")} + + + +

+ + + + + + {props.items.length > 0 ? + : + <>} + + + - - - - - - - Cart Totals: - - - {total.toFixed(2).toString().concat(" €")} - - - - {props.items.length > 0 ? - : - <>} +

+ ); } diff --git a/webapp/src/components/checkout-shipping/CheckoutItem.tsx b/webapp/src/components/checkout-shipping/CheckoutItem.tsx index 8e5989c..27e9f5d 100644 --- a/webapp/src/components/checkout-shipping/CheckoutItem.tsx +++ b/webapp/src/components/checkout-shipping/CheckoutItem.tsx @@ -2,7 +2,7 @@ import { ItemCart } from "../../shared/shareddtypes"; import Typography from "@mui/material/Typography"; import { Card, CardContent, Box, CardMedia, useMediaQuery } from "@mui/material"; import { baseApiEndPoint, getProductImages } from '../../api/api'; -import { useState,useEffect } from 'react'; +import { useState, useEffect } from 'react'; import './../../css/CheckoutItem.css' type CheckoutItemProps = { item: ItemCart; @@ -13,38 +13,38 @@ function CheckoutItem(props: CheckoutItemProps) { const [imgPath, setImgPath] = useState(""); const getImage = async () => { - setImgPath(baseApiEndPoint+(await getProductImages(props.item.product.id)as string[])[0]); - }; + setImgPath(baseApiEndPoint + (await getProductImages(props.item.product.id) as string[])[0]); + }; useEffect(() => { getImage(); }, []); - + return ( -
- {props.item.product.name} - + {props.item.product.name} +
- -
- {props.item.product.name} -
- -
+
+ {props.item.product.name} + +
+ +
+ +

{props.item.quantity} Unit(s)

+

Price: {props.item.product.price.toString().concat(" €")}

+
-

x{props.item.quantity}

-

Price: {props.item.product.price.toString().concat(" €")}

-
-
); - + } export default CheckoutItem; diff --git a/webapp/src/components/products/MainProducts.tsx b/webapp/src/components/products/MainProducts.tsx index df5641c..67aac4d 100644 --- a/webapp/src/components/products/MainProducts.tsx +++ b/webapp/src/components/products/MainProducts.tsx @@ -103,31 +103,31 @@ function MainProducts(props: MainProductsProps): JSX.Element { function filterColor(color: string) { - if (color =="All") { + if (color == "All") { setColor(""); } else { setColor(color); } (document.getElementById("colorChooser") as HTMLDivElement).textContent = color; } - + function filterBrand(brand: string) { - if (brand =="All") { + if (brand == "All") { setBrand(""); } else { setBrand(brand); } (document.getElementById("brandChooser") as HTMLDivElement).textContent = brand; } - + function filterMinPrice(price: number) { setMinPrice(price); } - + function filterMaxPrice(price: number) { setMaxPrice(price); } - + function filterRating(rating: number) { setMinRating(rating); } @@ -143,43 +143,43 @@ function MainProducts(props: MainProductsProps): JSX.Element { const [searchParams, setSearchParams] = useSearchParams(); const [products, setProducts] = useState([]); - const refreshProductList = async (query:string) => { - if(searchParams.get("q") !== null) + const refreshProductList = async (query: string) => { + if (searchParams.get("q") !== null) query += "&name[eq]=" + searchParams.get("q"); setProducts(await getProducts(query)); } useEffect(() => { - + refreshProductList(computeQueryParams()); }, [color, brand, minPrice, maxPrice, minRating]); return ( <> -
-
- - FILTER - -
- -
+
+
+ + FILTER + +
+ +
+ + + {products.map((p, i) => ( - - {products.map((p, i) => ( - - - ))} -
-
+ + ))} +
+
{ filterColor("All") }}> - + @@ -303,19 +303,19 @@ function MainProducts(props: MainProductsProps): JSX.Element { sx={{ width: 200 }} >
- {['All','Toyota', 'Volvo', 'Renault', 'Nissan', 'Plymouth', 'BMW', 'Subaru', 'Honda', 'Lamborghini', 'Volkswagen', 'Chevy', 'Polestar', 'Porsche'].map((text, index) => ( + {['All', 'Toyota', 'Volvo', 'Renault', 'Nissan', 'Plymouth', 'BMW', 'Subaru', 'Honda', 'Lamborghini', 'Volkswagen', 'Chevy', 'Polestar', 'Porsche'].map((text, index) => (
- - { filterBrand(text) }} id={"li" + index}> - - - - - - -

+ + { filterBrand(text) }} id={"li" + index}> + + + + + + +

- + ))}
@@ -358,7 +358,7 @@ function MainProducts(props: MainProductsProps): JSX.Element { - { + { filterRating(value as number) }} /> diff --git a/webapp/src/css/CartItem.css b/webapp/src/css/CartItem.css index f09796c..8c6bb7a 100644 --- a/webapp/src/css/CartItem.css +++ b/webapp/src/css/CartItem.css @@ -1,75 +1,70 @@ @media(min-width: 601px) { - .card-item { + #card-item { display: grid; - grid-template-columns: 1.5fr 2fr; + grid-template-columns: 1fr 2fr; align-items: left; - margin-top:5px; - margin-bottom: 9px; + /* margin-top:5px; */ + margin-bottom: 2%; background-color: white; - box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); - border-radius: 5px; - height: 200px; + /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); */ + height: auto; flex-wrap: wrap; - + width: 100%; } .item-img { - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + /* border-top-left-radius: 5px; + border-bottom-left-radius: 5px; */ + /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); */ grid-column: 1; - width: 80%; - height: 200px; - - + height: auto; } .item-info { - margin-left: "5px"; grid-column: 2; display: 'grid'; justify-content: 'left'; overflow-wrap: break-word; - - + margin: auto; } .item-name { - font-size: 1.5rem; + font-size: auto; font-weight: bold; } - .item-description{ - font-size: 1rem; - + + .item-description { + font-size: auto; + font-style: italic; } + .item-price { - font-size: 1.8rem; + font-size: auto; font-weight: bold; - + color: #F23005; } - + } @media(max-width: 600px) { .card-item { grid-template-areas: "img" "info"; - margin-top:4px; + margin-top: 4px; margin-bottom: 10px; background-color: white; - box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); + /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); */ border-radius: 5px; - + } .item-img { grid-area: "img"; width: 100%; - height: 150px; + height: auto; border-top-left-radius: 5px; border-top-right-radius: 5px; - } .item-info { @@ -82,13 +77,15 @@ font-size: 1.4rem; font-weight: bold; } - .item-description{ + + .item-description { font-size: 1rem; font-style: italic; } + .item-price { font-size: 1.4rem; font-weight: bold; - + } } \ No newline at end of file diff --git a/webapp/src/css/CheckoutItem.css b/webapp/src/css/CheckoutItem.css index 84dcd3b..ec3dcb7 100644 --- a/webapp/src/css/CheckoutItem.css +++ b/webapp/src/css/CheckoutItem.css @@ -1,45 +1,43 @@ @media(min-width: 451px) { .card-item { display: grid; - grid-template-columns: 1.5fr 2fr; + grid-template-columns: 1fr 2fr; align-items: left; - margin-bottom: 5px; + margin-bottom: 2%; background-color: white; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); border-radius: 5px; - flex-wrap: wrap; - + height: auto; } .item-img { border-top-left-radius: 5px; border-bottom-left-radius: 5px; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12); grid-column: 1; - width: 80%; - + width: 50%; } .item-info { - margin-left: "10px"; + margin-left: "100px"; grid-column: 2; display: 'grid'; justify-content: 'left'; overflow-wrap: break-word; - - + text-align: center; + margin-top: 0; + margin: auto; } .item-name { - font-size: 1.9em; + font-size: auto; font-weight: bold; - } .item-price-quantity { - font-size: 1.5em; - + font-size: auto; + color: #F23005; + margin: 0; } } @@ -58,6 +56,7 @@ grid-area: "img"; border-bottom: 5px solid #9B59B6; width: 100%; + height: auto; } .item-info { @@ -67,10 +66,13 @@ } .item-name { - font-size: 1.4rem; + font-size: auto; + font-weight: bold; } .item-price-quantity { - font-size: 1rem; + font-size: auto; + color: #F23005; + margin: 0; } } \ No newline at end of file From cd25d9ec3951e3fd49b3feb472f9e471772ed7ce Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 09:39:26 +0200 Subject: [PATCH 25/34] Fixing bug detected by sonarCloud repeate 'margin' property It failed the checking and said it was critical to have it duplicated --- webapp/src/css/CheckoutItem.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/webapp/src/css/CheckoutItem.css b/webapp/src/css/CheckoutItem.css index ec3dcb7..f03061b 100644 --- a/webapp/src/css/CheckoutItem.css +++ b/webapp/src/css/CheckoutItem.css @@ -19,13 +19,12 @@ } .item-info { - margin-left: "100px"; grid-column: 2; display: 'grid'; justify-content: 'left'; overflow-wrap: break-word; text-align: center; - margin-top: 0; + margin: auto; } From 083fff48dc37c9438396e2d683ce4eed96927526 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 09:41:37 +0200 Subject: [PATCH 26/34] Buttons in cartItem centered. --- webapp/src/components/cart/CartItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/components/cart/CartItem.tsx b/webapp/src/components/cart/CartItem.tsx index ec315d6..ff4cbdf 100644 --- a/webapp/src/components/cart/CartItem.tsx +++ b/webapp/src/components/cart/CartItem.tsx @@ -55,7 +55,7 @@ function CartItem(props: CartItemProps) {
{props.item.product.price.toString().concat(" €")}
-
+


From 37a37a7792f13ba09ca54802cd9b90de5a250fc4 Mon Sep 17 00:00:00 2001 From: Luis Miguel Alonso Date: Sat, 30 Apr 2022 15:38:36 +0200 Subject: [PATCH 31/34] Fixed OrderCard Width --- webapp/src/css/OrderCard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/css/OrderCard.css b/webapp/src/css/OrderCard.css index a5ec546..786f753 100644 --- a/webapp/src/css/OrderCard.css +++ b/webapp/src/css/OrderCard.css @@ -3,7 +3,7 @@ } #orderCard { - width: 100%; + width: 99%; } #orderCard:hover { From a5b56ef163b9f9f9329074dcd8aac8d2dea8cfc5 Mon Sep 17 00:00:00 2001 From: Luis Miguel Alonso Date: Sat, 30 Apr 2022 15:50:30 +0200 Subject: [PATCH 32/34] Fixed Image Size on Order Details Item --- webapp/src/components/user/OrderCard.tsx | 5 ----- webapp/src/components/user/OrderDetails.tsx | 20 ++++++++++++++------ 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/user/OrderCard.tsx b/webapp/src/components/user/OrderCard.tsx index bbeb5c0..23748ef 100644 --- a/webapp/src/components/user/OrderCard.tsx +++ b/webapp/src/components/user/OrderCard.tsx @@ -56,11 +56,6 @@ export default function OrderCard(props: OrderCardProps) { {props.order.products.map(product => ( - // - - // {"\t"} - // {product.product.name}, - // ))} diff --git a/webapp/src/components/user/OrderDetails.tsx b/webapp/src/components/user/OrderDetails.tsx index a684494..55adcf2 100644 --- a/webapp/src/components/user/OrderDetails.tsx +++ b/webapp/src/components/user/OrderDetails.tsx @@ -14,7 +14,7 @@ import { baseApiEndPoint } from '../../api/api'; import { ProductOrdered } from "../../shared/shareddtypes"; import "../../css/OrderDetails.css"; -import { Grid, Typography } from '@mui/material'; +import { Divider, Grid, Typography } from '@mui/material'; import AddReviewCard from '../products/addReviewCard'; type ProductCardProps = { @@ -50,27 +50,35 @@ export default function OrderDetails(props: ProductCardProps) { const imgPath = baseApiEndPoint + "/cars/" + props.productOrdered.product.image + "/" + props.productOrdered.product.image + " (1).jpg" return ( - + - + - + + Date: Sat, 30 Apr 2022 15:57:50 +0200 Subject: [PATCH 33/34] Added separator to product details view --- webapp/src/components/products/ProductPage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/webapp/src/components/products/ProductPage.tsx b/webapp/src/components/products/ProductPage.tsx index 19be835..d643b0f 100644 --- a/webapp/src/components/products/ProductPage.tsx +++ b/webapp/src/components/products/ProductPage.tsx @@ -129,7 +129,11 @@ function ProductPage(prop: ProductPageProps): JSX.Element {
+

+

+

+ Reviews of the product ✨✨ From b7bf98f038b09c2543d7a426b4a61585a0a37ef8 Mon Sep 17 00:00:00 2001 From: "Sebastian L.H" <66498000+sebaslh01@users.noreply.github.com> Date: Sat, 30 Apr 2022 16:06:49 +0200 Subject: [PATCH 34/34] Updated style of reviews in product --- .../src/components/products/ProductPage.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/webapp/src/components/products/ProductPage.tsx b/webapp/src/components/products/ProductPage.tsx index d643b0f..7c8ef7a 100644 --- a/webapp/src/components/products/ProductPage.tsx +++ b/webapp/src/components/products/ProductPage.tsx @@ -6,7 +6,7 @@ import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; import { useParams } from "react-router-dom"; import './ProductPage.css'; - +import Divider from '@mui/material/Divider'; import { Button, CardActions, List, Rating } from '@mui/material'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; @@ -39,7 +39,7 @@ const BuyBtton = styled(Button)({ }); -async function getImages(product: Product): Promise{ +async function getImages(product: Product): Promise { console.log('getImages', product); let imgs = new Array(); let imagePaths = await getProductImages(product.id); @@ -132,20 +132,25 @@ function ProductPage(prop: ProductPageProps): JSX.Element {





- - - - Reviews of the product ✨✨ + + + Reviews of the product + - {product.reviews.map((review) => ( + {product.reviews.length > 0 ? product.reviews.map((review) => ( - )).reverse()} + )).reverse() : + + This product does not have any review yet. + + } +