1
0
Fork 0

Allow entire roles to be marked as lowlights.

Squashed commit of the following:

commit 4c7c9775512e87c5d20aaf6a220640aa54720b5f
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:55:39 2020 -0500

    Update experience filtering to allow hiding entire roles

commit bfcf650fdd57aa22f60cdc0b83f395c91494c32a
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:54:00 2020 -0500

    Simplify highlighting CSS/JS now that inner containers don't exist

commit 4cf7bac2915776021b0ac16aa1661910869e8160
Author: Mari <mstaib.git@reya.zone>
Date:   Wed Feb 5 09:14:53 2020 -0500

    Add identifyExperienceHighlights filter for filtering role descriptions
experiences
Mari 5 years ago
parent 930bfcd4c5
commit 1fbed3d4b7
  1. 28
      .eleventy.js
  2. 60
      _includes/assets/css/main.css
  3. 17
      _includes/assets/css/screen.css
  4. 22
      _includes/assets/js/main.js
  5. 22
      _includes/components/resume/award-section.njk
  6. 22
      _includes/components/resume/contact-section.njk
  7. 22
      _includes/components/resume/education-section.njk
  8. 17
      _includes/components/resume/experience-role.njk
  9. 5
      _includes/components/resume/experience-section.njk
  10. 18
      _includes/components/resume/skill-section.njk
  11. 2
      _includes/layouts/base.njk
  12. 2
      _includes/layouts/resume.njk
  13. 3
      index.md

@ -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)) {

@ -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;
}

@ -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%);
}

@ -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");
}

@ -3,16 +3,14 @@
{% set awardsFilter = filter.awards if filter and filter.awards else "all" %}
{% set awardsFiltered = awards.awards | identifyHighlights(awardsFilter) %}
<div class="highlight-container">
<div class="section-header">
<h2>Awards</h2>
{% if awardsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="awards">
{% for award in awardsFiltered %}
{% include "components/resume/award.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Awards</h2>
{% if awardsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="awards">
{% for award in awardsFiltered %}
{% include "components/resume/award.njk" %}
{% endfor %}
</ul>

@ -3,16 +3,14 @@
{% set contactFilter = filter.contact if filter and filter.contact else "all" %}
{% set contactsFiltered = contact.methods | identifyHighlights(contactFilter) %}
<div class="highlight-container">
<div class="section-header">
<h2>Contact</h2>
{% if contactsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="contacts">
{% for contact in contactsFiltered %}
{% include "components/resume/contact.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Contact</h2>
{% if contactsFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="contacts">
{% for contact in contactsFiltered %}
{% include "components/resume/contact.njk" %}
{% endfor %}
</ul>

@ -3,16 +3,14 @@
{% set educationFilter = filter.education if filter and filter.education else "all" %}
{% set educationFiltered = education.programs | identifyHighlights(educationFilter) %}
<div class="highlight-container">
<div class="section-header">
<h2>Education</h2>
{% if educationFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="programs">
{% for program in educationFiltered %}
{% include "components/resume/education.njk" %}
{% endfor %}
</ul>
<div class="section-header">
<h2>Education</h2>
{% if educationFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<ul class="programs">
{% for program in educationFiltered %}
{% include "components/resume/education.njk" %}
{% endfor %}
</ul>

@ -1,13 +1,14 @@
{# uses loop variable role #}
{% set hasShortDescription = role.highlight and (not role.description.highlight) and role.description.short %}
<article class="role highlight-container{% if not role.highlight %} minimized{% endif %}">
<article class="role {% if not role.highlight %} lowlight{% endif %}{% if role.highlight and not role.description.highlight %} minimized{% endif %}">
<div class="header">
{% if role.image %}<img src="/img/{{ role.image }}" class="icon" aria-hidden="true" />{% endif %}
<div class="firstline">
<h3 class="name">
{{ role.name }}&nbsp;
</h3>
{% 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 %}
</div>
@ -20,20 +21,20 @@
</span>
</span>
</div>
{% if role.description %}
<div class="description{% if (not role.highlight) and role.shortDescription %} lowlight{% endif %}">
{{ role.description | md | safe }}
{% if role.description.full %}
<div class="description{% if hasShortDescription %} lowlight{% endif %}">
{{ role.description.full | md | safe }}
</div>
{% endif %}
{% if (not role.highlight) and role.shortDescription %}
{% if hasShortDescription %}
<div class="description highlight">
{{ role.shortDescription | md | safe }}
{{ role.description.short | md | safe }}
</div>
{% endif %}
{% if role.achievements %}
<ul class="achievements">
{% for achievement in role.achievements %}
<li{% if not achievement.highlight %} class="lowlight"{% endif %}>{{achievement.description | md | safe }}</li>
<li{% if role.highlight and not achievement.highlight %} class="lowlight"{% endif %}>{{achievement.description | md | safe }}</li>
{% endfor %}
</ul>
{% endif %}

@ -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) %}
<div class="section-header">
<h2>Experience</h2>
{% if experienceRolesFiltered | hasLowlights %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
<div class="roles">
{% for role in experienceRolesFiltered %}

@ -3,14 +3,12 @@
{% set skillFilter = filter.skills if filter and filter.skills else "all" %}
{% set skillCategoriesFiltered = skills.categories | identifyHighlightsRecursive(skillFilter, "skills") %}
<div class="highlight-container">
<div class="section-header">
<h2>Skills</h2>
{% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
{% for category in skillCategoriesFiltered %}
{% include "components/resume/skill-subcategory.njk" %}
{% endfor %}
<div class="section-header">
<h2>Skills</h2>
{% if skillCategoriesFiltered | hasLowlightsRecursive("skills") %}
{% include "components/resume/highlight-icon.njk" %}
{% endif %}
</div>
{% for category in skillCategoriesFiltered %}
{% include "components/resume/skill-subcategory.njk" %}
{% endfor %}

@ -2,7 +2,7 @@
<html lang="en">
{% include "components/head.njk" %}
<body>
<main id="page" class="highlight-container">
<main>
{{ layoutContent | safe }}
</main>
<footer>

@ -2,7 +2,7 @@
layout: layouts/base.njk
---
<div id="resume">
<div id="highlight-container">
<header>
{% include "components/resume/header.njk" %}
</header>

@ -11,9 +11,10 @@ filter:
- "-python"
languages: all
experience:
"-all": false
"all": false
"bazel-configurability":
- other
"-wallet-testing": false
awards:
- perfy
---

Loading…
Cancel
Save