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

feat: enhance cart layout and styling for improved user experience

This commit is contained in:
ncoronel 2026-07-01 16:56:29 -03:00
parent af406c215a
commit 06d29be056
5 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/layout/store-layout/store-header/store-header.component.html
View File

@ -15,8 +15,8 @@
} }
</div> </div>
<div class="d-flex flex-row align-items-center gap-3 ms-auto store-layout__actions-group"> <div class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap w-100 justify-content-between justify-content-md-end">
<div class="input-group store-layout__search" role="search"> <div class="input-group store-layout__search flex-grow-1" role="search">
<label class="visually-hidden" for="store-search-input">Buscar productos</label> <label class="visually-hidden" for="store-search-input">Buscar productos</label>
<input <input
id="store-search-input" id="store-search-input"

16
src/app/core/layout/store-layout/store-header/store-header.component.scss
View File

@ -42,11 +42,7 @@
.store-layout__search { .store-layout__search {
width: min(100%, 24rem); width: min(100%, 24rem);
min-width: 18rem; min-width: 0;
}
.store-layout__actions-group {
flex-wrap: nowrap;
} }
.store-layout__search-input { .store-layout__search-input {
@ -111,14 +107,4 @@
.store-layout__brand-slot { .store-layout__brand-slot {
min-width: 0; min-width: 0;
} }
.store-layout__actions-group {
width: 100%;
justify-content: space-between;
}
.store-layout__search {
flex: 1 1 auto;
min-width: 0;
}
} }

2
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
View File

@ -225,6 +225,7 @@
</div> </div>
@if (cartVisible) { @if (cartVisible) {
<div class="cart-showcase__viewport">
<app-cart <app-cart
[showClose]="true" [showClose]="true"
[items]="cartMockItems" [items]="cartMockItems"
@ -234,6 +235,7 @@
[backgroundColor]="cartBackgroundColor" [backgroundColor]="cartBackgroundColor"
(closed)="hideCart()" (closed)="hideCart()"
/> />
</div>
} }
</div> </div>
</div> </div>

6
src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
View File

@ -68,6 +68,12 @@ h1 {
justify-items: start; justify-items: start;
} }
.cart-showcase__viewport {
width: 100%;
max-width: 370px;
height: 360px;
}
.cart-showcase__header { .cart-showcase__header {
width: 100%; width: 100%;
display: flex; display: flex;

6
src/app/shared/components/cart/cart.component.scss
View File

@ -2,12 +2,14 @@
display: block; display: block;
width: 100%; width: 100%;
max-width: 370px; max-width: 370px;
height: 100%;
} }
.cart { .cart {
display: grid; display: grid;
gap: 0.75rem; grid-template-rows: auto minmax(0, 1fr) auto;
width: 100%; width: 100%;
height: 100%;
color: #666666; color: #666666;
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
@ -48,7 +50,7 @@
&__items { &__items {
display: grid; display: grid;
gap: 8px; gap: 8px;
max-height: 254px; min-height: 0;
padding: 0 0 0 24px; padding: 0 0 0 24px;
overflow-y: auto; overflow-y: auto;
scrollbar-color: #d5d5d5 transparent; scrollbar-color: #d5d5d5 transparent;