From eea8951c5b876048f3a7fcd6fd739cd4baf6c7ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= Date: Tue, 28 Nov 2023 13:11:25 +0000 Subject: [PATCH] SA-213 Create Top Deals page and fix UI disclaimer --- .../Models/TopDealsProduct.cs | 20 ++ .../Pages/Index.razor.css | 4 + .../Pages/TopDeals.razor | 93 +++++++++ .../Pages/TopDeals.razor.cs | 81 ++++++++ .../Pages/TopDeals.razor.css | 179 ++++++++++++++++++ .../Shared/MainLayout.razor | 4 +- .../Shared/NavMenu.razor | 6 +- .../wwwroot/css/MainLayout.css | 32 +++- 8 files changed, 405 insertions(+), 14 deletions(-) create mode 100644 ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs create mode 100644 ShoppingAssistantWebClient.Web/Pages/TopDeals.razor create mode 100644 ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs create mode 100644 ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css diff --git a/ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs b/ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs new file mode 100644 index 0000000..7c4d0eb --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Models/TopDealsProduct.cs @@ -0,0 +1,20 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; + +namespace ShoppingAssistantWebClient.Web.Models +{ + public class TopDealsProduct + { + public required string Id {get; set;} + + public required string Name {get; set;} + + public required double Price { get; set; } + + public required string ImagesUrls {get; set;} + + public required string Url {get; set;} + } +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css index 531d66c..0a7fe71 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css @@ -16,6 +16,10 @@ left: 1.56em; cursor: pointer; visibility: hidden; + + @media screen and (max-width: 900px) { + visibility: visible; + } } .loading { margin: 0 auto; diff --git a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor new file mode 100644 index 0000000..6198ba4 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor @@ -0,0 +1,93 @@ +@page "/top-deals" + +@inject NavigationManager navigationManager; + + + + +
+
+ +

Top Deals 🔥

+ + +
+
+ +
+

Shop best holiday gifts🎁

+ +
+ @foreach (var product in TopDealsGift) { + + +
+ @if(product.ImagesUrls != null) { + product image + } + else { + product image + } + +
+ +
+ +
+ + } +
+
+ + +
+

Deals in PCs and gaming accessories 🎧

+ +
+ @foreach (var product in TopDealsGaming) { + +
+ @if(product.ImagesUrls != null) { + product image + } + else { + product image + } + +
+ +
+ +
+ + } +
+
+
+
+ + + +@code +{ + [Parameter] public string currentWishlistId {get; set; } + + [Parameter] public string chatId {get; set; } + + private void NavigateToMainPage() + { + navigationManager.NavigateTo($"/chat/{chatId}"); + } +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs new file mode 100644 index 0000000..1ea3efd --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.cs @@ -0,0 +1,81 @@ +using GraphQL; +using Newtonsoft.Json; +using Microsoft.AspNetCore.Components; +using ShoppingAssistantWebClient.Web.Models; +using ShoppingAssistantWebClient.Web.Network; +namespace ShoppingAssistantWebClient.Web.Pages; + + +public partial class TopDeals : ComponentBase +{ + + [Inject] + private ApiClient _apiClient { get; set; } + + public List TopDealsGift { get; set; } = new List(); + + public List TopDealsGaming { get; set; } = new List(); + protected override async Task OnInitializedAsync() + { + + TopDealsGift.Add(new TopDealsProduct + { + Id = "1", + Name = "Belkin USB C to VGA + Charge Adapter...", + Price = 19.91, + ImagesUrls = "https://m.media-amazon.com/images/I/51AhAbvnQ1L._AC_SL1000_.jpg", + Url = "https://www.amazon.com/Belkin-Resolution-Passthrough-Connected-AVC001btBK/dp/B088ZWJHHP?th=1" + }); + + TopDealsGift.Add(new TopDealsProduct + { + Id = "2", + Name = "Playmobil A-Team Van", + Price = 45.99, + ImagesUrls = "https://m.media-amazon.com/images/I/81x-2k0wQPL._AC_SL1500_.jpg", + Url = "https://www.amazon.com/dp/B095KP2T5V/ref=cm_gf_adjq_d_p0_e0_qd0_wDMrpoirWfFUdKIYB3rB" + }); + + + TopDealsGift.Add(new TopDealsProduct + { + Id = "3", + Name = "Amazfit GTS 3 Smart", + Price = 70.21, + ImagesUrls = "https://m.media-amazon.com/images/I/61v3RM+Y9-L._AC_SL1500_.jpg", + Url = "https://www.amazon.com/Amazfit-Android-Fitness-Display-Tracking/dp/B09H5TWZQT?pf_rd_r=F00JZCSF46A9QDAJQ16B&pf_rd_t=Events&pf_rd_i=cybermonday&pf_rd_p=b5d7c894-3da1-49e6-8e23-1993d3fa6730&pf_rd_s=slot-6&ref=dlx_cyber_gd_dcl_img_4_d2b1e900_dt_sl6_30&th=1" + }); + + TopDealsGaming.Add(new TopDealsProduct + { + Id = "4", + Name = "Biolage Color Last Conditioner", + Price = 15.72, + ImagesUrls = "https://m.media-amazon.com/images/I/51DwIN83TqL._SL1500_.jpg", + Url = "https://www.amazon.com/BIOLAGE-Colorlast-Conditioner-Color-Treated-Hair/dp/B00ILBUG40?ref_=Oct_DLandingS_D_f9985aa4_0" + }); + + TopDealsGaming.Add(new TopDealsProduct + { + Id = "5", + Name = "GAP Men's Logo Fleece Hoodie", + Price = 23.29, + ImagesUrls = "https://m.media-amazon.com/images/I/71cWXbl8PoL._AC_SY741_.jpg", + Url = "https://www.amazon.com/dp/B09R2LRRLN/?pf_rd_r=PG3YVRHHJ9KBPM271AHQ&pf_rd_t=Events&pf_rd_i=cybermonday&pf_rd_p=b5d7c894-3da1-49e6-8e23-1993d3fa6730&pf_rd_s=slot-6&ref=dlx_cyber_gd_dcl_img_5_51d0c142_dt_sl6_30&th=1&psc=1" + }); + + TopDealsGaming.Add(new TopDealsProduct + { + Id = "6", + Name = "Baseus Power Bank, 65W 20000mAh", + Price = 45.99, + ImagesUrls = "https://m.media-amazon.com/images/I/71yLzSKcWmL._AC_SL1500_.jpg", + Url = "https://www.amazon.com/Portable-Charger-Baseus-20000mAh-Charging/dp/B08THCNNCS?pd_rd_w=dXZn8&content-id=amzn1.sym.adeb688d-35a7-4952-bbb3-fcbab0fec4f0&pf_rd_p=adeb688d-35a7-4952-bbb3-fcbab0fec4f0&pf_rd_r=EVGJXF4CV6XX9W7N5B0Z&pd_rd_wg=AAlho&pd_rd_r=379bd4e7-b04b-4752-873a-c3badfe748ff&pd_rd_i=B08THCNNCS&ref_=pd_bap_d_grid_rp_0_2_t&th=1" + }); + + } + + + + +} diff --git a/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css new file mode 100644 index 0000000..084e142 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/TopDeals.razor.css @@ -0,0 +1,179 @@ +.cart { + border-radius: 0.6em; + position: relative; + height: 100%; + width: 100%; + padding: 20px; + border: 1px solid #0052CC; + overflow: auto; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.cart::-webkit-scrollbar { + display: none; +} + +.head { + display: flex; + justify-content: center; + align-items: center; + font-size: large; +} + +.header-text { + text-align: center; + font-size: 12; + color: rgba(0, 82, 204, 0.8); +} + +.back-button { + width: 15px; + height: 15px; + background-image: url("/images/back-button.svg"); + background-size: cover; + border: none; + background-color: transparent; + position: absolute; + left: 20px; +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 100%; + overflow: auto; +} + +.product-div { + height: 320px; + width: 240px; + border-radius: 10px; + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); + position: relative; + padding: 0 10px 0 10px; + margin: 15px 15px 15px 15px; +} + +.types-products { + width: 64%; + height: 100%; +} + +.products { + display: flex; + flex-wrap: wrap; + justify-content: center; + +} + +.type-product-text { + margin-left: 20px; + font-size: 15; + color: rgba(0, 82, 204, 0.8); + +} + +.products a { + text-decoration: none; + color: black; +} + +.product-img { + height: 65%; + width: 100%; + align-self: center; + display: block; + padding-top: 10px; + padding-bottom: 10px; +} + +.product-description { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 14px; +} + +.button-amazon { + display: flex; + justify-content: center; + align-items: center; + background-color: #009FFF; + border: none; + border-radius: 10px; + position: absolute; + margin-left: 3.5%; + width: 85%; + height: 35px; + bottom: 10px; +} + +.button-row { + display: flex; +} + +.price-label { + position: absolute; + right: 10px; + font-weight: bold; + font-size: 18px; + height: 16px; + bottom: 60px; + display: flex; + justify-content: center; + align-items: center; +} + +.error { + font-size: x-large; + color: darkgrey; + text-align: center; + line-height: 1.5; +} + +.error br { + display: block; + content: " "; + margin-bottom: 1em; +} + +.right-frame { + position: absolute; + right: 1.25em; + left: 23.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} + +.button_open_menu { + z-index: 2; + width: 1.43em; + height: 1.23em; + position: absolute; + top: 1.56em; + left: 1.56em; + cursor: pointer; + visibility: hidden; +} + +.button_open_menu span { + width: 20px; + height: 1.5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #4E4E4E; +} + +.button_open_menu span:nth-of-type(2) { + top: calc(50% - 5px); +} + +.button_open_menu span:nth-of-type(3) { + top: calc(50% + 5px); +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index be23df5..2b9f5d4 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -12,5 +12,7 @@
@Body
+ + diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index 1cbdd52..d88d10a 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -79,13 +79,13 @@ left_frame.style.transform = 'translateX(-110%)'; button_open.style.visibility = 'visible'; right_frame.style.left = '1.25em'; - amazonAssociate.style.left='50%' + amazonAssociate.style.left ='calc(50% - 12.5em)'; } else { left_frame.style.transform = 'translateX(0)'; button_open.style.visibility = 'hidden'; - right_frame.style.left = '23.25em'; - amazonAssociate.style.left='calc(50% + 20em)' + right_frame.style. left = '23.25em'; + amazonAssociate.style.left ='50%'; } } document.getElementById('button_close').addEventListener('click', changetyle); diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css index 110c8f5..f8a61e4 100644 --- a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css @@ -1,7 +1,7 @@ .page { position: relative; width: 100%; - height: 100vh; + height: calc(100vh - 1.5em); border: 1.5% solid; padding: 1.25em; } @@ -10,30 +10,42 @@ position: absolute; width: 20em; top: 1.25em; - bottom: 1.25em; + bottom: 0em; margin-right: 1.5em; transition: 1s; + + @media screen and (max-width: 900px) { + transform: translateX(-110%); + } } .right-frame { position: absolute; right: 1.25em; - left: 23.25em; + left: 23.25em; top: 1.25em; - bottom: 1.25em; + bottom: 0em; transition: 1s; + + @media screen and (max-width: 900px) { + left: 1.25em; + } } + .amazon-associate { - position: fixed; - bottom: 0; - left: calc(50% + 20em); + position: relative; + left: 50%; transform: translateX(-50%); + bottom: 0; font-size: 0.7em; color: #000; text-decoration: none; - cursor: none; - display: flex; align-items: center; justify-content: center; - transition: 1s; + transition: 0.5s; + + @media screen and (max-width: 900px) { + left: calc(50% - 12.5em); + } + } \ No newline at end of file