From e36cd049e419c94b863284a4579f6a542617f129 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= Date: Wed, 25 Oct 2023 19:52:05 +0000 Subject: [PATCH 1/4] SA-109 Added a new chat frame, added animation to the left and right frames --- .../Pages/Index.razor | 63 +++++- .../Pages/Index.razor.css | 190 ++++++++++++++++++ .../Shared/MainLayout.razor | 11 +- .../Shared/MainLayout.razor.css | 77 ++----- .../Shared/NavMenu.razor | 68 ++++--- .../Shared/NavMenu.razor.css | 11 +- .../Shared/SurveyPrompt.razor | 16 -- .../wwwroot/images/send.png | Bin 413 -> 0 bytes .../wwwroot/images/send.svg | 3 + 9 files changed, 318 insertions(+), 121 deletions(-) create mode 100644 ShoppingAssistantWebClient.Web/Pages/Index.razor.css delete mode 100644 ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor delete mode 100644 ShoppingAssistantWebClient.Web/wwwroot/images/send.png create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/images/send.svg diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor index e95f25b..a669e6d 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor @@ -1,9 +1,64 @@ @page "/" -CartaId +New Chat -

Hello, world!

+
-Welcome to your new app. + - + +
+
+
New chat
+
What you're looking for
+ +
+
+ Product +
+
+ Gift +
+
+ + +
What you're looking for, we will help you solve your problem and find it
+ +
+
+ + Date + +
+ +
+ + 🎃 Halloween gift + +
+
+ + 🎁 Birthday gift + +
+
+ +
+
+ + Send message +
+ +
+ +
+ + diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css new file mode 100644 index 0000000..680a755 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css @@ -0,0 +1,190 @@ +.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; +} + +.title_two_frame { + padding-top: 3.75em; + padding-bottom: 2.5em; + color: black; + font-size: 2.5em; + text-align: center; + font-weight: 600; +} + +.title_three_frame { + padding-top: 3.75em; + padding-bottom: 2.5em; + color: #202124; + font-size: 1.25em; + text-align: center; + font-weight: 400; +} + +.topic { + font-size: 1.125em; + text-align: center; + line-height: 2.1875em; + color: #009FFF; + width: 15.625em; + margin: 0 auto; +} + +.topic div { + margin-top: 1.25em; + border:0.09em solid; + border-color: #009FFF; + border-radius: 0.6em; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.topic div a { + color: #009FFF; + text-decoration: none; +} + +.switch { + height: 2.8125em; + width: 21.875em; + margin: 0 auto; + border: 0.09em solid; + border-color: #EAEAEA; + border-radius: 0.6em; + text-align: center; + position: relative; +} + +.switch_product { + position: absolute; + background-color: #0052CC; + border-radius: 0.6em; + margin: 0.3125em; + width: calc(50% - 0.625em); + height: calc(100% - 0.625em); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.8s; + color: white; +} + +.switch_gift { + right: 0; + position: absolute; + border-radius: 0.6em; + margin: 0.3125em; + width: calc(50% - 0.625em); + height: calc(100% - 0.625em); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: 0.8s; + color: #202124; +} + +.chat_message { + position: relative; + overflow-y: auto; + height: calc(100% - 5.5em); + width: 100%; +} + +.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::-webkit-scrollbar { + border-radius: 20px; + width: 0.2em; +} + +.chat_message::-webkit-scrollbar-thumb { + background-color: #0052CC; + /* Колір позиції покажчика */ + border-radius: 10px; + /* Закруглення країв позиції покажчика */ + width: 0.2em; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index 0a22716..bba097d 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -4,12 +4,9 @@
- + +
+
+ @Body
-
diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css index 950f666..0f1cc15 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css @@ -1,73 +1,24 @@ - .page { + position: relative; width: 100%; height: 100vh; - border: 1.5% solid; - border-color: #edf106; padding: 1.25em; } + .sidebar-menu { - position: relative; + position: absolute; width: 20em; - height: 100%; + top: 1.25em; + bottom: 1.25em; + margin-right: 1.5em; transition: 1s; - border: 1.5% solid; - border-color: #f10606; } -.top-row { - background-color: #f7f7f7; - border-bottom: 1px solid #d6d5d5; - justify-content: flex-end; - height: 3.5rem; - display: flex; - align-items: center; -} - - .top-row ::deep a, .top-row .btn-link { - white-space: nowrap; - margin-left: 1.5rem; - } - - .top-row a:first-child { - overflow: hidden; - text-overflow: ellipsis; - } - -@media (max-width: 640.98px) { - .top-row:not(.auth) { - display: none; - } - - .top-row.auth { - justify-content: space-between; - } - - .top-row a, .top-row .btn-link { - margin-left: 0; - } -} - -@media (min-width: 641px) { - .page { - flex-direction: row; - } - - .sidebar { - width: 250px; - height: 100vh; - position: sticky; - top: 0; - } - - .top-row { - position: sticky; - top: 0; - z-index: 1; - } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } -} +.right-frame { + position: absolute; + right: 1.25em; + left: 23.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index 3b82f08..07a7b32 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -19,18 +19,19 @@
Search - + + +
- @foreach(var item in wishlist){ -
-
@item.Name
- Delete wishlist - Card open -
+ @foreach (var item in wishlist) + { +
+
@item.Name
+ Delete wishlist + Card open +
}
@@ -54,38 +55,49 @@ @code { - -private List wishlist; - protected override async Task OnInitializedAsync() - { + private List wishlist; - wishlist = new List + protected override async Task OnInitializedAsync() + { + + wishlist = new List { - new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"}, - new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"}, - new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"}, - new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"} + new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"}, + new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"}, + new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"}, + new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"} }; - } + } } diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css index 7d7ef76..89c9752 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css @@ -4,7 +4,6 @@ height: 100%; width: 100%; transition: 1s; - transform: translateX(0%); } .logo { height: 5em; @@ -39,7 +38,7 @@ align-items: center; border-radius: 0 0 0.6em 0.6em; background-color: rgb(255, 255, 255); - height: 4em; + height: 3.6em; left: 0; bottom: 0; width: 100%; @@ -109,10 +108,16 @@ width: 1.3em; } .elements_wishlisht::-webkit-scrollbar { - background-color: #009FFF; border-radius: 20px; width: 0.2em; } + +.elements_wishlisht::-webkit-scrollbar-thumb { + background-color: #0052CC; /* Колір позиції покажчика */ + border-radius: 10px; /* Закруглення країв позиції покажчика */ + width: 0.2em; +} + .add_chat { margin-bottom: 0.3125em; background-color: #0165FF; diff --git a/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor b/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor deleted file mode 100644 index b31a4a6..0000000 --- a/ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor +++ /dev/null @@ -1,16 +0,0 @@ -
- - @Title - - - Please take our - brief survey - - and tell us what you think. -
- -@code { - // Demonstrates how a parent component can supply parameters - [Parameter] - public string? Title { get; set; } -} diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/send.png b/ShoppingAssistantWebClient.Web/wwwroot/images/send.png deleted file mode 100644 index 2793f032836587e447929ed3cbd8d975f5ef1cd1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 413 zcmV;O0b>4%P)=iyfE1D3Q6Ok?ha3AjFS=ys;pna-5Nt zf!+Py%o{k{w%;^O8)R8-(=_dve*~xN`s-%1Q6xz^;C%}rCP|Xw9+;=cG)?(9jvo-w zIgUFzj`M=OwClP!48!~;j3|BIkC9`555q9*A+#4oQHQOPgsQ4KM^RL*VHSt)$VK1x zr>1GX*B2nPLq{a^2muLO8HD4yt~0u~z`wCrm^-M z=6OE%Jg;0J(=@k&ASh&kDw8nQC&ZH=2-;;}#ZrkpAXw7~j + + From 01de98d053ef6a0be1e9fc4764adebf9b3e3bf4e 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 2/4] 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 + + +