diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor index 1df9ac7..b79f8ce 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor @@ -131,90 +131,3 @@ - - diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor index b1a9fbd..e95f25b 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor @@ -1,6 +1,6 @@ @page "/" -Index +CartaId

Hello, world!

diff --git a/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml b/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml index a2684b0..5f51717 100644 --- a/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml +++ b/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml @@ -12,7 +12,7 @@ - + diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index 340a2ed..0a22716 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -3,17 +3,13 @@ ShoppingAssistantWebClient.Web
-
+
- +
diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css index 699f17c..950f666 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css @@ -1,15 +1,18 @@ + .page { + width: 100%; + height: 100vh; + border: 1.5% solid; + border-color: #edf106; + padding: 1.25em; +} +.sidebar-menu { position: relative; - display: flex; - flex-direction: column; -} - -main { - flex: 1; -} - -.sidebar { - background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); + width: 20em; + height: 100%; + transition: 1s; + border: 1.5% solid; + border-color: #f10606; } .top-row { diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index ed97728..3b82f08 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -1,54 +1,91 @@ -
-
- ShoppingAssistantWebClient.Web - +
+ + + + +
+ + + + + + + +
+ +
+ + Search + + + +
+ +
+ + @foreach(var item in wishlist){ +
+
@item.Name
+ Delete wishlist + Card open +
+ } +
+ +
+ +
+
+
+ Avatar user + Semen Semenov +
+ +
+ + +
+ +
-
- -
+ + @code { - private bool collapseNavMenu = true; + +private List wishlist; - private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; + 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"} + }; + + } - private void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } } diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs new file mode 100644 index 0000000..b31509d --- /dev/null +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs @@ -0,0 +1,25 @@ + +using Microsoft.AspNetCore.Components; +using ShoppingAssistantWebClient.Web.Models; + +namespace ShoppingAssistantWebClient.Web.Pages; + +public partial class Wishlists : ComponentBase +{ +private List wishlist; + + 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"} + }; + + } +} diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css index 77a8500..7d7ef76 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css @@ -1,68 +1,176 @@ -.navbar-toggler { - background-color: rgba(255, 255, 255, 0.1); + +.left_frame { + position: relative; + height: 100%; + width: 100%; + transition: 1s; + transform: translateX(0%); +} +.logo { + height: 5em; + position: relative; + display: flex; + align-items: center; + padding-bottom: 1.5%; +} +.menu { + position: absolute; + width: 100%; + top: 5em; + bottom: 0; + border: 1.5px solid; + border-color: #0052CC; + border-radius: 0.6em; + padding-top: 1.5%; +} +.elements_wishlisht { + + position: absolute; + overflow-y: auto; + top: 2.43em; + width: 100%; + bottom: 4em; + padding-left: 1.25em; + padding-right: 1.25em; +} +.info_user { + position: absolute; + display: flex; + align-items: center; + border-radius: 0 0 0.6em 0.6em; + background-color: rgb(255, 255, 255); + height: 4em; + left: 0; + bottom: 0; + width: 100%; + padding-left: 1.25em; + padding-right: 1.25em; + border-top: 1px solid #0165FF; +} +.logo_name { + padding-top: 0.5em; + padding-left: 0.3em; + font-size: 1em; + justify-content: center; + align-items: center; + letter-spacing: 0.5px; + font-weight: 600; + overflow: hidden; +} +.logo img { + float: left; + height: 3.25em; + width: 3.25em; +} +.wishlist_name { + padding-left: 0.7em; + width: 10.5em; + white-space: nowrap; + overflow: hidden; + position: absolute; + height: 2.5em; + line-height: 2.5em; +} +.cont_wishlist { + margin-top: 0.4375em; + margin-bottom: 0.4375em; + color: black; + border-radius: 0.6em; + font-size: 1.1em; + width: 100%; + height:2.5em; + cursor: pointer; +} +.cont_wishlist:hover { + background-color: #e6e6e6; + transition: 0.2s; +} +.cont_wishlist:hover .button_delete_chat{ + visibility: visible; +} +.cont_wishlist:hover .button_open_card{ + visibility: visible; +} +.button_delete_chat { + margin-top: 0.65em; + margin-right: 1em; + float: right; + position: relative; + visibility: hidden; + height: 1.2em; + width: 1.2em; +} +.button_open_card { + margin-top: 0.65em; + margin-right: 1em; + float: right; + visibility: hidden; + height: 1.2em; + width: 1.3em; +} +.elements_wishlisht::-webkit-scrollbar { + background-color: #009FFF; + border-radius: 20px; + width: 0.2em; +} +.add_chat { + margin-bottom: 0.3125em; + background-color: #0165FF; + border-radius: 0.6em; + font-size: 1.2em; + width: 100%; + height:2.5em; + cursor: pointer; + line-height: 2.5em; +} +.add_chat a { + justify-content: center; + align-items: center; + border-radius: 0.6em; + padding-left: 0.7em; + text-decoration: none; + color: #FFFFFF; +} +.plus { + position: absolute; + right: 1em; + top: -0.1em; + font-size: 1.9em; } -.top-row { - height: 3.5rem; - background-color: rgba(0,0,0,0.4); +.user_name { + padding-left: 0.4375em; + font-size: 1em; + justify-content: center; + align-items: center; } - -.navbar-brand { - font-size: 1.1rem; +.info_user img { + float: left; + border-radius: 50%; + width: 2.3em; + height: 2.3em; } - -.oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; +.button_close_menu { + position: relative; + width: 1.43em; + height: 1.23em; + float: right; + cursor: pointer; + margin-top: 0.5em; + margin-right: 1.30em; } - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; +.button_close_menu span { + width: 20px; + height: 1.5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #4E4E4E; } - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.25); - color: white; -} - -.nav-item ::deep a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .collapse { - /* Never collapse the sidebar for wide screens */ - display: block; - } - - .nav-scrollable { - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; - } +.button_close_menu span:nth-of-type(2) { + top: calc(50% - 5px); } +.button_close_menu span:nth-of-type(3) { + top: calc(50% + 5px); +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/site.css b/ShoppingAssistantWebClient.Web/wwwroot/css/site.css index ed2dca8..a910575 100644 --- a/ShoppingAssistantWebClient.Web/wwwroot/css/site.css +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/site.css @@ -1,7 +1,7 @@ @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); -html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +html { + font-family: 'Roboto'; } h1:focus { @@ -22,10 +22,6 @@ a, .btn-link { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } -.content { - padding-top: 1.1rem; -} - .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } diff --git a/ShoppingAssistantWebClient.Web/wwwroot/favicon.ico b/ShoppingAssistantWebClient.Web/wwwroot/favicon.ico new file mode 100644 index 0000000..cbab12f Binary files /dev/null and b/ShoppingAssistantWebClient.Web/wwwroot/favicon.ico differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/favicon.png b/ShoppingAssistantWebClient.Web/wwwroot/favicon.png deleted file mode 100644 index 8422b59..0000000 Binary files a/ShoppingAssistantWebClient.Web/wwwroot/favicon.png and /dev/null differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/2.png b/ShoppingAssistantWebClient.Web/wwwroot/images/2.png new file mode 100644 index 0000000..efab11c Binary files /dev/null and b/ShoppingAssistantWebClient.Web/wwwroot/images/2.png differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/3.png b/ShoppingAssistantWebClient.Web/wwwroot/images/3.png new file mode 100644 index 0000000..4ce70e2 Binary files /dev/null and b/ShoppingAssistantWebClient.Web/wwwroot/images/3.png differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.svg new file mode 100644 index 0000000..73aac06 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/images/icon_delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.svg new file mode 100644 index 0000000..264a481 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/images/icon_open_card.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/logo.png b/ShoppingAssistantWebClient.Web/wwwroot/images/logo.png deleted file mode 100644 index b984f5b..0000000 Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/logo.png and /dev/null differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/logo.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/logo.svg new file mode 100644 index 0000000..b937639 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/images/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + +