norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Datasnipper's templates were updated for their login page. Chubb notes and todos.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-01-25 18:28:10 -05:00
parent 8ca1d90345
commit 28036e8fa6
34 changed files with 2851 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
Custom_Templates/customer_templates/DataSnipper/_homepage_widgets.html.liquid Normal file
View File

@ -0,0 +1,150 @@
{% 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>