Started walmart category script
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
BIN
Custom_Templates/customer_templates/Artera_prod/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Artera_prod/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,32 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="course-card-container" onclick="location.href='{{ course_path }}'">
|
||||
<div class="course-card">
|
||||
<a href="{{ course_path }}" class="course-image">
|
||||
<img
|
||||
height="1024"
|
||||
width="386"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</a>
|
||||
|
||||
<p class="course-categories-container row">
|
||||
{% if course.categories %}
|
||||
{% for course_category in course.categories %}
|
||||
<a href="{{ course_path }}" class="course-category">
|
||||
{{ course_category.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<h6 class="course-name">
|
||||
<a href="{{ course_path }}">
|
||||
{{ course.name }}
|
||||
</a>
|
||||
</h6>
|
||||
|
||||
<p style="min-height: 2rem">{{ course.short_description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
<div class="catalog-filters">
|
||||
<div class="catalog-filter-dropdown-container">
|
||||
<button class="catalog-filter-dropdown np-button">All Courses</button>
|
||||
<div class="catalog-filter-dropdown-content">
|
||||
<span class="catalog-filter-item">All Courses</span>
|
||||
{% for category in categories.in_catalog %}
|
||||
<span class="catalog-filter-item">{{ category.name }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.querySelectorAll(".catalog-filter-item").forEach((item) => {
|
||||
item.addEventListener("click", (clickEvent) => {
|
||||
filterCourses(clickEvent.target)
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
function filterCourses(category) {
|
||||
if (prepareCategoryName(category) == "all courses") {
|
||||
showAllCourses()
|
||||
changeFilterButtonName(category)
|
||||
} else {
|
||||
filterByCategory(category)
|
||||
changeFilterButtonName(category)
|
||||
}
|
||||
}
|
||||
|
||||
function showAllCourses() {
|
||||
document.querySelectorAll(".course-card-container").forEach((item) => {
|
||||
item.parentNode.style.removeProperty('display');
|
||||
})
|
||||
}
|
||||
|
||||
function filterByCategory(category) {
|
||||
document.querySelectorAll(".course-card-container").forEach((item) => {
|
||||
var categories = Array.from(item.querySelectorAll(".course-category")).map(courseCategory => prepareCategoryName(courseCategory));
|
||||
|
||||
if (!categories.includes(prepareCategoryName(category))) {
|
||||
item.parentNode.style.display = "none";
|
||||
} else {
|
||||
item.parentNode.style.removeProperty('display');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function prepareCategoryName(category) {
|
||||
return category.innerHTML.trim().replace(/ /g, '').toLowerCase()
|
||||
}
|
||||
|
||||
function changeFilterButtonName(newName) {
|
||||
document.querySelector(".catalog-filter-dropdown").innerHTML = prepareButtonName(newName.innerHTML);
|
||||
}
|
||||
|
||||
function prepareButtonName(buttonName) {
|
||||
var words = buttonName.split(" ");
|
||||
|
||||
for (let i = 0; i < words.length; i++) {
|
||||
words[i] = words[i][0].toUpperCase() + words[i].substr(1);
|
||||
}
|
||||
|
||||
return words.join(" ");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.catalog-filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 4%;
|
||||
color: #737373;
|
||||
font-weight: 600;
|
||||
letter-spacing: .56px;
|
||||
line-height: 1.71;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.catalog-filter-dropdown-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.catalog-filter-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.catalog-filter-item {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.catalog-filter-item:hover {background-color: #f1f1f1}
|
||||
|
||||
.catalog-filter-dropdown-container:hover .catalog-filter-dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.catalog-filters {
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign completed_courses = courses.enrolled | map: "completed?" %}
|
||||
{% assign any_completed = false %}
|
||||
|
||||
{% for completed_course in completed_courses %}
|
||||
{% if completed_course %}
|
||||
{% assign any_completed = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if any_completed %}
|
||||
{% assign any_course = false %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.completed? %}
|
||||
{% assign is_course_from_learning_path = false %}
|
||||
{% for lp_courses in learning_path_courses %}
|
||||
{% for lp_course in lp_courses %}
|
||||
{% if lp_course.id == course.id %}
|
||||
{% assign is_course_from_learning_path = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless is_course_from_learning_path %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign any_course = true %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% unless any_course %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Completed Courses." %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% assign completed_learning_paths = items | map: "completed?" %}
|
||||
{% assign any_completed = false %}
|
||||
|
||||
{% for completed_learning_path in completed_learning_paths %}
|
||||
{% if completed_learning_path %}
|
||||
{% assign any_completed = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if any_completed %}
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.completed? %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You don't have any Completed Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You don't have any Completed Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-stretch-content:nth-child(n+2) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-stretch-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign in_progress_courses = courses.enrolled | map: "progress" %}
|
||||
{% assign any_not_in_progress = false %}
|
||||
|
||||
{% for in_progress_course in in_progress_courses %}
|
||||
{% if in_progress_course == 0 %}
|
||||
{% assign any_not_in_progress = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if any_not_in_progress %}
|
||||
{% assign any_course = false %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 0 %}
|
||||
{% assign is_course_from_learning_path = false %}
|
||||
{% for lp_courses in learning_path_courses %}
|
||||
{% for lp_course in lp_courses %}
|
||||
{% if lp_course.id == course.id %}
|
||||
{% assign is_course_from_learning_path = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless is_course_from_learning_path %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign any_course = true %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% unless any_course %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any Enrolled Courses." %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,35 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% assign in_progress_learning_paths = items | map: "progress" %}
|
||||
{% assign any_not_in_progress = false %}
|
||||
|
||||
{% for in_progress_learning_path in in_progress_learning_paths %}
|
||||
{% if in_progress_learning_path == 0 %}
|
||||
{% assign any_not_in_progress = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
{% if any_not_in_progress %}
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.progress == 0 %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You do not have any Enrolled Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You do not have any Enrolled Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,206 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<nav class="np-footer-social-links">
|
||||
<p class="artera-description">
|
||||
Artera (WELL Health®) is a SaaS digital health leader in patient communications and the 2021 and 2022 Best in KLAS winner in Patient Outreach.
|
||||
</p>
|
||||
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<p class="links-header">Navigation</p>
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.name == "Dashboard" or website_navigation.name == "Home" or website_navigation.name == "Learning Paths" %}
|
||||
{% comment %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
My Courses
|
||||
</a>
|
||||
</li>
|
||||
{% endcomment %}
|
||||
{% else %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
border-top: 1px solid #f5f2ff;
|
||||
margin-top: 30px
|
||||
}
|
||||
|
||||
.np-footer-social-links-link, .np-footer-social-links-link-icon {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.np-footer-logo-image {
|
||||
filter: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link, .artera-description, .np-footer-support-item {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.artera-description {
|
||||
font-family: Poppins,sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: .56px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-footer-top {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.np-footer-bottom {
|
||||
flex-direction: row;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-footer-social-links-item:first-of-type {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.links-header, .np-footer-support-help {
|
||||
color: #000;
|
||||
font-family: Poppins,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: .56px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.artera-description {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.np-footer-navigation {
|
||||
margin-right: 107px;
|
||||
}
|
||||
|
||||
.np-footer-support-help {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.np-footer-support {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.np-footer-navigation-item {
|
||||
padding: 10px 10px 10px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-footer-social-links-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.np-footer-bottom, .np-footer-top {
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.np-footer-top, .np-footer-bottom {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.np-footer-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<header class="np-header np-header-color">
|
||||
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
@ -24,7 +23,21 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<div class="np-hidden-mobile logo-and-sub-nav">
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
<h1 class="np-hidden-desktop np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
@ -33,6 +46,7 @@
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
@ -120,6 +134,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include 'my_courses_filter' %}
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
@ -151,14 +166,30 @@
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% if website_navigation.name == "Dashboard" %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
My Courses
|
||||
</a>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Catalog
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
@ -178,4 +209,44 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-header-logo {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.np-header-content {
|
||||
padding: 0 4%;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
padding: 0;
|
||||
align-items: normal;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.logo-and-sub-nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,51 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign started_courses = courses.enrolled | map: "started?" %}
|
||||
{% assign in_progress_courses = courses.enrolled | map: "progress" %}
|
||||
{% assign learning_path_courses = learning_paths.enrolled | map: 'items'%}
|
||||
{% assign any_started = false %}
|
||||
{% assign any_in_progress = false %}
|
||||
|
||||
{% for started_course in started_courses %}
|
||||
{% if started_course == true %}
|
||||
{% assign any_started = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for in_progress_course in in_progress_courses %}
|
||||
{% if in_progress_course > 0 and in_progress_course < 100 %}
|
||||
{% assign any_in_progress = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if any_started and any_in_progress %}
|
||||
{% assign any_course = false %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign is_course_from_learning_path = false %}
|
||||
{% for lp_courses in learning_path_courses %}
|
||||
{% for lp_course in lp_courses %}
|
||||
{% if lp_course.id == course.id %}
|
||||
{% assign is_course_from_learning_path = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% unless is_course_from_learning_path %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign any_course = true %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% unless any_course %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "courses_zero_state", message: "Yikes! You don’t have any In Progress Courses." %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,42 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% assign started_learning_paths = items | map: "started?" %}
|
||||
{% assign in_progress_learning_paths = items | map: "progress" %}
|
||||
{% assign any_started = false %}
|
||||
{% assign any_in_progress = false %}
|
||||
|
||||
{% for started_learning_path in started_learning_paths %}
|
||||
{% if started_learning_path == true %}
|
||||
{% assign any_started = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for in_progress_learning_path in in_progress_learning_paths %}
|
||||
{% if in_progress_learning_path > 0 and in_progress_learning_path < 100 %}
|
||||
{% assign any_in_progress = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if any_started and any_in_progress %}
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You don't have any In Progress Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Bummer! You don't have any In Progress Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,151 @@
|
||||
<div class="my-courses-filters" style="display: none;">
|
||||
<div class="progress-filter-dropdown-container">
|
||||
<button class="progress-filter-dropdown np-button">
|
||||
<span style="margin-right: 10px">
|
||||
Not Started
|
||||
</span>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</button>
|
||||
<div class="progress-filter-dropdown-content">
|
||||
<span class="progress-filter-item" id="in-progress">In Progress</span>
|
||||
<span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
|
||||
<span class="progress-filter-item" id="completed">Completed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
setDefaultFilter('.learning-paths-container', 'not-started')
|
||||
setDefaultFilter('.courses-container', 'not-started')
|
||||
|
||||
document.querySelectorAll('.progress-filter-item').forEach((item) => {
|
||||
item.addEventListener('click', (clickEvent) => {
|
||||
changeFilterButtonName(clickEvent.target);
|
||||
showAllOptions();
|
||||
hideChosenOption(clickEvent.target);
|
||||
filter(clickEvent.target);
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)
|
||||
|
||||
window.addEventListener("click", hideDropdown);
|
||||
});
|
||||
|
||||
function hideDropdown(event) {
|
||||
if (!event.target.matches('.progress-filter-dropdown')) {
|
||||
var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
|
||||
openDropdown.classList.remove('progress-filter-dropdown-content-show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showDropdown() {
|
||||
document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
|
||||
}
|
||||
|
||||
function filter(filterOption) {
|
||||
filterItems('.learning-paths-container', filterOption)
|
||||
filterItems('.courses-container', filterOption)
|
||||
}
|
||||
|
||||
function filterItems(itemsClass, filterOption) {
|
||||
document.querySelectorAll(itemsClass).forEach((item) => {
|
||||
if (!item.id.includes(filterOption.id))
|
||||
item.style.display = "none";
|
||||
else
|
||||
item.style.removeProperty('display');
|
||||
})
|
||||
}
|
||||
|
||||
function setDefaultFilter(itemsClass, filterOption) {
|
||||
document.querySelectorAll(itemsClass).forEach((item) => {
|
||||
if (!item.id.includes(filterOption))
|
||||
item.style.display = "none";
|
||||
else
|
||||
item.style.removeProperty('display');
|
||||
})
|
||||
}
|
||||
|
||||
function showAllItems(itemsClass) {
|
||||
document.querySelectorAll(itemsClass).forEach((item) => {
|
||||
item.style.removeProperty('display');
|
||||
})
|
||||
}
|
||||
|
||||
function hideChosenOption(chosenOption) {
|
||||
chosenOption.style.display = 'none';
|
||||
}
|
||||
|
||||
function showAllOptions() {
|
||||
document.querySelectorAll('.progress-filter-item').forEach((item) => {
|
||||
item.style.removeProperty('display');
|
||||
});
|
||||
}
|
||||
|
||||
function changeFilterButtonName(newName) {
|
||||
document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.my-courses-filters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 4%;
|
||||
background: #f5f2ff;
|
||||
color: #737373;
|
||||
font-weight: 600;
|
||||
letter-spacing: .56px;
|
||||
line-height: 1.71;
|
||||
transition: .2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-filter-dropdown-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-filter-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-filter-item {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.progress-filter-dropdown * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-filter-item:hover {background-color: #f1f1f1}
|
||||
|
||||
.progress-filter-dropdown-content-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.my-courses-filters {
|
||||
flex-direction: row;
|
||||
justify-content: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="np-hidden-mobile np-sub-navigation-content" style="display: none">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% if link.label == "Dashboard" %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
My Courses
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
|
||||
color: #ff0036;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-sub-navigation-content {
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.querySelector(".logo-and-sub-nav > .np-sub-navigation-content").style.removeProperty("display");
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{{training_session.session_url}}"
|
||||
>
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,26 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div>
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% include 'catalog_filters' %}
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.np-catalog-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.np-page-container {
|
||||
margin: 0 auto 6.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,108 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
{% assign courses_classes = "" %}
|
||||
{% if features.training_events? %}
|
||||
{% assign courses_classes = "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
{% else %}
|
||||
{% assign courses_classes = "col-xs-12 col-sm-4 np-stretch-content" %}
|
||||
{% endif %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 {% if features.training_events? %} col-sm-8 {% endif %}">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="learning-paths-container" id="in-progress-learning-paths">
|
||||
<div class="np-dashboard-resources-title">
|
||||
In Progress Learning Paths
|
||||
</div>
|
||||
{% include "in_progress_learning_paths_index", items: learning_paths.enrolled %}
|
||||
</div>
|
||||
|
||||
<div class="learning-paths-container" id="not-started-learning-paths">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Enrolled Learning Paths
|
||||
</div>
|
||||
{% include "enrolled_learning_paths_index", items: learning_paths.enrolled %}
|
||||
</div>
|
||||
|
||||
<div class="learning-paths-container" id="completed-learning-paths">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed Learning Paths
|
||||
</div>
|
||||
{% include "completed_learning_paths_index", items: learning_paths.enrolled %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="courses-container" id="in-progress-courses">
|
||||
<div class="np-dashboard-resources-title">
|
||||
In progress courses
|
||||
</div>
|
||||
{% include "in_progress_courses_index", class: courses_classes %}
|
||||
</div>
|
||||
|
||||
<div class="courses-container" id="not-started-courses">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Enrolled Courses
|
||||
</div>
|
||||
{% include "enrolled_courses_index", class: courses_classes %}
|
||||
</div>
|
||||
|
||||
<div class="courses-container" id="completed-courses">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed Courses
|
||||
</div>
|
||||
{% include "completed_courses_index", class: courses_classes %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
<div class="iframe_div">
|
||||
<iframe
|
||||
style= "border: 3px solid #B2D7C7;"
|
||||
width="100%" height="400"
|
||||
src= "https://calendar.google.com/calendar/u/0/embed?height=800&wkst=1&bgcolor=%23ecf0f9&ctz=America/Los_Angeles&showTabs=1&mode=AGENDA&title=WELL+Customer+Training+Workshops&showCalendars=1&showNav=1&showTitle=0&showDate=1&showPrint=1&src=Y184ZXM5aGp2Y2g4YnJnZTU2b3VsZXY0NGgzc0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23B39DDB"
|
||||
title="Artera Public Calendar">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.querySelector('.my-courses-filters').style.removeProperty('display');
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-dashboard {
|
||||
padding-top: 183px;
|
||||
}
|
||||
.np-stretch-content:nth-child(n+2) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-stretch-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title {
|
||||
margin: 20px 0 20px;
|
||||
}
|
||||
}
|
||||
.iframe_div {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0px);
|
||||
border: 3px solid #9E7DFF;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,188 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-homepage">
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
|
||||
{% t .discover %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.featured.any? %}
|
||||
<div class="np-homepage-featured-courses">
|
||||
{% for course in courses.featured %}
|
||||
<div class="np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
/*
|
||||
.np-homepage-hero-content {
|
||||
position: static;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-homepage-hero {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.np-homepage-hero-cta.np-button {
|
||||
border-radius: 30px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.np-homepage-hero-image {
|
||||
max-width: 50%;
|
||||
height: auto;
|
||||
max-height: max-content;
|
||||
}*/
|
||||
.np-main {
|
||||
padding: 123px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.np-stretch-content:nth-child(n+2) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-courses {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tns-outer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tns1-mw {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.tns-controls {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 50%;
|
||||
transform: translate(0,-50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tns-controls > * {
|
||||
border: none;
|
||||
letter-spacing: 0.01em !important;
|
||||
line-height: 0;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-size-adjust: 100%;
|
||||
--polaris-version-number: "4.27.0";
|
||||
--polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
|
||||
--toast-translate-y-out: 15rem;
|
||||
--toast-translate-y-in: 0;
|
||||
--global-ribbon-height: 0px;
|
||||
--p-text-subdued: #6d7175;
|
||||
--p-card-shadow: 0 0.2rem 0.4rem #dfe3e8;
|
||||
--top-bar-background: #00848e;
|
||||
--top-bar-background-lighter: #1d9ba4;
|
||||
--top-bar-color: #f9fafb;
|
||||
--p-frame-offset: 0px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
|
||||
Roboto, Helvetica Neue, sans-serif;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
fill: #292824;
|
||||
vertical-align: middle;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px rgba(66, 71, 76, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-main {
|
||||
padding: 123px 0 0;
|
||||
}
|
||||
|
||||
.course-card {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.np-homepage-hero-cta.np-button {
|
||||
border-radius: 30px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-subheadline {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
line-height: 2em;
|
||||
letter-spacing: .72px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-stretch-content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
|
||||
<script type="module">
|
||||
var slider = tns({
|
||||
container: '.np-homepage-featured-courses',
|
||||
items: 1,
|
||||
nav: false,
|
||||
controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
|
||||
responsive: {
|
||||
768: {
|
||||
items: 2
|
||||
},
|
||||
1200: {
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
|
||||
html *:not(i) {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
|
||||
body, .np-main {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.np-main {
|
||||
padding-top: 123px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-main {
|
||||
padding-top: 123px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-alert {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Course Cards */
|
||||
|
||||
.course-card {
|
||||
cursor: pointer;
|
||||
background-color: #f5f2ff;
|
||||
border-radius: 30px;
|
||||
box-shadow: none;
|
||||
padding: 24px 24px 44px;
|
||||
transition: .2s;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.course-card:hover, .course-card:focus {
|
||||
box-shadow: 10px 10px 20px 0 rgb(62 51 102 / 20%);
|
||||
}
|
||||
|
||||
.course-card-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-card-container > * {
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.course-image {
|
||||
border-radius: 15px;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
padding-top: 72%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-image img {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.course-categories-container {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
min-height: 25.5px;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
line-height: normal;
|
||||
margin: 20px 0 0;
|
||||
font-size: 18px;
|
||||
min-height: 60px
|
||||
}
|
||||
|
||||
.course-name a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.course-category {
|
||||
background-color: #ffe7e1;
|
||||
color: #ff7676;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
padding: 4px 8px;
|
||||
text-transform: uppercase;
|
||||
transition: .2s;
|
||||
text-decoration: none;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.course-card {
|
||||
padding: 24px 24px 35px;
|
||||
}
|
||||
|
||||
.course-card-container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.course-image {
|
||||
padding-top: 66%;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="iframe_div">
|
||||
<iframe
|
||||
style= "border: 3px solid #B2D7C7;"
|
||||
width="100%" height="500"
|
||||
src=
|
||||
"https://calendar.google.com/calendar/u/0/embed?height=800&wkst=1&bgcolor=%23ecf0f9&ctz=America/Los_Angeles&showTabs=1&mode=AGENDA&title=WELL+Customer+Training+Workshops&showCalendars=1&showNav=1&showTitle=0&showDate=1&showPrint=1&src=Y184ZXM5aGp2Y2g4YnJnZTU2b3VsZXY0NGgzc0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&color=%23B39DDB"
|
||||
title="Artera Public Calendar"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.row {
|
||||
justify-content: center;
|
||||
padding-top: 55px;
|
||||
}
|
||||
.iframe_div {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 75%;
|
||||
height: 500px;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0px);
|
||||
border: 3px solid #9E7DFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -391,7 +391,28 @@ TODO: Show MJ how to do Show Transcript for bullet points. Here is the code:
|
||||
<div id="transcriptToggle">Show Transcript</div>
|
||||
|
||||
<div id="transcriptContent">
|
||||
<p>Hey everyone, this is Ally with Tripleseat and in this video we are going to go over how to create an event and the different options you have to do so. The quickest way to add an event right to your calendar is by clicking on the new event button on the top right corner of your screen in Tripleseat. Detailing this page out and clicking create will add the event right to our calendar as well as store the contact information within Tripleseat. </p>
|
||||
<p>
|
||||
Hey everyone, this is Ally with Tripleseat and in this video we are going to go over how to create an event and the different options you have to do so. The quickest way to add an event right to your calendar is by clicking on the new event button on the top right corner of your screen in Tripleseat. Detailing this page out and clicking create will add the event right to our calendar as well as store the contact information within Tripleseat.
|
||||
</p>
|
||||
```
|
||||
|
||||
TODO: Show MJ example of Video+Article as two activities example.
|
||||
|
||||
## 03/29/2023
|
||||
|
||||
### Design
|
||||
|
||||
Past Q2, no definitive plans for spanish changes/translations.
|
||||
Maybe more integrations of knowledge checks, other browser info
|
||||
Getting creative with quizzing.
|
||||
|
||||
Bundles, resource bundles. Currently turned off in the sandbox.
|
||||
CB: How should badges be represented in a bundle?
|
||||
If you have 3 courses, when and how should the badge appear?
|
||||
|
||||
Idea: bar at the bottom. Greyscale before completion, colorized after.
|
||||
TP: can we share any displays/UX screenshots of other clients displaying badges?
|
||||
TODO: Work with Charlie to find examples of badging for the team.
|
||||
|
||||
For the first iteration, this will live solely in Northpass.
|
||||
Dev work from Walmart: they will need to pass/insert info into the webview.
|
||||
|
||||
@ -122,3 +122,12 @@ Questions from Stephanie:
|
||||
|
||||
* Luminate's biggest concern is upkeep. Version Control. They make a ton of changes to the products. They need to update
|
||||
the content quickly and effectively. Example: Screenshot in one lesson but what if it is in different lessons etc.
|
||||
|
||||
|
||||
## 03/29/2023
|
||||
|
||||
### Design Process
|
||||
|
||||
Looking for a June 1st launch. First Wednesday of June. June 7th hard deadline.
|
||||
Material Design icons
|
||||
Jessica isn't aware of how detailed we can customize things. Maybe send her screenshots?
|
||||
|
||||
@ -7,7 +7,8 @@ import Apikeys
|
||||
def get_course():
|
||||
count = 0
|
||||
apiKey = Apikeys.walmartprod
|
||||
live_courses = []
|
||||
courses = []
|
||||
category_ids = []
|
||||
|
||||
while True:
|
||||
count += 1
|
||||
@ -22,17 +23,26 @@ def get_course():
|
||||
|
||||
for response in data["data"]:
|
||||
status = response["attributes"]["status"]
|
||||
if status == "live":
|
||||
name = response["attributes"]["name"]
|
||||
live_courses.append(name)
|
||||
with open("/Users/normrasmussen/Downloads/courses.txt", "a") as write:
|
||||
write.write("\n")
|
||||
write.write(name)
|
||||
uuid = response["id"]
|
||||
name = response["attributes"]["name"]
|
||||
|
||||
course_url = f"https://walmart.northpass.com/app/courses/{uuid}"
|
||||
cat_id = response["relationships"]["categories"]["data"]
|
||||
for item in cat_id:
|
||||
categoryid = item["id"]
|
||||
print(categoryid)
|
||||
courses.append(name)
|
||||
with open("/Users/normrasmussen/Downloads/courses.csv", "a") as write:
|
||||
write.write("\n")
|
||||
write.write(name+","+status+","+uuid)
|
||||
|
||||
if "next" not in nextlink:
|
||||
break
|
||||
print(live_courses)
|
||||
#print(courses)
|
||||
# https://walmart.northpass.com/app/courses/
|
||||
|
||||
def get_category_name(category_ids):
|
||||
pass
|
||||
|
||||
if __name__ == "__main__":
|
||||
get_course()
|
||||
|
||||
Reference in New Issue
Block a user