150 lines
3.8 KiB
Plaintext
150 lines
3.8 KiB
Plaintext
<div class="np-md-flex-wrapper">
|
|
<div>
|
|
<div class="np-dashboard-resources-title">
|
|
Featured Courses
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="courses-carousel np-carousel" data-topic="featured-courses">
|
|
{% assign items = courses.enrolled %}
|
|
{% if items.any? %}
|
|
{% assign sorted_items =items | sort: "name" %}
|
|
{% for course in sorted_items %}
|
|
{% if course.properties.featured %}
|
|
<div class="np-carousel-card "> {% include "cards_course" with course %}</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
.np-progress-filter-label {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
padding-right: 7px;
|
|
text-transform: none;
|
|
font-weight:500;
|
|
font-size:0.812rem;
|
|
}
|
|
.np-progress-filter-wrapper {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
.filter-select-wrapper {
|
|
position: relative;
|
|
padding:0;
|
|
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
color: #fff;
|
|
height:auto;
|
|
text-transform: none;
|
|
background: transparent;
|
|
border-radius:0;
|
|
}
|
|
.filter-select-wrapper:hover {
|
|
background:transparent;
|
|
color:#fff;
|
|
}
|
|
.select-items {
|
|
position: absolute;
|
|
background-color: #062531;
|
|
top: 105%;
|
|
left: -2px;
|
|
z-index: 99;
|
|
width: 102%;
|
|
border: 2px solid rgba(255, 255, 255, 0.25);
|
|
border-top:none;
|
|
}
|
|
.select-items div {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
border-top:none;
|
|
cursor: pointer;
|
|
width:100%;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
|
.select-selected {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 9px 66px 9px 20px;
|
|
position: relative;
|
|
color:#fff;
|
|
}
|
|
.select-selected::after {
|
|
content:"\f078";
|
|
font-family: "Font Awesome 5 Pro";
|
|
position: absolute;
|
|
width:20px;
|
|
height:100%;
|
|
color:rgba(255, 255, 255, 0.5);
|
|
right:10px;
|
|
top:0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size:1rem;
|
|
}
|
|
.select-selected::before {
|
|
content:"";
|
|
position: absolute;
|
|
width:20px;
|
|
height:100%;
|
|
border-left:2px solid rgba(255, 255, 255, 0.25);
|
|
right:20px;
|
|
top:0;
|
|
}
|
|
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
|
.same-as-selected,
|
|
.filter-select-wrapper select,
|
|
.select-hide {
|
|
display: none;
|
|
}
|
|
.mo-filter-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.select-items div:hover,
|
|
.same-as-selected {
|
|
background-color: #062531;
|
|
}
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
|
$(document).ready(function(){
|
|
|
|
$(".courses-carousel").not('.slick-initialized').slick({
|
|
slidesToShow: 3,
|
|
cssEase: 'linear',
|
|
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
|
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
|
infinite: false,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1170,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 768,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
dots: false,
|
|
arrows: true,
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|