mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-26 08:17:20 +00:00
fix cards and cart pages
This commit is contained in:
AndriiSyrotenko
parent
0f2d183f55
commit
3538439c2b
@ -12,6 +12,8 @@ public class Product
|
|||||||
|
|
||||||
public required double Rating {get; set;}
|
public required double Rating {get; set;}
|
||||||
|
|
||||||
|
public required double Price { get; set; }
|
||||||
|
|
||||||
public required string[] ImagesUrls {get; set;}
|
public required string[] ImagesUrls {get; set;}
|
||||||
|
|
||||||
public required bool WasOpened {get; set;}
|
public required bool WasOpened {get; set;}
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
using GraphQL;
|
using GraphQL;
|
||||||
using Newtonsoft.Json;
|
using Newtonsoft.Json;
|
||||||
using System.Net.Http.Headers;
|
using System.Net.Http.Headers;
|
||||||
|
using ShoppingAssistantWebClient.Web.Models.GlobalInstances;
|
||||||
|
|
||||||
namespace ShoppingAssistantWebClient.Web.Network;
|
namespace ShoppingAssistantWebClient.Web.Network;
|
||||||
|
|
||||||
@ -29,7 +30,9 @@ public class ApiClient
|
|||||||
{
|
{
|
||||||
await SetAuthenticationAsync();
|
await SetAuthenticationAsync();
|
||||||
|
|
||||||
return await _graphQLClient.SendQueryAsync<dynamic>(request);
|
var response = await _graphQLClient.SendQueryAsync<dynamic>(request);
|
||||||
|
|
||||||
|
return response;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task<T> QueryAsync<T>(GraphQLRequest request, string propertyName)
|
public async Task<T> QueryAsync<T>(GraphQLRequest request, string propertyName)
|
||||||
@ -116,7 +119,18 @@ public class ApiClient
|
|||||||
|
|
||||||
private async Task SetAuthenticationAsync()
|
private async Task SetAuthenticationAsync()
|
||||||
{
|
{
|
||||||
_graphQLClient.HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken);
|
var accessToken = await _authenticationService.GetAuthTokenAsync();
|
||||||
_httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken);
|
if (!string.IsNullOrEmpty(accessToken))
|
||||||
|
{
|
||||||
|
this.JwtToken = accessToken;
|
||||||
|
|
||||||
|
GlobalUser.Id = _authenticationService.GetIdFromJwtToken(accessToken);
|
||||||
|
GlobalUser.Email = _authenticationService.GetEmailFromJwtToken(accessToken);
|
||||||
|
GlobalUser.Phone = _authenticationService.GetPhoneFromJwtToken(accessToken);
|
||||||
|
GlobalUser.Roles = _authenticationService.GetRolesFromJwtToken(accessToken);
|
||||||
|
|
||||||
|
_graphQLClient.HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken);
|
||||||
|
_httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,26 +1,63 @@
|
|||||||
@page "/cards"
|
@page "/cards/{wishlistName}/{chatId}"
|
||||||
|
|
||||||
|
@inject IJSRuntime JSRuntime
|
||||||
|
@inject NavigationManager navigationManager;
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/Cards.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function adjustButtonContainerPosition() {
|
||||||
|
var cardElements = document.querySelectorAll('.card, .back-card, .card-text');
|
||||||
|
var buttonContainer = document.querySelector('.buttons-container');
|
||||||
|
|
||||||
|
if (cardElements.length > 0 && buttonContainer) {
|
||||||
|
var totalHeight = Array.from(cardElements).reduce((max, card) => {
|
||||||
|
return Math.max(max, card.offsetHeight);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
if (window.matchMedia('(max-width: 440px)').matches) {
|
||||||
|
buttonContainer.style.top = `calc(20% + ${totalHeight}px + 60px)`;
|
||||||
|
} else if (window.matchMedia('(max-width: 769px)').matches) {
|
||||||
|
buttonContainer.style.top = `calc(12% + ${totalHeight}px + 60px)`;
|
||||||
|
} else if (window.matchMedia('(max-width: 992px)').matches) {
|
||||||
|
buttonContainer.style.top = `calc(8% + ${totalHeight}px + 60px)`;
|
||||||
|
} else {
|
||||||
|
buttonContainer.style.top = `calc(3% + ${totalHeight}px + 60px)`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', adjustButtonContainerPosition);
|
||||||
|
window.addEventListener('resize', adjustButtonContainerPosition);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<div class="card-page">
|
<div class="card-page">
|
||||||
|
<button class="back-button button-animation" @onclick="NavigateToMain"></button>
|
||||||
|
<div class="container">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<button class="back-button"></button>
|
<p class="header-text">@wishlistName</p>
|
||||||
<p class="header-text">Gift for Jessica</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content" data-generalTop="3%" data-largeTop="8%" mediumTop="12%" smallTop="20%">
|
||||||
<div class="back-card"></div>
|
<div class="back-card"></div>
|
||||||
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
|
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="slider-container">
|
<div class="slider-container">
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
@foreach (var image in Products[currentProduct].ImagesUrls) {
|
@for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
|
||||||
|
string image = Products[currentProduct].ImagesUrls[i];
|
||||||
if (currentImage == image) {
|
if (currentImage == image) {
|
||||||
<img src="@image" class="slider-image" @onclick="(() => ChangeImage(image))"/>
|
<img src="@image" class="slider-image" alt="product image"/>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
<img class="next-image" src="/images/next-image.png" alt="next image" @onclick="(() => ChangeImage(currentImage))"/>
|
||||||
|
<img class="prev-image" src="/images/prev-image.png" alt="previous image" @onclick="(() => ChangeImage(currentImage))"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="dots">
|
<div class="dots">
|
||||||
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length; i++) {
|
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
|
||||||
var dotIndex = i;
|
var dotIndex = i;
|
||||||
<div class="dot @(i == currentIndex ? "active-dot" : "")" @onclick="(() => ChangeImageDot(dotIndex))"></div>
|
<div class="dot @(i == currentIndex ? "active-dot" : "")" @onclick="(() => ChangeImageDot(dotIndex))"></div>
|
||||||
}
|
}
|
||||||
@ -36,32 +73,36 @@
|
|||||||
@{
|
@{
|
||||||
int whole = (int)Math.Floor(Products[currentProduct].Rating);
|
int whole = (int)Math.Floor(Products[currentProduct].Rating);
|
||||||
double fractal = Products[currentProduct].Rating - whole;
|
double fractal = Products[currentProduct].Rating - whole;
|
||||||
string price = "N/A";
|
|
||||||
}
|
}
|
||||||
@for(int i = 0; i < 5; i++) {
|
@for(int i = 0; i < 5; i++) {
|
||||||
if(i < whole) {
|
if(i < whole) {
|
||||||
<img class="star" src="/images/star-cards.png">
|
<img class="star" src="/images/star-cards.png" alt="star">
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
if(fractal != 0.0) {
|
if(fractal != 0.0) {
|
||||||
<img class="star" src="/images/half-star.png">
|
<img class="star" src="/images/half-star.png" alt="star">
|
||||||
fractal -= fractal;
|
fractal -= fractal;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
<img class="star" src="/images/empty-star.png">
|
<img class="star" src="/images/empty-star.png" alt="star">
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<label class="price-label">@price</label>
|
<label class="price-label">@Products[currentProduct].Price</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons-container">
|
<div class="buttons-container">
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button class="cancel-button" @onclick="(() => LoadNextProduct())"></button>
|
<button class="cancel-button button-animation" @onclick="(() => LoadNextProduct())"></button>
|
||||||
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
|
<button class="return-button button-animation" @onclick="(() => LoadPreviousProduct())"></button>
|
||||||
<button class="like-button" @onclick="(() => LoadNextProduct())"></button>
|
<button class="like-button button-animation" @onclick="(() => LoadNextProduct())"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
if(!isProductsNull) {
|
||||||
|
isProductsNull = true;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
<style>
|
<style>
|
||||||
@ -71,16 +112,36 @@
|
|||||||
</style>
|
</style>
|
||||||
<div class="card-text">
|
<div class="card-text">
|
||||||
<label class="bold-text">The cards ended</label>
|
<label class="bold-text">The cards ended</label>
|
||||||
<label class="more-text">Click <img src="/images/load-more-small.png"/> to see more<br> or <img src="/images/return-small.png"/> to exit</label>
|
<label class="more-text">Click <img class="plus-image" src="/images/load-more-small.png" alt="plus"/> to see more<br> or <img src="/images/return-small.png" alt="return"/> to exit</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons-container">
|
<div class="buttons-container">
|
||||||
<div class="buttons-row">
|
<div class="buttons-row">
|
||||||
<button class="exit-button" @onclick="(() => NavigateToMain())"></button>
|
<button class="exit-button button-animation" @onclick="(() => NavigateToMain())"></button>
|
||||||
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
|
<button class="return-button button-animation" @onclick="(() => { LoadPreviousProduct(); })"></button>
|
||||||
<button class="more-button" @onclick="(() => LoadMoreProducts())"></button>
|
<button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
if(isProductsNull) {
|
||||||
|
isProductsNull = false;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
[Parameter] public string wishlistName { get; set; }
|
||||||
|
|
||||||
|
[Parameter] public string chatId {get; set;}
|
||||||
|
|
||||||
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
|
{
|
||||||
|
await JSRuntime.InvokeVoidAsync("adjustButtonContainerPosition");
|
||||||
|
}
|
||||||
|
|
||||||
|
private void NavigateToMain() {
|
||||||
|
navigationManager.NavigateTo($"/chat/{chatId}");
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,43 +1,65 @@
|
|||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using ShoppingAssistantWebClient.Web.Models;
|
using ShoppingAssistantWebClient.Web.Models;
|
||||||
|
using ShoppingAssistantWebClient.Web.Network;
|
||||||
|
using GraphQL;
|
||||||
|
using Newtonsoft.Json;
|
||||||
|
using Microsoft.JSInterop;
|
||||||
|
|
||||||
namespace ShoppingAssistantWebClient.Web.Pages;
|
namespace ShoppingAssistantWebClient.Web.Pages;
|
||||||
|
|
||||||
public partial class Cards
|
public partial class Cards
|
||||||
{
|
{
|
||||||
|
[Inject]
|
||||||
|
private ApiClient _apiClient { get; set; }
|
||||||
|
|
||||||
private int currentIndex = 0;
|
private int currentIndex = 0;
|
||||||
|
|
||||||
private int currentProduct = 0;
|
private int currentProduct = 0;
|
||||||
|
|
||||||
private string currentImage;
|
private string currentImage {get; set;}
|
||||||
|
|
||||||
private static string[] Images = {
|
private bool isProductsNull = false;
|
||||||
"/images/image2.png",
|
|
||||||
"/images/image1.png",
|
|
||||||
"/images/return-card.png"
|
|
||||||
};
|
|
||||||
|
|
||||||
public List<Product> Products = new()
|
//private static string[] Images = {
|
||||||
|
// "/images/image2.png",
|
||||||
|
// "/images/image1.png",
|
||||||
|
// "/images/return-card.png",
|
||||||
|
// "/images/amazon.png",
|
||||||
|
// "/images/avatar.png"
|
||||||
|
//};
|
||||||
|
|
||||||
|
//public List<Product> Products = new()
|
||||||
|
//{
|
||||||
|
// new Product {Id = "0", Url = "some link", Name = "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook",
|
||||||
|
// Description = "The USB C to VGA + Charge Adapter connects to your laptop or tablet via USB-C port, giving you both a VGA port for video display and a USB-C port for power", Rating = 3.8, Price = 120, ImagesUrls = Images, WasOpened = false, WishlistId = "0"},
|
||||||
|
// new Product {Id = "1", Url = "some link", Name = "Second product",
|
||||||
|
// Description = "Test description", Rating = 4.2, Price = 30, ImagesUrls = Images, WasOpened = false, WishlistId = "0"}
|
||||||
|
//};
|
||||||
|
|
||||||
|
public List<Product> Products {get; set;}
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
new Product {Id = "0", Url = "some link", Name = "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook",
|
if (Products != null) {
|
||||||
Description = "The USB C to VGA + Charge Adapter connects to your laptop or tablet via USB-C port, giving you both a VGA port for video display and a USB-C port for power", Rating = 3.8, ImagesUrls = Images, WasOpened = false, WishlistId = "0"},
|
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
|
||||||
new Product {Id = "1", Url = "some link", Name = "Second product",
|
}
|
||||||
Description = "Test description", Rating = 4.2, ImagesUrls = Images, WasOpened = false, WishlistId = "0"}
|
else {
|
||||||
};
|
currentImage = "";
|
||||||
|
isProductsNull = true;
|
||||||
protected override void OnInitialized()
|
}
|
||||||
{
|
|
||||||
currentImage = Images[currentIndex];
|
|
||||||
base.OnInitialized();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private void ChangeImage(string image) {
|
private void ChangeImage(string image)
|
||||||
|
{
|
||||||
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
|
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
|
||||||
currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length;
|
currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length;
|
||||||
|
currentIndex = currentIndex >= 3 ? 0 : currentIndex;
|
||||||
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
|
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
private void ChangeImageDot(int index) {
|
private void ChangeImageDot(int index)
|
||||||
|
{
|
||||||
if (index >= 0 && index < Products[currentProduct].ImagesUrls.Length) {
|
if (index >= 0 && index < Products[currentProduct].ImagesUrls.Length) {
|
||||||
currentIndex = index;
|
currentIndex = index;
|
||||||
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
|
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
|
||||||
@ -45,20 +67,17 @@ public partial class Cards
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private void LoadNextProduct() {
|
private async void LoadNextProduct()
|
||||||
|
{
|
||||||
currentProduct += 1;
|
currentProduct += 1;
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
private void LoadPreviousProduct() {
|
private async void LoadPreviousProduct() {
|
||||||
currentProduct -= 1;
|
currentProduct -= 1;
|
||||||
StateHasChanged();
|
StateHasChanged();
|
||||||
}
|
}
|
||||||
|
|
||||||
private void NavigateToMain() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
private void LoadMoreProducts() {
|
private void LoadMoreProducts() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,244 +0,0 @@
|
|||||||
|
|
||||||
.card-page {
|
|
||||||
position: relative;
|
|
||||||
border: 0.09em solid;
|
|
||||||
border-color: #0052CC;
|
|
||||||
border-radius: 0.6em;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-top: -52px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.head {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-text {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
color: rgba(0, 82, 204, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-image: url("images/back-button.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
position: absolute;
|
|
||||||
left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-card,
|
|
||||||
.card,
|
|
||||||
.card-text {
|
|
||||||
width: 19em;
|
|
||||||
height: 30em;
|
|
||||||
border-radius: 15px;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-card {
|
|
||||||
transform: rotate(-5deg);
|
|
||||||
box-shadow: 0 0 10px rgba(0, 82, 204, 1);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card,
|
|
||||||
.card-text {
|
|
||||||
box-shadow: 0 0 10px rgba(1, 101, 255, 1);
|
|
||||||
padding: 30px 20px 50px 20px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
|
||||||
display: flex;
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-image {
|
|
||||||
width: 250px;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dots {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: rgba(234, 234, 234, 1);
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-dot {
|
|
||||||
background-color: rgba(50, 50, 50, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name,
|
|
||||||
.description {
|
|
||||||
overflow: hidden;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
max-height: 60px;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 15px;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.description {
|
|
||||||
max-height: 70px;
|
|
||||||
font-size: 13px;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
position: absolute;
|
|
||||||
top: 300px;
|
|
||||||
right: 20px;
|
|
||||||
left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.star {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rating {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rating-price-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-label {
|
|
||||||
margin-left: auto;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-container {
|
|
||||||
width: 300px;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 640px;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 15px;
|
|
||||||
left: 20px;
|
|
||||||
right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cancel-button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url("images/cancel-button.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.return-button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url("images/return-card.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.like-button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url("images/like-button.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exit-button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url("images/exit.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-button {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background-image: url("images/load-more.png");
|
|
||||||
background-size: cover;
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bold-text {
|
|
||||||
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-text {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exit-text {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
@ -1,37 +1,62 @@
|
|||||||
@page "/cart"
|
@page "/cart/{chatId}/{currentWishlistId}"
|
||||||
|
|
||||||
|
@inject NavigationManager navigationManager;
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/Cart.css" />
|
||||||
|
</head>
|
||||||
<div class="cart">
|
<div class="cart">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<button class="back-button" @onclick="NavigateToMainPage"></button>
|
<div id="button_open" class="open_menu">
|
||||||
|
<a class="button_open_menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<p class="header-text">Cart</p>
|
<p class="header-text">Cart</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@foreach (var product in Products) {
|
@if (!isError) {
|
||||||
<div class="product-div">
|
@if (Products != null) {
|
||||||
<img class="product-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe7MHcuWUvuNJsttl3MEVxEayUGVNH4tA2Ha0K4szpgKvH7QYuiaBa_hCzUgW96I6LXqM&usqp=CAU">
|
@foreach (var product in Products) {
|
||||||
<label class="product-description">@product.Description</label>
|
<div class="product-div">
|
||||||
<div class="button-row">
|
<img class="product-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe7MHcuWUvuNJsttl3MEVxEayUGVNH4tA2Ha0K4szpgKvH7QYuiaBa_hCzUgW96I6LXqM&usqp=CAU">
|
||||||
<img class="star" src="/images/star.png">
|
<label class="product-description">@product.Description</label>
|
||||||
<label class="rating">@product.Rating</label>
|
<div class="button-row">
|
||||||
@{
|
<img class="star" src="/images/star.png">
|
||||||
string price = "N/A";
|
<label class="rating">@product.Rating</label>
|
||||||
}
|
<label class="price-label">@product.Price</label>
|
||||||
<label class="price-label">@price</label>
|
</div>
|
||||||
</div>
|
<button class="button-amazon">
|
||||||
<button class="button-amazon">
|
<img src="/images/amazon.png">
|
||||||
<img src="/images/amazon.png">
|
</button>
|
||||||
</button>
|
</div>
|
||||||
</div>
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
<p class="error">Cart is empty</p>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<p class="error">Something went wrong<br>We are having some trouble loading the cart</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('button_open').addEventListener('click', changetyle);
|
||||||
|
</script>
|
||||||
|
|
||||||
@code
|
@code
|
||||||
{
|
{
|
||||||
[Inject]
|
[Parameter] public string currentWishlistId {get; set; }
|
||||||
private NavigationManager NavigationManager {get; set;}
|
|
||||||
|
[Parameter] public string chatId {get; set; }
|
||||||
|
|
||||||
private void NavigateToMainPage()
|
private void NavigateToMainPage()
|
||||||
{
|
{
|
||||||
NavigationManager.NavigateTo("/Cards");
|
navigationManager.NavigateTo($"/chat/{chatId}");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,51 +1,68 @@
|
|||||||
|
using GraphQL;
|
||||||
|
using Newtonsoft.Json;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
using ShoppingAssistantWebClient.Web.Models;
|
using ShoppingAssistantWebClient.Web.Models;
|
||||||
|
using ShoppingAssistantWebClient.Web.Network;
|
||||||
|
|
||||||
namespace ShoppingAssistantWebClient.Web.Pages;
|
namespace ShoppingAssistantWebClient.Web.Pages;
|
||||||
|
|
||||||
public partial class Cart : ComponentBase
|
public partial class Cart : ComponentBase
|
||||||
{
|
{
|
||||||
public List<Product> Products = new()
|
|
||||||
{
|
[Inject]
|
||||||
new Product {Id = "0", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "0"},
|
private ApiClient _apiClient { get; set; }
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "2", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "2"},
|
public List<Product> Products { get; set; }
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
public bool isError = false;
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"},
|
|
||||||
};
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
// Get data from Back-end
|
await GetData();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task GetData()
|
||||||
|
{
|
||||||
|
try {
|
||||||
|
var request = new GraphQLRequest {
|
||||||
|
Query = @"query ProductsPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
|
||||||
|
productsPageFromPersonalWishlist(wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) {
|
||||||
|
items {
|
||||||
|
id
|
||||||
|
url
|
||||||
|
name
|
||||||
|
description
|
||||||
|
rating
|
||||||
|
price
|
||||||
|
imagesUrls
|
||||||
|
wasOpened
|
||||||
|
wishlistId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}",
|
||||||
|
|
||||||
|
Variables = new {
|
||||||
|
wishlistId = currentWishlistId,
|
||||||
|
pageNumber = 1,
|
||||||
|
pageSize = 10,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var response = await _apiClient.QueryAsync(request);
|
||||||
|
var responseData = response.Data;
|
||||||
|
if (response.Errors != null && response.Errors.Any()) {
|
||||||
|
isError = true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.productsPageFromPersonalWishlist.items);
|
||||||
|
this.Products = JsonConvert.DeserializeObject<List<Product>>(jsonCategoriesResponse);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch(Exception ex)
|
||||||
|
{
|
||||||
|
Console.WriteLine(ex);
|
||||||
|
isError = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,12 +1,11 @@
|
|||||||
|
|
||||||
.cart {
|
.cart {
|
||||||
border-radius: 10px;
|
border-radius: 0.6em;
|
||||||
border: 1px solid #0052CC;
|
position: relative;
|
||||||
position: fixed;
|
height: 100%;
|
||||||
left: 20px;
|
width: 100%;
|
||||||
right: 20px;
|
|
||||||
top: 20px;
|
|
||||||
bottom: 20px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
border: 1px solid #0052CC;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none;
|
||||||
@ -32,7 +31,7 @@
|
|||||||
.back-button {
|
.back-button {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
height: 15px;
|
height: 15px;
|
||||||
background-image: url("images/back-button.png");
|
background-image: url("/images/back-button.png");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@ -82,7 +81,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 109px;
|
width: 85%;
|
||||||
height: 27px;
|
height: 27px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
@ -119,3 +118,54 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
font-size: x-large;
|
||||||
|
color: darkgrey;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error br {
|
||||||
|
display: block;
|
||||||
|
content: " ";
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-frame {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.25em;
|
||||||
|
left: 23.25em;
|
||||||
|
top: 1.25em;
|
||||||
|
bottom: 1.25em;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
@ -6,6 +6,7 @@ var builder = WebApplication.CreateBuilder(args);
|
|||||||
// Add services to the container.
|
// Add services to the container.
|
||||||
builder.Services.AddRazorPages();
|
builder.Services.AddRazorPages();
|
||||||
builder.Services.AddServerSideBlazor();
|
builder.Services.AddServerSideBlazor();
|
||||||
|
builder.Services.AddServerSideBlazor().AddCircuitOptions(options => { options.DetailedErrors = true; });
|
||||||
builder.Services.AddSingleton<WeatherForecastService>();
|
builder.Services.AddSingleton<WeatherForecastService>();
|
||||||
builder.Services.AddApiClient(builder.Configuration);
|
builder.Services.AddApiClient(builder.Configuration);
|
||||||
|
|
||||||
@ -28,6 +29,7 @@ app.UseRouting();
|
|||||||
app.MapBlazorHub();
|
app.MapBlazorHub();
|
||||||
app.MapFallbackToPage("/_Host");
|
app.MapFallbackToPage("/_Host");
|
||||||
|
|
||||||
app.ConfigureGlobalUserMiddleware();
|
// Login moved to ApiClient
|
||||||
|
// app.ConfigureGlobalUserMiddleware();
|
||||||
|
|
||||||
app.Run();
|
app.Run();
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
@using ShoppingAssistantWebClient.Web.Pages
|
@using ShoppingAssistantWebClient.Web.Pages
|
||||||
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
|
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/MainLayout.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="sidebar-menu">
|
<div class="sidebar-menu">
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
@inject NavigationManager Navigation
|
@using Models.GlobalInstances
|
||||||
|
@inject NavigationManager Navigation
|
||||||
<div id="leftframe" class="left_frame">
|
<div id="leftframe" class="left_frame">
|
||||||
|
|
||||||
|
|
||||||
@ -50,7 +51,7 @@
|
|||||||
<div class="elements">
|
<div class="elements">
|
||||||
<div class="info_user">
|
<div class="info_user">
|
||||||
<img src="/images/avatar.jpg" alt="Avatar user">
|
<img src="/images/avatar.jpg" alt="Avatar user">
|
||||||
<span class="user_name">Semen Semenov</span>
|
<span class="user_name">@GlobalUser.Id</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -82,13 +83,6 @@
|
|||||||
right_frame.style.left = '23.25em';
|
right_frame.style.left = '23.25em';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById('button_close').addEventListener('click', changetyle);
|
document.getElementById('button_close').addEventListener('click', changetyle);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
701
ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
Normal file
701
ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
Normal file
@ -0,0 +1,701 @@
|
|||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border: 1.5% solid;
|
||||||
|
padding: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-page {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #0052CC;
|
||||||
|
position: fixed;
|
||||||
|
left: 2%;
|
||||||
|
right: 2%;
|
||||||
|
top: 2%;
|
||||||
|
bottom: 2%;
|
||||||
|
padding: 20px;
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-text {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
color: rgba(0, 82, 204, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-image: url("/images/back-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
left: 2%;
|
||||||
|
top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-card,
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
max-width: 280px;
|
||||||
|
width: 30%;
|
||||||
|
aspect-ratio: 1 / 1.6;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 992px) {
|
||||||
|
.back-card,
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
max-width: 250px;
|
||||||
|
width: 40%;
|
||||||
|
aspect-ratio: 1 / 1.6;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
box-shadow: 0 0 10px rgba(1, 101, 255, 1);
|
||||||
|
padding: 15px 10px 30px 10px !important;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
position: relative;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 190px !important;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
max-width: 270px;
|
||||||
|
width: 40% !important;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/cancel-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/return-card.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/like-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/exit.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/load-more.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-height: 60px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-height: 70px;
|
||||||
|
font-size: 0.75em !important;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
position: absolute;
|
||||||
|
top: 280px !important;
|
||||||
|
left: 10px !important;
|
||||||
|
right: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-height: 60px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-height: 70px;
|
||||||
|
font-size: 0.75em !important;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
position: absolute;
|
||||||
|
top: 280px !important;
|
||||||
|
left: 8px !important;
|
||||||
|
right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-image,
|
||||||
|
.prev-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 15px !important;
|
||||||
|
height: 15px !important;
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 769px) {
|
||||||
|
.back-card,
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
max-width: 230px;
|
||||||
|
min-width: 210px !important;
|
||||||
|
width: 50vw !important;
|
||||||
|
aspect-ratio: 1 / 1.6;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 12% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
box-shadow: 0 0 10px rgba(1, 101, 255, 1);
|
||||||
|
padding: 12px 8px 24px 8px !important;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 170px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-image {
|
||||||
|
height: 150px !important;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8px !important;
|
||||||
|
height: 8px !important;
|
||||||
|
background-color: rgba(234, 234, 234, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
max-width: 250px;
|
||||||
|
min-width: 230px;
|
||||||
|
width: 50vw !important;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/cancel-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/return-card.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/like-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/exit.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button {
|
||||||
|
width: 25px !important;
|
||||||
|
height: 25px !important;
|
||||||
|
background-image: url("/images/load-more.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-height: 60px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-height: 70px;
|
||||||
|
font-size: 0.75em !important;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
position: absolute;
|
||||||
|
top: 240px !important;
|
||||||
|
left: 8px !important;
|
||||||
|
right: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-image,
|
||||||
|
.prev-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 12px !important;
|
||||||
|
height: 12px !important;
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 440px) {
|
||||||
|
.back-card,
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
min-width: 200px !important;
|
||||||
|
width: 70vw;
|
||||||
|
aspect-ratio: 1 / 1.6;
|
||||||
|
border-radius: 15px;
|
||||||
|
position: absolute;
|
||||||
|
top: 20% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
box-shadow: 0 0 10px rgba(1, 101, 255, 1);
|
||||||
|
padding: 10px 5px 18px 5px !important;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 160px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-image {
|
||||||
|
height: 140px !important;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 6px !important;
|
||||||
|
height: 6px !important;
|
||||||
|
background-color: rgba(234, 234, 234, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
min-width: 210px;
|
||||||
|
width: 70vw;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
background-image: url("/images/cancel-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-button {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
background-image: url("/images/return-card.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
background-image: url("/images/like-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-button {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
background-image: url("/images/exit.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
background-image: url("/images/load-more.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-height: 60px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.8em !important;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-height: 70px;
|
||||||
|
font-size: 0.75em !important;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
position: absolute;
|
||||||
|
top: 220px !important;
|
||||||
|
left: 5px !important;
|
||||||
|
right: 5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold-text {
|
||||||
|
font-size: 1.2em !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-text {
|
||||||
|
font-size: 0.85em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-image,
|
||||||
|
.prev-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 10px !important;
|
||||||
|
height: 10px !important;
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-card {
|
||||||
|
transform: rotate(-5deg);
|
||||||
|
box-shadow: 0 0 10px rgba(0, 82, 204, 1);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.card-text {
|
||||||
|
box-shadow: 0 0 10px rgba(1, 101, 255, 1);
|
||||||
|
padding: 30px 20px 40px 20px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 210px;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
display: flex;
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-image,
|
||||||
|
.prev-image {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
z-index: 100;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.5s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.next-image {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:hover .next-image,
|
||||||
|
.slider:hover .prev-image {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-image {
|
||||||
|
height: 190px;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dots {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: rgba(234, 234, 234, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-dot {
|
||||||
|
background-color: rgba(50, 50, 50, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.description {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-height: 60px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 15px;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
max-height: 70px;
|
||||||
|
font-size: 13px;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
position: absolute;
|
||||||
|
top: 300px;
|
||||||
|
right: 20px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-price-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-label {
|
||||||
|
margin-left: auto;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
width: 300px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-animation {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-animation:active {
|
||||||
|
transform: scale(0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url("/images/cancel-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.return-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url("/images/return-card.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.like-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url("/images/like-button.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url("/images/exit.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-button {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url("/images/load-more.png");
|
||||||
|
background-size: cover;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold-text {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.exit-text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-frame {
|
||||||
|
position: absolute;
|
||||||
|
right: 1.25em;
|
||||||
|
left: 1.25em;
|
||||||
|
top: 1.25em;
|
||||||
|
bottom: 1.25em;
|
||||||
|
transition: 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plus-image {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png
Normal file
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 264 B |
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png
Normal file
BIN
ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
Loading…
Reference in New Issue
Block a user