Files
Gainsight/Custom_Templates/customer_templates/Walmart Spark Prod/learning_path_summary.html.liquid

112 lines
5.5 KiB
Plaintext

<div class="np-top-cta stick-to-bottom np-hidden">
{% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button-font-color np-button np-button-big" %}
</div>
<script>
const learningPathBtnText = document.querySelector(".lp-button").innerText
console.log(learningPathBtnText)
if (learningPathBtnText.toLowerCase() == "start new content") {
document.querySelector(".np-top-cta").innerText = "Start"
document.querySelector(".np-top-cta").classList.remove("np-hidden")
document.querySelector(".np-sub-navigation").style.display = "none";
}
</script>
{% capture icon %}fa-arrow-left{% endcapture %}
{% include "mobile_header", title: learning_path.name, back_icon: icon, back_link: "/app/courses#resource-bundles" %}
{% assign courses = courses.enrolled %}
<main class="np-main np-max-width np-page-container">
<div id="learning-path-mobile">
<div class="np-card cover-page-card">
<div class="np-card-container">
<img src="{{ learning_path.image_url }}" alt="{{ learning_path.name }}" />
<div class="card-content-wrapper">
<div class="cover-page-card-title">{{ learning_path.name }}</div>
<div class="cover-page-card-desc">{{ learning_path.description | strip_html }}</div>
<div class="card-info">
<div class="card-courses-count">{{ learning_path.items.count }} resources</div>
<span class="dot-divider">&#183;</span>
<div class="card-time"></div>
</div>
</div>
</div>
</div>
<div class="np-card-spacing">
<div class="np-learning-path-outline">
<div class="np-card-heading">Contents</div>
{% assign courses_index = 1 %}
{% for item in learning_path.items %}
{% assign course_desc = "" %}
{% assign course_length = "" %}
{% for course in courses %}
{% if course.id == item.id %}
{% assign course_desc = course.short_description %}
{% assign course_length = course.properties.course_length %}
{% endif %}
{% endfor %}
{% if item.course? %}
{% if learning_path.enrolled? and item.unlocked? %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator {% if item.completed? %}completed{% endif %}">
{% if item.completed? %}
<i class="fa fa-check"></i>
{% else %}
{{courses_index}}
{% endif %}
</div>
<a class="np-learning-path-outline-item np-card-container" href="{% route learning_path_course, learning_path_id: learning_path.id, id: item.id %}">
<div class="np-card-content">
<div class="np-learning-path-outline-content">
<div class="labels-wrapper">
{% if item.progress > 0 and item.progress < 100 %}
<div class="label label-orange">In progress</div>
{% endif %}
</div>
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
</div>
</a>
</div>
{% else %}
<div class="learning-path-item-wrapper">
<div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
<div class="learning-path-item-indicator">{{courses_index}}</div>
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
<div class="learning-path-outline-desc">{{course_desc}}</div>
<div class="info-wrapper">
<div class="course-time">{{course_length}}</div>
<div class="labels-wrapper" style="margin-left:10px">
<div class="label label-green">New</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% assign courses_index = courses_index | plus: 1 %}
{% endfor %}
</div>
</div>
</div>
</div>
</main>
<script>
setTimeout(function() {
const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')
if (isAppContextAware && !appContextCategoryOrigin) {
console.log("App Context value exists. Category Origin does not. Go back to app.")
$(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
}
}, 500)
</script>