From 1fbed3d4b76eb3018cc6a56dc185db889ad22226 Mon Sep 17 00:00:00 2001 From: Mari Date: Wed, 5 Feb 2020 10:08:29 -0500 Subject: [PATCH] Allow entire roles to be marked as lowlights. Squashed commit of the following: commit 4c7c9775512e87c5d20aaf6a220640aa54720b5f Author: Mari Date: Wed Feb 5 09:55:39 2020 -0500 Update experience filtering to allow hiding entire roles commit bfcf650fdd57aa22f60cdc0b83f395c91494c32a Author: Mari Date: Wed Feb 5 09:54:00 2020 -0500 Simplify highlighting CSS/JS now that inner containers don't exist commit 4cf7bac2915776021b0ac16aa1661910869e8160 Author: Mari Date: Wed Feb 5 09:14:53 2020 -0500 Add identifyExperienceHighlights filter for filtering role descriptions --- .eleventy.js | 28 +++++++++ _includes/assets/css/main.css | 60 +++++-------------- _includes/assets/css/screen.css | 17 ------ _includes/assets/js/main.js | 22 +------ _includes/components/resume/award-section.njk | 22 ++++--- .../components/resume/contact-section.njk | 22 ++++--- .../components/resume/education-section.njk | 22 ++++--- .../components/resume/experience-role.njk | 17 +++--- .../components/resume/experience-section.njk | 5 +- _includes/components/resume/skill-section.njk | 18 +++--- _includes/layouts/base.njk | 2 +- _includes/layouts/resume.njk | 2 +- index.md | 3 +- 13 files changed, 99 insertions(+), 141 deletions(-) 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) %} -
-
-

Awards

- {% if awardsFiltered | hasLowlights %} - {% include "components/resume/highlight-icon.njk" %} - {% endif %} -
-
    - {% for award in awardsFiltered %} - {% include "components/resume/award.njk" %} - {% endfor %} -
+
+

Awards

+ {% if awardsFiltered | hasLowlights %} + {% include "components/resume/highlight-icon.njk" %} + {% endif %}
+
    + {% 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) %} -
-
-

Contact

- {% if contactsFiltered | hasLowlights %} - {% include "components/resume/highlight-icon.njk" %} - {% endif %} -
-
    - {% for contact in contactsFiltered %} - {% include "components/resume/contact.njk" %} - {% endfor %} -
+
+

Contact

+ {% if contactsFiltered | hasLowlights %} + {% include "components/resume/highlight-icon.njk" %} + {% endif %}
+
    + {% for contact in contactsFiltered %} + {% include "components/resume/contact.njk" %} + {% endfor %} +
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) %} -
-
-

Education

- {% if educationFiltered | hasLowlights %} - {% include "components/resume/highlight-icon.njk" %} - {% endif %} -
-
    - {% for program in educationFiltered %} - {% include "components/resume/education.njk" %} - {% endfor %} -
+
+

Education

+ {% if educationFiltered | hasLowlights %} + {% include "components/resume/highlight-icon.njk" %} + {% endif %}
+
    + {% 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.image %}{% endif %}

{{ role.name }} 

- {% if ((not role.highlight) and role.shortDescription) or role.achievements | hasLowlights %} + {% if role.highlight and (hasShortDescription or role.achievements | hasLowlights) %} {% include "components/resume/highlight-icon.njk" %} {% endif %}
@@ -20,20 +21,20 @@
- {% 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) %}

Experience

+ {% if experienceRolesFiltered | hasLowlights %} + {% include "components/resume/highlight-icon.njk" %} + {% endif %}
{% 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") %} -
-
-

Skills

- {% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %} - {% include "components/resume/highlight-icon.njk" %} - {% endif %} -
- {% for category in skillCategoriesFiltered %} - {% include "components/resume/skill-subcategory.njk" %} - {% endfor %} +
+

Skills

+ {% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %} + {% include "components/resume/highlight-icon.njk" %} + {% endif %}
+{% 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 }}