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

feat: improve hero banner responsiveness and enhance event card layout

Browse Source
This commit is contained in:
ncoronel
2026-08-05 16:16:46 -03:00
parent 21786d7b34
commit 5da341dde2
2 changed files with 157 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/shared/components/hero-banner/hero-banner.component.html
View File

@@ -1,8 +1,12 @@
<div class="hero-banner-container">
<div
class="hero-banner position-relative rounded"
[ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
<div
class="hero-banner position-relative rounded"
>
<div
class="hero-media"
aria-hidden="true"
[ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
></div>
@if (heroConfig) {
<div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
@@ -14,7 +18,7 @@
<div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
}
@if (heroConfig.button_text) {
<a [href]="heroConfig.button_href || '#'" class="text-decoration-none mt-3 d-inline-block">
<a [href]="heroConfig.button_href || '#'" class="hero-action text-decoration-none mt-3 d-inline-block">
<app-button variant="primary">
{{ heroConfig.button_text }}
</app-button>
@@ -26,7 +30,7 @@
@if (eventConfig) {
<div class="event-card-container position-absolute w-100 d-flex justify-content-center">
<div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
<div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
@if (eventConfig.title) {
<h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
}
@@ -45,6 +49,11 @@
</div>
}
</div>
<div class="event-schedule-label" aria-hidden="true">
<i class="fa-solid fa-chevron-down"></i>
<span>Ver horarios</span>
</div>
</div>
</div>
}

163
src/app/shared/components/hero-banner/hero-banner.component.scss
View File

@@ -5,22 +5,25 @@
.hero-banner {
background-color: #e9ecef;
background-size: cover;
background-position: center;
min-height: 400px;
display: flex;
flex-direction: column;
}
&::before {
.hero-media {
position: absolute;
inset: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: inherit;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
border-radius: inherit;
z-index: 1;
}
}
@@ -85,27 +88,147 @@
font-weight: 500;
}
@media (max-width: 768px) {
.hero-banner::before {
background: none;
.event-schedule-label {
display: none;
}
@media (max-width: 767.98px) {
.hero-banner-container {
padding-bottom: 0;
margin-bottom: 0;
}
.hero-banner {
min-height: 0;
overflow: hidden;
background-color: #f5f5f5;
}
.hero-media {
position: relative;
inset: auto;
flex: 0 0 auto;
width: 100%;
height: clamp(8.75rem, 44vw, 10.5rem);
background-position: center center;
background-size: 140% auto;
border-radius: 0;
}
.hero-media::after {
top: auto;
height: 48%;
background: linear-gradient(
to bottom,
rgba(245, 245, 245, 0) 0%,
rgba(245, 245, 245, 0.78) 55%,
#f5f5f5 100%
);
border-radius: 0;
}
.hero-content {
justify-content: center !important;
background: none;
height: auto !important;
min-height: 8.25rem;
margin-top: -1.7rem;
padding: 0 1.25rem 1.75rem !important;
align-items: flex-start !important;
}
.hero-text-box {
width: 100%;
max-width: 19rem;
padding: 0;
text-align: center;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
background: transparent;
border-radius: 0;
}
::ng-deep .hero-title,
.hero-title {
margin-bottom: 0.4rem;
font-size: 0.875rem;
line-height: 1.2;
}
::ng-deep .hero-title p,
::ng-deep .hero-description p {
margin-bottom: 0;
}
::ng-deep .hero-description,
.hero-description {
font-size: 0.75rem;
line-height: 1.25;
}
.hero-action {
margin-top: 1rem !important;
}
.hero-action ::ng-deep .btn {
min-height: 1.875rem;
padding: 0.4rem 1.35rem;
border-radius: 0.25rem;
font-size: 0.625rem;
}
.event-card-container {
bottom: -80px;
position: relative !important;
bottom: auto;
left: auto;
padding: 0 1.25rem 1.2rem;
}
.hero-banner-container {
padding-bottom: 6rem;
.event-card {
width: 100%;
max-width: 22rem;
min-height: 11.4rem;
padding: 1.75rem 1rem 0.8rem !important;
border-radius: 0 !important;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04) !important;
}
.event-title {
max-width: 16rem;
margin: 0 auto 0.85rem !important;
font-size: 1rem;
line-height: 1.1;
letter-spacing: 0;
}
.event-details {
gap: 0.45rem !important;
font-size: 0.7rem;
line-height: 1.25;
}
.event-details > div {
gap: 0.5rem !important;
}
.event-icon {
width: 0.9rem;
font-size: 0.85rem;
}
.event-info-text {
font-weight: 400;
}
.event-schedule-label {
display: flex;
justify-content: center;
align-items: center;
gap: 0.55rem;
margin-top: 1.9rem;
color: var(--tenant-primary, #009d4f);
font-size: 0.625rem;
font-weight: 700;
}
.event-schedule-label i {
font-size: 0.65rem;
}
}