144 lines
4.2 KiB
Plaintext
144 lines
4.2 KiB
Plaintext
<section class="filter-section">
|
|
<div class="filter-section-container">
|
|
<div class="filter-heading">
|
|
<div class="heading">My Courses</div>
|
|
</div>
|
|
<div class="filters-wrapper">
|
|
<div class="filter-categories-container default-swapper">
|
|
<div class="filter-category filter-category-active" id="cat1" onclick="filterCarousel('enrolled', this)">
|
|
Assigned
|
|
</div>
|
|
<div class="filter-category " id="cat2" onclick="filterCarousel('in-progress', this)">
|
|
In Progress
|
|
</div>
|
|
<div class="filter-category " id="cat3" onclick="filterCarousel('completed', this)">
|
|
Completed
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-categories-container mobile-swapper">
|
|
<div class="filter-category filter-category-mobile filter-category-active-mobile" id="cat1-mobile" onclick="filterCarousel('enrolled', this)">
|
|
Assigned
|
|
</div>
|
|
<div class="filter-category filter-category-mobile" id="cat2-mobile" onclick="filterCarousel('in-progress', this)">
|
|
In Progress
|
|
</div>
|
|
<div class="filter-category filter-category-mobile" id="cat3-mobile" onclick="filterCarousel('completed', this)">
|
|
Completed
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="carousel-container">
|
|
<div class="dashboard-carousel-wrapper " id="carousel-courses-enrolled">
|
|
{% if courses.enrolled.any? %}
|
|
<div class="dashboard-carousel row" >
|
|
{% for course in courses.enrolled %}
|
|
{% include "cards_course" with course %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-container">
|
|
<div class="dashboard-carousel-wrapper np-hidden" id="carousel-courses-in-progress">
|
|
{% assign is_progress = false %}
|
|
<div class="dashboard-carousel row" >
|
|
{% for course in courses.enrolled %}
|
|
{% if course.started? and course.completed? == false%}
|
|
{% assign is_progress = true %}
|
|
{% include "cards_course" with course %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="carousel-container">
|
|
<div class="dashboard-carousel-wrapper np-hidden" id="carousel-courses-completed">
|
|
{% assign is_progress = false %}
|
|
<div class="dashboard-carousel row" >
|
|
{% for course in courses.enrolled %}
|
|
{% if course.completed? %}
|
|
{% assign is_progress = true %}
|
|
{% include "cards_course" with course %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.click {
|
|
background: #2356B2;
|
|
color: #fff
|
|
}
|
|
#cat1 {
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
#cat3 {
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
document.querySelectorAll('.dashboard-carousel').forEach( x => {
|
|
var i = 0
|
|
|
|
var slider = tns({
|
|
container: x,
|
|
items: 3,
|
|
controls: true,
|
|
controlsText: ['<i class="fal fa-chevron-left left-arrow"></i>', '<i class="fal fa-chevron-right right-arrow"></i>'],
|
|
responsive: {
|
|
300: {
|
|
edgePadding: 20,
|
|
gutter: 20,
|
|
items: 1
|
|
},
|
|
700: {
|
|
gutter: 30
|
|
},
|
|
900: {
|
|
items: 3
|
|
}
|
|
}
|
|
});
|
|
|
|
Array.from(x.children).forEach( y => {
|
|
if (y.id !== '')
|
|
i++
|
|
});
|
|
|
|
if (i < 4 ) {
|
|
if (i !== 1 && window.screen.availWidth < 700) console.log("not destroyed")
|
|
else slider.destroy()
|
|
}
|
|
})
|
|
function filterCarousel(x, element) {
|
|
document.querySelectorAll(".dashboard-carousel-wrapper").forEach(y => {
|
|
if (y.id.includes(x)) {
|
|
y.classList.remove('np-hidden');
|
|
}
|
|
|
|
else {
|
|
y.classList.add('np-hidden');
|
|
}
|
|
})
|
|
|
|
if(element.classList.contains('filter-category-mobile')){
|
|
document.querySelector('.filter-category-active-mobile').classList.remove('filter-category-active-mobile');
|
|
element.classList.add('filter-category-active-mobile');
|
|
} else {
|
|
document.querySelector('.filter-category-active').classList.remove('filter-category-active');
|
|
element.classList.add('filter-category-active');
|
|
}
|
|
}
|
|
|
|
|
|
</script> |