60 lines
1.9 KiB
Plaintext
60 lines
1.9 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|
{% include "sub_navigation" %}
|
|
<main class="np-main np-courses np-subpage-container np-max-width">
|
|
<div class="courses-header">
|
|
<div class="courses-header-left">
|
|
<div class="np-resource-title">
|
|
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
|
</div>
|
|
<div class="np-resource-subtitle">
|
|
{% t .headline, key: current_school.course_vocabulary %}
|
|
</div>
|
|
</div>
|
|
<div class="courses-header-right np-hidden" onclick="clearFilter()">
|
|
Clear Filter
|
|
</div>
|
|
</div>
|
|
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.courses-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.courses-header-right {
|
|
margin: auto 0;
|
|
border: white 1px solid;
|
|
border-radius: 8px;
|
|
padding: 12px 16px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
let params = new URLSearchParams(document.location.search);
|
|
let category = params.get("category");
|
|
if (category) {
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll(`[category-id]:not([category-id*="${category}"]`).forEach((x) => {
|
|
x.classList.add('np-hidden')
|
|
})
|
|
document.querySelector('.row.row-with-thumbnails.np-hidden').classList.remove('np-hidden')
|
|
document.querySelector('.courses-header-right').classList.remove('np-hidden')
|
|
})
|
|
}
|
|
else {
|
|
document.querySelector('.row.row-with-thumbnails.np-hidden').classList.remove('np-hidden')
|
|
}
|
|
|
|
function clearFilter() {
|
|
document.querySelectorAll('.np-hidden[category-id]').forEach((x) => {
|
|
x.classList.remove('np-hidden')
|
|
})
|
|
document.querySelector('.courses-header-right').classList.add('np-hidden')
|
|
}
|
|
</script>
|