tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update product carousel layout and styling for improved responsiveness

Browse Source
This commit is contained in:
ncoronel
2026-06-30 10:25:33 -03:00
parent ec261caab3
commit 57a1e66d1a
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/features/store/components/product-carousel/product-carousel.component.html
View File

@@ -1,4 +1,4 @@
<div class="product-carousel d-flex flex-column gap-3"> <div class="product-carousel d-flex flex-column gap-4">
<!-- Active/Main Image Area --> <!-- Active/Main Image Area -->
<div class="product-carousel__main position-relative bg-light overflow-hidden"> <div class="product-carousel__main position-relative bg-light overflow-hidden">
<!-- Main Image --> <!-- Main Image -->
@@ -38,7 +38,7 @@
<!-- Thumbnails Row --> <!-- Thumbnails Row -->
@if (images().length > 1) { @if (images().length > 1) {
<div class="product-carousel__thumbnails d-flex gap-3"> <div class="product-carousel__thumbnails">
@for (image of images(); track image; let idx = $index) { @for (image of images(); track image; let idx = $index) {
<button type="button" class="product-carousel__thumbnail border-0 p-0 overflow-hidden bg-light" <button type="button" class="product-carousel__thumbnail border-0 p-0 overflow-hidden bg-light"
[class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)" [class.product-carousel__thumbnail--active]="idx === activeIndex()" (click)="selectImage(idx)"
@@ -48,4 +48,4 @@
} }
</div> </div>
} }
</div> </div>

13
src/app/features/store/components/product-carousel/product-carousel.component.scss
View File

@@ -2,7 +2,7 @@
width: 100%; width: 100%;
&__main { &__main {
aspect-ratio: 463 / 489; aspect-ratio: 1 / 1;
width: 100%; width: 100%;
background-color: #e0e0e0 !important; background-color: #e0e0e0 !important;
/* Matches grey placeholder in mock */ /* Matches grey placeholder in mock */
@@ -13,6 +13,7 @@
} }
&__main-image { &__main-image {
display: block;
padding: 0; padding: 0;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
@@ -57,12 +58,14 @@
} }
&__thumbnails { &__thumbnails {
margin-top: 1rem; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
} }
&__thumbnail { &__thumbnail {
width: 80px; width: 100%;
height: 80px;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
background-color: #e0e0e0 !important; background-color: #e0e0e0 !important;
/* Matches mock layout */ /* Matches mock layout */
@@ -86,4 +89,4 @@
opacity: 1; opacity: 1;
} }
} }
} }

2
src/app/features/store/pages/product-detail-page/product-detail-page.component.html
View File

@@ -13,7 +13,7 @@
} @else if (product(); as prod) { } @else if (product(); as prod) {
<div class="row"> <div class="row">
<!-- Carousel takes ~33.3% width on md/lg screens --> <!-- Carousel takes ~33.3% width on md/lg screens -->
<div class="col-12 col-md-4"> <div class="col-12 col-md-5">
<app-product-carousel [images]="carouselImages()" [discount]="20" /> <app-product-carousel [images]="carouselImages()" [discount]="20" />
</div> </div>
</div> </div>