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

feat: enhance product vertical card with variant selection and improve store header responsiveness

Browse Source
This commit is contained in:
ncoronel
2026-08-05 16:48:34 -03:00
parent 5da341dde2
commit c9f9e6cc3e
10 changed files with 362 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<div class="store-layout__header-main">
<div class="container-xl px-3 px-md-4 py-3 py-lg-4">
<div class="row align-items-center gy-3 gy-md-0">
<div class="col-auto col-md-auto order-1">
<div class="col-auto col-md-auto order-1 store-layout__brand-column">
<a
routerLink="/"
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 text-decoration-none"
@@ -24,7 +24,7 @@
</div>
<div class="col-12 col-md order-4 order-md-2">
<div class="store-layout__search-wrapper w-100 ms-md-auto me-md-3">
<div class="store-layout__search-wrapper ms-md-auto">
<div class="input-group store-layout__search" role="search">
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
<input
@@ -58,7 +58,7 @@
</div>
</div>
<div class="col-auto col-md-auto order-2 order-md-3 ms-auto d-flex flex-row align-items-center justify-content-end gap-2 gap-md-3">
<div class="store-layout__actions-column col-auto col-md-auto order-2 order-md-3 ms-auto d-flex flex-row align-items-center justify-content-end gap-2 gap-md-3">
@if (ticketsMenu(); as menu) {
<app-button
variant="primary"

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

@@ -12,6 +12,10 @@
min-width: 150px;
}
.store-layout__brand-column {
max-width: 12rem;
}
.store-layout__brand-logo-shell {
position: relative;
width: min(100%, 12rem);
@@ -49,6 +53,15 @@
.store-layout__search-wrapper {
width: min(100%, 260px);
}
.store-layout__actions-column {
padding-left: 0;
}
::ng-deep .store-layout__tickets-btn-host {
flex: 0 0 clamp(8rem, 15vw, 13.5rem);
width: clamp(8rem, 15vw, 13.5rem);
}
}
.store-layout__search {
@@ -145,13 +158,6 @@
max-width: 150px;
}
.store-layout__tickets-btn-host {
::ng-deep .btn {
min-width: 0 !important;
padding-inline: 1rem;
}
}
.store-layout__mobile-separator {
border-color: #DDDDDD;
opacity: 1;
@@ -159,6 +165,34 @@
}
}
@media (max-width: 399.98px) {
.store-layout__brand-column {
flex: 1 1 0;
width: auto;
min-width: 0;
max-width: none;
padding-right: 0.25rem;
}
.store-layout__brand-slot {
width: 100%;
max-width: 6.5rem;
}
.store-layout__actions-column {
flex: 0 0 auto;
width: auto;
margin-left: 0 !important;
padding-left: 0.25rem;
gap: 0.25rem !important;
}
::ng-deep .store-layout__tickets-btn-host .btn {
padding-inline: 0.75rem;
font-size: 0.875rem;
}
}
.store-layout__mobile-dropdown-menu {
top: 100%;
min-width: 220px;