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

feat: enhance hero banner component with event schedule toggle and styling improvements

Browse Source
This commit is contained in:
ncoronel
2026-08-11 08:50:32 -03:00
parent f6f3a997f7
commit c75787a59c
5 changed files with 260 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,15 @@
<div class="hero-banner-container">
<div
class="hero-banner position-relative rounded"
>
<div class="hero-banner position-relative rounded">
<div
class="hero-media"
aria-hidden="true"
[ngStyle]="{'background-image': heroConfig?.background_image_id ? 'url(' + heroConfig.background_image_id + ')' : 'none'}"
[ngStyle]="{
'background-image': heroConfig?.background_image_id
? 'url(' + heroConfig.background_image_id + ')'
: '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"
@@ -20,7 +22,10 @@
<div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
}
@if (heroConfig.button_text) {
<a [href]="heroConfig.button_href || '#'" class="hero-action 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>
@@ -29,37 +34,78 @@
</div>
</div>
}
@if (eventConfig) {
<div class="event-card-container position-absolute w-100 d-flex justify-content-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>
}
<div
class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
>
@if (eventConfig.dates && eventConfig.dates.length > 0) {
<div class="d-flex align-items-center gap-2">
<i class="fa-regular fa-calendar event-icon"></i>
<span class="event-info-text">{{ formattedDates }}</span>
</div>
}
@if (eventConfig.location) {
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-location-dot event-icon"></i>
<span class="event-info-text">{{ eventConfig.location }}</span>
</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>
}
</div>
@if (eventConfig) {
<div class="event-card-container w-100 d-flex justify-content-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>
}
<div
class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted"
>
@if (eventConfig.dates && eventConfig.dates.length > 0) {
<div class="d-flex align-items-center gap-2">
<i class="fa-regular fa-calendar event-icon"></i>
<span class="event-info-text">{{ formattedDates }}</span>
</div>
}
@if (eventConfig.location) {
<div class="d-flex align-items-center gap-2">
<i class="fa-solid fa-location-dot event-icon"></i>
<span class="event-info-text">{{ eventConfig.location }}</span>
</div>
}
</div>
@if (eventConfig.dates && eventConfig.dates.length > 0) {
<button
type="button"
class="event-schedule-toggle"
[attr.aria-expanded]="schedulesExpanded"
aria-controls="event-schedules"
(click)="toggleSchedules()"
>
<i
class="fa-solid"
[class.fa-chevron-down]="!schedulesExpanded"
[class.fa-chevron-up]="schedulesExpanded"
aria-hidden="true"
></i>
<span>{{ schedulesExpanded ? 'Ocultar horarios' : 'Ver horarios' }}</span>
</button>
@if (schedulesExpanded) {
<div id="event-schedules" class="event-schedules">
<table class="table table-striped table-borderless mb-0">
<tbody>
@for (eventDate of eventConfig.dates; track eventDate.id ?? eventDate.date) {
<tr>
<td>
<span class="event-schedule-value">
<i class="fa-regular fa-calendar" aria-hidden="true"></i>
<span>{{ formatScheduleDate(eventDate.date) }}</span>
</span>
</td>
<td>
<span class="event-schedule-value">
<i class="fa-regular fa-clock" aria-hidden="true"></i>
<span>
{{ formatScheduleTime(eventDate.start_time) }} -
{{ formatScheduleTime(eventDate.end_time) }}
</span>
</span>
</td>
</tr>
}
</tbody>
</table>
</div>
}
}
</div>
</div>
}
</div>