From 9c80096412e2b50d306189dd1dcc44fd7c1710e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= Date: Thu, 26 Oct 2023 13:43:24 +0000 Subject: [PATCH] Create chat frame and redirect to page chat. cart --- .../Pages/Chat.cshtml | 227 --------- .../Pages/Chat.cshtml.cs | 21 - .../Pages/Chat.razor | 120 ++--- .../Pages/Chat.razor.css | 430 +++++------------- .../Pages/Index.razor | 26 +- .../Pages/Index.razor.css | 6 +- .../Shared/MainLayout.razor | 2 +- .../Shared/NavMenu.razor | 45 +- .../Shared/NavMenu.razor.css | 23 +- 9 files changed, 213 insertions(+), 687 deletions(-) delete mode 100644 ShoppingAssistantWebClient.Web/Pages/Chat.cshtml delete mode 100644 ShoppingAssistantWebClient.Web/Pages/Chat.cshtml.cs diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml b/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml deleted file mode 100644 index e47aff4..0000000 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml +++ /dev/null @@ -1,227 +0,0 @@ -@page "/chat/1" -@model ShoppingAssistantWebClient.Web.Pages.ChatModel -@{ - ViewData["Title"] = "Gift for Jessica"; -} - - -
- -
- - - - -
- -
- -
- Wishlists - - - - - -
- -
- - Add chat + - -
- -
-
- Gift for Jessica -
- -
- Secret Santa -
- -
- Phone charger -
- -
- Phone -
- -
- Printer -
- - Books -
-
- -
-
-
-
- Avatar user - Username -
- -
- - -
- - -
- -
- -
- - - - - -
- - -
- -
- -
Gift for Jessica
- -
    - -
  • -

    Give me product recommendation. Ask me questions if you need more directions. I am looking for: hub for my macbook to connect external monitors

    -
    • -
  • -

    Sure! I can help you with that. I will ask you some leading questions. This is the first: -
    - How many external monitors do you want to connect to your MacBook?

    -
    • -
  • -

    7

    -
    • -
  • -

    Thank you. Here is the next question: -
    - What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)

    -
    • - -
- - - - -
- - - - - Send message - - - -
- - -
- -
-
- - - diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml.cs deleted file mode 100644 index 1e11cc4..0000000 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.cshtml.cs +++ /dev/null @@ -1,21 +0,0 @@ -using Microsoft.AspNetCore.Mvc; -using Microsoft.AspNetCore.Mvc.RazorPages; -using ShoppingAssistantWebClient.Web.Network; - -namespace ShoppingAssistantWebClient.Web.Pages; -public class ChatModel : PageModel -{ - private readonly ILogger _logger; - - private readonly AuthenticationService _authenticationService; - - public ChatModel(ILogger logger, AuthenticationService authenticationService) - { - _authenticationService = authenticationService; - _logger = logger; - } - - public void OnGet() - { - } -} diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor index b79f8ce..d18129b 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor @@ -1,80 +1,9 @@ -@page "/chat/1" +@page "/chat/{chatId}" +Gift for Jessica -
+
-
- - - - -
- -
- -
- Wishlists - - - - - -
- -
- - Add chat + - -
- -
-
- Gift for Jessica -
- -
- Secret Santa -
- -
- Phone charger -
- -
- Phone -
- -
- Printer -
- -
- - Books -
-
- -
-
-
-
- Avatar user - Username -
- -
- - -
- - -
- -
- -
+ - -
- -
- + +
+
+ +
Gift for Jessica
    @@ -111,23 +40,30 @@
+
- - - - - Send message - - - + + Send message
- - -
+
-
+ + + +@code{ + + [Parameter] public string chatId { get; set; } + +} + + + diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css index 28694d7..f7f24b7 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css @@ -1,330 +1,108 @@ -html { - font-family: 'Nunito'; - padding-top: 20px; - padding-bottom: 20px; - } - .menu { - position: relative; - width: 100%; - height: 100%; - border: 1.5px solid; - border-color: #0052CC; - border-radius: 10px; - padding-top: 16px; - padding-bottom: 16px; - } - - .logo { - display: flex; - align-items: center; - padding-bottom: 15PX; - } - - .logo_name { - padding-top: 10px; - padding-left: 3px; - font-size: 17px; - justify-content: center; - /* Горизонтальное центрирование */ - align-items: center; - letter-spacing: 0.5px; - font-weight: 600; - - } - - .logo img { - float: left; - width: 52px; - height: 52px; - } - - .left_frame { - padding-left: 20px; - position: absolute; - height: calc(100% - 105px); - left: 0; - width: 20%; - transition: 1s; - } - - - .wishlist_name { - font-size: 15px; - margin-top: 7px; - margin-bottom: 7px; - color: black; - cursor: pointer; - } - - .elements { - padding-left: 12px; - padding-right: 12px; - - } - .elements_wishlisht{ - overflow-y: scroll; - padding-left: 12px; - padding-right: 12px; - height: 90%; - - } - .elements_wishlisht::-webkit-scrollbar { - visibility: hidden; - } - - - .close_menu { - position: relative; - background-color: #EAEAEA; - border-radius: 10px; - color: #4E4E4E; - font-size: 16px; - width: 90%; - height: 40px; - padding: 7px 9px; - } - - .add_chat { - display: flex; - align-items: center; - justify-content: center; - margin-top: 15px; - margin-bottom: 5px; - background-color: #EAEAEA; - border-radius: 10px; - font-size: 16px; - width: 100px; - height: 40px; - - cursor: pointer; - } - .add_chat a{ - border-radius: 10px; - padding: 7px 9px; - text-decoration: none; - color: #4E4E4E; - } - - - .info_user { - background-color: white; - position:absolute; - bottom: 0; - padding-bottom: 10px; - padding-top: 10px; - } - - .user_name { - font-size: 16px; - padding-left: 7px; - } - - .info_user img { - height: 40px; - width: 40px; - border-radius: 50%; - } - - .line { - position: absolute; - bottom: 60px; - width: 100%; - border-bottom: 1px solid #4b7bc4; - } - .button_close_menu{ - width: 23px; - height: 23px; - position: absolute; - right: 20px; - cursor: pointer; - - } - - .button_close_menu span { - width: 20px; - height: 1.5px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: #4E4E4E; - } - - .button_close_menu span:nth-of-type(2) { - top: calc(50% - 5px); - } - .button_close_menu span:nth-of-type(3) { - top: calc(50% + 5px); - } - - .right_frame { - position: absolute; - border: 1.5px solid; - border-color: #0052CC; - border-radius: 10px; - left: 20px; - height: calc(100% - 40px); - width: calc(100% - 40px); - transition: 1s; - - } - - .button_open_menu{ - z-index: 2; - width: 23px; - height: 23px; - position: absolute; - top: 25px; - left: 25px; - cursor: pointer; - } - .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); - } - .title_one_frame{ - padding-top: 20px ; - color: #0052CC; - font-size: 17px; - text-align: center; - } - .title_two_frame{ - padding-top: 60px ; - padding-bottom: 40px ; - color: black; - font-size: 40px; - text-align: center; - font-weight: 600; - } - .title_three_frame{ - padding-top: 60px ; - padding-bottom: 40px ; - color: #202124; - font-size: 20px; - text-align: center; - font-weight: 400; - } - .topic { - font-size: 18px; - text-align: center; - line-height: 35px; - color: #009FFF; - width: 250px; - margin: 0 auto; - } - .topic div{ - margin-top: 20px; - border: 1.5px solid; - border-color: #009FFF; - border-radius: 10px; - justify-content: center; - align-items: center; - cursor: pointer; - } - .topic div a{ - color: #009FFF; - text-decoration:none; - } - .switch{ - height: 45px; - width: 350px; - margin: 0 auto; - border: 1.5px solid; - border-color: #EAEAEA; - border-radius: 10px; - text-align: center; - position: relative; - - } - - .switch_product{ - position: absolute; - background-color: #0052CC; - border-radius: 10px; - margin: 5px; - width: calc(50% - 10px); - height: calc(100% - 10px); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: 0.8s; - color: white; - } - - .switch_gift{ - right: 0; - position: absolute; - border-radius: 10px; - margin: 5px; - width: calc(50% - 10px); - height: calc(100% - 10px); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: 0.8s; - color: #202124; - } - - .chat_input{ - position: absolute; - margin-left: 25%; - margin-bottom: 20px; - width: 50%; - border-radius: 10px; - bottom: 0; - - } - .chat_input input{ - font-size: 17px; - width: 100%; - position: relative; - color: #4E4E4E; - background-color: #EAEAEA; - border-radius: 10px; - border: none; - padding: 10px 20px; - outline:none; - } - .button_sende{ - margin-top: 14px; - margin-right: 20px; - cursor: pointer; - height: calc(100% - 28px); - width: 2.8%; - position: absolute; - right: 0; - } - .button_sende img{ - height: 100%; - width: 100%; - position: absolute; - - } - - .new_chat{ - position: absolute; - overflow-y: scroll; - height: 100%; - width: 100%; - } - .new_chat::-webkit-scrollbar { - visibility: hidden; - } +.right_frame { + position: relative; + border: 0.09em solid; + border-color: #0052CC; + border-radius: 0.6em; + height: 100%; + width: 100%; +} + +.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); +} + +.title_one_frame { + padding-top: 1.25em; + color: #0052CC; + font-size: 1.0625em; + text-align: center; +} + +.chat_input { + background-color: #EAEAEA; + position: absolute; + display: flex; + align-items: center; + bottom: 2em; + margin-left: 25%; + width: 50%; + border-radius: 0.6em; +} + +.input_messages { + width: 100%; + height: 2.5em; + font-size: 1.0625em; + background-color: #EAEAEA; + color: #4E4E4E; + border-radius: 0.6em; + border: none; + padding: 0.625em 1.25em; + outline: none; +} + +.button_sende { + float: right; + cursor: pointer; + line-height: 2.5em; + margin-right: 0.8em; + width: 1.8em; + height: 1.7em; +} + +.new_chat { + padding-top: 0.5em; + position: relative; + height: 100%; + width: 100%; +} + +.chat_message { + position: relative; + overflow-y: auto; + height: calc(100% - 5.5em); + width: 100%; +} +.chat_message::-webkit-scrollbar { + border-radius: 20px; + width: 0.2em; +} + +.chat_message::-webkit-scrollbar-thumb { + background-color: #0052CC; + /* Колір позиції покажчика */ + border-radius: 10px; + /* Закруглення країв позиції покажчика */ + width: 0.2em; +} + + .chat_box{ border-radius: 10px; position: absolute; diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor index a669e6d..870175e 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor @@ -60,5 +60,29 @@
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css index 680a755..a706d48 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css @@ -44,8 +44,8 @@ } .title_two_frame { - padding-top: 3.75em; - padding-bottom: 2.5em; + padding-top: 2.25em; + padding-bottom: 1.5em; color: black; font-size: 2.5em; text-align: center; @@ -163,8 +163,6 @@ margin-right: 0.8em; width: 1.8em; height: 1.7em; - - } diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index bba097d..196375a 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -1,6 +1,6 @@ @inherits LayoutComponentBase -ShoppingAssistantWebClient.Web +CARTAID
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index 07a7b32..a88c985 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -1,4 +1,7 @@ -
+@inject NavigationManager Navigation + + +