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

feat(purchase-detail): restructure cart item layout for improved readability and alignment

Browse Source
This commit is contained in:
ncoronel
2026-07-08 13:47:23 -03:00
parent e06edaaa42
commit 5e9a5917fd
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/features/store/pages/account-page/pages/purchase-detail-page/purchase-detail-page.html
View File

@@ -34,19 +34,12 @@
}
</div>
<div class="d-grid min-w-0 cart-item-content">
<div class="d-grid align-items-start cart-item-top-row">
<div class="d-flex justify-content-between w-100 h-100 py-1">
<!-- Left Column -->
<div class="d-flex flex-column justify-content-between h-100 pe-2" style="max-width: 65%;">
<h3 class="m-0 text-uppercase fw-bold cart-item-product">{{ product.name }}</h3>
<div class="text-nowrap cart-item-prices">
@if (product.originalPrice) {
<span class="text-decoration-line-through mb-1 fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
}
<span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-auto">
<div class="d-grid cart-item-attributes">
<div class="cart-item-attribute">
<span class="fw-normal cart-item-attribute-label">Cantidad: </span>
@@ -61,12 +54,22 @@
<span class="fw-bold">{{ product.size }}</span>
</div>
</div>
</div>
<div class="cart-item-transfer-price text-end">
<span class="fw-bold">${{ product.transferPrice }}</span>
<span class="fw-normal ms-1">con transferencia</span>
<!-- Right Column -->
<div class="d-flex flex-column position-relative text-end flex-grow-1 h-100">
<div class="cart-item-prices d-flex flex-column align-items-end">
@if (product.originalPrice) {
<span class="text-decoration-line-through fw-light cart-item-original-price">$ {{ product.originalPrice }}</span>
}
<span class="fw-bold cart-item-discounted-price">$ {{ product.discountedPrice }}</span>
</div>
<div class="cart-item-transfer-price position-absolute top-50 end-0 translate-middle-y w-100">
<span class="fw-bold">${{ product.transferPrice }}</span> con transferencia
</div>
</div>
</div>
</article>
}