feat(carousel): add new product images and update carousel item details
This commit is contained in:
BIN
public/images/carousel-auriculares-amarillos.webp
Normal file
BIN
public/images/carousel-auriculares-amarillos.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/carousel-camara-violeta.webp
Normal file
BIN
public/images/carousel-camara-violeta.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
public/images/carousel-campera-azul.webp
Normal file
BIN
public/images/carousel-campera-azul.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
public/images/carousel-mochila-roja.webp
Normal file
BIN
public/images/carousel-mochila-roja.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
public/images/carousel-reloj-verde.webp
Normal file
BIN
public/images/carousel-reloj-verde.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/images/carousel-zapatillas-naranjas.webp
Normal file
BIN
public/images/carousel-zapatillas-naranjas.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@@ -586,6 +586,7 @@
|
|||||||
|
|
||||||
<ng-template #productCarouselItem let-product let-index="index">
|
<ng-template #productCarouselItem let-product let-index="index">
|
||||||
<div class="carousel-product" [attr.data-carousel-index]="index">
|
<div class="carousel-product" [attr.data-carousel-index]="index">
|
||||||
|
<span class="carousel-product__mock-id">ITEM {{ product.id }}</span>
|
||||||
<app-product-column-with-image
|
<app-product-column-with-image
|
||||||
[imageUrl]="product.imageUrl"
|
[imageUrl]="product.imageUrl"
|
||||||
[title]="product.title"
|
[title]="product.title"
|
||||||
|
|||||||
@@ -20,9 +20,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.carousel-product {
|
.carousel-product {
|
||||||
|
position: relative;
|
||||||
width: clamp(15rem, 30vw, 18rem);
|
width: clamp(15rem, 30vw, 18rem);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
&__mock-id {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.75rem;
|
||||||
|
left: 0.75rem;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0.35rem 0.55rem;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
background: rgb(20 20 20 / 82%);
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
app-product-column-with-image {
|
app-product-column-with-image {
|
||||||
display: block;
|
display: block;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -171,8 +171,13 @@ describe('ReutilizablesTestPageComponent', () => {
|
|||||||
expect(carouselDemo?.querySelector('app-carousel')).not.toBeNull();
|
expect(carouselDemo?.querySelector('app-carousel')).not.toBeNull();
|
||||||
expect(carouselItems).toHaveLength(6);
|
expect(carouselItems).toHaveLength(6);
|
||||||
expect(productImages).toHaveLength(6);
|
expect(productImages).toHaveLength(6);
|
||||||
expect(productImages?.[0].getAttribute('src')).toContain('/images/pantalon-scuba.png');
|
expect(productImages?.[0].getAttribute('src')).toContain('/images/carousel-mochila-roja.webp');
|
||||||
expect(productImages?.[1].getAttribute('src')).toContain('/images/zapatillas-running.png');
|
expect(productImages?.[1].getAttribute('src')).toContain(
|
||||||
|
'/images/carousel-auriculares-amarillos.webp',
|
||||||
|
);
|
||||||
|
expect(
|
||||||
|
new Set(Array.from(productImages ?? [], (image) => image.getAttribute('src'))).size,
|
||||||
|
).toBe(6);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
|
it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
|
||||||
|
|||||||
@@ -101,51 +101,51 @@ export class ReutilizablesTestPageComponent {
|
|||||||
protected readonly carouselProducts: CarouselProductMock[] = [
|
protected readonly carouselProducts: CarouselProductMock[] = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: 'Pantalón scuba negro',
|
title: '01 · Mochila roja',
|
||||||
originalPrice: 95000,
|
originalPrice: 85000,
|
||||||
discount: 20,
|
discount: 20,
|
||||||
transferPrice: 74800,
|
transferPrice: 68000,
|
||||||
imageUrl: '/images/pantalon-scuba.png',
|
imageUrl: '/images/carousel-mochila-roja.webp',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
title: 'Zapatillas running azul',
|
title: '02 · Auriculares amarillos',
|
||||||
originalPrice: 120000,
|
originalPrice: 120000,
|
||||||
discount: 15,
|
discount: 15,
|
||||||
transferPrice: 98000,
|
transferPrice: 102000,
|
||||||
imageUrl: '/images/zapatillas-running.png',
|
imageUrl: '/images/carousel-auriculares-amarillos.webp',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
title: 'Pantalón urbano',
|
title: '03 · Reloj verde',
|
||||||
originalPrice: 89000,
|
originalPrice: 96000,
|
||||||
discount: 10,
|
discount: 10,
|
||||||
transferPrice: 78500,
|
transferPrice: 86400,
|
||||||
imageUrl: '/images/pantalon-scuba.png',
|
imageUrl: '/images/carousel-reloj-verde.webp',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
title: 'Zapatillas deportivas',
|
title: '04 · Cámara violeta',
|
||||||
originalPrice: 135000,
|
originalPrice: 135000,
|
||||||
discount: null,
|
discount: null,
|
||||||
transferPrice: 128000,
|
transferPrice: 128000,
|
||||||
imageUrl: '/images/zapatillas-running.png',
|
imageUrl: '/images/carousel-camara-violeta.webp',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
title: 'Pantalón clásico',
|
title: '05 · Zapatillas naranjas',
|
||||||
originalPrice: 102000,
|
originalPrice: 110000,
|
||||||
discount: 25,
|
discount: 25,
|
||||||
transferPrice: 75000,
|
transferPrice: 82500,
|
||||||
imageUrl: '/images/pantalon-scuba.png',
|
imageUrl: '/images/carousel-zapatillas-naranjas.webp',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
title: 'Zapatillas training',
|
title: '06 · Campera azul',
|
||||||
originalPrice: 142000,
|
originalPrice: 142000,
|
||||||
discount: 12,
|
discount: 12,
|
||||||
transferPrice: 121000,
|
transferPrice: 121000,
|
||||||
imageUrl: '/images/zapatillas-running.png',
|
imageUrl: '/images/carousel-campera-azul.webp',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user