Add highlight to currently-selected education course

This commit is contained in:
Ben Visness 2022-10-31 17:39:19 -05:00
parent 2fbdf19f41
commit b75b59aad5
3 changed files with 37 additions and 0 deletions

View File

@ -8306,6 +8306,13 @@ nav.timecodes {
text-align: center;
margin: 10px 0; }
.edu-course.highlight {
border-left: 0.25rem solid black;
border-color: #666;
border-color: var(--link-color);
background-color: #ccc;
background-color: var(--theme-color-dimmest); }
.edu-course .edu-article.coming-soon {
font-style: italic; }

View File

@ -1,4 +1,10 @@
.edu-course {
&.highlight {
border-left: 0.25rem solid black;
@include usevar(border-color, link-color);
@include usevar(background-color, theme-color-dimmest);
}
.edu-article.coming-soon {
@extend .c--dimmer;
font-style: italic;

View File

@ -85,5 +85,29 @@
<div><a href="{{ .NewArticleUrl }}"><span class="big pr1">+</span> New Article</a></div>
</div>
{{ end }}
<script>
function highlightHash(hash) {
if (!hash) {
return;
}
const courses = document.querySelectorAll('.edu-course');
for (const course of courses) {
course.classList.remove('highlight');
}
const selectedCourse = document.querySelector(hash);
if (selectedCourse) {
selectedCourse.classList.add('highlight');
}
}
highlightHash(window.location.hash);
for (const a of document.querySelectorAll('a.edu-topic')) {
a.addEventListener('click', e => {
highlightHash(e.target.closest('a').hash);
});
}
</script>
</div>
{{ end }}