Skip to content

Commit 94d9f8d

Browse files
JesperDramschJesperDramsch
committed
feat: implement minimal action bar with progressive disclosure
- Add 3px colored line indicator that expands on hover - Implement bookmark icon for saved conferences - Add bell icon for series subscriptions - Integrate with conference cards via server-side rendering - Use CSS transitions for smooth hover effects - Eliminate visual clutter from multiple action buttons
1 parent de7a860 commit 94d9f8d

File tree

4 files changed

+1162
-39
lines changed

4 files changed

+1162
-39
lines changed

‎_includes/action_bar.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!-- Minimal Action Bar -->
2+
{% assign conf_id = include.conf_id %}
3+
{% assign is_saved = false %}
4+
{% assign is_series = false %}
5+
6+
<!-- Check if conference is saved/series followed (would come from JavaScript) -->
7+
8+
<!-- Desktop: Colored Line Indicator -->
9+
<div class="action-indicator"
10+
role="button"
11+
tabindex="0"
12+
data-conf-id="{{ conf_id }}"
13+
data-conf-name="{{ include.conf_name }}"
14+
data-conf-cfp="{{ include.conf_cfp }}"
15+
data-conf-place="{{ include.conf_place }}"
16+
aria-label="Conference actions">
17+
<i class="fas fa-bookmark action-icon"></i>
18+
</div>
19+
20+
<!-- Desktop: Action Popover -->
21+
<div class="action-popover" data-conf-id="{{ conf_id }}">
22+
<a href="#" class="action-popover-item" data-action="save">
23+
<i class="far fa-bookmark"></i>
24+
<span>Save to Favorites</span>
25+
</a>
26+
<a href="#" class="action-popover-item" data-action="series">
27+
<i class="far fa-bell"></i>
28+
<span>Follow Series</span>
29+
</a>
30+
<div class="action-popover-item action-popover-calendar" data-action="calendar">
31+
<i class="far fa-calendar-plus"></i>
32+
<span>Add to Calendar</span>
33+
<i class="fas fa-chevron-right calendar-arrow"></i>
34+
<div class="calendar-dropdown">
35+
<a href="#" class="calendar-option" data-calendar="google">
36+
<i class="fab fa-google"></i>
37+
<span>Google Calendar</span>
38+
</a>
39+
<a href="#" class="calendar-option" data-calendar="outlook">
40+
<i class="fab fa-microsoft"></i>
41+
<span>Outlook</span>
42+
</a>
43+
<a href="#" class="calendar-option" data-calendar="apple">
44+
<i class="fab fa-apple"></i>
45+
<span>Apple Calendar</span>
46+
</a>
47+
<a href="#" class="calendar-option" data-calendar="ics">
48+
<i class="fas fa-download"></i>
49+
<span>Download .ics</span>
50+
</a>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<!-- Mobile: Bookmark Button -->
56+
<button class="mobile-action-bookmark"
57+
data-conf-id="{{ conf_id }}"
58+
aria-label="Save conference">
59+
<i class="far fa-bookmark"></i>
60+
</button>

‎_includes/index_conf_title_row.html‎

Lines changed: 29 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,37 @@
11
<div class="row conf-row">
22
<div class="col-6">
3-
<span class="conf-title">
4-
<a title="Deadline Details" href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} {{conf.year}}</a>
5-
</span>
6-
<span class="conf-title-small">
7-
<a title="Deadline Details" href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} '{{conf.year | slice: -2, 3}}</a>
8-
</span>
9-
<span class="conf-title-icon">
10-
<a title="Conference Website" href="{{conf.link}}" target="_blank"><img src="/static/img/203-earth.svg" class="badge-link" alt="Link to Conference Website" width="16" height="16" /></a>
11-
&ZeroWidthSpace;
12-
</span>
13-
{% if conf.cfp_link %}
14-
<span class="conf-title-icon">
15-
<a title="Call for Participation for {{conf.conference}}" href="{{conf.cfp_link}}" target="_blank"><img src="/static/img/035-file-text.svg" class="badge-link" alt="Link to Call for Participation for {{conf.conference}}" width="16" height="16" /></a>
16-
&ZeroWidthSpace;
17-
</span>
18-
{% endif %}
19-
{% if conf.finaid %}
20-
<span class="conf-title-icon">
21-
<a title="Financial Aid from {{conf.conference}}" href="{{conf.finaid}}" target="_blank"><img src="/static/img/066-lifebuoy.svg" class="badge-link" alt="Link to Sponsorship page of {{conf.conference}}" width="16" height="16" /></a>
22-
&ZeroWidthSpace;
23-
</span>
24-
{% endif %}
25-
{% if conf.sponsor %}
26-
<span class="conf-title-icon">
27-
<a title="Sponsorship Opportunity for {{conf.conference}}" href="{{conf.sponsor}}" target="_blank"><img src="/static/img/060-coin-dollar.svg" class="badge-link" alt="Link to Sponsorship page of {{conf.conference}}" width="16" height="16" /></a>
28-
&ZeroWidthSpace;
29-
</span>
30-
{% endif %}
31-
{% if conf.mastodon %}
32-
<span class="conf-title-icon">
33-
<a title="Mastodon for {{conf.conference}}" href="{{conf.mastodon}}" target="_blank"><img src="/static/img/407-mastodon.svg" class="badge-link" alt="Link to Conference Mastodon" width="16" height="16" /></a>
34-
&ZeroWidthSpace;
35-
</span>
36-
{% elsif conf.twitter %}
37-
<span class="conf-title-icon">
38-
<a title="Twitter for {{conf.conference}}" href="https://twitter.com/{{conf.twitter}}" target="_blank"><img src="/static/img/407-twitter.svg" class="badge-link" alt="Link to Conference Twitter" width="16" height="16" /></a>
39-
&ZeroWidthSpace;
40-
</span>
41-
{% endif %}
3+
<div class="conf-title-row">
4+
<span class="conf-title">
5+
<a title="Deadline Details" href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} {{conf.year}}</a>
6+
</span>
7+
<span class="conf-title-small">
8+
<a title="Deadline Details" href="{{site.baseurl}}/conference/{{conf.conference | slugify: "latin"}}-{{conf.year}}/">{{conf.conference}} '{{conf.year | slice: -2, 3}}</a>
9+
</span>
10+
<span class="conf-external-links">
11+
<a title="Conference Website" href="{{conf.link}}" target="_blank"><img src="/static/img/203-earth.svg" alt="Website" width="14" height="14" /></a>
12+
{% if conf.cfp_link %}
13+
<a title="Call for Participation" href="{{conf.cfp_link}}" target="_blank"><img src="/static/img/035-file-text.svg" alt="CFP" width="14" height="14" /></a>
14+
{% endif %}
15+
{% if conf.finaid %}
16+
<a title="Financial Aid" href="{{conf.finaid}}" target="_blank"><img src="/static/img/066-lifebuoy.svg" alt="Aid" width="14" height="14" /></a>
17+
{% endif %}
18+
{% if conf.sponsor %}
19+
<a title="Sponsorship" href="{{conf.sponsor}}" target="_blank"><img src="/static/img/060-coin-dollar.svg" alt="Sponsor" width="14" height="14" /></a>
20+
{% endif %}
21+
{% if conf.mastodon %}
22+
<a title="Mastodon" href="{{conf.mastodon}}" target="_blank"><img src="/static/img/407-mastodon.svg" alt="Mastodon" width="14" height="14" /></a>
23+
{% elsif conf.twitter %}
24+
<a title="Twitter" href="https://twitter.com/{{conf.twitter}}" target="_blank"><img src="/static/img/407-twitter.svg" alt="Twitter" width="14" height="14" /></a>
25+
{% endif %}
26+
</span>
27+
</div>
4228
</div>
4329
<div class="col-6">
4430
<span class="timer"></span>
4531
<span class="timer-small"></span>
4632
</div>
4733
</div>
34+
<!-- Include Minimal Action Bar (server-side rendered) -->
35+
{% assign conf_id = conf.conference | append: "-" | append: conf.year | slugify: "latin" %}
36+
{% assign cfp_date = conf.cfp_ext | default: conf.cfp %}
37+
{% include action_bar.html conf_id=conf_id conf_name=conf.conference conf_title=conf.conference conf_cfp=cfp_date conf_place=conf.place %}

0 commit comments

Comments
 (0)