142 lines
4.4 KiB
Plaintext
142 lines
4.4 KiB
Plaintext
{% include "header" %}
|
|
|
|
<main class="np-main np-homepage">
|
|
<div class="np-homepage-hero">
|
|
<img class="np-homepage-hero-image"
|
|
src="{{ homepage.artwork_url }}"
|
|
alt="{{ homepage.headline }}"
|
|
/>
|
|
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline np-header-font-color" style="color:#fff">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="np-homepage-subheadline np-header-font-color" style="color:#fff">
|
|
{{ homepage.subheadline }}
|
|
</div>
|
|
{% comment %} <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
|
Explore Courses
|
|
</a> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
{% include "sub_navigation" %}
|
|
<div class="np-course-library np-max-width">
|
|
<h2 class="library-title">Course Library</h2>
|
|
{% if current_school.filterable_categories.any? %}
|
|
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
|
|
{% assign carousel_count = 1 %}
|
|
{% for category in categories_by_name %}
|
|
{% assign carousel_count = carousel_count | plus: 1 %}
|
|
{% assign courses_per_carousel = 0 %}
|
|
|
|
{% assign category_name_split = category.name | split: " " %}
|
|
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
|
|
|
|
<div class="category-section" data-carousel="{{carousel_count}}" style="display:none;" id="{{ category_name_joined }}">
|
|
<div class="carousel-header-wrapper">
|
|
<h3 class="carousel-header">{{category.name}}</h3>
|
|
<a href="#" class="show-more" data-toggle-carousel="{{carousel_count}}" data-carousel-state="initialized">Show More</a>
|
|
</div>
|
|
|
|
{% assign catalog_courses = courses.in_catalog %}
|
|
{% if catalog_courses.any? %}
|
|
{% for course in catalog_courses %}
|
|
{% for course_category in course.categories %}
|
|
{% if category.name == course_category.name %}
|
|
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% include "resources" %}
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$(".category-section").each(function() {
|
|
let carousel = $(this).find(".category-carousel")
|
|
let carouselSize = $(carousel).attr("data-slider-size")
|
|
|
|
carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
|
|
if(!slick.$dots){ return; }
|
|
|
|
(slick.$dots[0].children.length > 1) ? null : hideDotsAndShowMore()
|
|
|
|
function hideDotsAndShowMore() {
|
|
slick.$dots[0].classList.add("np-hidden")
|
|
carousel.closest(".category-section").find(".show-more").addClass("np-hidden")
|
|
}
|
|
});
|
|
|
|
if (carouselSize > 0) {
|
|
initSlickCarousel(carousel)
|
|
$(this).css("display", "block")
|
|
setTimeout(() => { $(this).css("opacity", "1") }, 300)
|
|
}
|
|
|
|
})
|
|
})
|
|
|
|
function initSlickCarousel(carousel) {
|
|
$(carousel).slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
cssEase: 'linear',
|
|
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
|
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
|
infinite: false,
|
|
dots: true,
|
|
arrows: true,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1170,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 2,
|
|
arrows: true,
|
|
dots: true,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
arrows: false,
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
$('.show-more').click(function(e) {
|
|
e.preventDefault();
|
|
|
|
let currentCarousel = $(this).closest(".category-section").find(".category-carousel");
|
|
|
|
if ($(this).attr("data-carousel-state") == "initialized") {
|
|
$(this).text("Show Less")
|
|
currentCarousel.slick('unslick');
|
|
$(this).attr("data-carousel-state", "destroyed")
|
|
} else if ($(this).attr("data-carousel-state") == "destroyed" ) {
|
|
$(this).text("Show More")
|
|
initSlickCarousel(currentCarousel);
|
|
$(this).attr("data-carousel-state", "initialized")
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
|
|
|
|
</style> |