Skip to content

Commit 68ecb75

Browse files
jetzlstorferjetzlstorfer
authored
Merge pull request #102 from CloudNativeLinz/feature/new-event-overview
Refactor event display to use a modern grid layout with enhanced styling and accessibility improvements
2 parents 0a6d029 + 0a4242e commit 68ecb75

File tree

3 files changed

+627
-38
lines changed

3 files changed

+627
-38
lines changed

‎_includes/upcoming-events.html‎

Lines changed: 126 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,136 @@
1111

1212
{% if upcoming_events %}
1313
## Upcoming events
14-
<table width="100%" style="border: 5px solid #ccc; border-collapse: collapse;">
15-
{% assign today = site.time | date: "%Y-%m-%d" %}
16-
{% for event in site.data.events %}
17-
{% assign event_date = event.date | date: "%Y-%m-%d" %}
18-
{% if event_date >= today %}
19-
<tr {% if event_date == today %}class="today-event"{% endif %}>
20-
<td>
14+
15+
<div class="events-grid">
16+
{% for event in site.data.events %}
17+
{% assign event_date = event.date | date: "%Y-%m-%d" %}
18+
{% assign today = site.time | date: "%Y-%m-%d" %}
19+
20+
{% if event_date >= today %}
21+
<article class="event-card" data-event-id="{{ event.id }}">
22+
<div class="event-banner">
23+
<img src="https://raw.githubusercontent.com/CloudNativeLinz/go-image-generator/main/artifacts/{{ event.id }}.jpg"
24+
alt="{{ event.title }}"
25+
loading="lazy"
26+
onerror="this.src='https://via.placeholder.com/400x200/1f2937/ffffff?text=Event+{{ event.id }}'"
27+
/>
28+
<div class="event-overlay">
29+
<div class="event-date">
2130
{% if event_date == today %}
22-
<span class="label">TODAY</span>
31+
<span class="today-badge">TODAY</span>
2332
{% else %}
24-
<span class="label">{{ event.date }}</span>
33+
{{ event.date | date: "%b %d, %Y" }}
2534
{% endif %}
26-
{% if event.host != nil and event.host != "" %}
27-
<span class="label">hosted by {{ event.host }}</span>
35+
</div>
36+
{% if event.host != nil and event.host != "" %}
37+
<div class="event-host">📍 {{ event.host }}</div>
38+
{% endif %}
39+
</div>
40+
</div>
41+
42+
<div class="event-content">
43+
<h3 class="event-title">
44+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">{{ event.title }}</a>
45+
</h3>
46+
47+
{% if event.talks %}
48+
<div class="event-talks">
49+
{% for talk in event.talks limit:2 %}
50+
<div class="talk-item">
51+
<div class="talk-title">{{ talk.title }}</div>
52+
<div class="talk-speaker">
53+
<span class="emoji" style="font-style: normal;">👨‍💻</span>
54+
<span class="talk-speaker-name">{{ talk.speaker }}</span><br>
55+
{% if talk.file %}
56+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">
57+
📎 Get the slides
58+
</a>
59+
{% endif %}
60+
{% if talk.recording %}
61+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">
62+
📺 Watch the recording
63+
</a>
64+
{% endif %}
65+
</div>
66+
</div>
67+
{% endfor %}
68+
{% if event.talks.size > 2 %}
69+
<div class="talk-item more-talks">
70+
<div class="talk-title">+{{ event.talks.size | minus: 2 }} more talk{% if event.talks.size > 3 %}s{% endif %}</div>
71+
</div>
2872
{% endif %}
29-
{% if event.event_link == nil or event.event_link == "" %}
30-
<span class="label">registration not yet open</span>
31-
{% endif %}
32-
<br />
33-
<strong><a href="/events/{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">{{ event.title }}</a></strong>
73+
</div>
74+
{% endif %}
75+
76+
<div class="event-meta">
77+
{% if event.participants != "" %}
78+
<span class="meta-item">
79+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
80+
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
81+
</svg>
82+
{{ event.participants }} cloud-natives participated
83+
</span>
84+
{% else %}
85+
<span class="meta-item">
86+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
87+
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
88+
</svg>
89+
Please don't forget to RSVP :)
90+
</span>
91+
{% endif %}
92+
93+
<a class="meta-link" href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">Event details</a>
3494

95+
{% if event.event_link and event.event_link != "" %}
96+
<a href="{{ event.event_link }}" class="meta-link" target="_blank" rel="noopener">
97+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
98+
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"/>
99+
</svg>
100+
RSVP and join this awesome event!
101+
</a>
102+
{% else %}
103+
<span class="meta-item">
104+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
105+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
106+
</svg>
107+
Registration opening soon
108+
</span>
109+
{% endif %}
110+
</div>
111+
</div>
112+
</article>
113+
{% endif %}
114+
{% endfor %}
115+
</div>
35116

36-
</td>
37-
</tr>
38-
{% endif %}
39-
{% endfor %}
40-
</table>
117+
<script>
118+
// Add intersection observer for scroll animations (upcoming events)
119+
if ('IntersectionObserver' in window) {
120+
const upcomingCards = document.querySelectorAll('.event-card');
121+
const upcomingObserver = new IntersectionObserver((entries) => {
122+
entries.forEach((entry, index) => {
123+
if (entry.isIntersecting) {
124+
setTimeout(() => {
125+
entry.target.style.opacity = '1';
126+
entry.target.style.transform = 'translateY(0)';
127+
}, index * 100);
128+
upcomingObserver.unobserve(entry.target);
129+
}
130+
});
131+
}, {
132+
threshold: 0.1,
133+
rootMargin: '50px'
134+
});
135+
136+
upcomingCards.forEach((card) => {
137+
if (!card.style.opacity) { // Only apply if not already set by past events script
138+
card.style.opacity = '0';
139+
card.style.transform = 'translateY(30px)';
140+
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
141+
upcomingObserver.observe(card);
142+
}
143+
});
144+
}
145+
</script>
41146
{% endif %}

‎_pages/events.md‎

Lines changed: 104 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,119 @@ permalink: events/
88

99
## Past Events
1010

11-
<table width="100%" style="border: 5px solid #ccc; border-collapse: collapse;">
11+
<div class="events-grid">
1212
{% for event in site.data.events reversed %}
13-
1413
{% assign event_date = event.date | date: "%Y-%m-%d" %}
1514
{% assign today = site.time | date: "%Y-%m-%d" %}
1615

1716
{% if event_date < today %}
18-
19-
20-
<tr>
21-
<td>
17+
<article class="event-card" data-event-id="{{ event.id }}">
18+
<div class="event-banner">
19+
<img src="https://raw.githubusercontent.com/CloudNativeLinz/go-image-generator/main/artifacts/{{ event.id }}.jpg"
20+
alt="{{ event.title }}"
21+
loading="lazy"
22+
onerror="this.src='https://via.placeholder.com/400x200/1f2937/ffffff?text=Event+{{ event.id }}'"
23+
/>
24+
<div class="event-overlay">
25+
<div class="event-date">
2226
{% if event_date == today %}
23-
<span class="today-label">TODAY</span>
27+
<span class="today-badge">TODAY</span>
2428
{% else %}
25-
<span class="label">{{ event.date }}</span>
29+
{{ event.date | date: "%b %d, %Y" }}
2630
{% endif %}
27-
{% if event.host != nil and event.host != "" %}
28-
<span class="label">hosted by {{ event.host }}</span>
31+
</div>
32+
{% if event.host != nil and event.host != "" %}
33+
<div class="event-host">📍 {{ event.host }}</div>
34+
{% endif %}
35+
</div>
36+
</div>
37+
38+
<div class="event-content">
39+
<h3 class="event-title">
40+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">{{ event.title }}</a>
41+
</h3>
42+
43+
{% if event.talks %}
44+
<div class="event-talks">
45+
{% for talk in event.talks limit:2 %}
46+
<div class="talk-item">
47+
<div class="talk-title">{{ talk.title }}</div>
48+
<div class="talk-speaker">
49+
<span class="emoji" style="font-style: normal;">👨‍💻</span>
50+
<span class="talk-speaker-name">{{ talk.speaker }}</span><br>
51+
{% if talk.file %}
52+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">
53+
📎 Get the slides
54+
</a>
55+
{% endif %}
56+
{% if talk.recording %}
57+
<a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">
58+
📺 Watch the recording
59+
</a>
60+
{% endif %}
61+
</div>
62+
</div>
63+
{% endfor %}
64+
{% if event.talks.size > 2 %}
65+
<div class="talk-item more-talks">
66+
<div class="talk-title">+{{ event.talks.size | minus: 2 }} more talk{% if event.talks.size > 3 %}s{% endif %}</div>
67+
</div>
2968
{% endif %}
30-
<br>
31-
<strong><a href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">{{ event.title }}</a></strong>
32-
</td>
33-
</tr>
69+
</div>
70+
{% endif %}
71+
72+
<div class="event-meta">
73+
{% if event.participants != "" %}
74+
<span class="meta-item">
75+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
76+
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
77+
</svg>
78+
{{ event.participants }} cloud-natives participated
79+
</span>
80+
{% endif %}
81+
82+
<a class="meta-link" href="{{ event.title | datapage_url: 'meetup' | remove: '.html' }}">Event details</a>
3483

3584

36-
{% endif %}
37-
85+
{% if event.event_link %}
86+
<a href="{{ event.event_link }}" class="meta-link" target="_blank" rel="noopener">
87+
<svg class="icon" viewBox="0 0 20 20" fill="currentColor">
88+
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd"/>
89+
</svg>
90+
View on Meetup.com
91+
</a>
92+
{% endif %}
93+
</div>
94+
</div>
95+
</article>
96+
{% endif %}
3897
{% endfor %}
39-
</table>
98+
</div>
99+
100+
<script>
101+
// Add intersection observer for scroll animations
102+
if ('IntersectionObserver' in window) {
103+
const cards = document.querySelectorAll('.event-card');
104+
const observer = new IntersectionObserver((entries) => {
105+
entries.forEach((entry, index) => {
106+
if (entry.isIntersecting) {
107+
setTimeout(() => {
108+
entry.target.style.opacity = '1';
109+
entry.target.style.transform = 'translateY(0)';
110+
}, index * 100);
111+
observer.unobserve(entry.target);
112+
}
113+
});
114+
}, {
115+
threshold: 0.1,
116+
rootMargin: '50px'
117+
});
118+
119+
cards.forEach((card) => {
120+
card.style.opacity = '0';
121+
card.style.transform = 'translateY(30px)';
122+
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
123+
observer.observe(card);
124+
});
125+
}
126+
</script>

0 commit comments

Comments
 (0)