Skip to content

Commit b8642c7

Browse files
exoticDFTexoticDFT
authored
Update/event layout (USRSE#94)
* Issue #10: Updates event cards and page - Updates the style of the event cards. - Adds header to the cards. - Organizes the cards into a grid. - Adds date information to the cards. - Updates the event cards to have the entire thing be clickable. - Adds horizontal rule after collection header to better breakup events. * Issue #10: Updates events page to only display upcoming events - Updates the events main page to only display our upcoming events and no previous events. * Updates #10: Adds events archive button - Adds an extra "Events Archive" button below the categories taxonomy section. - Updates some formatting. * Updates #10: Removes empty event categories - Removes any empty event categories from both the taxonomy section and the actual content section. * Updates #10: Adds "expired" color to event cards - Replaces the color for cards with a variable that depends on whether the event has passed. - Removes unnecessary "color" tag in the header's style. * Update #10: Modifies the layout of the "/events/category" page - Updates the layout of the "/events/category" page to match the new events page layout. - Renames the title of this page to better represent that this is all events; current, past, present.
1 parent 26b7a46 commit b8642c7

File tree

6 files changed

+101
-24
lines changed

6 files changed

+101
-24
lines changed

‎_includes/events/event-card.html‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,44 @@
11
{% unless post.hidden %}
22
{%- assign event_id = post.id | split: '/' | last %}
3-
<div class="card col-12" id="{{ event_id }}"
4-
style="padding:20px{% if include.hidden %};display: none{% endif %}">
5-
<p class="card-title" style="margin-bottom:0px"><a href="{{ post.url | relative_url }}" rel="permalink" target="_blank">{{ post.title }}</a></p>
6-
<div style="margin-top:0px" class="card-content" onclick="window.open('{{ post.url | relative_url }}')">
7-
{% include events/event-summary.html event=post %}
8-
<br>
9-
{{ post.excerpt | markdownify | strip_html | truncate: 300 }}
3+
<div class="card h-100" id="{{ event_id }}" {% if include.hidden %}style="display: none"{%endif %}>
4+
<a href="{{ post.url | prepend: site.baseurl }}" class="stretched-link">
5+
</a>
6+
7+
{% capture event_time %}{{ post.expires | date: '%s' }}{% endcapture %}
8+
{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
9+
{% assign color = "#790c63" %}
10+
{% if event_time < nowunix %}
11+
{% assign color = "#717171" %}
12+
{% endif %}
13+
14+
<div class="card-header" style="background-color: {{ color }};">
15+
<div class="col-sm-8">
16+
<h5 style="margin: 0px -15px; color: rgb(255, 255, 255)">
17+
{{ post.title }}
18+
</h5>
19+
</div>
20+
<div class="col-xs-4 float-right">
21+
<h6 style="text-align: right; color: rgb(168, 168, 168)">
22+
{{ post.event_date }}
23+
</h6>
24+
</div>
25+
</div>
26+
<div class="card-body">
27+
{% if post.subtitle %}
28+
<h6 class="card-subtitle mb-2">
29+
{{ post.subtitle }}
30+
</h6>
31+
{% endif %}
32+
33+
<p class="card-text">
34+
{{ post.excerpt | markdownify | strip_html | truncate: 300 }}
35+
</p>
36+
37+
<div style='margin-bottom:20px'>
38+
<small>
39+
<a href="{{ site.baseurl }}{{ post.url }}" class="button btn-warning">Read more</a>
40+
</small>
41+
</div>
1042
</div>
1143
</div>
1244
{% endunless %}

‎_includes/events/events-subcollection-all.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
{% assign entries = include.collection %}
22

3-
43
<section class="taxonomy__section">
54
<div style="padding:30px;" id="{{ category | slugify | downcase }}"></div>
65
<h2>{{ category_name }}</h2>
6+
<hr style="width:40%" />
77

88
{% assign entries = entries | sort: 'expires' | reverse %}
99

10+
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
1011
{%- for post in entries -%}
1112
{%- unless post.hidden -%}
1213
{% assign hasevents = "true" %}
13-
{% include events/event-card.html %}
14+
<div class="col" style="margin-bottom: 20px;">
15+
{% include events/event-card.html %}
16+
</div>
1417
{%- endunless -%}
1518
{%- endfor -%}
19+
</div>
1620

1721
</section>

‎_includes/events/events-subcollection.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
{% assign entries = include.collection %}
22

3-
43
<section id="{{ category | slugify | downcase }}" class="taxonomy__section">
54
<h2>{{ category_name }}</h2>
5+
<hr style="width:40%" />
66

77
{% assign entries = entries | sort: 'expires' | reverse %}
88

9+
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4">
910
{%- for post in entries limit:5 -%}
10-
{%- unless post.hidden -%}
11+
{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
12+
{% capture expires %}{{ post.expires | date: '%s'}}{% endcapture %}
13+
{%- unless post.hidden or expires < nowunix -%}
1114
{% assign hasevents = "true" %}
12-
{% include events/event-card.html %}
15+
<div class="col" style="margin-bottom: 20px;">
16+
{% include events/event-card.html %}
17+
</div>
1318
{%- endunless -%}
1419
{%- endfor -%}
20+
</div>
1521

1622
<div class="row">
1723
<div class="col-md-12">

‎_layouts/events.html‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,63 @@
55
{% assign collection = site[page.collection] %}
66
{% include group-by-array.html collection=collection field="category" %}
77

8+
{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
9+
810
<ul class="taxonomy__index">
911
{% for category in group_names %}
10-
{% assign category_name = site.data.events.names[category].name | default: category %}
11-
<li style="list-style:none">
12-
<a href="#{{ category | slugify | downcase }}">
13-
<strong>{{ category_name }}</strong> <span class="badge badge-warning" style="margin:auto; margin-right:0px">{{ group_items[forloop.index0] | size }}</span>
14-
</a>
15-
</li>
12+
{% assign category_name = site.data.events.names[category].name | default: category %}
13+
{% assign all_posts = group_items[forloop.index0] %}
14+
{% assign posts = '' | split: '' %}
15+
{% for event in all_posts %}
16+
{% capture event_time %}{{ event.expires | date: '%s' }}{% endcapture %}
17+
{% if event_time >= nowunix %}
18+
{% assign posts = posts | push: event %}
19+
{% endif %}
20+
{% endfor %}
21+
{% unless posts == empty %}
22+
<li style="list-style:none">
23+
<a href="#{{ category | slugify | downcase }}">
24+
<strong>{{ category_name }}</strong>
25+
<span class="badge badge-warning" style="margin:auto; margin-right:0px">
26+
{{ posts.size }}
27+
</span>
28+
</a>
29+
</li>
30+
{% endunless %}
1631
{% endfor %}
1732
</ul>
1833

34+
<div class="row">
35+
<div class="col-md-12">
36+
<a type="button" style="float: right" class="btn btn-small btn-warning" href="{{ site.baseurl }}/events/archive/">
37+
<small>Events Archive</small>
38+
</a>
39+
</div>
40+
</div>
41+
1942
{{ content }}
2043

2144
{% for category in group_names %}
2245
{% assign category_name = site.data.events.names[category].name | default: category %}
23-
{% assign posts = group_items[forloop.index0] %}
24-
{% include events/events-subcollection.html collection=posts sort_by=page.sort_by sort_order=page.sort_order type=page.entries_layout category=category category_name=category_name %}
46+
{% assign all_posts = group_items[forloop.index0] %}
47+
{% assign posts = '' | split: '' %}
48+
{% for event in all_posts %}
49+
{% capture event_time %}{{ event.expires | date: '%s' }}{% endcapture %}
50+
{% if event_time >= nowunix %}
51+
{% assign posts = posts | push: event %}
52+
{% endif %}
53+
{% endfor %}
54+
{% unless posts == empty %}
55+
{% include events/events-subcollection.html collection=posts sort_by=page.sort_by sort_order=page.sort_order type=page.entries_layout category=category category_name=category_name %}
56+
{% endunless %}
2557
{% endfor %}
2658

2759
<div class="row">
28-
<div class="col-md-12">
29-
<a type="button" class="btn btn-warning" href="{{ site.baseurl }}/events/archive/">Events Archive</a>
30-
</div>
60+
<div class="col-md-12">
61+
<a type="button" class="btn btn-warning" href="{{ site.baseurl }}/events/archive/">
62+
Events Archive
63+
</a>
64+
</div>
3165
</div>
3266

3367
{% include scrolltop.html %}

‎assets/css/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4318,6 +4318,7 @@ a.tag:hover {
43184318
align-items: stretch;
43194319
box-shadow: 0 .125em .25em rgba(10,10,10,0.1);
43204320
display: flex;
4321+
justify-content: space-between;
43214322
}
43224323

43234324
.card-header-title {

‎pages/events/category.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
layout: page
3-
title: Event Categories
3+
title: Archive of Events by Categories
44
permalink: /events/category/
55
collection: events
66
---

0 commit comments

Comments
 (0)