213 lines
6.3 KiB
Plaintext
213 lines
6.3 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
|
<div class="subheader">
|
|
|
|
</div>
|
|
<main class="catalog container-fluid">
|
|
<div class="catalog-wrapper row">
|
|
|
|
<div class="catalog-filter col-md-4 col-12 np-hidden-mobile">
|
|
{% include 'catalog_filter' %}
|
|
</div>
|
|
<div class="catalog-filter-mobile-button np-hidden-desktop">
|
|
Filter <i class="fa-solid fa-angle-down"></i>
|
|
</div>
|
|
<div class="catalog-courses container-fluid col-md-8 col-12">
|
|
<div class="catalog-courses-container row">
|
|
{% for course in courses.in_catalog %}
|
|
{% include 'catalog_course_card' with course %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include 'catalog_filter_mobile' %}
|
|
</main>
|
|
|
|
{% include "footer" %}
|
|
<style>
|
|
.catalog {
|
|
padding: 40px 4% 80px;
|
|
}
|
|
.row > * {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
.catalog-filter-mobile-button {
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.category-hidden {
|
|
display: none;
|
|
}
|
|
.diff-hidden {
|
|
display: none;
|
|
}
|
|
.time-hidden {
|
|
display: none;
|
|
}
|
|
.course-card {
|
|
margin-bottom: 60px;
|
|
}
|
|
.course-card-content-title {
|
|
font-weight: 400;
|
|
line-height: 32px;
|
|
font-size: 22px;
|
|
margin-top: 20px;
|
|
margin-bottom: 8px;
|
|
}
|
|
.course-card-content-time {
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: -0.5px;
|
|
opacity: 0.4;
|
|
margin: 8px 0;
|
|
}
|
|
.course-card-content-description {
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
letter-spacing: -0.5px;
|
|
opacity: 0.4;
|
|
}
|
|
.course-card-content-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.np-course-version-outdated-popup-trigger {
|
|
color: #2F8481;
|
|
}
|
|
|
|
@media only screen and (min-width: 1800px) {
|
|
.catalog {
|
|
padding: 40px 10% 80px;
|
|
}
|
|
.course-card-content-time {
|
|
font-size: 18px;
|
|
}
|
|
.course-card-content-description {
|
|
font-size: 18px;
|
|
}
|
|
.course-card-content-title {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1500px) {
|
|
.row > * {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 992px) {
|
|
.course-card-content-description {
|
|
font-size: 22px;
|
|
}
|
|
.course-card-content-title {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
/* category */
|
|
$('.course-card-content-title').each(function() {
|
|
$clamp($(this)[0], {clamp: 3})
|
|
})
|
|
$('.course-card-content-description').each(function() {
|
|
$(this).text($(this).text().trim())
|
|
$clamp($(this)[0], {clamp: 4})
|
|
})
|
|
/* convert values to same format */
|
|
$('[category]').each(function(){
|
|
$(this).attr('category', $(this).attr('category').replaceAll(' ', '').replaceAll('+', ' ').toLowerCase());
|
|
});
|
|
/* add action to filters on click */
|
|
$('.filter-element-category').click(function(){
|
|
$('.category-selected').removeClass('category-selected');
|
|
$(this).toggleClass('category-selected');
|
|
$('.course-card').removeClass('category-hidden');
|
|
/* hides all cards without selected category if the 'All' wasn't selected */
|
|
if($(this).attr('category') != 'none') {
|
|
$('.course-card').not('[category~='+$(this).attr('category')+']').addClass('category-hidden');
|
|
}
|
|
});
|
|
/* difficulty */
|
|
$('.filter-element-diff').click(function() {
|
|
if ($('.diff-selected').length == 0) {
|
|
/* first filter is being checked */
|
|
$('.course-card').not('[diff=' + $(this).attr('diff') + ']').addClass('diff-hidden');
|
|
}
|
|
else if ($('.diff-selected').length == 1 && $(this).hasClass('diff-selected')) {
|
|
/* last filter is being unchecked */
|
|
$('.course-card').removeClass('diff-hidden');
|
|
}
|
|
else {
|
|
$('.course-card[diff=' + $(this).attr('diff') + ']').toggleClass('diff-hidden');
|
|
}
|
|
$(this).toggleClass('diff-selected');
|
|
});
|
|
/* duration */
|
|
$('.filter-element-time').click(function() {
|
|
if ($('.time-selected').length == 0) {
|
|
/* first filter is being checked */
|
|
$('.course-card').not('[time=' + $(this).attr('time') + ']').addClass('time-hidden');
|
|
}
|
|
else if ($('.time-selected').length == 1 && $(this).hasClass('time-selected')) {
|
|
/* last filter is being unchecked */
|
|
$('.course-card').removeClass('time-hidden');
|
|
}
|
|
else {
|
|
$('.course-card[time=' + $(this).attr('time') + ']').toggleClass('time-hidden');
|
|
}
|
|
$(this).toggleClass('time-selected');
|
|
});
|
|
/* handling hashes in URL */
|
|
if (window.location.hash) {
|
|
hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
|
|
hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
|
|
var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
|
|
a.click();
|
|
a.toggleClass("category-selected");
|
|
history.pushState("", document.title, window.location.pathname + window.location.search);
|
|
};
|
|
$(window).on('hashchange', function() {
|
|
if (window.location.hash) {
|
|
hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
|
|
hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
|
|
var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
|
|
a.click();
|
|
a.toggleClass("category-selected");
|
|
history.pushState("", document.title, window.location.pathname + window.location.search);
|
|
};
|
|
});
|
|
/* parse time property to human format */
|
|
$('.course-card-content-time[time]').each( function() {
|
|
var a = parseInt($(this).text());
|
|
var minutes = a % 60;
|
|
var hours = Math.floor(a / 60);
|
|
var time = '';
|
|
if (hours > 0) {
|
|
time = time + hours.toString() + 'h ';
|
|
}
|
|
if (minutes > 0) {
|
|
time = time + minutes.toString() + 'm';
|
|
}
|
|
$(this).text(time);
|
|
});
|
|
/* mobile filter menu */
|
|
$(".catalog-filter-mobile-button").click(function () {
|
|
$(".mobile-filter").removeClass("np-hidden");
|
|
document.body.style.overflow = "hidden";
|
|
$(".greyed").removeClass("np-hidden");
|
|
});
|
|
$(".greyed").click(function () {
|
|
document.body.style.overflow = "scroll";
|
|
if(! $(".mobile-filter").hasClass('np-hidden')){
|
|
$(".mobile-filter").addClass("np-hidden");
|
|
}
|
|
$(".greyed").addClass("np-hidden");
|
|
});
|
|
$(".mobile-filter-header").click(function () {
|
|
$(".mobile-filter").addClass("np-hidden");
|
|
document.body.style.overflow = "scroll";
|
|
$(".greyed").addClass("np-hidden");
|
|
});
|
|
</script> |