Files

72 lines
1.6 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="np-resource-title">
My courses
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-9">
{% include "courses_index", class: "col-xs-12 col-md-6" %}
</div>
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
{% include "filter_sidebar_courses" %}
</div>
</div>
</main>
{% include "section_datasnipper_expert" %}
{% include "footer" %}
<style>
.np-resource-title {
margin-bottom: 32px;
}
@media(min-width:768px) {
.row .np-card.course-card {
padding: 0 16px 48px;
}
.row-with-thumbnails {
margin-left: -16px;
margin-right: -16px;
}
}
</style>
{% comment %} <script>
const categoryFilters = document.querySelectorAll(".category-filter")
const courseColumns = document.querySelectorAll(".course-columns")
categoryFilters.forEach((filter) => {
filter.addEventListener("click", function(e) {
setActiveFilter(e.target)
filterCourses(e.target.getAttribute("data-cat"))
})
})
function setActiveFilter(selectedFilter) {
categoryFilters.forEach((filter) => {
filter.classList.remove("active")
})
selectedFilter.classList.add("active")
}
function filterCourses(filter) {
courseColumns.forEach((col) => {
col.style.display = "none"
})
courseColumns.forEach((col) => {
if (col.getAttribute("data-categories").includes(filter)) {
col.style.display = "flex"
}
})
}
</script> {% endcomment %}