moved a bunch of churned customers templates to a hidden folder. Added to Sandata's script and the new groups. Notes.

This commit is contained in:
Norm Rasmussen
2024-05-06 17:07:40 -04:00
parent e9a721cfd6
commit 86ef310892
1042 changed files with 4425 additions and 339 deletions

View File

@ -0,0 +1,120 @@
{% 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="achievements-carousel">
{% for course in courses.enrolled %}
{% if course.progress == 100 %}
<div>
<div class="np-card-content-title col-12">
{{ course.name }}
</div>
<div class="col-12 ">
<img class="np-achievement-icon" src="{{ course.properties.course_badge }}" />
</div>
</div>
{% endif %}
{% endfor %}
</div>
<a href="#" class="np-view-all-achievements">View All</a>
{% 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>
.achievements-carousel{
text-align: center;
}
.np-card-content-achievements .np-card-content-title {
font-size: 0.937rem;
text-align:center;
font-weight:500;
}
.np-achievement-icon {
color: #bec2c6;
margin:14px auto 26px;
width:130px;
}
.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;
}
.slick-arrow {
color: rgba(255, 255, 255, 0.5);
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>

View File

@ -0,0 +1,68 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% if features.learning_paths? %}
<div class="np-dashboard-resources-title">
{% t shared.learning_paths %}
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
<div class="np-dashboard-resources-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
</div>
<div class="np-grid-spacing col-xs-12 col-sm-4">
<div>
<div class="np-dashboard-resources-title">My Points</div>
<div class="np-card">
<div class="np-card-container np-dashboard-border" style="text-align: center;">
<h1 class="user-point-num" style="margin-bottom: 1rem;">{{ current_person.properties.learner_points }}</h1>
<h3 class="user-point-label" style="margin-top: 1rem;">Points</h3>
</div>
</div>
</div>
{% assign courseCompletedCouter = 0 %}
{% for course in courses.enrolled %}
{% if course.progress == 100 %}
{% assign courseCompletedCouter = courseCompletedCouter | plus: 1 %}
{% endif %}
{% endfor %}
<div class="achievements-box" style="{% if courseCompletedCouter > 0%}display: block !important;{% endif %}">
<div class="np-dashboard-resources-title">Recent Achievements</div>
{% include "widget_achievements" %}
</div>
{% if features.training_events? %}
<div>
<div class="np-dashboard-resources-title">
{% t .upcoming_events %}
</div>
{% include "training_events_dashboard" %}
</div>
{% endif %}
</div>
</div>
</main>
{% include "footer" %}
<style>
.achievements-box{
display: none;
}
@media (max-width: 767px){
.user-point-num{
padding-top: 1rem;
}
.user-point-label{
padding-bottom: 1rem;
}
}
</style>