From 12111e8d0a53afa9bb93026a0bfdd6456c587318 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Wed, 25 Oct 2017 16:00:22 -0400 Subject: [PATCH 01/11] Add events to the primary navigation --- _layouts/default.html | 1 + 1 file changed, 1 insertion(+) diff --git a/_layouts/default.html b/_layouts/default.html index 29b18c71..60d4b357 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -113,6 +113,7 @@ <li><a href="/patterns.html">Patterns</a></li> <li><a href="/checklist.html">Checklist</a></li> <li><a href="/resources.html">Resources</a></li> + <li><a href="/events.html">Events</a></li> <li><a href="/follow.html">Follow</a></li> <li><a href="/about.html">About</a></li> </ul> -- GitLab From 8201c08a110bb583e3349c921869a5caa342e351 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Wed, 25 Oct 2017 16:00:45 -0400 Subject: [PATCH 02/11] Added intial events page --- events.html | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 events.html diff --git a/events.html b/events.html new file mode 100644 index 00000000..74242ea8 --- /dev/null +++ b/events.html @@ -0,0 +1,35 @@ +--- +layout: page +title: Events +description: Upcoming and recurring accessibility events and meetups. +permalink: events.html +--- + +<nav class="toc-wrap toc-long" aria-labelledby="toc_title"> + <h2 id="toc_title" class="toc-title">Events</h2> + <ul class="toc"> + {% for category in site.data.resources %} + <li> + <a class="{{ category.section-id }}" href="#{{category.section-id}}"> + {{ category.resource-category }} + </a> + </li> + {% endfor %} + </ul> +</nav> + +{% for category in site.data.resources %} +<section id="{{category.section-id}}" class="article-section resources-section" tabindex="-1"> + <h3 class="article-section__title">{{ category.resource-category }}</h3> + <ul class="article-section__content"> + {% assign sorted_resources = category.resources | sort: 'title' %} + {% for resource in sorted_resources %} + <li> + <a href="{{ resource.url }}" rel="external"> + {{resource.title}} + </a>{% if resource.description %}<span> - {{ resource.description }}</span>{% endif %} + </li> + {% endfor %} + </ul> +</section> +{% endfor %} -- GitLab From 406fd375e8e846d7879cbf6b4d7653da0c372545 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Wed, 25 Oct 2017 17:29:06 -0400 Subject: [PATCH 03/11] Added initial event data --- _data/events.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 _data/events.yml diff --git a/_data/events.yml b/_data/events.yml new file mode 100644 index 00000000..d130b386 --- /dev/null +++ b/_data/events.yml @@ -0,0 +1,13 @@ +- event-category: Remote + section-id: remote + events: + - url: https://www.inclusivedesign24.org/ + title: "Inclusive Design 24 (#ID24)" + time: 2017-11-16 + +- event-category: Physical + section-id: physical + events: + - url: http://camp.a11yto.com/ + title: "#a11yTOCamp" + time: 2017-11-18 -- GitLab From ea917b78a41231d6988de7c77ff4ee156095e2c5 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Wed, 25 Oct 2017 17:29:28 -0400 Subject: [PATCH 04/11] Seeded event data into template --- events.html | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/events.html b/events.html index 74242ea8..63faa862 100644 --- a/events.html +++ b/events.html @@ -1,33 +1,35 @@ --- layout: page title: Events -description: Upcoming and recurring accessibility events and meetups. +description: Upcoming remote and local accessibility events permalink: events.html --- +<p class="resources-section"><a href="">Let us know</a> if you are hosting an event and want it listed here. <a href="follow.html#meetups">Meetups</a> might also be happening in your area, be sure to check!</p> + <nav class="toc-wrap toc-long" aria-labelledby="toc_title"> - <h2 id="toc_title" class="toc-title">Events</h2> + <h2 id="toc_title" class="toc-title">Categories</h2> <ul class="toc"> - {% for category in site.data.resources %} + {% for category in site.data.events %} <li> <a class="{{ category.section-id }}" href="#{{category.section-id}}"> - {{ category.resource-category }} + {{ category.event-category }} </a> </li> {% endfor %} </ul> </nav> -{% for category in site.data.resources %} +{% for category in site.data.events %} <section id="{{category.section-id}}" class="article-section resources-section" tabindex="-1"> - <h3 class="article-section__title">{{ category.resource-category }}</h3> + <h3 class="article-section__title">{{ category.event-category }}</h3> <ul class="article-section__content"> - {% assign sorted_resources = category.resources | sort: 'title' %} - {% for resource in sorted_resources %} + {% assign sorted_events = category.events | sort: 'title' %} + {% for event in sorted_events %} <li> - <a href="{{ resource.url }}" rel="external"> - {{resource.title}} - </a>{% if resource.description %}<span> - {{ resource.description }}</span>{% endif %} + <a href="{{ event.url }}" rel="external"> + {{event.title}} + </a>{% if event.time %}<time datetime="{{ event.time }}"> - {{ event.time | date:"%B %e, %Y" }}</time>{% endif %} </li> {% endfor %} </ul> -- GitLab From a5e57539c409c46bfd425822da26398581511d70 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Wed, 25 Oct 2017 17:29:50 -0400 Subject: [PATCH 05/11] Slight sizing/spacing tweaks to prevent awkward line breaks --- _sass/_header.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/_sass/_header.scss b/_sass/_header.scss index 48bd91ee..0284f300 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -18,10 +18,12 @@ li { display: inline-block; - margin-right: 1.1em; + font-size: 90%; + margin-right: 0.8em; @media (min-width: $tablet) { - margin-right: 1.4em; + font-size: 95%; + margin-right: 1em; } &:last-child { -- GitLab From 3d3c66387250e6f2e156c94ae405f0aa1304b1ab Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 18:55:44 -0400 Subject: [PATCH 06/11] =?UTF-8?q?Sort=20events=20based=20on=20user?= =?UTF-8?q?=E2=80=99s=20current=20date?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- events.html | 57 +++++++++++++++++++++++++++++++++++++++------------ js/scripts.js | 40 ++++++++++++++++++++++++++++++++++-- 2 files changed, 82 insertions(+), 15 deletions(-) diff --git a/events.html b/events.html index 63faa862..0ae66932 100644 --- a/events.html +++ b/events.html @@ -1,13 +1,13 @@ --- layout: page title: Events -description: Upcoming remote and local accessibility events +description: Local and remote accessibility events permalink: events.html --- -<p class="resources-section"><a href="">Let us know</a> if you are hosting an event and want it listed here. <a href="follow.html#meetups">Meetups</a> might also be happening in your area, be sure to check!</p> +<p class="resources-section"><a href="https://github.com/a11yproject/a11yproject.com/labels">Let us know if you are hosting an event</a> and want it listed here. <a href="follow.html#meetups">Meetups</a> might also be happening in your area, be sure to check!</p> -<nav class="toc-wrap toc-long" aria-labelledby="toc_title"> +<nav hidden id="toc-events" class="toc-wrap toc-long" aria-labelledby="toc_title"> <h2 id="toc_title" class="toc-title">Categories</h2> <ul class="toc"> {% for category in site.data.events %} @@ -17,21 +17,52 @@ permalink: events.html </a> </li> {% endfor %} + <li> + <a class="past-events" href="#past-events"> + Past events + </a> + </li> </ul> </nav> {% for category in site.data.events %} -<section id="{{category.section-id}}" class="article-section resources-section" tabindex="-1"> - <h3 class="article-section__title">{{ category.event-category }}</h3> - <ul class="article-section__content"> - {% assign sorted_events = category.events | sort: 'title' %} +<section id="{{category.section-id}}" class="article-section resources-section " tabindex="-1"> + <h3 id="event-list" class="article-section__title">Event List</h3> + {% assign sorted_events = category.events | sort: 'date' %} {% for event in sorted_events %} - <li> - <a href="{{ event.url }}" rel="external"> - {{event.title}} - </a>{% if event.time %}<time datetime="{{ event.time }}"> - {{ event.time | date:"%B %e, %Y" }}</time>{% endif %} - </li> + <div id="{{event.title | url_encode | downcase | replace:'+','-'}}" class="waypoint-section event" data-date="{{event.date | date:"%s"}}" > + <h4> + <a href="{{ event.url }}" rel="external">{{event.title}}</a>{% if event.type %} <span class="event__type">{{event.type}}</span>{% endif %} + </h4> + <dl class="article-section__content"> + <dt class="screen-reader-text"> + Event date: + </dt> + <dd class="event__time"> + <time datetime="{{ event.date }}">{{ event.date | date:"%B %e, %Y" }}</time> + </dd> + {% if event.address %} + <dt class="screen-reader-text"> + Event address: + </dt> + <dd class="event__address"> + <a href="{{ event.map }}" rel="external"> + {{event.address}} + </a> + </dd> + {% endif %} + <dt class="screen-reader-text"> + Event description: + </dt> + <dd> + {{event.description}} {% if event.hashtag %}<span class="screen-reader-text">Event hashtag: </span><a href="https://twitter.com/search?src=typd&q=%23{{event.hashtag}}" rel="external">#{{event.hashtag}}</a>{% endif %} + </dd> + </div> {% endfor %} - </ul> + </dl> </section> {% endfor %} + +<section hidden id="past-events" class="article-section resources-section" tabindex="-1"> + <h3 class="article-section__title">Past events</h3> +</section> diff --git a/js/scripts.js b/js/scripts.js index 25d59167..7c08c7c6 100644 --- a/js/scripts.js +++ b/js/scripts.js @@ -421,8 +421,43 @@ $(document).ready(function(){ .parents("li").addClass(activeClass); } }); - } // activeNav - + }, // activeNav + + pastEvents : function(){ + /* Make the current time Jekyll friendly */ + var now = Date.now() / 1000; + + function findPastEvents() { + /* Snag everything with a `data-date` attribute, puts it into a node list */ + var events = [].slice.call(document.querySelectorAll('[data-date]')); + /* Loops through event array, returns past that occured after current date */ + var eventTimes = events.filter(function (el) { + return el.dataset.date < now; + }) + return eventTimes; + } + + // Reverses past event list so oldest is placed last + var pastEventList = findPastEvents(); + pastEventList = pastEventList.reverse(); + + // Moves an event list to the targeted container + function moveEventsList(container, arr) { + arr.map(function (el) { + container.appendChild(el); + }) + } + moveEventsList(document.querySelector('#past-events'), pastEventList); + + // Reveal ToC and past events once filled + function unhide(el) { + el.removeAttribute("hidden"); + } + unhide(document.querySelector('#past-events')); + unhide(document.querySelector('#toc-events')); + + document.querySelector('#event-list').textContent = "Upcoming"; + } // pastEvents } // ui } // Engine @@ -431,5 +466,6 @@ $(document).ready(function(){ Engine.ui.lazyLoadFooter("footer[role='contentinfo']",800); Engine.ui.footerCopyright(); Engine.ui.activeNav("#main-navigation","active"); + Engine.ui.pastEvents(); }); -- GitLab From 530fc8c09c8ca12a8f985b66b1206aca6ab73e79 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 18:56:34 -0400 Subject: [PATCH 07/11] Hide things semantically --- _sass/_base.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_sass/_base.scss b/_sass/_base.scss index 32f612f3..6184e122 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -72,3 +72,7 @@ width: auto; z-index: 100000; } + +[hidden] { + display: none; +} -- GitLab From 9bf90d48f10fbf0510b3588938f22c31a5e9626b Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 19:42:07 -0400 Subject: [PATCH 08/11] Remove hashtags from event IDs --- events.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/events.html b/events.html index 0ae66932..511d6f81 100644 --- a/events.html +++ b/events.html @@ -30,7 +30,7 @@ permalink: events.html <h3 id="event-list" class="article-section__title">Event List</h3> {% assign sorted_events = category.events | sort: 'date' %} {% for event in sorted_events %} - <div id="{{event.title | url_encode | downcase | replace:'+','-'}}" class="waypoint-section event" data-date="{{event.date | date:"%s"}}" > + <div id="{{event.title | url_encode | downcase | replace_first:'%','' | replace:'+','-'}}" class="waypoint-section event" data-date="{{event.date | date:"%s"}}" > <h4> <a href="{{ event.url }}" rel="external">{{event.title}}</a>{% if event.type %} <span class="event__type">{{event.type}}</span>{% endif %} </h4> -- GitLab From 15184e88e41dc2f1d167f98e3440abeda685810d Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 20:01:04 -0400 Subject: [PATCH 09/11] Match aria-labelledby convention for events --- events.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/events.html b/events.html index 511d6f81..dc88142a 100644 --- a/events.html +++ b/events.html @@ -26,12 +26,12 @@ permalink: events.html </nav> {% for category in site.data.events %} -<section id="{{category.section-id}}" class="article-section resources-section " tabindex="-1"> +<section id="{{category.section-id}}" class="article-section resources-section " aria-labelledby="event-list" tabindex="-1"> <h3 id="event-list" class="article-section__title">Event List</h3> {% assign sorted_events = category.events | sort: 'date' %} {% for event in sorted_events %} - <div id="{{event.title | url_encode | downcase | replace_first:'%','' | replace:'+','-'}}" class="waypoint-section event" data-date="{{event.date | date:"%s"}}" > - <h4> + <div class="waypoint-section event" data-date="{{event.date | date:"%s"}}" aria-labelledby="{{event.title | url_encode | downcase | replace_first:'%','' | replace:'+','-'}}"> + <h4 id="{{event.title | url_encode | downcase | replace_first:'%','' | replace:'+','-'}}"> <a href="{{ event.url }}" rel="external">{{event.title}}</a>{% if event.type %} <span class="event__type">{{event.type}}</span>{% endif %} </h4> <dl class="article-section__content"> -- GitLab From a785264cae733f0c3a1c917a3b021a93972c28bd Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 20:01:19 -0400 Subject: [PATCH 10/11] Event styling tweaks --- _sass/_layout.scss | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 3776b498..4e3be121 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -227,7 +227,29 @@ $mobile: 24em; top: .25em; left: -.625em; } +} - - +.event { + padding-top: 1.5em; + padding-bottom: 1.5em; + + // Place closer to section heading + &:first-of-type { + padding-top: 1em; + } + + &__type { + text-transform: uppercase; + letter-spacing: 0.02em; + font-size: 75%; + } + + &__time { + line-height: 1.3; + } + + // Ensure space between event description and time or address + dd:nth-last-child(3) { + margin-bottom: 1em; + } } -- GitLab From 0feadb50b12cdaa5f588c94628f280641c58e685 Mon Sep 17 00:00:00 2001 From: Eric Bailey <eric.w.bailey@gmail.com> Date: Mon, 30 Oct 2017 20:20:39 -0400 Subject: [PATCH 11/11] Added a past event --- _data/events.yml | 36 ++++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/_data/events.yml b/_data/events.yml index d130b386..ced9d4a4 100644 --- a/_data/events.yml +++ b/_data/events.yml @@ -1,13 +1,25 @@ -- event-category: Remote - section-id: remote +- event-category: Upcoming + section-id: upcoming events: - - url: https://www.inclusivedesign24.org/ - title: "Inclusive Design 24 (#ID24)" - time: 2017-11-16 - -- event-category: Physical - section-id: physical - events: - - url: http://camp.a11yto.com/ - title: "#a11yTOCamp" - time: 2017-11-18 + - title: "Inclusive Design 24" + description: "A Free 24-Hour Online Community Event On Accessibility Organized by The Paciello Group." + url: "https://www.inclusivedesign24.org/" + type: "Webinar" + date: 2017-11-16 + hashtag: "ID24" + - title: "a11yTOCamp" + description: "#a11yTOCamp believes in introducing digital accessibility to new people all year round through our monthly Meetups and at Camp." + url: "http://camp.a11yto.com/" + type: "Regional" + date: 2017-11-18 + address: "100 McCaul St, Toronto, ON M5T 1W1, Canada" + map: "https://www.google.com/maps?ll=43.653228,-79.39147&z=16&t=m&hl=en-US&gl=CA&mapclient=embed&cid=9667773230772056803" + hashtag: "a11yTOCamp" + - title: "Accessibility Camp Seattle" + description: "An unconference about accessibility and people." + url: "http://accessibilitycampseattle.org/2017/" + type: "Regional" + date: 2017-09-23 + address: "1000 4th Ave, Seattle, WA 98104, USA" + map: "https://goo.gl/maps/pVPhTvDbKUk" + hashtag: "a11yCampSeattle" -- GitLab