diff --git a/.eleventy.js b/.eleventy.js
index fb1e2ac..5ccd6ed 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -147,6 +147,34 @@ module.exports = function(eleventyConfig) {
}
eleventyConfig.addFilter("identifyHighlightsRecursive", identifyHighlightsRecursive);
+ function identifyExperienceHighlights(roleList, filter) {
+ const expandedRoleList = roleList.map(function(role) {
+ const children = role.achievements
+ ? role.achievements.slice()
+ : [];
+ const fullDescription = role.description || role.shortDescription;
+ const shortDescription = role.description && role.shortDescription;
+ const descriptionObject = {
+ full: fullDescription,
+ short: shortDescription,
+ highlight: false
+ };
+ children.push(descriptionObject);
+ return inheritAndAdd(role, {
+ description: descriptionObject,
+ shortDescription: null,
+ _children: children
+ });
+ });
+ const highlightedRoleList = identifyHighlightsRecursive(expandedRoleList, filter, "_children");
+ highlightedRoleList.forEach(function(role) {
+ role.description = role._children[role._children.length - 1];
+ role.achievements = role._children.slice(0, role._children.length - 1);
+ });
+ return highlightedRoleList;
+ }
+ eleventyConfig.addFilter("identifyExperienceHighlights", identifyExperienceHighlights);
+
// Checks if there are any items with a truthy highlight property in itemList.
function hasHighlights(itemList) {
if (!Array.isArray(itemList)) {
diff --git a/_includes/assets/css/main.css b/_includes/assets/css/main.css
index 166bafd..af4f0f8 100644
--- a/_includes/assets/css/main.css
+++ b/_includes/assets/css/main.css
@@ -372,62 +372,30 @@ header rt {
}
/*
- * .highlight-container: marker for an element which can have its children
- * shown or hidden. Should never be nested more than two deep (#page and one
- * more element between #page and any elements affected by this) - could be
- * modified to support such a thing, but no need yet
+ * #highlight-container: marker for the element whose children can be shown or
+ * hidden.
*
* .highlight: a highlight-only view of some element, typically a shorter
* version of a full-length text containing only the highlights
- * .show-all: button to make the current highlight container show its
- * contained lowlights and hide its highlights
+ * .show-all: button to make the highlight container show its contained
+ * lowlights and hide its highlights
*
- * elements with these classes are visible only when neither #page nor their
- * surrounding container is showing all, thus hidden if either #page or their
- * surrounding container is showing all:
- * visible = not(#page.showing-all or surrounding-container.showing-all)
- * visible = not(#page.showing-all) and not(surrounding-container.showing-all)
- * hidden = not visible
- * hidden = not(not(#page.showing-all or surrounding-container.showing-all))
- * hidden = #page.showing-all or surrounding-container.showing-all
- *
- * As #page is itself a highlight container which surrounds everything, this
- * is simplified to just ".highlight-container.showing-all".
+ * elements with these classes are visible only when #highlight-container is not
+ * showing all, thus hidden if #highlight-container is showing all.
*
* .lowlight: an element or view of an element which will likely be
* uninteresting to whoever the current highlighted version is for
- *
- * elements with this class are visible only when either #page or their
- * surrounding container is showing all, thus hidden if both #page and their
- * surrounding container are _not_ showing all:
- * visible = #page.showing-all or surrounding-container.showing-all
- * hidden = not visible
- * hidden = not(#page.showing-all or surrounding-container.showing-all)
- * hidden = not(#page.showing-all) and not(surrounding-container.showing-all)
- *
- * .show-highlights: button to make the current highlight container hide its
+ * .show-highlights: button to make the highlight container hide its
* contained lowlights and show its highlights
*
- * elements with this class are visible only when their surrounding container
- * and _not_ #page is showing all. This is because when #page is showing all,
- * the .show-highlights for individual sections have no effect. Thus they are
- * hidden if the page is showing all or if the surrounding container is not
- * showing all:
- * visible = not(#page.showing-all) and surrouding-container.showing-all
- * hidden = not visible
- * hidden = not(not(#page.showing-all) and surrounding-container.showing-all)
- * hidden = #page.showing-all or not(surrounding-container.showing-all)
+ * elements with these classes are visible only when #highlight-container is
+ * showing all, thus hidden if #highlight-container is _not_ showing all.
*
- * Since the buttons are not inside an inner container, we add an alternative
- * for the buttons which only consults whether #page is not showing all.
*/
-.highlight-container.showing-all .highlight,
-.highlight-container.showing-all .show-all,
-#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .lowlight,
-#page.highlight-container:not(.showing-all) header .buttons .lowlight,
-#page.highlight-container:not(.showing-all) header .buttons .show-highlights,
-#page.highlight-container:not(.showing-all) .highlight-container:not(.showing-all) .show-highlights,
-#page.highlight-container.showing-all .highlight-container .show-highlights {
+#highlight-container.showing-all .highlight,
+#highlight-container.showing-all .show-all,
+#highlight-container:not(.showing-all) .lowlight,
+#highlight-container:not(.showing-all) .show-highlights {
display: none;
}
@@ -442,6 +410,6 @@ header rt {
opacity: 1.0;
}
-.highlight-container.showing-all .highlight-icon {
+#highlight-container.showing-all .highlight-icon {
display: none;
}
diff --git a/_includes/assets/css/screen.css b/_includes/assets/css/screen.css
index 202239c..46dc1ed 100644
--- a/_includes/assets/css/screen.css
+++ b/_includes/assets/css/screen.css
@@ -81,23 +81,6 @@
background-image: linear-gradient(to right, transparent 0%, rgba(0, 100, 200, 0.1) 20%, rgba(0, 100, 200, 0.2) 30%, rgba(0, 100, 200, 0.2) 70%, rgba(0, 100, 200, 0.1) 80%, transparent 100%);
}
- section .highlight-container .show-all, section .highlight-container .show-highlights {
- margin-top: 0.25rem;
- display: block;
- width: 100%;
- font-size: 0.7rem;
- height: 1.5rem;
- transition: margin-top 0.25s step-start, height 0.25s step-start, opacity 0.25s ease 0.1s, transform 0.25s ease 0.1s;
- }
-
- section .highlight-container:not(:hover) .show-all:not(:focus), section .highlight-container:not(:hover) .show-highlights:not(:focus) {
- margin-top: 0;
- height: 0;
- opacity: 0;
- transform: scaleY(0);
- transition: margin-top 0.25s step-end, height 0.25s step-end, opacity 0.25s ease, transform 0.25s ease;
- }
-
.lowlight:not(.lowlight-no-gradient) {
background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.1) 50%, transparent 90%);
}
diff --git a/_includes/assets/js/main.js b/_includes/assets/js/main.js
index b8a9806..40ca660 100644
--- a/_includes/assets/js/main.js
+++ b/_includes/assets/js/main.js
@@ -1,29 +1,11 @@
(function(window, document) {
- function findClosestParentMatching(child, selector) {
- if (!child) {
- return null;
- } else if (child.matches(selector)) {
- return child;
- } else {
- return findClosestParentMatching(child.parentElement, selector);
- }
- }
-
function showAll(button) {
- parent = findClosestParentMatching(button, ".highlight-container");
- if (!parent) {
- return;
- }
-
+ parent = document.getElementById('highlight-container');
parent.classList.add("showing-all");
}
function showHighlights(button) {
- parent = findClosestParentMatching(button, ".highlight-container");
- if (!parent) {
- return;
- }
-
+ parent = document.getElementById('highlight-container');
parent.classList.remove("showing-all");
}
diff --git a/_includes/components/resume/award-section.njk b/_includes/components/resume/award-section.njk
index 2e40821..fa71c7e 100644
--- a/_includes/components/resume/award-section.njk
+++ b/_includes/components/resume/award-section.njk
@@ -3,16 +3,14 @@
{% set awardsFilter = filter.awards if filter and filter.awards else "all" %}
{% set awardsFiltered = awards.awards | identifyHighlights(awardsFilter) %}
-
-
-
- {% for award in awardsFiltered %}
- {% include "components/resume/award.njk" %}
- {% endfor %}
-
+
+
+ {% for award in awardsFiltered %}
+ {% include "components/resume/award.njk" %}
+ {% endfor %}
+
diff --git a/_includes/components/resume/contact-section.njk b/_includes/components/resume/contact-section.njk
index 6d51efb..39963ec 100644
--- a/_includes/components/resume/contact-section.njk
+++ b/_includes/components/resume/contact-section.njk
@@ -3,16 +3,14 @@
{% set contactFilter = filter.contact if filter and filter.contact else "all" %}
{% set contactsFiltered = contact.methods | identifyHighlights(contactFilter) %}
-
-
-
+
+
diff --git a/_includes/components/resume/education-section.njk b/_includes/components/resume/education-section.njk
index 98d36ba..11b4014 100644
--- a/_includes/components/resume/education-section.njk
+++ b/_includes/components/resume/education-section.njk
@@ -3,16 +3,14 @@
{% set educationFilter = filter.education if filter and filter.education else "all" %}
{% set educationFiltered = education.programs | identifyHighlights(educationFilter) %}
-
-
-
- {% for program in educationFiltered %}
- {% include "components/resume/education.njk" %}
- {% endfor %}
-
+
+
+ {% for program in educationFiltered %}
+ {% include "components/resume/education.njk" %}
+ {% endfor %}
+
diff --git a/_includes/components/resume/experience-role.njk b/_includes/components/resume/experience-role.njk
index 92c108a..c1a1ba4 100644
--- a/_includes/components/resume/experience-role.njk
+++ b/_includes/components/resume/experience-role.njk
@@ -1,13 +1,14 @@
{# uses loop variable role #}
+{% set hasShortDescription = role.highlight and (not role.description.highlight) and role.description.short %}
-
+
- {% if role.description %}
-
- {{ role.description | md | safe }}
+ {% if role.description.full %}
+
+ {{ role.description.full | md | safe }}
{% endif %}
- {% if (not role.highlight) and role.shortDescription %}
+ {% if hasShortDescription %}
- {{ role.shortDescription | md | safe }}
+ {{ role.description.short | md | safe }}
{% endif %}
{% if role.achievements %}
{% for achievement in role.achievements %}
- - {{achievement.description | md | safe }}
+ - {{achievement.description | md | safe }}
{% endfor %}
{% endif %}
diff --git a/_includes/components/resume/experience-section.njk b/_includes/components/resume/experience-section.njk
index 2163ee4..0b339c2 100644
--- a/_includes/components/resume/experience-section.njk
+++ b/_includes/components/resume/experience-section.njk
@@ -1,10 +1,13 @@
{# uses page variable filter.experience #}
{# uses data store experience.roles #}
{% set experienceFilter = filter.experience if filter and filter.experience else "all" %}
-{% set experienceRolesFiltered = experience.roles | identifyHighlightsRecursive(experienceFilter, "achievements") %}
+{% set experienceRolesFiltered = experience.roles | identifyExperienceHighlights(experienceFilter) %}
{% for role in experienceRolesFiltered %}
diff --git a/_includes/components/resume/skill-section.njk b/_includes/components/resume/skill-section.njk
index e54ba3f..4ee81b0 100644
--- a/_includes/components/resume/skill-section.njk
+++ b/_includes/components/resume/skill-section.njk
@@ -3,14 +3,12 @@
{% set skillFilter = filter.skills if filter and filter.skills else "all" %}
{% set skillCategoriesFiltered = skills.categories | identifyHighlightsRecursive(skillFilter, "skills") %}
-
-
- {% for category in skillCategoriesFiltered %}
- {% include "components/resume/skill-subcategory.njk" %}
- {% endfor %}
+
+{% for category in skillCategoriesFiltered %}
+ {% include "components/resume/skill-subcategory.njk" %}
+{% endfor %}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 259e461..8831902 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -2,7 +2,7 @@
{% include "components/head.njk" %}
-
+
{{ layoutContent | safe }}