diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor index da2462f..4f07e36 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor @@ -51,7 +51,7 @@ {
  • -

    @item.Text

    + @item.Text
  • } diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css index 20a4466..a7a69bf 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css @@ -7,7 +7,7 @@ width: 100%; } - + .button_open_menu { z-index: 2; width: 1.43em; @@ -17,6 +17,10 @@ left: 1.56em; cursor: pointer; visibility: hidden; + + @media screen and (max-width: 900px) { + visibility: visible; + } } .button_open_menu span { @@ -38,23 +42,42 @@ } .title_one_frame { + white-space: nowrap; /* Запобігає переносу тексту на новий рядок */ + overflow: hidden; /* Сховує текст, який не влазить в блок */ + text-overflow: ellipsis; /* Додає три крапки на кінці обрізаного тексту */ + margin-left: 4em; + margin-right: 4em; padding-top: 1.25em; color: #0052CC; font-size: 1.0625em; text-align: center; } - + .chat_input { background-color: #EAEAEA; position: absolute; - display: flex; + display: inline-flex; + /* Использовать inline-flex-контейнер */ align-items: center; bottom: 2em; margin-left: 25%; width: 50%; border-radius: 0.6em; + + @media screen and (max-width: 750px) { + margin-left: 15%; + width: 70%; + + } + + @media screen and (max-width: 480px) { + margin-left: 2%; + width: 96%; + + } } + .possible_options { position: absolute; bottom: 5.5em; @@ -62,28 +85,30 @@ width: 50%; border-radius: 0.6em; } -.tite_options{ + +.tite_options { font-size: 0.9em; color: #ADADAD; margin-bottom: 0.5em; } -.options{ + +.options { justify-content: space-between; align-items: center; font-size: 1em; } -.topic_options -{ - display: inline-block; - padding: 0.5em; - border: 0.09em solid; - border-color: #009FFF; - border-radius: 0.6em; - margin: 0em 0.6em; - flex: 1; - text-align: center; - cursor: pointer; + +.topic_options { + display: inline-block; + padding: 0.5em; + border: 0.09em solid; + border-color: #009FFF; + border-radius: 0.6em; + margin: 0em 0.6em; + flex: 1; + text-align: center; + cursor: pointer; } .input_messages { @@ -120,6 +145,7 @@ height: calc(100% - 8.5em); width: 100%; } + .chat_message::-webkit-scrollbar { border-radius: 20px; width: 0.2em; @@ -134,71 +160,99 @@ } - .chat_box{ - border-radius: 10px; - position: absolute; - margin-left: 25%; - margin-top: 35px; - width: 50%; - list-style: none; - padding:0; - - } - .chat_outgoing{ - display: flex; - } - .chat_incoming{ - display: flex; - } - .chat_incoming_wait { - display: inline-flex; /* Использовать inline-flex-контейнер */ - align-items: center; /* Выравнивание по центру */ - background-color: #EAEAEA; - border-radius: 10px; - color: black; - padding: 10px; - margin-bottom: 20px; - margin-top: 20px; - max-width: 70%; /* Максимальная ширина по вашему усмотрению */ - } - - .chat_box .chat_outgoing p { - margin-left: auto; - background-color: #009FFF; - border-radius: 10px; - color: white; - padding: 10px; - max-width: 60%; - - } - .chat_box .chat_incoming p { - background-color: #EAEAEA; - border-radius: 10px; - color: black; - padding: 10px; - width: 60%; - margin-bottom: 20px ; - margin-top: 20px ; +.chat_box { + border-radius: 10px; + position: absolute; + margin-left: 25%; + margin-top: 35px; + width: 50%; + list-style: none; + padding: 0; + + @media screen and (max-width: 750px) { + margin-left: 15%; + width: 70%; + } - @keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } + @media screen and (max-width: 480px) { + margin-left: 4%; + width: 92%; + } - - .loading-spinner { - border: 4px solid rgba(0, 82, 204, 0.1); - border-top: 4px solid #0052CC; - border-radius: 50%; - width: 20px; - height: 20px; - animation: spin 1s linear infinite; - margin-left: 10px; /* Добавлен отступ для разделения текста и загрузки */ +} + +.chat_outgoing { + display: flex; +} + +.chat_incoming { + display: inline-flex; + /* Использовать inline-flex-контейнер */ + align-items: center; + /* Выравнивание по центру */ + background-color: #EAEAEA; + border-radius: 10px; + color: black; + padding: 10px; + margin-bottom: 20px; + margin-top: 20px; + max-width: 70%; + /* Максимальная ширина по вашему усмотрению */ + min-width: 155px; + /* Максимальная ширина по вашему усмотрению */ +} + +.chat_incoming_wait { + display: inline-flex; /* Использовать inline-flex-контейнер */ + align-items: center; /* Выравнивание по центру */ + background-color: #EAEAEA; + border-radius: 10px; + color: black; + padding: 10px; + margin-bottom: 20px; + margin-top: 20px; + max-width: 70%; /* Максимальная ширина по вашему усмотрению */ + min-width: 155px; /* Максимальная ширина по вашему усмотрению */ +} + +.chat_box .chat_outgoing p { + margin-left: auto; + background-color: #009FFF; + border-radius: 10px; + color: white; + padding: 10px; + max-width: 60%; + +} + + +@keyframes spin { + 0% { + transform: rotate(0deg); } - .gradient{ + + 100% { + transform: rotate(360deg); + } +} + +.loading-spinner { + border: 4px solid rgba(0, 82, 204, 0.1); + border-top: 4px solid #0052CC; + border-radius: 50%; + width: 20px; + height: 20px; + animation: spin 1s linear infinite; + margin-left: 10px; + /* Добавлен отступ для разделения текста и загрузки */ +} + +.gradient { background: linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0)); position: absolute; height: 50px; width: 100%; z-index: 1; - } \ No newline at end of file + margin-top: -0.2em; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css index 0a7fe71..6459264 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css @@ -16,7 +16,6 @@ left: 1.56em; cursor: pointer; visibility: hidden; - @media screen and (max-width: 900px) { visibility: visible; } @@ -62,6 +61,11 @@ font-size: 2.5em; text-align: center; font-weight: 600; + @media screen and (max-width: 480px) { + + font-size: 1.7125em; + + } } .title_three_frame { @@ -71,6 +75,13 @@ font-size: 1.25em; text-align: center; font-weight: 400; + @media screen and (max-width: 480px) { + + font-size: 1.0125em; + padding-left: 4%; + padding-right: 4%; + + } } .topic { @@ -80,6 +91,12 @@ color: #009FFF; width: 15.625em; margin: 0 auto; + @media screen and (max-width: 480px) { + + width: 11.875em; + font-size: 0.9125em; + + } } .topic div { @@ -106,6 +123,11 @@ border-radius: 0.6em; text-align: center; position: relative; + @media screen and (max-width: 480px) { + height: 2.4125em; + width: 16.875em; + + } } .switch_product { @@ -148,14 +170,25 @@ .chat_input { background-color: #EAEAEA; position: absolute; - display: flex; + display: inline-flex; /* Использовать inline-flex-контейнер */ align-items: center; bottom: 2em; margin-left: 25%; width: 50%; border-radius: 0.6em; + @media screen and (max-width: 750px) { + margin-left: 15%; + width: 70%; + + } + @media screen and (max-width: 480px) { + margin-left: 2%; + width: 96%; + + } } + .input_messages { width: 100%; height: 2.5em; diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index d88d10a..963a337 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -52,9 +52,9 @@
    - Avatar user + Avatar user - @GlobalUser.Id + Unknown user
    @@ -76,42 +76,57 @@ var button_open = document.querySelector('.button_open_menu'); if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') { - left_frame.style.transform = 'translateX(-110%)'; - button_open.style.visibility = 'visible'; - right_frame.style.left = '1.25em'; - amazonAssociate.style.left ='calc(50% - 12.5em)'; + + // меню закрите + if (window.innerWidth < 1100) { + right_frame.style.left = '1.25em'; + amazonAssociate.style.left ='calc(50% - 12.5em)'; + right_frame.style.zIndex = '0'; + left_frame.style.transform = 'translateX(-110%)'; + button_open.style.visibility = 'visible'; + }else{ + amazonAssociate.style.left ='calc(50% - 12.5em)'; + left_frame.style.transform = 'translateX(-110%)'; + button_open.style.visibility = 'visible'; + right_frame.style.left = '1.25em'; + } + } else { - left_frame.style.transform = 'translateX(0)'; - button_open.style.visibility = 'hidden'; - right_frame.style. left = '23.25em'; - amazonAssociate.style.left ='50%'; + + // меню відкрите + if (window.innerWidth < 1100) { + right_frame.style.left = '1.25em'; + amazonAssociate.style.left ='calc(50% - 12.5em)'; + right_frame.style.zIndex = '0'; + left_frame.style.zIndex = '1'; + left_frame.style.transform = 'translateX(0)'; + button_open.style.visibility = 'hidden'; + }else{ + amazonAssociate.style.left ='50%'; + left_frame.style.transform = 'translateX(0)'; + button_open.style.visibility = 'hidden'; + right_frame.style. left = '23.25em'; + } + + } } document.getElementById('button_close').addEventListener('click', changetyle); -/* - window.getScrollTop = function (element) { - return element.scrollTop; - }; - - window.getOffsetHeight = function (element) { - return element.offsetHeight; - }; - - window.getScrollHeight = function (element) { - return element.scrollHeight; - }; - - window.setScrollTop = function (element, scrollTop) { - element.scrollTop = scrollTop; - }; -*/ @code { diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css index bc5c52c..8cee536 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css @@ -11,6 +11,10 @@ display: flex; align-items: center; padding-bottom: 1.5%; + background-color: white; + margin-left: 0.3em; + border-radius: 0.6em 0 0em 0em; + } .menu { @@ -22,6 +26,7 @@ border-color: #0052CC; border-radius: 0.6em; padding-top: 1.5%; + background-color: white; } .elements_wishlisht { @@ -222,6 +227,7 @@ border-radius: 50%; width: 2.3em; height: 2.3em; + } .button_close_menu { diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css index f8a61e4..552d123 100644 --- a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css @@ -9,10 +9,12 @@ .sidebar-menu { position: absolute; width: 20em; - top: 1.25em; + top: 1.33em; bottom: 0em; margin-right: 1.5em; + transition: 1s; + border-radius: 0.7em; @media screen and (max-width: 900px) { transform: translateX(-110%); diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.jpg b/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.jpg deleted file mode 100644 index 63b9f5a..0000000 Binary files a/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.jpg and /dev/null differ diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg b/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg new file mode 100644 index 0000000..dd1e234 --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +