Changed Luminates name to Scintilla (changing on 5th Feb). Downloaded the sandbox with all of Raj's changes.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,222 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="featured-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign featured_courses_count = 0 %}
|
||||
<div class="featured-courses-wrapper">
|
||||
<div class="featured-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course %}
|
||||
{% assign is_featured = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "featured" %}
|
||||
{% assign is_featured = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if featured_courses_count > 0 %}
|
||||
<div class="featured-see-more-wrapper">
|
||||
<a href="/app/articles">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".featured-courses-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initFeaturedCoursesCarousel() {
|
||||
var featuredSlider = tns({
|
||||
container: '.featured-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:true,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.featured-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.featured-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.featured-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-featured-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user