93 lines
2.5 KiB
Plaintext
93 lines
2.5 KiB
Plaintext
{% assign customer_care_badges = "https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-customer-service.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-furniture.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-registry-management.png,https://s3.amazonaws.com/static.northpass.com/Williams-Sonoma/badge-sales.png" %}
|
|
|
|
|
|
<div class="badges-cont" style="max-width: 80%; align-content: space-evenly;">
|
|
<div class="np-dashboard-resources-title">
|
|
My Badges
|
|
</div>
|
|
<div class="badges">
|
|
<div class="badges-controls default-carousel-controls">
|
|
<i class="fa fa-chevron-left prev"></i>
|
|
<i class="fa fa-chevron-right next"></i>
|
|
</div>
|
|
|
|
<div class="badges-wrapper">
|
|
{% comment %} If user is in CCC group {% endcomment %}
|
|
{% assign customer_care_badges_array = customer_care_badges | split: "," %}
|
|
{% for customer_care_badge in customer_care_badges_array %}
|
|
<div class="badge-img">
|
|
<div class="badge-image-container">
|
|
<img src="{{ customer_care_badge }}" />
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
|
|
{% for course in enrolled_courses %}
|
|
{% if course.properties.course_badge contains "http" %}
|
|
<div class="badge-img">
|
|
<div class="badge-image-container">
|
|
<img src="{{ course.properties.course_badge }}" />
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.badges-wrapper {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.badge-image-container {
|
|
height: 100px;
|
|
width: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.badge-img img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.badges-wrapper {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
const badgesCarouselOptions = {
|
|
container: '.badges-wrapper',
|
|
nav: true,
|
|
navPosition:'bottom',
|
|
arrowKeys: false,
|
|
controls: false,
|
|
mouseDrag: true,
|
|
controlsContainer: ".badges-controls",
|
|
gutter: 16,
|
|
items: 3,
|
|
loop: false,
|
|
responsive: {
|
|
768: {
|
|
arrowKeys: true,
|
|
controls: true,
|
|
nav: false,
|
|
items: 6
|
|
},
|
|
1200: {
|
|
arrowKeys: true,
|
|
controls: true,
|
|
nav: false,
|
|
items: 10
|
|
}
|
|
}
|
|
}
|
|
|
|
createCarousel(badgesCarouselOptions)
|
|
});
|
|
</script>
|