160 lines
3.9 KiB
Plaintext
160 lines
3.9 KiB
Plaintext
{% comment %}
|
|
For this widget to work you must import Slick CSS and JS
|
|
{% endcomment %}
|
|
|
|
<div class="np-dashboard-resources">
|
|
<div class="np-card">
|
|
<div class="np-card-container np-dashboard-border">
|
|
{% if courses.enrolled.any? %}
|
|
<div class="np-card-content-achievements">
|
|
<div class="achivements-carousel">
|
|
{% for course in courses.enrolled %}
|
|
{% assign earnedBadges = 0 %}
|
|
{% if course.progress == 100 %}
|
|
{% assign earnedBadges = earnedBadges | plus: 1 %}
|
|
<div>
|
|
<div class="np-card-content-title col-12">
|
|
{{ course.name }}
|
|
</div>
|
|
<div class="col-12 ">
|
|
{% comment %} <img class="np-achievement-icon" src="{{ course.properties.course_badge }}" /> {% endcomment %}
|
|
<i class="{{ course.properties.course_badge }} np-achievement-icon"></i>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if earnedBadges == 0 %}
|
|
<div class="no-badges-message">Complete a course to earn your first badge</div>
|
|
{% endif %}
|
|
</div>
|
|
{% comment %} <a href="#" class="np-view-all-achievements">View All</a> {% endcomment %}
|
|
{% else %}
|
|
{% capture message %}
|
|
{% t shared.zero_state.courses.index,
|
|
key: current_school.course_vocabulary
|
|
%}
|
|
{% endcapture %}
|
|
{% include "courses_zero_state", message: message %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
$('.achivements-carousel').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
dots: false,
|
|
infinite: true,
|
|
autoplay: false,
|
|
autoplaySpeed: 5000,
|
|
cssEase: 'linear',
|
|
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
|
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
|
responsive: [{
|
|
breakpoint: 991,
|
|
settings: {
|
|
|
|
dots: false
|
|
}
|
|
}]
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.no-badges-message {
|
|
text-align: center;
|
|
padding: 32px 0 45px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.np-card-content-achievements {
|
|
min-height:200px;
|
|
}
|
|
|
|
|
|
.np-card-content-achievements .np-card-content-title {
|
|
font-size: 18px;
|
|
color:#444;
|
|
text-align:center;
|
|
font-weight:500;
|
|
}
|
|
|
|
.np-achievement-icon {
|
|
color: #bec2c6;
|
|
margin:14px auto 26px;
|
|
width:130px;
|
|
}
|
|
|
|
i.np-achievement-icon {
|
|
color: #058ccf;
|
|
font-size: 80px;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.np-card-content-achievements .slick-slider {
|
|
width:100%;
|
|
max-width: 375px;
|
|
margin: auto;
|
|
}
|
|
|
|
.np-view-all-achievements {
|
|
color:#2BB24C;
|
|
font-size:0.75rem;
|
|
text-transform:uppercase;
|
|
text-align:center;
|
|
text-decoration:none;
|
|
margin-bottom:1.5rem;
|
|
}
|
|
|
|
.np-card-content-achievements {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 2rem 2rem .5rem;
|
|
}
|
|
|
|
.achievements-total-points-display {
|
|
color:#2BB24C;
|
|
font-size:0.812rem;
|
|
text-transform:uppercase;
|
|
text-align:center;
|
|
margin-bottom:1.5rem;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.achievements-total-points {
|
|
font-size:10px;
|
|
color:#fff;
|
|
padding:3px 5px;
|
|
display:inline-block;
|
|
border-radius:2px;
|
|
}
|
|
|
|
.slick-arrow {
|
|
color: #001588;
|
|
opacity: 0.5;
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 50%;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.slick-arrow.fa-chevron-left { left:0 }
|
|
.slick-arrow.fa-chevron-right { right:0; }
|
|
|
|
@media (min-width:1024px) {
|
|
.np-card-content-achievements .slick-slider {
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
</style>
|