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>
|
||||
|
||||
Reference in New Issue
Block a user