From 1d186d3d492c7635d3edbe9cf1679afaf47681d1 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] 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 + +