1
0
Fork 0

Make highlight icons act as additional Show All buttons.

main
Mari 5 years ago
parent 122ba8533a
commit 66a585672b
  1. 4
      _includes/assets/css/screen.css
  2. 2
      _includes/assets/js/main.js
  3. 4
      _includes/components/resume/highlight-icon.njk

@ -83,6 +83,10 @@
line-height: 2;
}
.highlight-icon {
cursor: pointer;
}
.show-all:hover, .show-highlights:hover, #print:hover,
.show-all:focus, .show-highlights:focus, #print:focus {
background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 100, 0.1) 20%, rgba(0, 0, 100, 0.2) 30%, rgba(0, 0, 100, 0.2) 70%, rgba(0, 0, 100, 0.1) 80%, transparent 100%);

@ -16,7 +16,7 @@
}
document.addEventListener("click", function(event) {
if (event.target.matches(".show-all, .show-all *")) {
if (event.target.matches(".show-all, .show-all *, .highlight-icon, .highlight-icon *")) {
showAll(event.target);
} else if (event.target.matches(".show-highlights, .show-highlights *")) {
showHighlights(event.target);

@ -1,5 +1,5 @@
<img
class="highlight-icon"
src="/img/spotlights.svg"
alt="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data."
title="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data." />
alt="Showing highlights only. Click to show additional (but likely irrelevant) data."
title="Showing highlights only. Click to show additional (but likely irrelevant) data." />

Loading…
Cancel
Save