Skip to content

Commit 5724efc

Browse files
canyon289canyon289
authored
Merge pull request #133 from purna135/fix_events
Distinguish past events from future events more clearly
2 parents 4f1c11e + e12a58b commit 5724efc

File tree

2 files changed

+152
-104
lines changed

2 files changed

+152
-104
lines changed

‎layouts/_default/events.html‎

Lines changed: 143 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -30,79 +30,146 @@ <h1>{{.Params.Title}}</h1>
3030
{{ $events := .Site.Data.events }}
3131
<!-- check if there is any event present or not -->
3232
{{ if $events }}
33-
<div class="container events__container">
34-
<div class="event__cards">
35-
<h2 id="all_events">All Events</h2>
36-
<h2 id="upcoming_events">Upcoming Events</h2>
37-
<h2 id="past_events">Past Events</h2>
38-
39-
{{ $events := sort $events.event "eventOrder" "desc" }}
40-
{{ range $event := $events }}
41-
<article class="event__card {{ $event.eventType }}">
42-
<div class="event__header">
43-
<div class="event__wrapper">
44-
<h4>{{ $event.dataTime | markdownify | emojify }}</h4>
45-
<h3>{{ $event.title | markdownify | emojify }}</h3>
46-
<em>{{ $event.subtitle | markdownify | emojify }}</em><br>
47-
<span><i class="uil uil-map-marker"></i>{{ $event.place | markdownify | emojify }}</span>
48-
</div>
49-
{{ with $event.bannerImgPath }}
50-
<img src="{{ $event.bannerImgPath }}" alt="">
33+
{{ $events := sort $events.event "eventOrder" "desc" }}
34+
<div class="container events__container">
35+
<div class="event__cards">
36+
<div class="upcoming_events" id="upcoming_events">
37+
<h2>Upcoming Events</h2>
38+
{{ $upcoming_events := where $events "eventType" "upcoming"}}
39+
{{ if $upcoming_events }}
40+
{{ range $event := $upcoming_events }}
41+
<article class="event__card {{ $event.eventType }}">
42+
<div class="event__header">
43+
<div class="event__wrapper">
44+
<h4>{{ $event.dataTime | markdownify | emojify }}</h4>
45+
<h3>{{ $event.title | markdownify | emojify }}</h3>
46+
<em>{{ $event.subtitle | markdownify | emojify }}</em><br>
47+
<span><i class="uil uil-map-marker"></i>{{ $event.place | markdownify | emojify }}</span>
48+
</div>
49+
{{ with $event.bannerImgPath }}
50+
<img src="{{ $event.bannerImgPath }}" alt="">
51+
{{ end }}
52+
</div>
53+
<div class="event__details">
54+
<div class="event__summary">
55+
<p>{{ $event.description | markdownify | emojify }}</p>
56+
</div>
57+
<button class="readmore__btn">
58+
<span class="readmore-txt"> ....read more</span>
59+
<span class="readless-txt">Read Less</span>
60+
</button>
61+
</div>
62+
<div class="event__card__bottom">
63+
<div class="speaker__info">
64+
{{ with $event.speakerSocialLink }} <a href="{{ $event.speakerSocialLink }}" target="_blank"> {{ end }}
65+
{{ if $event.speakerImgPath }}
66+
<img src="{{ $event.speakerImgPath }}" alt="">
67+
{{ else }}
68+
<img src="/images/speakers/speaker_icon.png" alt="">
69+
{{ end }}
70+
<em>{{ $event.speakerName | markdownify | emojify }}</em>
71+
{{ with $event.speakerSocialLink }} </a> {{ end }}
72+
</div>
73+
74+
{{ with $event.meetupLink }}
75+
<a href="{{ $event.meetupLink }}" target="_blank" class="btn event__btn"> Register Now </a>
76+
{{ end }}
77+
78+
{{ with $event.video1SocialLink }}
79+
<a href="{{ $event.video1SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video1Name }} </a>
80+
{{ end }}
81+
82+
{{ with $event.video2SocialLink }}
83+
<a href="{{ $event.video2SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video2Name }} </a>
84+
{{ end }}
85+
86+
{{ with $event.video3SocialLink }}
87+
<a href="{{ $event.video3SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video3Name }} </a>
88+
{{ end }}
89+
90+
{{ with $event.readMoreURL }}
91+
<a href="{{ $event.readMoreURL }}" target="_blank" class="btn event__btn"> Discourse Post </a>
92+
{{ end }}
93+
</div>
94+
</article>
5195
{{ end }}
52-
</div>
53-
<div class="event__details">
54-
<div class="event__summary">
55-
<p>{{ $event.description | markdownify | emojify }}</p>
56-
</div>
57-
<button class="readmore__btn">
58-
<span class="readmore-txt"> ....read more</span>
59-
<span class="readless-txt">Read Less</span>
60-
</button>
61-
</div>
62-
<div class="event__card__bottom">
63-
<div class="speaker__info">
64-
{{ with $event.speakerSocialLink }} <a href="{{ $event.speakerSocialLink }}" target="_blank"> {{ end }}
65-
{{ if $event.speakerImgPath }}
66-
<img src="{{ $event.speakerImgPath }}" alt="">
67-
{{ else }}
68-
<img src="/images/speakers/speaker_icon.png" alt="">
69-
{{ end }}
70-
<em>{{ $event.speakerName | markdownify | emojify }}</em>
71-
{{ with $event.speakerSocialLink }} </a> {{ end }}
96+
{{else}}
97+
<div class="no-events">
98+
<p>Coming Soon: Stay tuned for updates on upcoming events 🔔</p>
7299
</div>
73-
74-
{{ if eq $event.eventType "upcoming"}}
75-
{{ with $event.meetupLink }}
76-
<a href="{{ $event.meetupLink }}" target="_blank" class="btn event__btn"> Register Now </a>
77-
{{ end }}
78-
{{ end }}
79-
80-
{{ with $event.video1SocialLink }}
81-
<a href="{{ $event.video1SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video1Name }} </a>
82-
{{ end }}
83-
84-
{{ with $event.video2SocialLink }}
85-
<a href="{{ $event.video2SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video2Name }} </a>
86-
{{ end }}
87-
88-
{{ with $event.video3SocialLink }}
89-
<a href="{{ $event.video3SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video3Name }} </a>
100+
{{ end }}
101+
</div>
102+
103+
<div class="past_events" id="past_events">
104+
<h2>Past Events</h2>
105+
{{ $past_events := where $events "eventType" "past"}}
106+
{{ if $past_events }}
107+
{{ range $event := $past_events }}
108+
<article class="event__card {{ $event.eventType }}">
109+
<div class="event__header">
110+
<div class="event__wrapper">
111+
<h4>{{ $event.dataTime | markdownify | emojify }}</h4>
112+
<h3>{{ $event.title | markdownify | emojify }}</h3>
113+
<em>{{ $event.subtitle | markdownify | emojify }}</em><br>
114+
<span><i class="uil uil-map-marker"></i>{{ $event.place | markdownify | emojify }}</span>
115+
</div>
116+
{{ with $event.bannerImgPath }}
117+
<img src="{{ $event.bannerImgPath }}" alt="">
118+
{{ end }}
119+
</div>
120+
<div class="event__details">
121+
<div class="event__summary">
122+
<p>{{ $event.description | markdownify | emojify }}</p>
123+
</div>
124+
<button class="readmore__btn">
125+
<span class="readmore-txt"> ....read more</span>
126+
<span class="readless-txt">Read Less</span>
127+
</button>
128+
</div>
129+
<div class="event__card__bottom">
130+
<div class="speaker__info">
131+
{{ with $event.speakerSocialLink }} <a href="{{ $event.speakerSocialLink }}" target="_blank"> {{ end }}
132+
{{ if $event.speakerImgPath }}
133+
<img src="{{ $event.speakerImgPath }}" alt="">
134+
{{ else }}
135+
<img src="/images/speakers/speaker_icon.png" alt="">
136+
{{ end }}
137+
<em>{{ $event.speakerName | markdownify | emojify }}</em>
138+
{{ with $event.speakerSocialLink }} </a> {{ end }}
139+
</div>
140+
141+
{{ with $event.video1SocialLink }}
142+
<a href="{{ $event.video1SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video1Name }} </a>
143+
{{ end }}
144+
145+
{{ with $event.video2SocialLink }}
146+
<a href="{{ $event.video2SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video2Name }} </a>
147+
{{ end }}
148+
149+
{{ with $event.video3SocialLink }}
150+
<a href="{{ $event.video3SocialLink }}" target="_blank" class="btn event__btn"> {{ $event.video3Name }} </a>
151+
{{ end }}
152+
153+
{{ with $event.readMoreURL }}
154+
<a href="{{ $event.readMoreURL }}" target="_blank" class="btn event__btn"> Discourse Post </a>
155+
{{ end }}
156+
</div>
157+
</article>
90158
{{ end }}
159+
{{ else }}
160+
<div class="no-events">
161+
<p>🚫 No Past events yet</p>
162+
</div>
163+
{{ end }}
164+
</div>
165+
</div>
91166

92-
{{ with $event.readMoreURL }}
93-
<a href="{{ $event.readMoreURL }}" target="_blank" class="btn event__btn"> Discourse Post </a>
94-
{{ end }}
95-
</div>
96-
</article>
97-
{{ end }}
98-
</div>
99-
100-
<div class="events_btn_container" id="eventBtnContainer">
101-
<button class="active" onclick="filterSelection('all'); scrollToEventView();">All Events</button>
102-
<button class="" onclick="filterSelection('upcoming'); scrollToEventView();">Upcoming Events</button>
103-
<button class="" onclick="filterSelection('past'); scrollToEventView();">Past Events</button>
167+
<div class="events_btn_container" id="eventBtnContainer">
168+
<button class="active" onclick="filterSelection('all'); scrollToEventView();">All Events</button>
169+
<button class="" onclick="filterSelection('upcoming'); scrollToEventView();">Upcoming Events</button>
170+
<button class="" onclick="filterSelection('past'); scrollToEventView();">Past Events</button>
171+
</div>
104172
</div>
105-
</div>
106173
<!-- if there is no events available to display -->
107174
{{ else }}
108175
<h2>Coming soon...</h2>
@@ -147,47 +214,19 @@ <h2>Coming soon...</h2>
147214
document.getElementById('pymcon_events').scrollIntoView();
148215
}
149216

150-
function show (elements, specifiedDisplay) {
151-
if(elements.length == 0) return;
152-
elements = elements.length ? elements : [elements];
153-
for (var index = 0; index < elements.length; index++) {
154-
elements[index].style.display = specifiedDisplay || 'block';
155-
}
156-
}
157-
158-
function hide (elements) {
159-
if(elements.length == 0) return;
160-
elements = elements.length ? elements : [elements];
161-
for (var index = 0; index < elements.length; index++) {
162-
elements[index].style.display = 'none';
163-
}
164-
}
165-
166217
function filterSelection(event_type) {
167-
var upcoming_events = document.querySelectorAll('.upcoming');
168-
var past_events = document.querySelectorAll('.past');
169-
var all_heading = document.getElementById("all_events");
170-
var upcoming_heading = document.getElementById("upcoming_events");
171-
var past_heading = document.getElementById("past_events");
218+
var upcoming_events = document.getElementById("upcoming_events");
219+
var past_events = document.getElementById("past_events");
172220

173221
if(event_type == "all"){
174-
all_heading.style.display = "block";
175-
upcoming_heading.style.display = "none";
176-
past_heading.style.display = "none";
177-
show(upcoming_events);
178-
show(past_events);
222+
upcoming_events.style.display = "block";
223+
past_events.style.display = "block";
179224
}else if(event_type == "upcoming"){
180-
all_heading.style.display = "none";
181-
upcoming_heading.style.display = "block";
182-
past_heading.style.display = "none";
183-
show(upcoming_events);
184-
hide(past_events);
225+
upcoming_events.style.display = "block";
226+
past_events.style.display = "none";
185227
} else {
186-
all_heading.style.display = "none";
187-
upcoming_heading.style.display = "none";
188-
past_heading.style.display = "block";
189-
hide(upcoming_events);
190-
show(past_events);
228+
upcoming_events.style.display = "none";
229+
past_events.style.display = "block";
191230
}
192231
}
193232

‎static/css/events.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@
1414
margin: 0;
1515
}
1616

17+
.upcoming_events {
18+
margin-bottom: 5rem;
19+
}
20+
21+
.no-events {
22+
text-align: center;
23+
margin: 2rem 0;
24+
}
25+
1726
.event__card {
1827
background: var(--color-bg2);
1928
padding: 1.5rem;

0 commit comments

Comments
 (0)