From 9ba3b24b7e90e81e17e450df1d812427a59f6f67 Mon Sep 17 00:00:00 2001 From: ncoronel Date: Wed, 23 Sep 2026 11:39:36 -0300 Subject: [PATCH] feat(store-header): enhance search functionality and improve mobile layout with new styles --- .../immersive-store-header.component.html | 35 +++++- .../immersive-store-header.component.scss | 111 +++++++++++++++++- .../immersive-store-header.component.ts | 23 +++- .../store-header/store-header.component.html | 2 +- .../store-header/store-header.component.scss | 19 --- .../event-detail-page.component.scss | 5 + .../components/button/button.component.scss | 6 + .../counter-to/counter-to.component.scss | 2 +- 8 files changed, 173 insertions(+), 30 deletions(-) diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html index 809cb17..51e8d0b 100644 --- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html +++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.html @@ -31,7 +31,13 @@
@if (displaySearchBar()) { -
@@ -118,7 +144,6 @@ ariaLabel="Imágenes del evento" /> } - } diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss index 4c18f43..08fa76b 100644 --- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss +++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.scss @@ -159,10 +159,104 @@ } .immersive-header--compact { - min-height: 0; - padding-bottom: 1.5rem; + min-height: 115px; color: #666666; background: transparent; + + .immersive-header__content { + padding: 35px 0 36px; + } + + .immersive-header__nav { + flex-wrap: nowrap; + gap: 0.75rem; + padding-inline: 8vw !important; + min-height: 44px; + } + + .immersive-header__brand img { + width: clamp(92px, 24vw, 145px); + } + + .immersive-header__actions { + flex: 0 1 auto; + gap: 0.375rem; + } + + .immersive-header__search { + position: absolute; + top: calc(100% + 0.5rem); + right: 8vw; + width: min(320px, 84vw); + padding: 0.75rem; + border-radius: 6px; + background: #f5f5f5; + box-shadow: 0 4px 16px #0002; + } + + .immersive-header__search-error { + position: static; + display: block; + margin-top: 0.25rem; + } +} + +.immersive-header__search-toggle { + display: inline-flex; + flex: none; + align-items: center; + justify-content: center; + width: 32px; + height: 44px; + padding: 0; + border: 0; + border-radius: 4px; + background: transparent; + color: #888; + font-size: 20px; + + &:focus-visible { + outline: 2px solid var(--tenant-primary); + outline-offset: 2px; + } +} + +.immersive-header__guest-menu { + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + min-width: 180px; + padding: 0.5rem; + border-radius: 6px; + background: #fff; + box-shadow: 0 4px 16px #0002; + + button { + width: 100%; + padding: 0.75rem; + border: 0; + background: transparent; + color: #666; + text-align: left; + } +} + +:host ::ng-deep .immersive-header--compact { + .immersive-header__tickets { + flex: none; + width: auto; + + .btn { + min-width: 120px; + white-space: nowrap; + } + } + + .immersive-header__account .icon-btn { + width: 32px; + height: 44px; + color: #888; + } } .immersive-header--compact .immersive-header__backdrop { display: none; @@ -170,7 +264,18 @@ :host ::ng-deep .immersive-header--compact .immersive-header__actions .icon-btn, :host ::ng-deep .immersive-header--compact .immersive-header__actions .cart-icon { - color: #666666; + color: #888; +} + +@media (max-width: 359.98px) { + .immersive-header--compact .immersive-header__nav { + padding-inline: 1rem !important; + gap: 0.375rem; + } + + .immersive-header--compact .immersive-header__actions { + gap: 0.125rem; + } } @media (max-width: 600px) { diff --git a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts index d5e757e..ea5e032 100644 --- a/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts +++ b/src/app/core/layout/store-layout/store-header/immersive-store-header.component.ts @@ -7,6 +7,8 @@ import { input, output, signal, + afterRenderEffect, + viewChild, } from '@angular/core'; import { RouterLink } from '@angular/router'; import { AuthUser } from '../../../services/auth/auth.interfaces'; @@ -59,6 +61,20 @@ export class ImmersiveStoreHeaderComponent { protected searchTerm = ''; protected readonly showSearchError = signal(false); protected readonly isUserDropdownOpen = signal(false); + protected readonly isSearchOpen = signal(false); + private readonly searchInput = viewChild(InputComponent); + private readonly searchToggle = viewChild>('searchToggle'); + + constructor() { + afterRenderEffect(() => { + if (this.isSearchOpen()) this.searchInput()?.focus(); + }); + } + + protected toggleSearch(): void { + this.isUserDropdownOpen.set(false); + this.isSearchOpen.update((open) => !open); + } protected readonly checkoutRemainingTime = computed(() => { const seconds = this.checkoutRemainingSeconds(); if (seconds === null) return null; @@ -76,11 +92,13 @@ export class ImmersiveStoreHeaderComponent { return; } this.showSearchError.set(false); + this.isSearchOpen.set(false); this.searchSubmit.emit(term); } protected toggleUserDropdown(): void { - if (!this.isAuthenticated()) { + this.isSearchOpen.set(false); + if (this.showHero() && !this.isAuthenticated()) { this.loginClick.emit(); return; } @@ -100,11 +118,14 @@ export class ImmersiveStoreHeaderComponent { protected onDocumentClick(event: MouseEvent): void { if (event.target instanceof Node && !this.host.nativeElement.contains(event.target)) { this.isUserDropdownOpen.set(false); + this.isSearchOpen.set(false); } } @HostListener('document:keydown.escape') protected onEscapeKey(): void { + if (this.isSearchOpen()) this.searchToggle()?.nativeElement.focus(); + this.isSearchOpen.set(false); this.isUserDropdownOpen.set(false); } } diff --git a/src/app/core/layout/store-layout/store-header/store-header.component.html b/src/app/core/layout/store-layout/store-header/store-header.component.html index 3446530..26b42a1 100644 --- a/src/app/core/layout/store-layout/store-header/store-header.component.html +++ b/src/app/core/layout/store-layout/store-header/store-header.component.html @@ -21,7 +21,7 @@ (logoutClick)="logoutClick.emit()" (searchSubmit)="searchSubmit.emit($event)" > - @if (displayCategories() && categories().length) { + @if (showHero() && displayCategories() && categories().length) {