Skip to content

FixCarousel #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Avazbek22 merged 2 commits into from
Aug 19, 2025
Merged

FixCarousel #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
205188d
About.razor fixed
Avazbek22 Aug 19, 2025
04c78e9
Product cards fixed
Avazbek22 Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 23 additions & 13 deletions src/Client/Client/About.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<div class="product-icon">🏺</div>
<MudText Typo="Typo.h6" Class="product-title">Восточные товары</MudText>
<MudText Typo="Typo.body1" Class="product-description">
уникальные и качественные изделия, которые привезены с самых разных уголков Востока.
Уникальные и качественные изделия, которые привезены с самых разных уголков Востока.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -58,7 +58,7 @@
<div class="product-icon">🗡️</div>
<MudText Typo="Typo.h6" Class="product-title">Ножи</MudText>
<MudText Typo="Typo.body1" Class="product-description">
изысканные коллекции ножей, которые понравятся как опытным коллекционерам, так и тем, кто ценит острые и практичные инструменты.
Изысканные коллекции ножей, которые понравятся как опытным коллекционерам, так и тем, кто ценит острые и практичные инструменты.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -68,7 +68,7 @@
<div class="product-icon">🍯</div>
<MudText Typo="Typo.h6" Class="product-title">Казаны</MudText>
<MudText Typo="Typo.body1" Class="product-description">
для любителей кулинарных традиций Востока. Наши казаны – это сочетание удобства и качества для самых вкусных блюд.
Для любителей кулинарных традиций Востока. Наши казаны – это сочетание удобства и качества для самых вкусных блюд.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -78,7 +78,7 @@
<div class="product-icon">🍇</div>
<MudText Typo="Typo.h6" Class="product-title">Сухофрукты</MudText>
<MudText Typo="Typo.body1" Class="product-description">
только лучшие плоды, которые сохраняют всю пользу и натуральный вкус.
Только лучшие плоды, которые сохраняют всю пользу и натуральный вкус.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -88,17 +88,17 @@
<div class="product-icon">🫖</div>
<MudText Typo="Typo.h6" Class="product-title">Восточная посуда</MudText>
<MudText Typo="Typo.body1" Class="product-description">
от изысканных чайников до великолепных сервизов, которые украсят вашу трапезу.
От изысканных чайников до великолепных сервизов, которые украсят вашу трапезу.
</MudText>
</MudPaper>
</MudItem>

<MudItem xs="12" sm="6" md="4">
<MudPaper Class="product-card animate-on-scroll" Elevation="3">
<div class="product-icon">🍬</div>
<MudText Typo="Typo.h6" Class="product-title">Напитки и сладости</MudText>
<MudText Typo="Typo.h6" Class="product-title">Сладости</MudText>
<MudText Typo="Typo.body1" Class="product-description">
настоящие восточные напитки и сладости, которые подарят вам незабываемые моменты наслаждения.
Настоящие восточные сладости, которые подарят вам незабываемые моменты наслаждения.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -108,7 +108,7 @@
<div class="product-icon">🥜</div>
<MudText Typo="Typo.h6" Class="product-title">Орехи</MudText>
<MudText Typo="Typo.body1" Class="product-description">
лучшие сорта орехов, которые могут быть прекрасным дополнением к вашему рациону.
Лучшие сорта орехов, которые могут быть прекрасным дополнением к вашему рациону.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -118,7 +118,17 @@
<div class="product-icon">🍵</div>
<MudText Typo="Typo.h6" Class="product-title">Чай</MudText>
<MudText Typo="Typo.body1" Class="product-description">
отборные сорта чая, которые порадуют даже самых требовательных гурманов.
Отборные сорта чая, которые порадуют даже самых требовательных гурманов.
</MudText>
</MudPaper>
</MudItem>

<MudItem xs="12" sm="6" md="4">
<MudPaper Class="product-card animate-on-scroll" Elevation="3">
<div class="product-icon">🍸</div>
<MudText Typo="Typo.h6" Class="product-title">Напитки</MudText>
<MudText Typo="Typo.body1" Class="product-description">
Лучшие восточные напитки, которые подарят вам незабываемые ощущения и придадут свежесть.
</MudText>
</MudPaper>
</MudItem>
Expand All @@ -141,7 +151,7 @@
<div class="advantage-text">
<MudText Typo="Typo.h6" Class="advantage-title">Качество</MudText>
<MudText Typo="Typo.body1" Class="advantage-description">
мы тщательно отбираем каждый товар, чтобы вы могли наслаждаться только лучшими продуктами.
Мы тщательно отбираем каждый товар, чтобы вы могли наслаждаться только лучшими продуктами.
</MudText>
</div>
</div>
Expand All @@ -155,7 +165,7 @@
<div class="advantage-text">
<MudText Typo="Typo.h6" Class="advantage-title">Широкий ассортимент</MudText>
<MudText Typo="Typo.body1" Class="advantage-description">
наш магазин – это место, где можно найти всё, что связано с Востоком, и каждый клиент найдет что-то по душе.
Наш магазин – это место, где можно найти всё, что связано с Востоком, и каждый клиент найдет что-то по душе.
</MudText>
</div>
</div>
Expand All @@ -169,7 +179,7 @@
<div class="advantage-text">
<MudText Typo="Typo.h6" Class="advantage-title">Приятные цены</MudText>
<MudText Typo="Typo.body1" Class="advantage-description">
мы стремимся предоставить вам лучшие товары по доступным ценам, чтобы вы могли наслаждаться восточной культурой без лишних затрат.
Мы стремимся предоставить вам лучшие товары по доступным ценам, чтобы вы могли наслаждаться восточной культурой без лишних затрат.
</MudText>
</div>
</div>
Expand All @@ -183,7 +193,7 @@
<div class="advantage-text">
<MudText Typo="Typo.h6" Class="advantage-title">Дружелюбный сервис</MudText>
<MudText Typo="Typo.body1" Class="advantage-description">
в наших магазинах всегда рады помочь вам, будь то вопрос о товаре или помощь с выбором.
В наших магазинах всегда рады помочь вам, будь то вопрос о товаре или помощь с выбором.
</MudText>
</div>
</div>
Expand Down
58 changes: 46 additions & 12 deletions src/Client/Client/Pages/Clients/Products.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
@foreach (var product in PagedProducts)
{

<MudItem xs="12" sm="6" md="4" lg="3" @key="product">
<MudItem xs="12" sm="6" md="4" lg="3" @key="product.Slug">
<MudCard Elevation="3" Class="product-card">

@{
Expand All @@ -44,17 +44,18 @@
product.Images[0]?.StartsWith("http", StringComparison.OrdinalIgnoreCase) == true;
}
<!-- Карусель изображений -->
<MudCarousel Style="height:290px;border-radius:10px"
<MudCarousel Class="product-carousel"
Style="height:290px;border-radius:10px"
ItemsSource="product.Images"
Context="img"
EnableSwipeGesture="true"
EnableSwipeGesture="hasImages"
AutoCycle="hasImages"
BulletsColor="Color.Dark"
BulletsPosition="Position.Bottom"
ShowBullets="hasImages"
ShowArrows="hasImages">
<ItemTemplate>
<MudCardMedia Image="@img"/>
<MudImage Src="@img" Style="width:100%; height:100%" Fluid="true"/>
</ItemTemplate>
</MudCarousel>

Expand All @@ -69,18 +70,17 @@
SelectionMode="SelectionMode.SingleSelection"
SelectedValue="product.SelectedVolume"
SelectedValueChanged="v => OnVolumeChanged(product, v)"
Ripple
Ripple="true"
Style="margin-bottom:20%;margin-left:-5px">
@foreach (var vp in product.Prices)
{
<MudChip Text="@vp.Volume" Value="@vp.Volume"
Color="Color.Primary" Variant="Variant.Text"/>
}
</MudChipSet>


<div class="discount-container">
<MudText Typo="Typo.body1">Цена:&nbsp;</MudText>
<MudText Typo="Typo.body1">Цена: </MudText>

@if (volumePrice.Discount is not null)
{
Expand All @@ -93,7 +93,6 @@
}
</div>


<!-- количество + кнопка «в корзину» -->
<div class="buttons-container">
<div class="counter-controls">
Expand Down Expand Up @@ -125,12 +124,19 @@
</MudButton>

</div>

<div class="description-container">
<MudLink Typo="Typo.body2" OnClick="@(() => OpenDescriptionAsync(product))">
Читать описание…
</MudLink>
@if (!string.IsNullOrWhiteSpace(product.Description))
{
<MudLink Typo="Typo.body2" OnClick="@(() => OpenDescriptionAsync(product))"
Class="desc-link">Читать описание…</MudLink>
}
else
{
<!-- невидимая заглушка той же высоты -->
<span class="desc-link desc-link--empty" aria-hidden="true">Читать описание…</span>
}
</div>

</MudCardContent>
</MudCard>
</MudItem>
Expand Down Expand Up @@ -435,6 +441,34 @@

<style>

.desc-link--empty{
visibility: hidden;
pointer-events: none;
}

.product-carousel {
position: relative;
overflow: hidden;
}

.product-carousel [class*="mud-carousel-bullets"] {
position: absolute;
left: 0; right: 0; bottom: 8px;
display: flex;
justify-content: center;
margin: 0 !important;
z-index: 2;
}

.product-carousel::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 42px;
z-index: 1;
pointer-events: none;
}

.pager-wrap {
display: flex;
justify-content: center;
Expand Down
Loading