Small notes changes. Added HackerRank Internal's Templates
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.
@ -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">
|
||||
{% 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>{{ 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're not assigned any 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're not assigned any Learning Paths.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,212 @@
|
||||
<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>
|
||||
<p class="artera-description">
|
||||
WELL Health®
|
||||
</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" %}
|
||||
<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>
|
||||
{% 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 %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link"
|
||||
href="/app/catalog"
|
||||
>
|
||||
Catalog
|
||||
</a>
|
||||
</li>
|
||||
</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;
|
||||
}
|
||||
|
||||
.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;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.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: 55px;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -0,0 +1,252 @@
|
||||
<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? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<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 }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include 'my_courses_filter' %}
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% 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
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</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,119 @@
|
||||
<div class="my-courses-filters" style="display: none;">
|
||||
<div class="progress-filter-dropdown-container">
|
||||
<button class="progress-filter-dropdown np-button">All Courses</button>
|
||||
<div class="progress-filter-dropdown-content">
|
||||
<span class="progress-filter-item" id="all-courses" style="display: none;">All Courses</span>
|
||||
<span class="progress-filter-item" id="not-started">Not Started</span>
|
||||
<span class="progress-filter-item" id="in-progress">In Progress</span>
|
||||
<span class="progress-filter-item" id="completed">Completed</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.querySelectorAll('.progress-filter-item').forEach((item) => {
|
||||
item.addEventListener('click', (clickEvent) => {
|
||||
changeFilterButtonName(clickEvent.target);
|
||||
showAllOptions();
|
||||
hideChosenOption(clickEvent.target);
|
||||
filter(clickEvent.target);
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
function filter(filterOption) {
|
||||
if (filterOption.id !== "all-courses" ) {
|
||||
filterItems('.learning-paths-container', filterOption)
|
||||
filterItems('.courses-container', filterOption)
|
||||
} else {
|
||||
showAllItems('.learning-paths-container')
|
||||
showAllItems('.courses-container')
|
||||
}
|
||||
}
|
||||
|
||||
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 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").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;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.progress-filter-item {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Change color of dropdown links on hover */
|
||||
.progress-filter-item:hover {background-color: #f1f1f1}
|
||||
|
||||
/* Show the dropdown menu on hover */
|
||||
.progress-filter-dropdown-container:hover .progress-filter-dropdown-content {
|
||||
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" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<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,90 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
|
||||
{% 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">
|
||||
<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>
|
||||
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
document.querySelector('.my-courses-filters').style.removeProperty('display');
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,171 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<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-stretch-content:nth-child(n+2) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-courses {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tns-outer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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-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: 400;
|
||||
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,127 @@
|
||||
/*
|
||||
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: 220px 20px 32px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-main {
|
||||
padding: 200px 5% 184px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Course Cards */
|
||||
|
||||
.course-card {
|
||||
cursor: pointer;
|
||||
background-color: #f5f2ff;
|
||||
border-radius: 30px;
|
||||
box-shadow: none;
|
||||
padding: 24px 24px 44px;
|
||||
transition: .2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
line-height: normal;
|
||||
margin: 20px 0 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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,102 @@
|
||||
{% comment %}This section of code will iterate over all courses in a learning path and average out the completion per course compared to the total of the LP {% endcomment %}
|
||||
{% assign total_progress = 0 %}
|
||||
{% assign completed_progress = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign total_progress = total_progress | plus: 100 %}
|
||||
|
||||
{% assign completed_progress = completed_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign total_progress = total_progress | times: 0.01 %}
|
||||
{% assign calculated_progress = completed_progress | divided_by: total_progress %}
|
||||
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% comment %}{% t shared.progress, count: learning_path.progress %}{% endcomment %}
|
||||
{% if calculated_progress < 1 %}
|
||||
Not Started
|
||||
{% else %}
|
||||
{{calculated_progress | ceil }}% Completed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ calculated_progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 768px) {
|
||||
.np-learning-paths .np-learning-path-image {
|
||||
min-height: unset;
|
||||
margin: auto;
|
||||
}
|
||||
.np-learning-path-image {
|
||||
min-width: 33%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-learning-path-outline-item.np-card-container .np-optional-ribbon {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{% if link.label == 'Dashboard' %}
|
||||
My Dashboard
|
||||
{% elsif link.label == 'Catalog' %}
|
||||
Courses Library
|
||||
{% elsif link.label == 'Events' %}
|
||||
Live Training Webinars
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="https://support.hackerrank.com">
|
||||
<i style="color: #bac4ca;" class="far fa-book-reader np-sub-navigation-content-item-icon"></i>
|
||||
Knowledge Base
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,63 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: courses.filters,
|
||||
key: "category_uuid",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
function clickDropdownMenu() {
|
||||
const dropdownMenu = document.getElementsByClassName('dropdown-menu')[0]
|
||||
|
||||
const event = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
|
||||
dropdownMenu.dispatchEvent(event);
|
||||
console.log('clicked')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
|
||||
|
||||
const targetNode = document.getElementsByClassName('choices__list')[2];
|
||||
const config = { attributes: true, childList: true, subtree: true };
|
||||
const callback = (mutationList, observer) => {
|
||||
var updated_choices = document.querySelectorAll('.choices__item.choices__item--choice.choices__item--selectable')
|
||||
for (const mutation of mutationList) {
|
||||
Array.from(updated_choices).forEach((choice) => {
|
||||
choice.addEventListener("mousedown", clickDropdownMenu);
|
||||
})
|
||||
}
|
||||
};
|
||||
const observer = new MutationObserver(callback);
|
||||
|
||||
Array.from(choices).forEach((choice) => {
|
||||
choice.addEventListener("mousedown", clickDropdownMenu);
|
||||
})
|
||||
observer.observe(targetNode, config);
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,24 @@
|
||||
|
||||
{% if course.enrolled? %}
|
||||
<script>
|
||||
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
||||
</script>
|
||||
|
||||
{% else %}
|
||||
<script>
|
||||
|
||||
window.location.replace('{% route course_enrollment, code: course.enrollment_code %}')
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% comment %} {% 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" %} {% endcomment %}
|
||||
@ -0,0 +1,47 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<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 learning_paths.available.any? %}
|
||||
<div class="np-learning-paths-resources">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% if learning_path.name == 'HackerRank Screen (Self-Guided Learning Path)' or learning_path.name == 'HackerRank Interview (Self-Guided Learning Path)' %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% if learning_path.name == 'HackerRank Company Admin' %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
Reference in New Issue
Block a user