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

feat(store-header): enhance immersive header styles and adjust background handling for better visual consistency

Browse Source
This commit is contained in:
ncoronel
2026-09-23 12:04:23 -03:00
parent ed806abb9f
commit 92cc1c0275
4 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,10 +6,6 @@
background-size: cover;
}
.store-layout__header-main {
border-bottom: 1px solid var(--border-color);
}
.store-layout__categories {
height: 3.5rem;
}

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

@@ -8,9 +8,21 @@ app-immersive-store-header {
}
:host(.immersive-shell--compact) {
position: relative;
background-color: #f5f5f5;
background-position: center 42%;
background-size: cover;
background-image: none !important;
&::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--compact-header-background);
background-position: left top, center 42%;
background-size: 100% 100%, cover;
background-repeat: no-repeat;
mask-image: linear-gradient(#000 calc(100% - 12px), transparent calc(100% - 4px));
}
}
.immersive-categories {

5
src/app/core/layout/store-layout/store-header/store-header.component.ts
View File

@@ -24,7 +24,8 @@ export type StoreHeaderType = 'standard' | 'immersive';
styleUrl: './store-header.component.scss',
host: {
'[class.immersive-shell--compact]': 'isCompactImmersive()',
'[style.background-image]': 'compactBackground()',
'[style.background-image]': 'null',
'[style.--compact-header-background]': 'compactBackground()',
},
})
export class StoreHeaderComponent {
@@ -41,7 +42,7 @@ export class StoreHeaderComponent {
if (!this.isCompactImmersive()) return null;
const gradient =
'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 100%)';
'linear-gradient(180deg, rgba(245, 245, 245, 0.72) 0%, rgba(245, 245, 245, 0.88) 58%, #f5f5f5 calc(100% - 4px), #f5f5f5 100%)';
const image = this.backgroundImageUrl();
return image ? `${gradient}, url(${JSON.stringify(image)})` : gradient;
});

1
src/app/features/store/pages/event-detail-page/event-detail-page.component.scss
View File

@@ -44,6 +44,7 @@
.event-detail { grid-template-columns: minmax(0, 1fr); }
.event-detail__sidebar, .event-detail__main, .event-detail__details { grid-column: 1; grid-row: auto; }
.event-detail__main { margin-top: 2rem; }
.event-detail__date-select { width: 100%; }
.event-detail__description, .event-detail__social { margin-top: 1.5rem; }
.event-detail__header { min-height: 0; margin-bottom: 2rem; }
.event-detail__header h1 { font-size: 20px; }