feat: Make entire event banner clickable

- Changed banner from div to anchor tag
- Added hover effect (lift + brightness)
- Easier to click for accessibility
This commit is contained in:
Maciej Pienczyn 2026-01-13 11:07:28 +01:00
parent 85ce81a0ba
commit dfed9ca941

View File

@ -16,6 +16,15 @@
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
}
.event-banner:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
filter: brightness(1.05);
}
.event-banner::before {
@ -53,31 +62,6 @@
margin-bottom: var(--spacing-xs);
}
.event-banner-title a {
color: white;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
transition: var(--transition);
}
.event-banner-title a::after {
content: '→';
font-size: 0.9em;
opacity: 0.7;
transition: var(--transition);
}
.event-banner-title a:hover {
transform: translateX(4px);
}
.event-banner-title a:hover::after {
opacity: 1;
transform: translateX(4px);
}
.event-banner-meta {
font-size: var(--font-size-sm);
opacity: 0.9;
@ -341,11 +325,11 @@
<!-- Event Banner - Ankieta "Kto weźmie udział?" -->
{% if next_event %}
<div class="event-banner">
<a href="{{ url_for('calendar_event', event_id=next_event.id) }}" class="event-banner">
<div class="event-banner-icon">📅</div>
<div class="event-banner-content">
<div class="event-banner-label">Najbliższe wydarzenie Kto weźmie udział?</div>
<div class="event-banner-title"><a href="{{ url_for('calendar_event', event_id=next_event.id) }}">{{ next_event.title }}</a></div>
<div class="event-banner-title">{{ next_event.title }} →</div>
<div class="event-banner-meta">
<span>📆 {{ next_event.event_date.strftime('%d.%m.%Y') }} ({{ ['Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob', 'Nd'][next_event.event_date.weekday()] }})</span>
{% if next_event.time_start %}
@ -361,16 +345,12 @@
</div>
<div class="event-banner-action">
{% if user_registered %}
<a href="{{ url_for('calendar_event', event_id=next_event.id) }}" class="btn-light btn-registered">
✓ Jesteś zapisany/a
</a>
<span class="btn-light btn-registered">✓ Jesteś zapisany/a</span>
{% else %}
<a href="{{ url_for('calendar_event', event_id=next_event.id) }}" class="btn-light">
Zapisz się →
</a>
<span class="btn-light">Zapisz się →</span>
{% endif %}
</div>
</div>
</a>
{% endif %}
<!-- Search Section -->