150 lines
3.8 KiB
Plaintext
150 lines
3.8 KiB
Plaintext
{% assign count_complete = 0 %}
|
|
{% assign count_in_progress = 0 %}
|
|
{% assign percent_in_progress = 0 %}
|
|
{% assign percent_completed = 0 %}
|
|
{% assign total_enrolled_courses = 0 %}
|
|
|
|
|
|
{% if courses.enrolled.any? %}
|
|
{% assign total_enrolled_courses = courses.enrolled | size | times: 1 %}
|
|
|
|
{% for course in courses.enrolled %}
|
|
{% if course.completed? %}
|
|
{% assign count_complete = count_complete | plus: 1 %}
|
|
{% elsif course.started? %}
|
|
{% assign count_in_progress = count_in_progress | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% assign percent_in_progress = count_in_progress | times: 100 | divided_by: total_enrolled_courses %}
|
|
{% assign percent_completed = count_complete | times: 100 | divided_by: total_enrolled_courses %}
|
|
{% endif %}
|
|
|
|
<div class="widgets-section">
|
|
<div class="row np-flex-center">
|
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
<div class="info-widget">
|
|
<div class="widget-label">Courses in progress</div>
|
|
<div class="widget-progress-bar">
|
|
<div class="progress" style="width:{{percent_in_progress}}%"></div>
|
|
</div>
|
|
<div class="widget-number">
|
|
<span>{{ count_in_progress }}</span>/{{ total_enrolled_courses }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
<div class="info-widget">
|
|
<div class="widget-label">Courses completed</div>
|
|
<div class="widget-progress-bar">
|
|
<div class="progress" style="width:{{percent_completed}}%"></div>
|
|
</div>
|
|
<div class="widget-number">
|
|
<span>{{ count_complete }}</span>/{{ total_enrolled_courses }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6 col-md-4">
|
|
<div class="info-widget">
|
|
<div class="widget-label">Your Badges</div>
|
|
<div class="badges badges-carousel">
|
|
{% for course in courses.enrolled %}
|
|
{% if course.properties.course_badge contains "http" %}
|
|
<div class="badge {% if course.completed? %}badge-completed{% endif %}">
|
|
<img src="https://s3.amazonaws.com/static.northpass.com/datasnipper/badge-explorer.png" />
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.widgets-section {
|
|
margin-top: 64px;
|
|
}
|
|
|
|
.info-widget {
|
|
border-radius: 12px;
|
|
border: 1px solid #EAECF0;
|
|
background: #fff;
|
|
box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.10);
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
height: calc(100% - 16px);
|
|
}
|
|
|
|
.widget-label {
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.widget-progress-bar {
|
|
margin: 24px 0;
|
|
border-radius: 8px;
|
|
background: #E6E8EB;
|
|
height: 12px;
|
|
}
|
|
|
|
.widget-progress-bar .progress {
|
|
background-color: #0D21A1;
|
|
border-radius: 8px;
|
|
height: 12px;
|
|
min-width: 12px;
|
|
}
|
|
|
|
.info-widget .widget-number {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 38px;
|
|
color: #5964B7;
|
|
}
|
|
|
|
.info-widget .widget-number > span {
|
|
font-size: 40px;
|
|
color: #0D21A1;
|
|
}
|
|
|
|
.info-widget .badges {
|
|
display: flex;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.info-widget .badge,
|
|
.info-widget .badge img {
|
|
max-width: 100px;
|
|
}
|
|
|
|
.info-widget .badge:not(.badge-completed) img {
|
|
filter:grayscale(1);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
@media(min-width:768px) {}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
const badgesCarouselOptions = {
|
|
container: '.badges-carousel',
|
|
items: 3,
|
|
mouseDrag: true,
|
|
nav:true,
|
|
navPosition: 'bottom',
|
|
controls:false,
|
|
slideBy: 3,
|
|
loop:false,
|
|
responsive: {
|
|
1200: {
|
|
items: 4,
|
|
slideBy: 4,
|
|
}
|
|
},
|
|
}
|
|
|
|
createCarousel(badgesCarouselOptions)
|
|
|
|
});
|
|
</script> |