mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-04 16:49:36 +00:00
Merge branch 'develop' into SA-208-settings
This commit is contained in:
AndriiSyrotenko
commit
40e2395a51
@ -101,17 +101,24 @@ public class ApiClient
|
||||
await SetAuthenticationAsync();
|
||||
var count = 0; //
|
||||
var requestUrl = $"{_httpClient.BaseAddress}{url}";
|
||||
var response = await _httpClient.PostAsJsonAsync(requestUrl, obj);
|
||||
using var responseStream = await response.Content.ReadAsStreamAsync();
|
||||
using var reader = new StreamReader(responseStream, Encoding.UTF8);
|
||||
var jsonBody = JsonConvert.SerializeObject(obj);
|
||||
|
||||
SearchEventType eventType = SearchEventType.Message;
|
||||
while (!cancellationToken.IsCancellationRequested)
|
||||
var body = new StringContent(jsonBody, Encoding.UTF8, "application/json");
|
||||
var request = new HttpRequestMessage(HttpMethod.Post, requestUrl)
|
||||
{
|
||||
var jsonChunk = await reader.ReadLineAsync(cancellationToken);
|
||||
Content = body
|
||||
};
|
||||
request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("text/event-stream"));
|
||||
|
||||
using var httpResponse = await _httpClient.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, cancellationToken);
|
||||
using var streamReader = new StreamReader(await httpResponse.Content.ReadAsStreamAsync(cancellationToken));
|
||||
var eventType = SearchEventType.Message;
|
||||
while (!streamReader.EndOfStream)
|
||||
{
|
||||
var jsonChunk = await streamReader.ReadLineAsync(cancellationToken);
|
||||
count += 1; //
|
||||
if (count >=5 ){ //
|
||||
break; //
|
||||
yield break; //
|
||||
}; //
|
||||
if (jsonChunk == null) continue;
|
||||
if (jsonChunk.StartsWith("event: "))
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
<div class="buttons-row">
|
||||
<button class="exit-button button-animation" @onclick="(() => NavigateToMain())"></button>
|
||||
<button class="return-button button-animation" @onclick="(() => { LoadPreviousProduct(); })"></button>
|
||||
<button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
|
||||
<button class="more-button button-animation" @onclick="(() => NavigateToMain())"></button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -20,6 +20,8 @@
|
||||
|
||||
<div class="title_one_frame">@name</div>
|
||||
|
||||
<div class="gradient"></div>
|
||||
|
||||
<div class="chat_message" @ref="chatMessageRef">
|
||||
|
||||
<ul class="chat_box">
|
||||
@ -31,13 +33,31 @@
|
||||
{
|
||||
|
||||
if (item.Role != "User")
|
||||
{
|
||||
|
||||
if (@item.Text == "Waiting for response")
|
||||
{
|
||||
|
||||
<div class=" chat_incoming_wait">Waiting for response
|
||||
|
||||
<div class="loading-spinner"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
<li class=" chat_incoming">
|
||||
<p>@item.Text</p>
|
||||
@item.Text
|
||||
</li>
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@ -52,10 +72,7 @@
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="possible_options">
|
||||
|
||||
@if (Suggestion.Count != 0)
|
||||
@ -82,6 +99,9 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="chat_input">
|
||||
<input @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
|
||||
placeholder="Describe what you are looking for...." autocomplete="off">
|
||||
@ -107,9 +127,24 @@
|
||||
function myJavaScriptFunction(wishlistId) {
|
||||
UpdateMenu(wishlistId);
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.getElementById('button_open').addEventListener('click', changetyle);
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function myJavaScriptHeight() {
|
||||
|
||||
var myDiv = document.querySelector('.possible_options');
|
||||
|
||||
var posth = document.querySelector('.chat_message');
|
||||
var height = myDiv.offsetHeight*0.063
|
||||
posth.style.height = 'calc(100% - ' + (8.5 + height) + 'em)';
|
||||
}
|
||||
document.getElementById('button_open').addEventListener('click', myJavaScriptHeight);
|
||||
</script>
|
||||
@code {
|
||||
|
||||
[Parameter] public string chatId { get; set; }
|
||||
@ -139,7 +174,9 @@
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("myJavaScriptHeight");
|
||||
await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
|
||||
|
||||
}
|
||||
|
||||
private async Task UpdateSideMenu(string wishlistId)
|
||||
@ -151,6 +188,7 @@
|
||||
private void ClickOption(string item)
|
||||
{
|
||||
inputValue = item;
|
||||
AddNewMessage(inputValue);
|
||||
}
|
||||
|
||||
}
|
||||
@ -39,10 +39,12 @@ public partial class Chat : ComponentBase
|
||||
private string name = "";
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
try{
|
||||
try
|
||||
{
|
||||
var input = _searchServise.FirstMessage;
|
||||
|
||||
if (input!=null){
|
||||
if (input != null)
|
||||
{
|
||||
|
||||
await LoadMessages();
|
||||
|
||||
@ -70,10 +72,14 @@ public partial class Chat : ComponentBase
|
||||
await UpdateSideMenu(wishlistId);
|
||||
StateHasChanged();
|
||||
|
||||
}else{
|
||||
}
|
||||
else
|
||||
{
|
||||
await LoadMessages();
|
||||
}
|
||||
}catch(Exception ex){
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"Error OnInitializedAsync: {ex.Message}");
|
||||
}
|
||||
|
||||
@ -82,7 +88,8 @@ public partial class Chat : ComponentBase
|
||||
|
||||
private async Task LoadMessages()
|
||||
{
|
||||
try{
|
||||
try
|
||||
{
|
||||
string wishlistId = chatId;
|
||||
|
||||
var request = new GraphQLRequest
|
||||
@ -137,7 +144,9 @@ public partial class Chat : ComponentBase
|
||||
Messages.Reverse();
|
||||
isLoading = false;
|
||||
|
||||
}catch(Exception ex){
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
}
|
||||
@ -149,8 +158,9 @@ public partial class Chat : ComponentBase
|
||||
JSRuntime.InvokeVoidAsync("clearInput");
|
||||
isWaitingForResponse = true;
|
||||
|
||||
try{
|
||||
messageCreateDto = new MessageCreateDto { Text = inputMessage };;
|
||||
try
|
||||
{
|
||||
messageCreateDto = new MessageCreateDto { Text = inputMessage }; ;
|
||||
Message = new Messages();
|
||||
Message.Text = inputMessage;
|
||||
Message.Role = "User";
|
||||
@ -186,22 +196,23 @@ public partial class Chat : ComponentBase
|
||||
Match match = regex.Match(input);
|
||||
string result = match.Groups[1].Value;
|
||||
|
||||
if(sseEvent.Event == SearchEventType.Message){
|
||||
|
||||
|
||||
if (sseEvent.Event == SearchEventType.Message)
|
||||
{
|
||||
if (first)
|
||||
{
|
||||
Messages[lengt-1].Text = result;
|
||||
Messages[lengt - 1].Text = result;
|
||||
first = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
Messages[lengt-1].Text += result;
|
||||
Messages[lengt - 1].Text += result;
|
||||
}
|
||||
|
||||
StateHasChanged();
|
||||
|
||||
} else if(sseEvent.Event == SearchEventType.Product){
|
||||
}
|
||||
else if (sseEvent.Event == SearchEventType.Product)
|
||||
{
|
||||
|
||||
string pattern = "[\\\\\"]";
|
||||
|
||||
@ -209,13 +220,19 @@ public partial class Chat : ComponentBase
|
||||
|
||||
Products.Add(input);
|
||||
|
||||
} else if(sseEvent.Event == SearchEventType.Suggestion){
|
||||
|
||||
}
|
||||
else if (sseEvent.Event == SearchEventType.Suggestion)
|
||||
{
|
||||
if (Suggestion.Count < 3)
|
||||
{
|
||||
Suggestion.Add(result);
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
if(Products.Count!=0) {
|
||||
if (Products.Count != 0)
|
||||
{
|
||||
string n = name;
|
||||
_searchServise.SetProducts(Products);
|
||||
Products = null;
|
||||
@ -223,7 +240,10 @@ public partial class Chat : ComponentBase
|
||||
Navigation.NavigateTo(url);
|
||||
}
|
||||
isWaitingForResponse = false;
|
||||
} catch(Exception ex){
|
||||
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Console.WriteLine($"Error : {ex.Message}");
|
||||
}
|
||||
}
|
||||
|
||||
@ -17,6 +17,10 @@
|
||||
left: 1.56em;
|
||||
cursor: pointer;
|
||||
visibility: hidden;
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.button_open_menu span {
|
||||
@ -38,6 +42,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -47,40 +56,68 @@
|
||||
.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;
|
||||
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%;
|
||||
|
||||
}
|
||||
}
|
||||
.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
|
||||
{
|
||||
|
||||
.topic_options {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
border: 0.09em solid;
|
||||
border-color: #009FFF;
|
||||
border-radius: 0.6em;
|
||||
margin: 0em 0.6em;
|
||||
margin: 0.2em 0.2em;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@ -117,9 +154,10 @@
|
||||
.chat_message {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 8em);
|
||||
height: calc(100% - 8.5em);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat_message::-webkit-scrollbar {
|
||||
border-radius: 20px;
|
||||
width: 0.2em;
|
||||
@ -134,23 +172,63 @@
|
||||
}
|
||||
|
||||
|
||||
.chat_box{
|
||||
.chat_box {
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
margin-left: 25%;
|
||||
margin-top: 35px;
|
||||
width: 50%;
|
||||
list-style: none;
|
||||
padding:0;
|
||||
padding: 0;
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
margin-left: 15%;
|
||||
width: 70%;
|
||||
|
||||
}
|
||||
.chat_outgoing{
|
||||
display: flex;
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
margin-left: 4%;
|
||||
width: 92%;
|
||||
|
||||
}
|
||||
.chat_incoming{
|
||||
}
|
||||
|
||||
.chat_outgoing {
|
||||
display: flex;
|
||||
}
|
||||
.chat_box .chat_outgoing p {
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -158,13 +236,35 @@
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.chat_box .chat_incoming p {
|
||||
background-color: #EAEAEA;
|
||||
border-radius: 10px;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
width: 60%;
|
||||
margin-bottom: 20px ;
|
||||
margin-top: 20px ;
|
||||
|
||||
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;
|
||||
margin-top: -0.2em;
|
||||
}
|
||||
@ -17,12 +17,12 @@
|
||||
<div class="title_two_frame">What you're looking for</div>
|
||||
|
||||
<div class="switch">
|
||||
<div @onclick="Сhoose_product"class="switch_product" id="choose_product">
|
||||
<button @onclick="Сhoose_product" class="switch_product" id="choose_product">
|
||||
Product
|
||||
</div>
|
||||
<div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
|
||||
Gift
|
||||
</div>
|
||||
</button>
|
||||
<button text="Gift" hover-text="Сoming soon" onmouseover="showMessage()" onmouseout="hideMessage()"
|
||||
class="switch_gift" id="choose_gift">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -30,28 +30,31 @@
|
||||
</div>
|
||||
|
||||
<div class="topic">
|
||||
<div class="topic_one">
|
||||
<div @onclick="() => ClickTopic(1)" class="topic_one">
|
||||
<a class="button_topic_one">
|
||||
Date
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="topic_two">
|
||||
<div @onclick="() => ClickTopic(2)" class="topic_two">
|
||||
<a class="button_topic_two">
|
||||
🎃 Halloween gift
|
||||
</a>
|
||||
</div>
|
||||
<div class="topic_three">
|
||||
|
||||
<div @onclick="() => ClickTopic(3)" class="topic_three">
|
||||
<a class="button_topic_three">
|
||||
🎁 Birthday gift
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chat_input">
|
||||
<input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
|
||||
placeholder="Describe what you are looking for...." autocomplete="off">
|
||||
<input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text"
|
||||
id="chatInput" placeholder="Describe what you are looking for...." autocomplete="off">
|
||||
<img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
|
||||
</div>
|
||||
|
||||
@ -70,11 +73,11 @@
|
||||
var choose = "Product";
|
||||
|
||||
function switchGift() {
|
||||
choose_gift.style.backgroundColor = "#0052CC";
|
||||
choose_product.style.backgroundColor = "transparent";
|
||||
switchGi.style.color = "white";
|
||||
switchProd.style.color = "#202124";
|
||||
choose = "Gift";
|
||||
// choose_gift.style.backgroundColor = "#0052CC";
|
||||
// choose_product.style.backgroundColor = "transparent";
|
||||
// switchGi.style.color = "white";
|
||||
//switchProd.style.color = "#202124";
|
||||
//choose = "Gift";
|
||||
|
||||
}
|
||||
|
||||
@ -92,13 +95,6 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById('choose_gift').addEventListener('click', switchGift);
|
||||
document.getElementById('choose_product').addEventListener('click', switchProduct);
|
||||
|
||||
@ -121,6 +117,20 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
public void ClickTopic(int input)
|
||||
{
|
||||
if (input == 1){
|
||||
inputValue ="I need a present for a date";
|
||||
}
|
||||
if (input == 2){
|
||||
inputValue ="I need a present for halloween";
|
||||
}
|
||||
if (input == 3){
|
||||
inputValue ="I need a present for a birthday";
|
||||
}
|
||||
CreateNewChat();
|
||||
}
|
||||
private void InputChanged(ChangeEventArgs e)
|
||||
{
|
||||
// Оновіть значення поля введення при кожному введенні тексту
|
||||
|
||||
@ -26,7 +26,6 @@ namespace ShoppingAssistantWebClient.Web.Pages
|
||||
private MessageCreateDto messageCreateDto;
|
||||
private string inputValue = "";
|
||||
|
||||
|
||||
private async Task CreateNewChat() {
|
||||
|
||||
try
|
||||
|
||||
@ -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 {
|
||||
@ -137,7 +159,41 @@
|
||||
transition: 0.8s;
|
||||
color: #202124;
|
||||
}
|
||||
button::before {
|
||||
content: attr(text);
|
||||
|
||||
}
|
||||
|
||||
button:hover::before {
|
||||
content: attr(hover-text);
|
||||
}
|
||||
button {
|
||||
outline: none; /* Для синий ободки */
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.message {
|
||||
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;
|
||||
padding: 4px; /* Добавьте подходящий отступ, если необходимо */
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
.chat_message {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
@ -148,14 +204,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;
|
||||
|
||||
@ -54,9 +54,8 @@
|
||||
<div class="line"></div>
|
||||
<div class="elements">
|
||||
<div class="info_user" @onclick="ShowModal" style="cursor: pointer;">
|
||||
<img src="/images/avatar.jpg" alt="Avatar user">
|
||||
<!-- Change to name -->
|
||||
<span class="user_name">@GlobalUser.Id</span>
|
||||
<img src="/images/avatar.svg" alt="Avatar user">
|
||||
<span class="user_name">User Settings</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -78,41 +77,56 @@
|
||||
var button_open = document.querySelector('.button_open_menu');
|
||||
|
||||
if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
|
||||
|
||||
// меню закрите
|
||||
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';
|
||||
amazonAssociate.style.left ='calc(50% - 12.5em)';
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
// меню відкрите
|
||||
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';
|
||||
amazonAssociate.style.left ='50%';
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
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;
|
||||
};
|
||||
*/
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
var left_frame = document.querySelector('.sidebar-menu');
|
||||
var right_frame = document.querySelector('.right-frame');
|
||||
var amazonAssociate = document.querySelector('.amazon-associate');
|
||||
|
||||
var computedStyles = getComputedStyle(left_frame);
|
||||
var transformValue = computedStyles.transform;
|
||||
var button_open = document.querySelector('.button_open_menu');
|
||||
|
||||
|
||||
function UpdateMenu(wishlistId)
|
||||
{
|
||||
@ -121,6 +135,8 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@code {
|
||||
|
||||
@ -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 {
|
||||
@ -46,7 +51,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0 0 0.6em 0.6em;
|
||||
background-color: rgb(255, 255, 255);
|
||||
height: 3.6em;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -55,6 +59,9 @@
|
||||
padding-right: 1.25em;
|
||||
border-top: 1px solid #0165FF;
|
||||
}
|
||||
.info_user:hover{
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.logo_name {
|
||||
padding-top: 0.5em;
|
||||
@ -211,17 +218,18 @@
|
||||
}
|
||||
|
||||
.user_name {
|
||||
padding-left: 0.4375em;
|
||||
font-size: 1em;
|
||||
padding-left: 0.4em;
|
||||
font-size: 1.2em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info_user img {
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
width: 2.3em;
|
||||
height: 2.3em;
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
margin-left: 3.3em;
|
||||
|
||||
}
|
||||
|
||||
.button_close_menu {
|
||||
|
||||
@ -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%);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
7
ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg
Normal file
7
ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g><path style="opacity:0.981" fill="#0051cb" d="M 250.5,45.5 C 303.26,46.953 338.094,72.6197 355,122.5C 364.709,171.065 349.209,209.232 308.5,237C 261.156,261.469 218.322,255.302 180,218.5C 148.541,180.815 144.207,140.149 167,96.5C 186.63,66.0302 214.464,49.0302 250.5,45.5 Z M 244.5,81.5 C 278.623,78.4668 303.123,92.1335 318,122.5C 328.631,152.688 322.464,178.854 299.5,201C 272.183,220.457 244.183,221.457 215.5,204C 189.315,182.099 181.815,154.933 193,122.5C 202.941,99.7223 220.108,86.0557 244.5,81.5 Z"/></g>
|
||||
<g><path style="opacity:0.992" fill="#009eff" d="M 357.5,258.5 C 368.188,257.262 375.688,261.596 380,271.5C 380.499,277.491 380.666,283.491 380.5,289.5C 387.692,291.177 394.525,293.843 401,297.5C 406.198,292.635 411.698,288.135 417.5,284C 422.44,282.959 427.106,283.626 431.5,286C 441.171,292.708 443.337,301.208 438,311.5C 433.984,315.348 430.151,319.348 426.5,323.5C 430.303,329.764 432.97,336.43 434.5,343.5C 451.043,339.931 461.71,346.097 466.5,362C 461.89,378.151 451.223,384.317 434.5,380.5C 433.209,387.705 430.542,394.371 426.5,400.5C 429.818,404.318 433.318,407.985 437,411.5C 443.644,422.594 441.478,431.761 430.5,439C 425.918,441.323 421.251,441.656 416.5,440C 410.727,436.064 405.394,431.564 400.5,426.5C 394.314,430.174 387.814,433.174 381,435.5C 383.986,451.555 377.82,461.888 362.5,466.5C 345.984,462.162 339.65,451.496 343.5,434.5C 336.43,432.97 329.764,430.303 323.5,426.5C 318.606,431.564 313.273,436.064 307.5,440C 302.696,441.97 298.03,441.637 293.5,439C 291,436.5 288.5,434 286,431.5C 282.667,425.5 282.667,419.5 286,413.5C 290.214,409.622 294.048,405.455 297.5,401C 293.843,394.525 291.177,387.692 289.5,380.5C 283.491,380.666 277.491,380.499 271.5,380C 260.155,374.814 256.321,366.314 260,354.5C 267.151,344.109 276.985,340.442 289.5,343.5C 291.091,336.559 293.758,330.059 297.5,324C 293.347,319.178 289.18,314.345 285,309.5C 281.307,299.714 283.807,291.881 292.5,286C 297.988,283.085 303.655,282.752 309.5,285C 314.345,289.18 319.178,293.347 324,297.5C 330.059,293.758 336.559,291.091 343.5,289.5C 340.414,275.356 345.081,265.023 357.5,258.5 Z M 361.5,323.5 C 385.544,325.182 398.544,338.016 400.5,362C 399,386.167 386.167,399 362,400.5C 338.51,398.343 325.677,385.51 323.5,362C 325.677,338.657 338.344,325.823 361.5,323.5 Z"/></g>
|
||||
<g><path style="opacity:0.979" fill="#0051cb" d="M 180.5,280.5 C 199.836,280.333 219.17,280.5 238.5,281C 250.834,286.335 254.334,295.168 249,307.5C 246.408,310.762 243.241,313.262 239.5,315C 221.5,315.333 203.5,315.667 185.5,316C 138.041,321.793 110.541,348.293 103,395.5C 100.63,406.374 103.13,415.874 110.5,424C 113.554,426.194 116.888,427.861 120.5,429C 160.213,429.023 199.88,429.69 239.5,431C 252.873,439.14 254.54,449.14 244.5,461C 241.874,463.146 238.874,464.479 235.5,465C 198.167,465.667 160.833,465.667 123.5,465C 95.9524,461.123 77.7858,445.956 69,419.5C 64.2087,370.919 81.3754,332.086 120.5,303C 138.754,290.64 158.754,283.14 180.5,280.5 Z"/></g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Loading…
Reference in New Issue
Block a user