First stab at Northpass Implementation Academy. New templates features broke though and now these are all temporary.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/Northpass Implementation/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Northpass Implementation/.DS_Store
vendored
Normal file
Binary file not shown.
@ -0,0 +1,66 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-image-content-top" style="top: 0.75rem; left: 0.75rem">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<h3 class="np-card-content-title np-color-white">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-progress np-button-color" style='color: white; font-size: 14px; font-weight: 600;'>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
||||
{% include "course_details_review" %}
|
||||
<div class="np-card-content-footer">
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); border-radius: 8px;'
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
<span class="lang-en">{% t shared.enroll %}</span>
|
||||
<span class="lang-es">Inscríbase</span>
|
||||
{% elsif course.started? == false %}
|
||||
<span class="lang-en">{% t shared.start, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">Inicie</span>
|
||||
{% elsif course.completed? %}
|
||||
<span class="lang-en">{% t shared.course.view, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">Ver el curso</span>
|
||||
{% else %}
|
||||
<span class="lang-en">{% t shared.continue %}</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
.course-card-content {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.np-card-content-title {
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function getCookie(name) {
|
||||
var dc = document.cookie;
|
||||
var prefix = name + "=";
|
||||
var begin = dc.indexOf("; " + prefix);
|
||||
if (begin == -1) {
|
||||
begin = dc.indexOf(prefix);
|
||||
if (begin != 0) return null;
|
||||
}
|
||||
else
|
||||
{
|
||||
begin += 2;
|
||||
var end = document.cookie.indexOf(";", begin);
|
||||
if (end == -1) {
|
||||
end = dc.length;
|
||||
}
|
||||
}
|
||||
return decodeURI(dc.substring(begin + prefix.length, end));
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,4 @@
|
||||
{% comment %} <i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i> {% endcomment %}
|
||||
<span class="np-course-outline-content-activity-link">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,9 @@
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="col-xs-12 np-top-image-spacing np-course-banner image-top-course-styling">
|
||||
<div class="np-course-banner-overlay"></div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-course-banner-image"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
<div class="np-course-info np-course-banner-info">
|
||||
<div class="np-course-title">{{ course.name }}</div>
|
||||
{% include "course_details_review" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fas.fa-star {
|
||||
color: white;
|
||||
}
|
||||
.fas.fa-star {
|
||||
line-height: 1.15;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<div class="np-card-container">
|
||||
<div class="row np-course-content np-card-padding-dynamic" style='background: #00283D;'>
|
||||
{% include "course_banner" %}
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
{% include "course_description" %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "nav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
nav {
|
||||
grid-area: nav;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details">
|
||||
<div class="np-course-detail">
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length contains 'missing property' %}
|
||||
missing property: course.properties.course_length
|
||||
{% else %}
|
||||
{% if course.properties.course_length %}
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong> mins
|
||||
<span class="np-details-label lang-en">Duration</span>
|
||||
<span class="np-details-label lang-es">Duración</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-course-details {
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-course-details">
|
||||
<div class="np-course-detail" id='hideable'>
|
||||
<strong>{{ activities_count }}</strong>
|
||||
<span class="np-details-label">
|
||||
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-course-detail">
|
||||
{% if course.properties.course_length contains 'missing property' %}
|
||||
missing property: course.properties.course_length
|
||||
{% else %}
|
||||
{% if course.properties.course_length %}
|
||||
{% if course.properties.course_length > 0 %}
|
||||
<strong>{{course.properties.course_length}}</strong> mins
|
||||
<span class="np-details-label lang-en">Duration</span>
|
||||
<span class="np-details-label lang-es">Duración</span>
|
||||
{% else %}
|
||||
<div> </div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-course-detail course-detail-rating">
|
||||
<div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap;'>
|
||||
{% for i in (1..5) %}
|
||||
{% if course.properties.np_course_rating >= i %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% else %}
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
|
||||
</svg>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<span class="np-details-label" style= 'display: flex;'>
|
||||
{{course.properties.np_course_rating}} <div style='font-weight: 500; padding-left: 5px;'>({{course.properties.np_course_rating_count}}) </div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-detail-rating {
|
||||
align-self: flex-end;
|
||||
}
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_banner" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% comment %} {% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: #00283D !important;
|
||||
}
|
||||
@media only screen and (max-width: 630px) {
|
||||
.np-course-info.np-course-banner-info {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 360px) {
|
||||
#hideable {
|
||||
display: none;
|
||||
}
|
||||
.np-course-details {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.np-course-info.np-course-banner-info {
|
||||
left: 0;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
.np-course-banner .np-course-title {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title" style='color: #FFFFFF; opacity: 0.5;'>
|
||||
<span class="lang-en">{% t .header, key: current_school.course_vocabulary %}</span>
|
||||
<span class="lang-es">RESUMEN DEL CURSO</span>
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-check np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<i class="icon-course-not-started np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,134 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">
|
||||
<span class="lang-en">{{ label }}</span>
|
||||
<span class="lang-es">Filtrar por progreso:</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button lang-en" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button lang-es" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
|
||||
<select >
|
||||
<option selected disabled hidden>
|
||||
{% if default_option == "All Courses" %}
|
||||
Todos los cursos
|
||||
{% else %}
|
||||
{{ default_option}}
|
||||
{% endif %}
|
||||
</option>
|
||||
<option value="a">Todos los cursos</option>
|
||||
<option value="n">No iniciado</option>
|
||||
<option value="i">En curso</option>
|
||||
<option value="c">Completado</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #062531;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#fff;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(255, 255, 255, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(255, 255, 255, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,108 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation"'>
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
style='color: white;opacity: 0.5;''
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% 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 np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
{% if social_media_link.name == 'linkedin' %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-linkedin-in"
|
||||
style='color: #089FB7;'
|
||||
></i>
|
||||
{% else %}
|
||||
<i class="np-footer-social-links-icon
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
style='color: #089FB7;'
|
||||
></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% 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 np-fc-white np-opacity-50">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email np-fc-white np-opacity-50">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{% comment %} {{ website_footer.school_customer_service_email }} {% endcomment %}
|
||||
support@northpass.com
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
background: #001e2e !important;
|
||||
}
|
||||
.np-powered-by {
|
||||
background: #001e2e !important;
|
||||
text-transform: uppercase !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.np-powered-by-link {
|
||||
color: rgba(256,256,256,0.25) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(".np-footer-navigation-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
</script>
|
||||
@ -0,0 +1,11 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,353 @@
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
let npLangCookie = getCookie("npLang")
|
||||
let currentLang = 'en';
|
||||
|
||||
if (!npLangCookie) {
|
||||
setCookie('npLang', 'en', 365)
|
||||
currentLang = 'en'
|
||||
} else {
|
||||
if (npLangCookie == 'es') {
|
||||
currentLang = 'es'
|
||||
}
|
||||
}
|
||||
|
||||
console.log("currentLang: ", currentLang)
|
||||
|
||||
if (currentLang == 'es') {
|
||||
document.body.classList.add('lang-es')
|
||||
$(".nav-item-about").attr('href', 'https://www.northpass.com/')
|
||||
$(".btn-additional-content").attr('href', "https://www.northpass.com/")
|
||||
$('.np-footer-support-link').attr('href', 'mailto:support@northpas.com')
|
||||
$('.np-footer-support-link').text('support@northpass.com')
|
||||
} else if (currentLang == "en") {
|
||||
document.body.classList.remove('lang-es')
|
||||
document.body.classList.add('lang-en')
|
||||
$('.np-footer-support-link').attr('href', 'mailto:support@northpass.com')
|
||||
$('.np-footer-support-link').text('support@northpass.com')
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function getCookie(name) {
|
||||
var dc = document.cookie;
|
||||
var prefix = name + "=";
|
||||
var begin = dc.indexOf("; " + prefix);
|
||||
if (begin == -1) {
|
||||
begin = dc.indexOf(prefix);
|
||||
if (begin != 0) return null;
|
||||
}
|
||||
else
|
||||
{
|
||||
begin += 2;
|
||||
var end = document.cookie.indexOf(";", begin);
|
||||
if (end == -1) {
|
||||
end = dc.length;
|
||||
}
|
||||
}
|
||||
return decodeURI(dc.substring(begin + prefix.length, end));
|
||||
}
|
||||
|
||||
function setCookie(name,value,days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days*24*60*60*1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
|
||||
function setLanguage(lang) {
|
||||
console.log("setting language as: ", lang)
|
||||
|
||||
if (lang == "es") {
|
||||
setCookie("npLang", "es", 365)
|
||||
setTimeout(location.reload.bind(location), 700);
|
||||
} else {
|
||||
setCookie("npLang", "en", 365)
|
||||
setTimeout(location.reload.bind(location), 700);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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 %}
|
||||
<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>
|
||||
{% 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">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% 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"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</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 %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<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" %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname === "/app") {
|
||||
const headerTag = document.querySelector(".np-header");
|
||||
headerTag.classList.add("np-header-absolute");
|
||||
}
|
||||
|
||||
$(".np-header-desktop-nav-link[href='https://change_to_mail.com'").attr("href", "mailto:support@northpass.com")
|
||||
/*
|
||||
function buildURL(path) {
|
||||
const url = "https://academy.getpixel.io" + path + "?first_name={{current_person.first_name}}&last_name={{current_person.last_name}}&email={{current_person.email}}"
|
||||
window.location.href = url
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
/* When the user clicks on the button,
|
||||
toggle between hiding and showing the dropdown content */
|
||||
function myFunction() {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
}
|
||||
|
||||
// Close the dropdown if the user clicks outside of it
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropbtn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hr.divider {
|
||||
border-top: 4px solid black;
|
||||
border-radius: 5px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
color: white;
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
border-radius: 5px;
|
||||
max-height: 44px;
|
||||
font-weight: 500;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #001e2e;
|
||||
min-width: 120px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, .5);
|
||||
-webkit-background-clip: padding-box; /* for Safari */
|
||||
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown a:hover {
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {display: block;}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<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 }}">
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
<a class="np-sub-navigation-content-item-link {{ link.label }}" href="{{ link.url }}">
|
||||
{{ link.label }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
<style>
|
||||
.np-sub-navigation {
|
||||
background: #00283D;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(".np-sub-navigation-content-item-link[href='/app/catalog']").parent().remove()
|
||||
$(".np-sub-navigation-content-item-link:contains('Home')").attr('href', '/app/homepage')
|
||||
$(".np-sub-navigation-content-item-link:contains('Courses')").attr('href', '/app/dashboard')
|
||||
$(".np-sub-navigation-content-item-link:contains('Courses')").text('Dashboard')
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,53 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<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>
|
||||
.course-detail-rating-stars svg > * {
|
||||
fill: white;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 1.2;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.np-course-banner-image {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-course-banner-overlay {
|
||||
border-radius: 8px;
|
||||
}
|
||||
.np-top-cta {
|
||||
border-radius: 8px;
|
||||
}
|
||||
@media screen and (max-width: 1170px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 5px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.course-detail-rating-stars {
|
||||
margin-bottom: 3px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.course-detail-rating-stars svg {
|
||||
scale: 0.8;
|
||||
margin: 0 -1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,181 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width" style='background: #00283D;'>
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
<div class="np-resource-subtitle">Below you will find the necessary courses for your Northpass Implementation.</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% if categories.enrolled.any? %}
|
||||
{% assign all_categories = categories.enrolled | map: "name" %}
|
||||
{% for enrolled_category in all_categories %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% assign enrolled_category = "Not Categorized" %}
|
||||
<div class="np-md-flex-wrapper">
|
||||
<div>
|
||||
<div class="np-dashboard-resources-title">
|
||||
Topic
|
||||
</div>
|
||||
<div class="np-dashboard-resources-category">
|
||||
{{ enrolled_category }}
|
||||
</div>
|
||||
</div>
|
||||
{%
|
||||
include "filter_by_progress",
|
||||
label: "Filter by Progress:",
|
||||
default_option: "All Courses",
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
</div>
|
||||
{%
|
||||
include "carousel_courses",
|
||||
items: courses.enrolled,
|
||||
topic: enrolled_category,
|
||||
%}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-dashboard-resources-title" style="margin-bottom:19px;">
|
||||
Courses
|
||||
</div>
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
<div style="margin-bottom:3rem;">
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
// Creates the custom dropdown and dropdown functionality
|
||||
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||
/* Look for any elements with the class “select-wrapper”: */
|
||||
x = document.getElementsByClassName("progress-filter");
|
||||
l = x.length;
|
||||
for (i = 0; i < l; i++) {
|
||||
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||
ll = selElmnt.length;
|
||||
a = document.createElement("DIV");
|
||||
a.setAttribute("class", "select-selected");
|
||||
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||
x[i].appendChild(a);
|
||||
b = document.createElement("DIV");
|
||||
b.setAttribute("class", "select-items select-hide");
|
||||
for (j = 1; j < ll; j++) {
|
||||
c = document.createElement("DIV");
|
||||
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||
c.addEventListener("click", function(e) {
|
||||
var y, i, k, s, h, sl, yl;
|
||||
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||
sl = s.length;
|
||||
h = this.parentNode.previousSibling;
|
||||
for (i = 0; i < sl; i++) {
|
||||
if (s.options[i].innerHTML == this.innerHTML) {
|
||||
s.selectedIndex = i;
|
||||
h.innerHTML = this.innerHTML;
|
||||
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||
yl = y.length;
|
||||
for (k = 0; k < yl; k++) {
|
||||
y[k].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "same-as-selected");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
filterCourses(this);
|
||||
|
||||
h.click();
|
||||
});
|
||||
b.appendChild(c);
|
||||
}
|
||||
x[i].appendChild(b);
|
||||
a.addEventListener("click", function(e) {
|
||||
e.stopPropagation();
|
||||
closeAllSelect(this);
|
||||
this.nextSibling.classList.toggle("select-hide");
|
||||
this.classList.toggle("select-arrow-active");
|
||||
});
|
||||
}
|
||||
|
||||
function closeAllSelect(elmnt) {
|
||||
var x, y, i, xl, yl, arrNo = [];
|
||||
x = document.getElementsByClassName("select-items");
|
||||
y = document.getElementsByClassName("select-selected");
|
||||
xl = x.length;
|
||||
yl = y.length;
|
||||
for (i = 0; i < yl; i++) {
|
||||
if (elmnt == y[i]) {
|
||||
arrNo.push(i)
|
||||
} else {
|
||||
y[i].classList.remove("select-arrow-active");
|
||||
}
|
||||
}
|
||||
for (i = 0; i < xl; i++) {
|
||||
if (arrNo.indexOf(i)) {
|
||||
x[i].classList.add("select-hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* If the user clicks anywhere outside the select box,
|
||||
then close all select boxes: */
|
||||
document.addEventListener("click", closeAllSelect);
|
||||
$(".select-items div").each(function() {
|
||||
if($( this ).text() == $(".select-selected").text()) {
|
||||
$(this).addClass("same-as-selected");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCourses(selectedItem) {
|
||||
|
||||
let filterGroup = $(selectedItem).closest(".progress-filter").data("topic");
|
||||
let selectedFilter = $(selectedItem).text().replace(" ", "-").toLowerCase();
|
||||
let carouselGroup = $('.courses-carousel[data-topic="' + filterGroup + '"]');
|
||||
|
||||
carouselGroup.slick('slickUnfilter');
|
||||
|
||||
if (selectedFilter != "all-courses") {
|
||||
carouselGroup.slick('slickFilter', `.${selectedFilter}`);
|
||||
}
|
||||
|
||||
}
|
||||
$(".np-sub-navigation-content-item-link:contains('Dashboard')").parent().addClass("np-sub-navigation-content-item-active")
|
||||
</script>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
window.location.replace('/app/homepage');
|
||||
</script>
|
||||
{% endcomment %}
|
||||
@ -0,0 +1,62 @@
|
||||
{% 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>
|
||||
|
||||
</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" style='opacity: 50%'>
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.featured %}
|
||||
<div class="col-xs-12 col-sm-8 col-md-12" style="margin:auto;">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
|
||||
{% include "section_popular_topics" %}
|
||||
|
||||
{% include "section_tips_tricks" %}
|
||||
|
||||
{% include "section_faqs" %}
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<script>
|
||||
$(".np-sub-navigation-content-item-link:contains('Home')").parent().addClass("np-sub-navigation-content-item-active")
|
||||
</script>
|
||||
@ -0,0 +1,41 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}.
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "subnav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
nav {
|
||||
grid-area: subnav;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-search np-subpage-container np-max-width">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-search-header">
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .showing %}
|
||||
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||
{% t .results_for %}
|
||||
<span class="np-button-color np-results-term">"{{ results.term }}"</span>
|
||||
</div>
|
||||
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||
{%
|
||||
include "filter_dropdown",
|
||||
filters: results.filters,
|
||||
key: "type",
|
||||
label: label
|
||||
%}
|
||||
</div>
|
||||
{% if results.items.any? %}
|
||||
{% render "search_result" for results.items as result %}
|
||||
{% else %}
|
||||
{% include "search_zero_state" %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,46 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "subnav" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 50px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
nav {
|
||||
grid-area: subnav;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-training-session np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="training-session-desktop">
|
||||
{% include "training_session_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="training-session-mobile">
|
||||
{% include "training_session_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "header" "main" "footer" "powered";
|
||||
grid-template-rows: 120px 1fr 160px 60px;
|
||||
}
|
||||
header {
|
||||
grid-area: header;
|
||||
}
|
||||
main {
|
||||
grid-area: main;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
footer {
|
||||
grid-area: footer;
|
||||
}
|
||||
.np-powered-by {
|
||||
grid-area: powered;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user