Files
Gainsight/Custom_Templates/customer_templates/Crayon/catalog.html.liquid
2022-11-11 21:54:43 -05:00

262 lines
10 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!-- {% comment %}{% include "header" %}{% endcomment %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% comment %}{% include "sub_navigation" %}{% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/acceleratorBadge.png {% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/activatorBadge.png {% endcomment %}
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/architectBadge.png {% endcomment %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12">
<div class="np-dashboard-header">
<div class="np-resource-title">Hi {{current_person.first_name}}! &#128075;</div>
<div class="np-resource-subtitle">This is whats relevant to you right now in Competitive Advantage Academy</div>
</div>
</div>
{% comment %}<div class="np-grid-spacing col-xs-12 col-md-6">
<div class="np-dashboard-achievements-panel col-xs-12 row">
<div class="np-resource-title col-xs-5">Achievements</div>
<div class="col-xs-7">
<div class="np-dashboard-medal-card">
<div class="col-xs-12 row" style="margin: 0">
{% for course in courses.in_catalog %}
{% if course.name == 'Activator Certification Course' %}
{% if course.progress == 100 %}
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
{% else %}
<div class="np-dashboard-medal-circle"></div>
{% endif %}
{% endif %}
{% endfor %}
{% for course in courses.in_catalog %}
{% if course.name == 'Architect Certification Course' %}
{% if course.progress == 100 %}
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
{% else %}
<div class="np-dashboard-medal-circle"></div>
{% endif %}
{% endif %}
{% endfor %}
{% for course in courses.in_catalog %}
{% if course.name == 'Accelerator Certification Course' %}
{% if course.progress == 100 %}
<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>
{% else %}
<div class="np-dashboard-medal-circle"></div>
{% endif %}
{% endif %}
{% endfor %}
<div class="np-dashboard-medal-circle"></div>
<div class="np-dashboard-medal-circle"></div>
<div class="np-dashboard-medal-circle"></div>
</div>
</div>
</div>
</div>
</div>{% endcomment %}
</div>
<div class="row dashboard-section-courses">
<div class="col-xs-12 col-sm-6 col-lg-4">
{% for course in courses.in_catalog %}
{% if course.name == 'Activator Certification Course' %}
<div class="np-md-flex-wrapper" style="text-align: center;">
<div class="np-dashboard-resources-title">
Beginner
</div>
</div>
{% include 'cards_course' with course %}
{% endif %}
{% endfor %}
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
{% for course in courses.in_catalog %}
{% if course.name == 'Architect Certification Course' %}
<div class="np-md-flex-wrapper" style="text-align: center;">
<div class="np-dashboard-resources-title">
Intermediate
</div>
</div>
{% include 'cards_course' with course %}
{% endif %}
{% endfor %}
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
{% for course in courses.in_catalog %}
{% if course.name == 'Accelerator Certification Course' %}
<div class="np-md-flex-wrapper" style="text-align: center;">
<div class="np-dashboard-resources-title">
Advanced
</div>
</div>
{% include 'cards_course' with course %}
{% endif %}
{% endfor %}
</div>
{% comment %}{% if courses.enrolled.any? %}
{% assign course_limiter = 0 %}
{% if categories.enrolled.any? %}
{% assign all_categories = categories.enrolled | map: "name" %}
{% for enrolled_category in all_categories %}
{% for course in courses.enrolled%}
{% if course_limiter < 1%}
<div class="np-md-flex-wrapper" style="text-align: center;">
<div class="np-dashboard-resources-title">
{{ course.name }}
</div>
<div class="np-dashboard-resources-category">
{{ enrolled_category }}
</div>
{%
include "filter_by_progress",
label: "Filter by Progress:",
default_option: "All Courses",
topic: enrolled_category,
%}
</div>
{% include 'cards_course' with course %}
{% assign course_limiter = course_limiter | plus: 1 %}
{% endif %}
{% endfor %}
{% endfor %}
{% else %}
{% assign enrolled_category = "Not Categorized" %}
{% for course in courses.enrolled%}
{% if course_limiter < 1%}
<div class="np-md-flex-wrapper" style="text-align: center;">
<div>
<div class="np-dashboard-resources-title">
{{ course.name }}
</div>
<div class="np-dashboard-resources-category">
{{ enrolled_category }}
</div>
</div>
</div>
{% include 'cards_course' with course %}
{% assign course_limiter = course_limiter | plus: 1 %}
{% endif %}
{% endfor %}
{% endif %}
{% else %}
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
Courses
</div>
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
<div style="margin-bottom:3rem;">
{% include "courses_zero_state", message: message %}
{% endif %}{% endcomment %}
</div>
</div>
</div>
</main>
{% include "footer" %}
{% comment %}<script>
// Creates the custom dropdown and dropdown functionality
var x, i, j, l, ll, selElmnt, a, b, c;
/* Look for any elements with the class “select-wrapper”: */
x = document.getElementsByClassName("progress-filter");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
filterCourses(this);
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
/* If the user clicks anywhere outside the select box,
then close all select boxes: */
document.addEventListener("click", closeAllSelect);
$(".select-items div").each(function() {
if($( this ).text() == $(".select-selected").text()) {
$(this).addClass("same-as-selected");
}
});
function filterCourses(selectedItem) {
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
carouselGroup.slick('slickUnfilter');
if (selectedFilter != "all-courses") {
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
}
}
</script>{% endcomment %} -->
<script>
window.location.replace('/app')
</script>