Luminate Templates, notes for walmart, Crayon changes.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
BIN
Custom_Templates/customer_templates/Crayon/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Crayon/.DS_Store
vendored
Normal file
Binary file not shown.
@ -1,3 +1,21 @@
|
||||
|
||||
{% assign architect_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/ArchitectBadge-512x566.png' %}
|
||||
{% assign activator_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/AcademyBadge-Activator.png' %}
|
||||
{% assign accelerator_certification_course_image = 'https://s3.amazonaws.com/static.northpass.com/Crayon+Academy/course+images/AcceleratorBadge-512x566.png' %}
|
||||
|
||||
{% assign is_architect_certification_course_image = false %}
|
||||
{% assign is_activator_certification_course_image = false %}
|
||||
{% assign is_accelerator_certification_course_image = false %}
|
||||
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
{% assign is_architect_certification_course_image = true %}
|
||||
{% elsif course.name == 'Activator Certification Course' %}
|
||||
{% assign is_activator_certification_course_image = true %}
|
||||
{% elsif course.name == 'Accelerator Certification Course' %}
|
||||
{% assign is_accelerator_certification_course_image = true %}
|
||||
{%endif%}
|
||||
|
||||
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
@ -5,33 +23,86 @@
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ architect_certification_course_image }}"
|
||||
>
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ activator_certification_course_image }}"
|
||||
>
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ accelerator_certification_course_image }}"
|
||||
>
|
||||
{% else %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
{%endif%}
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
<h3 class="np-card-content-title custom-course-description">
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
Learn how to drive adoption <br> of competitive intelligence
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
Learn how to gather & <br>distribute competitive intelligence
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
Learn how to analyze
|
||||
competitive intelligence
|
||||
{%else%}
|
||||
{{course.name}}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.progress == 100 %}
|
||||
{% comment %}<img class="np-dashboard-medal-icon" src="{{course.properties.course_badge}}" alt="{{course.name}}-medal-icon"/>{% endcomment %}
|
||||
<span class="np-dashboard-medal-icon">👍</span>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class='course-button-container'>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% if is_architect_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button orange-btn " href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% elsif is_activator_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button purple-btn" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% elsif is_accelerator_certification_course_image == true %}
|
||||
<a class="np-button np-button-wide np-course-card-button red-btn" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
BEGIN COURSE
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
RESUME COURSE
|
||||
{% elsif course.progress == 100 %}
|
||||
RETAKE COURSE
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
|
||||
{%- comment -%} {% if course.name == 'Accelerator Certification Course' %}
|
||||
<a class="np-button np-button-wide np-course-card-button"
|
||||
{% if course.enrolled? %}
|
||||
href="#" style="pointer-events: none; color: #486776; background: #F2F4F5"
|
||||
@ -49,9 +120,15 @@
|
||||
<a class="np-button np-button-wide np-course-card-button" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% endif %} {%- endcomment -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-container {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,217 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box sign-up-body">
|
||||
<div class="np-box-content-container sign-up-body-content-container login-body-content-container">
|
||||
|
||||
<div class="sign-in-text-content-wrapper login-text-content-wrapper">
|
||||
<img class="login-logo" src="https://s3.amazonaws.com/static.northpass.com/Crayon/crayon_logo_horizontal.png" alt="Welcome To Crayon Academy!">
|
||||
<div class="np-form-headline login-text">
|
||||
<span class="welcome-header"> Welcome to <span style="color: #FEC311">Crayon Academy</span></span>
|
||||
</div>
|
||||
<div class="np-form-subheadline login-text">
|
||||
<span class="welcome-subheader">Whether you're a new or returning learner, please complete the form to access the academy.
|
||||
<span class="login-emoji-mobile"> 👇</span>
|
||||
<span class="login-emoji-desktop">👉</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sign-in-form-content-wrapper login-form-wrapper">
|
||||
<form class="np-form np-box-content login-form" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_first_name">
|
||||
First name
|
||||
</label>
|
||||
<input
|
||||
autofocus="autofocus"
|
||||
class="np-input login-input"
|
||||
id="learner_first_name"
|
||||
name="first_name"
|
||||
placeholder="e.g., Jane"
|
||||
type="text"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_last_name">
|
||||
Last name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="np-input login-input"
|
||||
value="{{ form.last_name }}"
|
||||
id="learner_last_name"
|
||||
placeholder="e.g., Smith"
|
||||
name="last_name"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label login-text login-input-label" for="learner_email">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="np-input login-input"
|
||||
value="{{ form.email }}"
|
||||
id="learner_email"
|
||||
placeholder="e.g., jane.smith@acme.com"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
class="np-button np-button-big np-form-action login-button"
|
||||
name="commit"
|
||||
type="submit"
|
||||
value="{% t shared.enter %}"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.np-open-access{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body{
|
||||
align-items: center;
|
||||
background: #0538BF;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body-content-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sign-in-text-content-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.login-input-label{
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-input{
|
||||
background: #FEC311;
|
||||
border: 3px solid #FFFFFF;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-button{
|
||||
background: #FEC311;
|
||||
border: 2px solid #FFFFFF;
|
||||
color: #000000;
|
||||
font-size: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-button:hover{
|
||||
background: #0538BF;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-box-content-container{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.login-text-content-wrapper{
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-form{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.login-body-content-container{
|
||||
padding: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px){
|
||||
.welcome-header{
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
{% comment %} <script>
|
||||
if(window.location.pathname === '/app/courses/ab4f0c0b-e506-42df-9e81-e97da5fe7d5b'){
|
||||
window.location.replace('/app/catalog')
|
||||
}
|
||||
</script>
|
||||
</script> {% endcomment %}
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
|
||||
@ -5,60 +5,227 @@
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/activatorBadge.png {% endcomment %}
|
||||
{% comment %} https://s3.amazonaws.com/static.northpass.com/Crayon/architectBadge.png {% endcomment %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title">Hi {{current_person.first_name}}! 👋</div>
|
||||
{% comment %}<div class="np-resource-subtitle">This is what’s relevant to you right now in Competitive Advantage Academy</div>{%endcomment%}
|
||||
<div class="np-resource-subtitle">Take the courses. Get your certificates. Compete like you mean it.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign architect_course_done = false %}
|
||||
{% assign activator_course_done = false %}
|
||||
{% assign accelerator_course_done = false %}
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% assign architect_course_in_progress = false %}
|
||||
{% assign activator_course_in_progress = false %}
|
||||
{% assign accelerator_course_in_progress = false %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Activator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Beginner
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
|
||||
{% assign architect_course_started = true %}
|
||||
{% assign activator_course_started = true %}
|
||||
{% assign accelerator_course_started = true %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign architect_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign architect_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign architect_course_started = false %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if course.name == 'Activator Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign activator_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign activator_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign activator_course_started = false %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if course.name == 'Accelerator Certification Course'%}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign accelerator_course_done = true %}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
{% assign accelerator_course_in_progress = true %}
|
||||
{% else %}
|
||||
{% assign accelerator_course_started = false %}
|
||||
{% endif %}
|
||||
{%endif%}
|
||||
{% endfor %}
|
||||
|
||||
<section class="dashboard-section">
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center heading">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-header">
|
||||
<div class="np-resource-title"><span id="visitCount"></span>, {{current_person.first_name}}!
|
||||
|
||||
{% assign incomplete_course_count = 0 %}
|
||||
{% assign default_course = 'Architect Certification Course' %}
|
||||
|
||||
{% if architect_course_started == true and architect_course_done == false %}
|
||||
Ready to complete the Architect Certification Course?
|
||||
{% elsif activator_course_started == true and activator_course_done == false %}
|
||||
Ready to complete the Activator Certification Course?
|
||||
{% elsif accelerator_course_started == true and accelerator_course_done == false %}
|
||||
Ready to complete the Accelerator Certification Course?
|
||||
{% else %}
|
||||
{% if architect_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if activator_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if accelerator_course_done == false %}
|
||||
{% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if architect_course_done == true %}
|
||||
{% assign default_course = 'Activator Certification Course' %}
|
||||
{% endif %}
|
||||
|
||||
{% if incomplete_course_count > 1 and default_course != 'Architect Certification Course' %}
|
||||
Ready to complete the Accelerator Certification Course?
|
||||
{% elsif incomplete_course_count > 0 %}
|
||||
Ready to complete the {{ default_course }}?
|
||||
{% else %}
|
||||
{% if architect_course_done == true and activator_course_done == false and accelerator_course_done == false %}
|
||||
Ready to begin Accelerator Certification Course?
|
||||
{% elsif activator_course_done == true and accelerator_course_done == false and architect_course_done == false %}
|
||||
Ready to begin Architect Certification Course?
|
||||
{% elsif accelerator_course_done == true and activator_course_done == false and architect_course_done == false %}
|
||||
Ready to begin Architect Certification Course?
|
||||
{% else %}
|
||||
You've completed every available course. 🎉
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Intermediate
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Advanced
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
</div>
|
||||
{% comment %}<div class="np-resource-subtitle">This is what’s relevant to you right now in Competitive Advantage Academy</div>{%endcomment%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row dashboard-section-courses">
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Activator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Architect Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == 'Accelerator Certification Course' %}
|
||||
<div class="np-md-flex-wrapper" style="text-align: center;">
|
||||
<div class="np-dashboard-resources-title course-progress">
|
||||
{% if course.progress == 0 %}
|
||||
⛔️ NOT STARTED
|
||||
{% elsif course.progress > 0 and course.progress < 100%}
|
||||
✍️ IN PROGRESS
|
||||
{% elsif course.progress == 100 %}
|
||||
🎉 COMPLETE
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% include 'cards_course' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
{% include "footer" %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
<style>
|
||||
.dashboard-section, .np-dashboard {
|
||||
background: #89d9e1;
|
||||
}
|
||||
.course-progress {
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.heading {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.np-resource-title {
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function incrementVisitCount() {
|
||||
var visitCount = getCookie('visitCount');
|
||||
if (visitCount) {
|
||||
visitCount = parseInt(visitCount) + 1;
|
||||
} else {
|
||||
visitCount = 1;
|
||||
}
|
||||
setCookie('visitCount', visitCount);
|
||||
|
||||
console.log(visitCount);
|
||||
|
||||
if (visitCount == 1) {
|
||||
document.getElementById('visitCount').innerHTML = "Welcome";
|
||||
}
|
||||
else document.getElementById('visitCount').innerHTML = "Welcome back";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
var cookieName = name + "=";
|
||||
var decodedCookie = decodeURIComponent(document.cookie);
|
||||
var cookieArray = decodedCookie.split(';');
|
||||
for (var i = 0; i < cookieArray.length; i++) {
|
||||
var cookie = cookieArray[i];
|
||||
while (cookie.charAt(0) === ' ') {
|
||||
cookie = cookie.substring(1);
|
||||
}
|
||||
if (cookie.indexOf(cookieName) === 0) {
|
||||
return cookie.substring(cookieName.length, cookie.length);
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function setCookie(name, value) {
|
||||
var expirationDate = new Date();
|
||||
expirationDate.setFullYear(expirationDate.getFullYear() + 1); // Ustawienie daty wygaśnięcia pliku cookie na za rok
|
||||
document.cookie = name + "=" + value + "; expires=" + expirationDate.toUTCString() + "; path=/";
|
||||
}
|
||||
|
||||
incrementVisitCount();
|
||||
</script>
|
||||
@ -1,30 +1,61 @@
|
||||
{% 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">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main-onboarding np-homepage-onboarding">
|
||||
<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>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</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 "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.in_catalog.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% comment %} {% if course.properties.featured_onboarding %} {% endif %}{% endcomment %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 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>
|
||||
{% include "training_events_dashboard" %}
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="{% t .empty, key: current_school.course_vocabulary %}"
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
current_page: "/app/user-guides"
|
||||
<style>
|
||||
.np-main-onboarding {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.np-footer .np-sub-navigation {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
{% 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">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
</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" %}
|
||||
|
||||
current_page: "/app/user-guides"
|
||||
@ -14,25 +14,188 @@ body, html, div {
|
||||
.np-card-content{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.np-card-content-title{
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.np-card-content-title{
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.np-course-card-button{
|
||||
width: 8rem;
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
padding: 25px;
|
||||
border: 2px solid #000;
|
||||
|
||||
}
|
||||
|
||||
.course-button-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.purple-btn {
|
||||
background: #bc49dd;
|
||||
}
|
||||
|
||||
.orange-btn {
|
||||
background: #ff6d09;
|
||||
}
|
||||
|
||||
.red-btn {
|
||||
background: #d94a66;
|
||||
}
|
||||
/* ------------------------------------------------------------------------------------------------------ */
|
||||
/* Login Page Styles */
|
||||
.np-open-access{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body{
|
||||
align-items: center;
|
||||
background: #0538BF;
|
||||
border-radius: 0;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sign-up-body-content-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.sign-in-text-content-wrapper{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.login-input-label{
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-input{
|
||||
background: #FEC311;
|
||||
border: 3px solid #FFFFFF;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-button{
|
||||
background: #FEC311;
|
||||
border: 2px solid #FFFFFF;
|
||||
font-size: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-box-content-container{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.login-text-content-wrapper{
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-logo{
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.login-text{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.welcome-header{
|
||||
font-size: 62px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.login-emoji-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-emoji-desktop{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.login-form-wrapper{
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.login-form{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1000px){
|
||||
.login-body-content-container{
|
||||
padding: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px){
|
||||
.welcome-header{
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
.welcome-subheader{
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-inactive,
|
||||
.np-sub-navigation-content-item-active,
|
||||
.np-sub-navigation-content-item-icon {
|
||||
color: #2DC3D0 !important;
|
||||
}
|
||||
|
||||
.np-sub-navigation {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------------------------------------ */
|
||||
/* Achievements Panel */
|
||||
/* .np-dashboard-achievements-panel{
|
||||
background: #ffffff;
|
||||
height: 8rem;
|
||||
background: #ffffff;
|
||||
height: 8rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@ -61,6 +224,11 @@ body, html, div {
|
||||
margin-right: -4rem;
|
||||
} */
|
||||
|
||||
.custom-course-description {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
}
|
||||
@media (min-width: 395px){
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: -4rem;
|
||||
@ -322,4 +490,4 @@ body, html, div {
|
||||
.np-dashboard-medal-icon{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,9 +54,9 @@
|
||||
{% 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>
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="np-card np-card-article">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
Viewed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% comment %} {% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</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">
|
||||
{% if course.short_description != "" %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% 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-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% elsif course.progress == 100 %}
|
||||
Retake
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a href="{{course_path}}" class="np-card np-card-ongoing">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</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">
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,74 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="lp-image-wrapper">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{% if learning_path.instructor_names %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.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>
|
||||
@ -0,0 +1,55 @@
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="np-card np-card-learning-path-progress">
|
||||
<div class="np-card-container lp-progress-card-wrapper">
|
||||
<div class="learning-path-title np-hidden-desktop">{{ learning_path.name }}</div>
|
||||
<div class="lp-progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="130"
|
||||
height="130"
|
||||
data-total="{{learning_path.items.count}}"
|
||||
>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="#E0E4EB"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-progress"
|
||||
stroke="#3C228A"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#333" dy=".3em">{{learning_path.progress}}%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="lp-content">
|
||||
<div class="learning-path-title np-hidden-mobile">{{ learning_path.name }}</div>
|
||||
<div class="lp-total-courses">
|
||||
Total Courses: <span>{{ learning_path.items.count }} Courses</span>
|
||||
</div>
|
||||
<div class="lp-completed-items">
|
||||
{% assign completed_count = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.completed? %}
|
||||
{% assign completed_count = completed_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
Completed:
|
||||
{% if completed_count > 1 or completed_count == 0 %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Courses</span>
|
||||
{% else %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Course</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
<div class="course-image-wrapper">
|
||||
<div class="course-title">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% 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 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="javascript:goBack();" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{% comment %} {{ course.name }} {% endcomment %}
|
||||
</div>
|
||||
<div class="course-image-wrapper np-hidden-desktop">
|
||||
<div class="course-title ">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
console.log("go back function")
|
||||
const fallbackUrl = '/app';
|
||||
var prevPage = window.location.href;
|
||||
|
||||
window.history.go(-1);
|
||||
|
||||
setTimeout(function(){
|
||||
if (window.location.href == prevPage) {
|
||||
window.location.href = fallbackUrl;
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,18 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -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 %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="copyright">© 2023 Walmart Inc.</div>
|
||||
</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 }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</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">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
max-width:1380px;
|
||||
margin:auto;
|
||||
border-top: 1px solid #DADCE0;
|
||||
padding: 24px 16px 48px;
|
||||
}
|
||||
|
||||
.np-footer-top {
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-direction:row;
|
||||
flex-wrap:wrap;
|
||||
margin:0;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-footer-navigation {
|
||||
min-height:auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
font-size:16px;
|
||||
line-height:30px;
|
||||
margin: 0 12px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width:1381px) {
|
||||
.np-footer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<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>
|
||||
@ -0,0 +1,391 @@
|
||||
<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 mobile-menu-open np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<i class="fal fa-times"></i>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="Walmart Luminate Learn"
|
||||
class="np-header-logo-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/walmart-luminate/luminate-icon-logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<div class="header-dropdown-container np-hidden-mobile">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.walmartluminate.com/apps">Walmart Luminate</a>
|
||||
<a href="https://www.walmartluminate.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.walmartluminate.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.walmartluminate.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.walmartluminate.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-dropdown-container np-hidden-desktop">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.walmartluminate.com/apps">Walmart Luminate</a>
|
||||
<a href="https://www.walmartluminate.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.walmartluminate.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.walmartluminate.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.walmartluminate.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-text np-hidden-desktop">Learn</div>
|
||||
<div class="header-text np-hidden-mobile">Walmart Luminate Learn</div>
|
||||
</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
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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" href="https://www.walmartluminate.com/profile">Profile</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/admin">Admin</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/resources">Resources</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/support">Support</a>
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
|
||||
<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.sub_navigation %}
|
||||
{% unless website_navigation.label == "Events" %}
|
||||
<a
|
||||
href="{{ website_navigation.url }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
{{ website_navigation.label }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/articles"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
<a
|
||||
href="/app/certificates"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Certificates
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-content {
|
||||
max-width:1920px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto 0 0;
|
||||
flex-grow:unset;
|
||||
position:relative;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0 22px;
|
||||
height: 64px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-arrow:after {
|
||||
content: "\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
transition: transform 0.2s;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
|
||||
.header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
|
||||
transform: rotate(180deg) translateY(5px);
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
display:none;
|
||||
position:absolute;
|
||||
background-color:#fff;
|
||||
z-index:10;
|
||||
left:32px;
|
||||
top: 56px;
|
||||
padding: 8px 0;
|
||||
font-size:16px;
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
min-width:220px;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
|
||||
.header-dropdown-container.np-hidden-desktop.open .header-dropdown {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.header-dropdown a {
|
||||
display:block;
|
||||
padding: 16px;
|
||||
color:#282828;
|
||||
text-decoration:none;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.header-dropdown a:hover {
|
||||
background-color:#F2F2F2;
|
||||
}
|
||||
|
||||
.np-header-logo .header-text {
|
||||
font-size:24px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background-color: #3C228A;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height:26px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
margin-left:14px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .user-profile {
|
||||
margin-top: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
font-weight: 400;
|
||||
font-size:16px;
|
||||
color:#333;
|
||||
padding:22px 16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link:hover {
|
||||
background: #F2F2F2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
background-color:#F2F2F2;
|
||||
opacity: 0.15;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
.np-header-avatar-button,
|
||||
.np-header-mobile-menu-nav-button {
|
||||
border: 1px solid #DADCE0;
|
||||
padding: 4px 4px 4px 10px;
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width:auto;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip {
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-nav {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
background:#F2F2F2;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-header-desktop-nav-list {
|
||||
margin-right:48px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="featured-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign featured_courses_count = 0 %}
|
||||
<div class="featured-courses-wrapper">
|
||||
<div class="featured-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course %}
|
||||
{% assign is_featured = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "featured" %}
|
||||
{% assign is_featured = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if featured_courses_count > 0 %}
|
||||
<div class="featured-see-more-wrapper">
|
||||
<a href="/app/articles">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".featured-courses-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initFeaturedCoursesCarousel() {
|
||||
var featuredSlider = tns({
|
||||
container: '.featured-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:true,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.featured-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.featured-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.featured-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-featured-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
<div class="np-homepage-ongoing np-max-width">
|
||||
<div class="np-homepage-ongoing-text">
|
||||
<div class="np-homepage-headline">
|
||||
Ongoing Training
|
||||
</div>
|
||||
<div class="ongoing-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign ongoing_courses_count = 0 %}
|
||||
<div class="ongoing-courses-wrapper">
|
||||
<div class="ongoing-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course == false %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if ongoing_courses_count > 0 %}
|
||||
<div class="ongoing-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{ongoing_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var ongoingSlider = tns({
|
||||
container: '.ongoing-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.ongoing-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
controls:true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.ongoing-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.ongoing-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-ongoing-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<section class="homepage-topics np-max-width np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-section-header">Explore Courses by Category</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="category-cards">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
{% if category_name != "featured" and category_name != "articles" %}
|
||||
{% assign cat_image = "" %}
|
||||
|
||||
{% if category_name == "customer perception" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
|
||||
{% elsif category_name == "shopper behavior" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
|
||||
{% elsif category_name == "insights dashboard" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
|
||||
{% elsif category_name == "report builder" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
|
||||
{% elsif category_name == "apis" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
|
||||
{% elsif category_name == "know your store" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
|
||||
{% elsif category_name == "metrics" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
|
||||
{% elsif category_name == "channel performance" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
|
||||
{% elsif category_name == "know your customer" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
|
||||
{% elsif category_name == "advanced" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
|
||||
{% elsif category_name == "beginner" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
|
||||
{% endif %}
|
||||
|
||||
<a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
|
||||
{% comment %} {% if cat_image %}
|
||||
<img class="category-card-image" src="{{cat_image}}" />
|
||||
{% endif %} {% endcomment %}
|
||||
{% comment %} <div class="category-card-content">
|
||||
{{category.name}}
|
||||
</div> {% endcomment %}
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.homepage-topics {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.category-cards {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
border-radius:30px;
|
||||
border:2px solid #3c228a;
|
||||
background-color: #3c228a;
|
||||
color: #fff;
|
||||
width:100%;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-align:center;
|
||||
margin-bottom:16px;
|
||||
padding:16px;
|
||||
font-weight:700;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
background-color: #13014a;
|
||||
}
|
||||
|
||||
.category-card-image {
|
||||
max-width:80px;
|
||||
}
|
||||
|
||||
.category-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (min-width:500px) {
|
||||
.category-card {
|
||||
width:calc(50% - 16px);
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(odd) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(even) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.category-card {
|
||||
width:calc(33.33% - 22px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(even),
|
||||
.category-card:nth-child(odd) {
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.category-card {
|
||||
width:calc(25% - 24px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+4) {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
{% assign full_course_obj = "" %}
|
||||
{% for course_obj in courses.in_catalog %}
|
||||
{% if course_obj.id == course.id %}
|
||||
{% assign full_course_obj = course_obj %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-learning-path-outline-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,35 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
<div class="lp-info">
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-resource-header np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="card-description">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-description">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,43 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,35 @@
|
||||
{% if result.type == "course" %}
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{result.course.short_description}}</div>
|
||||
|
||||
</div>
|
||||
<div class="category-pills">
|
||||
{% for course in catalog_courses %}
|
||||
{% if course.id == result.course.id %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% unless cat_name == "FEATURED" or cat_name == "ARTICLES" %}
|
||||
<div class="cat-item">{{cat.name}}</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,51 @@
|
||||
<nav class="np-sub-navigation np-hidden-mobile">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Events" %}
|
||||
<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>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<div class="np-sub-navigation-content-item articles-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/articles">
|
||||
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Articles
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item certifications-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/certifications">
|
||||
<i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Certifications
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app/articles") {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/app/certifications") {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
|
||||
color:#333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
{% include "header" %}
|
||||
{% 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">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.is_article_course %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,21 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-certifications np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ custom_page.content }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,63 @@
|
||||
{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
|
||||
{% 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 %}
|
||||
{% else %}
|
||||
{% 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" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-flex {
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.np-content-categories-content-item {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.course-image-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
top:16px;
|
||||
left:16px;
|
||||
padding-right:16px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
font-size:24px;
|
||||
line-height:32px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.course-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.course-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
{% 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">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 np-stretch-content" %}
|
||||
</div>
|
||||
{% comment %} {% 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 %} {% endcomment %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,410 @@
|
||||
<script>
|
||||
function showPopup() {
|
||||
setTimeout(function() {
|
||||
document.querySelector(".popup-trigger").click()
|
||||
console.log("showing popup")
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function RerunWorkato() {
|
||||
console.log("re-running workflow")
|
||||
|
||||
const data = { learner_uuid: '{{current_person.id}}' }
|
||||
|
||||
/* fetch('https://webhooks.workato.com/webhooks/rest/db050d27-4343-413c-82a3-e63c634f52f9/user-clicks-modal-option', {
|
||||
method: 'post',
|
||||
body: JSON.stringify(data)
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(data) {
|
||||
console.log(res)
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
});*/
|
||||
}
|
||||
</script>
|
||||
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% include "header" %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<div class="np-homepage-hero-container">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="hero-search-wrapper">
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<form
|
||||
class="np-header-search np-hero-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="What are you looking for?"
|
||||
class="hero-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="What are you looking for?"
|
||||
/>
|
||||
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
|
||||
{% include "homepage_featured", items: catalog_courses %}
|
||||
|
||||
<div class="np-max-width np-homepage-row-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
|
||||
<div class="np-section-header">Progress Tracker</div>
|
||||
<div class="learning-path-progress-container">
|
||||
<div class="row">
|
||||
{% assign lps_in_progress = 0 %}
|
||||
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
|
||||
{% for learning_path in enrolled_learning_paths %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
|
||||
|
||||
{% if lps_in_progress < 4 %}
|
||||
<div class="col-xs-12 col-md-4">
|
||||
{% include "cards_learning_path_progress" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lps_in_progress > 0 %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if lps_in_progress == 0 %}
|
||||
<div class="col-xs-12">
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any learning Paths in progress.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% comment %} {% if features.training_events? %}
|
||||
<div class="col-xs-12 col-sm-5 col-md-4">
|
||||
<div class="homepage-events">
|
||||
<div class="np-section-header">Upcoming Courses</div>
|
||||
<div class="upcoming events">
|
||||
{% if training_events.available.any? %}
|
||||
{% for training_event in training_events.available limit:1 %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/training_events" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "homepage_ongoing_training", items: catalog_courses %}
|
||||
|
||||
{% include "homepage_topics" %}
|
||||
<button
|
||||
type="button"
|
||||
class="popup-trigger"
|
||||
data-toggle-class-on-target
|
||||
data-toggle-target="#firstTimeUsers"
|
||||
data-toggle-escape
|
||||
data-toggle-modal>
|
||||
Click
|
||||
</button>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<div
|
||||
class="first-time-user-popup"
|
||||
id="firstTimeUsers"
|
||||
role="dialog"
|
||||
aria-labelledby="dialogTitle"
|
||||
aria-describedby="dialogContent"
|
||||
aria-hidden="true">
|
||||
<section class="first-time-user-popup-container">
|
||||
<div id="dialogContent" class="first-time-user-popup-content">
|
||||
<div class="modal-headline">Welcome to Luminate Academy, {{ current_person.first_name }}! We noticed it is your first time here. Can we help you get familiar with the academy?</div>
|
||||
<div class="modal-links">
|
||||
<a href="javascript:setPopupSeenProperty('/app/dashboard')" class="secondary" data-toggle-trigger-off>No thanks! I can figure it out.</a>
|
||||
<a href="javascript:setPopupSeenProperty('/app')" data-redirect="/app">Sure! Show me around.</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_person.email contains "+preview" %}
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
const firstTimePopupProperty = {{current_person.properties.first_time_user_popup_seen}}
|
||||
if (firstTimePopupProperty == false) {
|
||||
console.log('property is false, check local storage')
|
||||
if (localStorage.getItem('modal_clicked') != null) {
|
||||
console.log("rerun workflow to set property")
|
||||
RerunWorkato()
|
||||
} else {
|
||||
showPopup()
|
||||
}
|
||||
} else if (firstTimePopupProperty == true) {
|
||||
console.log("property is set, deleting local storage, don't initialize modal")
|
||||
localStorage.removeItem("modal_clicked")
|
||||
} else {
|
||||
console.log('custom prop doesnt yet exist')
|
||||
if (localStorage.getItem('modal_clicked') != null) {
|
||||
console.log("rerun workflow to set property")
|
||||
RerunWorkato()
|
||||
} else {
|
||||
showPopup()
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app") {
|
||||
document.querySelector(".np-sub-navigation").classList.add("homepage-nav")
|
||||
document.querySelector(".np-header").classList.add("homepage-nav")
|
||||
}
|
||||
|
||||
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
|
||||
if (e.target.parentElement.classList.contains("open")) {
|
||||
e.target.parentElement.classList.remove("open")
|
||||
} else {
|
||||
e.target.parentElement.classList.add("open")
|
||||
}
|
||||
})
|
||||
|
||||
window.onload = function () {
|
||||
var stickySubNav = document.querySelector('.np-sub-navigation');
|
||||
var headerOffset = findOffset(stickySubNav);
|
||||
|
||||
window.onscroll = function() {
|
||||
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (bodyScrollTop > (headerOffset.top - 24)) {
|
||||
stickySubNav.classList.add('fixed');
|
||||
} else {
|
||||
stickySubNav.classList.remove('fixed');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
function findOffset(element) {
|
||||
var top = 0, left = 0;
|
||||
|
||||
do {
|
||||
top += element.offsetTop || 0;
|
||||
left += element.offsetLeft || 0;
|
||||
element = element.offsetParent;
|
||||
} while(element);
|
||||
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
|
||||
var progressCards = document.querySelectorAll(".np-card-learning-path-progress");
|
||||
|
||||
for (var i = 0; i < progressCards.length; i++ ) {
|
||||
var lpProgressCard = progressCards[i]
|
||||
var progressRing = lpProgressCard.querySelector(".progress-ring")
|
||||
let circle = progressRing.querySelector(".circle-progress")
|
||||
let total = progressRing.getAttribute("data-total")
|
||||
let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
const percent = numCompleted / total
|
||||
console.log("percent: ", percent)
|
||||
setProgress(percent, circle)
|
||||
}
|
||||
|
||||
function setProgress(percent, circle) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
function setPopupSeenProperty(redirectUrl) {
|
||||
localStorage.setItem("modal_clicked", true);
|
||||
|
||||
const data = { learner_uuid: '{{current_person.id}}' }
|
||||
|
||||
window.location.href = redirectUrl;
|
||||
|
||||
/*fetch('https://webhooks.workato.com/webhooks/rest/db050d27-4343-413c-82a3-e63c634f52f9/user-clicks-modal-option', {
|
||||
method: 'post',
|
||||
body: JSON.stringify(data)
|
||||
}).then(function(response) {
|
||||
return response.json();
|
||||
}).then(function(data) {
|
||||
console.log(res)
|
||||
window.location.href = redirectUrl;
|
||||
}).catch(error => {
|
||||
console.log(error)
|
||||
window.location.href = redirectUrl;
|
||||
});*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-homepage-hero {
|
||||
background-color:#3C228A;
|
||||
padding: 40px 24px 24px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.np-homepage-hero-image {
|
||||
object-fit: unset;
|
||||
width: 115px;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
position:relative;
|
||||
padding:0;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.np-homepage-subheadline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
margin-bottom:8px;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.np-hero-search {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.hero-search-input {
|
||||
background-color:#F1F3F4;
|
||||
border-radius:4px;
|
||||
padding: 14px 19px 14px 44px;
|
||||
border:none;
|
||||
font-size:14px;
|
||||
line-height:19px;
|
||||
width: 100%;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.hero-search-icon {
|
||||
right:unset;
|
||||
left:16px;
|
||||
color:#6C6C6C;
|
||||
}
|
||||
|
||||
.np-homepage-row-wrapper {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-empty {
|
||||
margin: 0;
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
padding: 60px 32px;
|
||||
}
|
||||
|
||||
.learning-path-progress-container,
|
||||
.learning-path-progress-container > .row {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-hero-container {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom:20px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.np-homepage-hero-image {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
margin: 0 0 0 64px;
|
||||
}
|
||||
|
||||
.hero-search-wrapper {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-hero-search {
|
||||
margin-left:32px;
|
||||
flex:2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1365px) {
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 3.516vw;
|
||||
line-height: 4.249vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-homepage-hero-image {
|
||||
width: 300px;
|
||||
margin: 0 0 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1366px) {
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,122 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-resource-header {
|
||||
padding: 32px 16px 0;
|
||||
}
|
||||
|
||||
.lp-cover-image-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.lp-title {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
top:16px;
|
||||
left:16px;
|
||||
padding-right:16px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
font-size:24px;
|
||||
line-height:32px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-bar {
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
margin: 8px auto;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-description {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-content .course-length {
|
||||
margin: 6px 0 18px;
|
||||
font-weight: 500;
|
||||
color:#333;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
padding: 0 4px;
|
||||
margin: 32px 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item.np-learning-path-outline-inactive-item:before {
|
||||
content: "\f023";
|
||||
font-family:"Font Awesome 5 Pro";
|
||||
width:20px;
|
||||
height:20px;
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:20px;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-icon {
|
||||
color:#3c228a;
|
||||
}
|
||||
|
||||
.np-top-title {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-resource-header {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.lp-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.lp-info {
|
||||
padding: 0 40px 0 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-inactive-item .np-learning-path-outline-course-image,
|
||||
.np-learning-path-outline-inactive-item .np-events-content-date {
|
||||
height: 112px;
|
||||
width: 183px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.np-card-heading {
|
||||
font-size:22px;
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.lp-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<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">"{{ results.term }}"</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if results.items.any? %}
|
||||
{% render "search_result" for results.items as result, catalog_courses: courses.in_catalog %}
|
||||
{% else %}
|
||||
{% include "search_zero_state" %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.np-search .np-resource-title {
|
||||
color:#000;
|
||||
font-weight:900;
|
||||
}
|
||||
|
||||
.category-pills {
|
||||
display:flex;
|
||||
flex: 1;
|
||||
justify-content: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color:#3c228a;
|
||||
color:#fff;
|
||||
font-weight:500;
|
||||
font-size:12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-search .np-resource-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
const searchResultsLength = document.querySelectorAll(".np-search-result").length
|
||||
|
||||
document.querySelector(".np-resource-subtitle-number").innerText = searchResultsLength
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
{% comment %} <div class="uk-container uk-container-center uk-padding-large-horizontal uk-margin-large-top uk-margin-bottom">
|
||||
<hgroup class="uk-text-center vertical-align uk-padding-large-top">
|
||||
<h1 class="page-head">{% t .headline %}</h1>
|
||||
</hgroup>
|
||||
|
||||
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-container-center uk-padding-large-top">
|
||||
<div class="school-website-custom-page-content uk-text-center uk-padding-large-bottom uk-margin-large-bottom">
|
||||
<h3 class="uk-margin-top-remove uk-margin-large-bottom">{% t .subheadline %}</h3>
|
||||
<p><a href="/" class="uk-button uk-button-primary">{% t .home %}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<main class="np-main np-max-width np-subpage-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Server Error
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<img src="/images/500.svg">
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,612 @@
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Regular.OTF);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Italic.OTF);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Medium.otf);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Medium_Italic.otf);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Bold.OTF);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Bold_Italic.OTF);
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Black.OTF);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Black_Italic.OTF);
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: "Bogle", "Roboto", sans-serif;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-dashboard,
|
||||
.np-learning-paths {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.np-card-container {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-resource-title,
|
||||
.np-dashboard-resources-title {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.np-dashboard .np-dashboard-resources-title {
|
||||
margin-bottom: 20px;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.np-resource-subtitle {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-max-width {
|
||||
max-width: 1380px;
|
||||
}
|
||||
|
||||
.np-button {
|
||||
min-width: 80px;
|
||||
border-radius: 30px;
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.np-button:focus {
|
||||
border: 2px solid #979797;
|
||||
box-shadow: 0px 0px 10px 0px #0000001a;
|
||||
}
|
||||
|
||||
.np-button:disabled,
|
||||
.np-button:hover:disabled {
|
||||
background-color: #6d6e71;
|
||||
}
|
||||
|
||||
.np-alert-info {
|
||||
background-color: #ebe8f3;
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.np-card-ribbon {
|
||||
background-color: #3c228a;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
text-transform: none;
|
||||
padding: 6px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.np-zero-state-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title {
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources-container,
|
||||
.np-dashboard-resources-container {
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tns-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tns-nav button {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.tns-nav button.tns-nav-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-section-header {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.see-more-wrapper a {
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.progress-ring circle {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.progress-ring text {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tns-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.np-section-header {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.np-resource-title,
|
||||
.np-dashboard-resources-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* STICKY HEADER & SUBNAV */
|
||||
.np-header {
|
||||
height: 64px;
|
||||
transition: all 0.2s;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-main {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.np-sub-navigation:not(.homepage-nav):not(.np-page-container) {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
padding-top: 0px;
|
||||
margin-bottom: 0;
|
||||
z-index: 49;
|
||||
}
|
||||
|
||||
.np-sub-navigation.fixed {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 49;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-main:not(.np-homepage):not(.np-page-container) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* COVER PAGES */
|
||||
.np-resource-header-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.np-back-button .np-icon-back {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title {
|
||||
color: #59697b;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.np-optional-ribbon {
|
||||
background-color: rgba(60, 34, 138, 0.1);
|
||||
color: #3c228a;
|
||||
}
|
||||
.np-learning-path-outline-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-progress.np-color-success {
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
#learning-path-desktop .np-top-image {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
a.np-card {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-card-padding {
|
||||
padding: 32px 24px 24px;
|
||||
}
|
||||
|
||||
.np-image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .np-card-ribbon {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .course-img-content {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .np-card-content-title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.np-card .course-length {
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
margin: 0 !important;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-title {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.np-card-article .np-card-content-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-subtitle {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-card .np-image-wrapper .np-card-content-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ONGOING COURSE CARDS */
|
||||
.np-card.np-card-ongoing .np-card-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.np-card.np-card-ongoing .np-card-content-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ILT CARDS */
|
||||
.np-card-training-event .np-card-padding {
|
||||
padding: 12px 20px 32px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-content-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-training-session {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-content-label,
|
||||
.np-card-training-event .np-card-training-sessions-icon {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* LEARNING PATH CARDS */
|
||||
.np-card .np-learning-path .np-card-content-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
/* LEARNING PATH PROGRESS CARDS */
|
||||
.np-card.np-card-learning-path-progress {
|
||||
padding: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-learning-path .np-card-content-footer {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-learning-path {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.lp-image-wrapper {
|
||||
width: 32%;
|
||||
min-width: 32%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.np-learning-paths .lp-image-wrapper {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.np-learning-path .np-learning-path-image {
|
||||
width: auto;
|
||||
border-top-right-radius: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-progress-card-wrapper {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 24px 16px 50px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-content {
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .learning-path-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses,
|
||||
.np-card-learning-path-progress .lp-completed-items {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses span,
|
||||
.np-card-learning-path-progress .lp-completed-items span {
|
||||
color: #3c228a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-completed-items span > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-card-learning-path-progress .lp-progress-card-wrapper {
|
||||
padding: 64px 16px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.np-card-learning-path-progress .learning-path-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses,
|
||||
.np-card-learning-path-progress .lp-completed-items {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-content {
|
||||
padding-left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* MODAL POPUP */
|
||||
.first-time-user-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
.first-time-user-popup.is-active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.first-time-user-popup-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
transform: translateY(-1em) scale(0.95);
|
||||
background-color: white;
|
||||
transition: transform 0.25s ease-out;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.first-time-user-popup.is-active .first-time-user-popup-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 20px;
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
border: 2px solid #3c228a;
|
||||
background: #3c228a;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
width: calc(50% - 8px);
|
||||
margin: 0 8px;
|
||||
border-radius: 30px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-links a.secondary {
|
||||
background: transparent;
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.modal-links a:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #13014a;
|
||||
}
|
||||
|
||||
.modal-links a.secondary:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #ebe8f3;
|
||||
color: #13014a;
|
||||
}
|
||||
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="np-card np-card-article">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
Viewed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% comment %} {% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</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">
|
||||
{% if course.short_description != "" %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% 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-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% elsif course.progress == 100 %}
|
||||
Retake
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a href="{{course_path}}" class="np-card np-card-ongoing">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</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">
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,74 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="lp-image-wrapper">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{% if learning_path.instructor_names %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.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>
|
||||
@ -0,0 +1,55 @@
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="np-card np-card-learning-path-progress">
|
||||
<div class="np-card-container lp-progress-card-wrapper">
|
||||
<div class="learning-path-title np-hidden-desktop">{{ learning_path.name }}</div>
|
||||
<div class="lp-progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="130"
|
||||
height="130"
|
||||
data-total="{{learning_path.items.count}}"
|
||||
>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="#E0E4EB"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-progress"
|
||||
stroke="#3C228A"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#333" dy=".3em">{{learning_path.progress}}%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="lp-content">
|
||||
<div class="learning-path-title np-hidden-mobile">{{ learning_path.name }}</div>
|
||||
<div class="lp-total-courses">
|
||||
Total Courses: <span>{{ learning_path.items.count }} Courses</span>
|
||||
</div>
|
||||
<div class="lp-completed-items">
|
||||
{% assign completed_count = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.completed? %}
|
||||
{% assign completed_count = completed_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
Completed:
|
||||
{% if completed_count > 1 or completed_count == 0 %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Courses</span>
|
||||
{% else %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Course</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
<div class="course-image-wrapper">
|
||||
<div class="course-title">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% 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 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="javascript:goBack();" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{% comment %} {{ course.name }} {% endcomment %}
|
||||
</div>
|
||||
<div class="course-image-wrapper np-hidden-desktop">
|
||||
<div class="course-title ">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
const fallbackUrl = '/app';
|
||||
var prevPage = window.location.href;
|
||||
|
||||
window.history.go(-1);
|
||||
|
||||
setTimeout(function(){
|
||||
if (window.location.href == prevPage) {
|
||||
window.location.href = fallbackUrl;
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,18 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -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 %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="copyright">© 2023 Walmart Inc.</div>
|
||||
</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 }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</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">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
max-width:1380px;
|
||||
margin:auto;
|
||||
border-top: 1px solid #DADCE0;
|
||||
padding: 24px 16px 48px;
|
||||
}
|
||||
|
||||
.np-footer-top {
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-direction:row;
|
||||
flex-wrap:wrap;
|
||||
margin:0;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-footer-navigation {
|
||||
min-height:auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
font-size:16px;
|
||||
line-height:30px;
|
||||
margin: 0 12px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width:1381px) {
|
||||
.np-footer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<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>
|
||||
@ -0,0 +1,391 @@
|
||||
<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 mobile-menu-open np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<i class="fal fa-times"></i>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="Walmart Luminate Learn"
|
||||
class="np-header-logo-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/walmart-luminate/luminate-icon-logo.svg"
|
||||
/>
|
||||
</a>
|
||||
<div class="header-dropdown-container np-hidden-mobile">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.walmartluminate.com/apps">Walmart Luminate</a>
|
||||
<a href="https://www.walmartluminate.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.walmartluminate.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.walmartluminate.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.walmartluminate.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-dropdown-container np-hidden-desktop">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.walmartluminate.com/apps">Walmart Luminate</a>
|
||||
<a href="https://www.walmartluminate.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.walmartluminate.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.walmartluminate.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.walmartluminate.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-text np-hidden-desktop">Learn</div>
|
||||
<div class="header-text np-hidden-mobile">Walmart Luminate Learn</div>
|
||||
</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
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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" href="https://www.walmartluminate.com/profile">Profile</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/admin">Admin</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/resources">Resources</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/support">Support</a>
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
|
||||
<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.sub_navigation %}
|
||||
{% unless website_navigation.label == "Events" %}
|
||||
<a
|
||||
href="{{ website_navigation.url }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
{{ website_navigation.label }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/articles"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
<a
|
||||
href="/app/certificates"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Certificates
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-content {
|
||||
max-width:1920px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto 0 0;
|
||||
flex-grow:unset;
|
||||
position:relative;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0 22px;
|
||||
height: 64px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-arrow:after {
|
||||
content: "\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
transition: transform 0.2s;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
|
||||
.header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
|
||||
transform: rotate(180deg) translateY(5px);
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
display:none;
|
||||
position:absolute;
|
||||
background-color:#fff;
|
||||
z-index:10;
|
||||
left:32px;
|
||||
top: 56px;
|
||||
padding: 8px 0;
|
||||
font-size:16px;
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
min-width:220px;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
|
||||
.header-dropdown-container.np-hidden-desktop.open .header-dropdown {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.header-dropdown a {
|
||||
display:block;
|
||||
padding: 16px;
|
||||
color:#282828;
|
||||
text-decoration:none;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.header-dropdown a:hover {
|
||||
background-color:#F2F2F2;
|
||||
}
|
||||
|
||||
.np-header-logo .header-text {
|
||||
font-size:24px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background-color: #3C228A;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height:26px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
margin-left:14px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .user-profile {
|
||||
margin-top: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
font-weight: 400;
|
||||
font-size:16px;
|
||||
color:#333;
|
||||
padding:22px 16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link:hover {
|
||||
background: #F2F2F2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
background-color:#F2F2F2;
|
||||
opacity: 0.15;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
.np-header-avatar-button,
|
||||
.np-header-mobile-menu-nav-button {
|
||||
border: 1px solid #DADCE0;
|
||||
padding: 4px 4px 4px 10px;
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width:auto;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip {
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-nav {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
background:#F2F2F2;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-header-desktop-nav-list {
|
||||
margin-right:48px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="featured-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign featured_courses_count = 0 %}
|
||||
<div class="featured-courses-wrapper">
|
||||
<div class="featured-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course %}
|
||||
{% assign is_featured = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "featured" %}
|
||||
{% assign is_featured = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if featured_courses_count > 0 %}
|
||||
<div class="featured-see-more-wrapper">
|
||||
<a href="/app/articles">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".featured-courses-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initFeaturedCoursesCarousel() {
|
||||
var featuredSlider = tns({
|
||||
container: '.featured-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:true,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.featured-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.featured-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.featured-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-featured-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
<div class="np-homepage-ongoing np-max-width">
|
||||
<div class="np-homepage-ongoing-text">
|
||||
<div class="np-homepage-headline">
|
||||
Ongoing Training
|
||||
</div>
|
||||
<div class="ongoing-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign ongoing_courses_count = 0 %}
|
||||
<div class="ongoing-courses-wrapper">
|
||||
<div class="ongoing-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course == false %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if ongoing_courses_count > 0 %}
|
||||
<div class="ongoing-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{ongoing_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var ongoingSlider = tns({
|
||||
container: '.ongoing-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.ongoing-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
controls:true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.ongoing-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.ongoing-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-ongoing-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<section class="homepage-topics np-max-width np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-section-header">Explore Courses by Category</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="category-cards">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
{% if category_name != "featured" and category_name != "articles" %}
|
||||
{% assign cat_image = "" %}
|
||||
|
||||
{% if category_name == "customer perception" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
|
||||
{% elsif category_name == "shopper behavior" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
|
||||
{% elsif category_name == "insights dashboard" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
|
||||
{% elsif category_name == "report builder" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
|
||||
{% elsif category_name == "apis" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
|
||||
{% elsif category_name == "know your store" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
|
||||
{% elsif category_name == "metrics" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
|
||||
{% elsif category_name == "channel performance" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
|
||||
{% elsif category_name == "know your customer" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
|
||||
{% elsif category_name == "advanced" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
|
||||
{% elsif category_name == "beginner" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
|
||||
{% endif %}
|
||||
|
||||
<a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
|
||||
{% comment %} {% if cat_image %}
|
||||
<img class="category-card-image" src="{{cat_image}}" />
|
||||
{% endif %} {% endcomment %}
|
||||
{% comment %} <div class="category-card-content">
|
||||
{{category.name}}
|
||||
</div> {% endcomment %}
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.homepage-topics {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.category-cards {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
border-radius:30px;
|
||||
border:2px solid #3c228a;
|
||||
background-color: #3c228a;
|
||||
color: #fff;
|
||||
width:100%;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-align:center;
|
||||
margin-bottom:16px;
|
||||
padding:16px;
|
||||
font-weight:700;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
background-color: #13014a;
|
||||
}
|
||||
|
||||
.category-card-image {
|
||||
max-width:80px;
|
||||
}
|
||||
|
||||
.category-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (min-width:500px) {
|
||||
.category-card {
|
||||
width:calc(50% - 16px);
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(odd) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(even) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.category-card {
|
||||
width:calc(33.33% - 22px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(even),
|
||||
.category-card:nth-child(odd) {
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.category-card {
|
||||
width:calc(25% - 24px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+4) {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
{% assign full_course_obj = "" %}
|
||||
{% for course_obj in courses.in_catalog %}
|
||||
{% if course_obj.id == course.id %}
|
||||
{% assign full_course_obj = course_obj %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-learning-path-outline-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,35 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
<div class="lp-info">
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-resource-header np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="card-description">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-description">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,43 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,35 @@
|
||||
{% if result.type == "course" %}
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{result.course.short_description}}</div>
|
||||
|
||||
</div>
|
||||
<div class="category-pills">
|
||||
{% for course in catalog_courses %}
|
||||
{% if course.id == result.course.id %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% unless cat_name == "FEATURED" or cat_name == "ARTICLES" %}
|
||||
<div class="cat-item">{{cat.name}}</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,51 @@
|
||||
<nav class="np-sub-navigation np-hidden-mobile">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Events" %}
|
||||
<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>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<div class="np-sub-navigation-content-item articles-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/articles">
|
||||
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Articles
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item certifications-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/certifications">
|
||||
<i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Certifications
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app/articles") {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/app/certifications") {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
|
||||
color:#333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
{% include "header" %}
|
||||
{% 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">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.is_article_course %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,21 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-certifications np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ custom_page.content }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,63 @@
|
||||
{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
|
||||
{% 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 %}
|
||||
{% else %}
|
||||
{% 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" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-flex {
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.np-content-categories-content-item {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.course-image-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
top:16px;
|
||||
left:16px;
|
||||
padding-right:16px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
font-size:24px;
|
||||
line-height:32px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.course-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.course-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
{% 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">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-md-4 np-stretch-content" %}
|
||||
</div>
|
||||
{% comment %} {% 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 %} {% endcomment %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,308 @@
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% include "header" %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<div class="np-homepage-hero-container">
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="hero-search-wrapper">
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<form
|
||||
class="np-header-search np-hero-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="What are you looking for?"
|
||||
class="hero-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="What are you looking for?"
|
||||
/>
|
||||
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<img class="np-homepage-hero-image"
|
||||
src="{{ homepage.artwork_url }}"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
|
||||
{% include "homepage_featured", items: catalog_courses %}
|
||||
|
||||
<div class="np-max-width np-homepage-row-wrapper">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
|
||||
<div class="np-section-header">Progress Tracker</div>
|
||||
<div class="learning-path-progress-container">
|
||||
<div class="row">
|
||||
{% assign lps_in_progress = 0 %}
|
||||
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
|
||||
{% for learning_path in enrolled_learning_paths %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
|
||||
|
||||
{% if lps_in_progress < 4 %}
|
||||
<div class="col-xs-12 col-md-4">
|
||||
{% include "cards_learning_path_progress" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lps_in_progress > 0 %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if lps_in_progress == 0 %}
|
||||
<div class="col-xs-12">
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any learning Paths in progress.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% comment %} {% if features.training_events? %}
|
||||
<div class="col-xs-12 col-sm-5 col-md-4">
|
||||
<div class="homepage-events">
|
||||
<div class="np-section-header">Upcoming Courses</div>
|
||||
<div class="upcoming events">
|
||||
{% if training_events.available.any? %}
|
||||
{% for training_event in training_events.available limit:1 %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/training_events" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "homepage_ongoing_training", items: catalog_courses %}
|
||||
|
||||
{% include "homepage_topics" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app") {
|
||||
document.querySelector(".np-sub-navigation").classList.add("homepage-nav")
|
||||
document.querySelector(".np-header").classList.add("homepage-nav")
|
||||
}
|
||||
|
||||
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
|
||||
if (e.target.parentElement.classList.contains("open")) {
|
||||
e.target.parentElement.classList.remove("open")
|
||||
} else {
|
||||
e.target.parentElement.classList.add("open")
|
||||
}
|
||||
})
|
||||
|
||||
window.onload = function () {
|
||||
var stickySubNav = document.querySelector('.np-sub-navigation');
|
||||
var headerOffset = findOffset(stickySubNav);
|
||||
|
||||
window.onscroll = function() {
|
||||
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (bodyScrollTop > (headerOffset.top - 24)) {
|
||||
stickySubNav.classList.add('fixed');
|
||||
} else {
|
||||
stickySubNav.classList.remove('fixed');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
function findOffset(element) {
|
||||
var top = 0, left = 0;
|
||||
|
||||
do {
|
||||
top += element.offsetTop || 0;
|
||||
left += element.offsetLeft || 0;
|
||||
element = element.offsetParent;
|
||||
} while(element);
|
||||
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
var progressCards = document.querySelectorAll(".np-card-learning-path-progress");
|
||||
|
||||
for (var i = 0; i < progressCards.length; i++ ) {
|
||||
var lpProgressCard = progressCards[i]
|
||||
var progressRing = lpProgressCard.querySelector(".progress-ring")
|
||||
let circle = progressRing.querySelector(".circle-progress")
|
||||
let total = progressRing.getAttribute("data-total")
|
||||
let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
const percent = numCompleted / total
|
||||
console.log("percent: ", percent)
|
||||
setProgress(percent, circle)
|
||||
}
|
||||
|
||||
function setProgress(percent, circle) {
|
||||
const offset = circumference - percent * circumference;
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-homepage-hero {
|
||||
background-color:#3C228A;
|
||||
padding: 40px 24px 24px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.np-homepage-hero-image {
|
||||
object-fit: unset;
|
||||
width: 115px;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
.np-homepage-hero-content {
|
||||
position:relative;
|
||||
padding:0;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 33px;
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.np-homepage-subheadline {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
margin-bottom:8px;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
.np-hero-search {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.hero-search-input {
|
||||
background-color:#F1F3F4;
|
||||
border-radius:4px;
|
||||
padding: 14px 19px 14px 44px;
|
||||
border:none;
|
||||
font-size:14px;
|
||||
line-height:19px;
|
||||
width: 100%;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.hero-search-icon {
|
||||
right:unset;
|
||||
left:16px;
|
||||
color:#6C6C6C;
|
||||
}
|
||||
|
||||
.np-homepage-row-wrapper {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-empty {
|
||||
margin: 0;
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
padding: 60px 32px;
|
||||
}
|
||||
|
||||
.learning-path-progress-container,
|
||||
.learning-path-progress-container > .row {
|
||||
height:100%;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-hero-container {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom:20px;
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.np-homepage-hero-image {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
margin: 0 0 0 64px;
|
||||
}
|
||||
|
||||
.hero-search-wrapper {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-hero-search {
|
||||
margin-left:32px;
|
||||
flex:2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) and (max-width:1365px) {
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 3.516vw;
|
||||
line-height: 4.249vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-homepage-hero-image {
|
||||
width: 300px;
|
||||
margin: 0 0 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1366px) {
|
||||
|
||||
.np-homepage-hero .np-homepage-headline {
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,123 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-resource-header {
|
||||
padding: 32px 16px 0;
|
||||
}
|
||||
|
||||
.lp-cover-image-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.lp-title {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
top:16px;
|
||||
left:16px;
|
||||
padding-right:16px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
font-size:24px;
|
||||
line-height:32px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-bar {
|
||||
border-radius: 2px;
|
||||
height: 24px;
|
||||
margin: 8px auto;
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-description {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
padding-right:12px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-content .course-length {
|
||||
margin: 6px 0 18px;
|
||||
font-weight: 500;
|
||||
color:#333;
|
||||
font-size:15px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
padding: 0 4px;
|
||||
margin: 32px 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item.np-learning-path-outline-inactive-item:before {
|
||||
content: "\f023";
|
||||
font-family:"Font Awesome 5 Pro";
|
||||
width:20px;
|
||||
height:20px;
|
||||
position:absolute;
|
||||
right:20px;
|
||||
top:20px;
|
||||
color:#333;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-icon {
|
||||
color:#3c228a;
|
||||
}
|
||||
|
||||
.np-top-title {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-resource-header {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.lp-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.lp-info {
|
||||
padding: 0 40px 0 16px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-inactive-item .np-learning-path-outline-course-image,
|
||||
.np-learning-path-outline-inactive-item .np-events-content-date {
|
||||
height: 112px;
|
||||
width: 183px;
|
||||
}
|
||||
|
||||
.np-learning-path-outline {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.np-card-heading {
|
||||
font-size:22px;
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.lp-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<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">"{{ results.term }}"</span>
|
||||
</div>
|
||||
</div>
|
||||
{% if results.items.any? %}
|
||||
{% render "search_result" for results.items as result, catalog_courses: courses.in_catalog %}
|
||||
{% else %}
|
||||
{% include "search_zero_state" %}
|
||||
{% endif %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.np-search .np-resource-title {
|
||||
color:#000;
|
||||
font-weight:900;
|
||||
}
|
||||
|
||||
.category-pills {
|
||||
display:flex;
|
||||
flex: 1;
|
||||
justify-content: end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
background-color:#3c228a;
|
||||
color:#fff;
|
||||
font-weight:500;
|
||||
font-size:12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-search .np-resource-title {
|
||||
font-size: 32px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
const searchResultsLength = document.querySelectorAll(".np-search-result").length
|
||||
|
||||
document.querySelector(".np-resource-subtitle-number").innerText = searchResultsLength
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
{% comment %} <div class="uk-container uk-container-center uk-padding-large-horizontal uk-margin-large-top uk-margin-bottom">
|
||||
<hgroup class="uk-text-center vertical-align uk-padding-large-top">
|
||||
<h1 class="page-head">{% t .headline %}</h1>
|
||||
</hgroup>
|
||||
|
||||
<div class="uk-width-small-1-1 uk-width-medium-1-2 uk-container-center uk-padding-large-top">
|
||||
<div class="school-website-custom-page-content uk-text-center uk-padding-large-bottom uk-margin-large-bottom">
|
||||
<h3 class="uk-margin-top-remove uk-margin-large-bottom">{% t .subheadline %}</h3>
|
||||
<p><a href="/" class="uk-button uk-button-primary">{% t .home %}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<main class="np-main np-max-width np-subpage-container">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Server Error
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<img src="/images/500.svg">
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,612 @@
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Regular.OTF);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Italic.OTF);
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Medium.otf);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Medium_Italic.otf);
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Bold.OTF);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Bold_Italic.OTF);
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Black.OTF);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Bogle";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Black_Italic.OTF);
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: "Bogle", "Roboto", sans-serif;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-dashboard,
|
||||
.np-learning-paths {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.np-card-container {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-resource-title,
|
||||
.np-dashboard-resources-title {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.np-dashboard .np-dashboard-resources-title {
|
||||
margin-bottom: 20px;
|
||||
text-transform:capitalize;
|
||||
}
|
||||
|
||||
.np-resource-subtitle {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-max-width {
|
||||
max-width: 1380px;
|
||||
}
|
||||
|
||||
.np-button {
|
||||
min-width: 80px;
|
||||
border-radius: 30px;
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.np-button:focus {
|
||||
border: 2px solid #979797;
|
||||
box-shadow: 0px 0px 10px 0px #0000001a;
|
||||
}
|
||||
|
||||
.np-button:disabled,
|
||||
.np-button:hover:disabled {
|
||||
background-color: #6d6e71;
|
||||
}
|
||||
|
||||
.np-alert-info {
|
||||
background-color: #ebe8f3;
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.np-card-ribbon {
|
||||
background-color: #3c228a;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
text-transform: none;
|
||||
padding: 6px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources-container {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.np-zero-state-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title {
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-learning-paths-resources-container,
|
||||
.np-dashboard-resources-container {
|
||||
border: 2px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.tns-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tns-nav button {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #000;
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
-webkit-appearance: none;
|
||||
padding: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.tns-nav button.tns-nav-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.np-section-header {
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.see-more-wrapper a {
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.progress-ring circle {
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.progress-ring text {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tns-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.np-section-header {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.np-resource-title,
|
||||
.np-dashboard-resources-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* STICKY HEADER & SUBNAV */
|
||||
.np-header {
|
||||
height: 64px;
|
||||
transition: all 0.2s;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-main {
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.np-sub-navigation:not(.homepage-nav):not(.np-page-container) {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
padding-top: 0px;
|
||||
margin-bottom: 0;
|
||||
z-index: 49;
|
||||
}
|
||||
|
||||
.np-sub-navigation.fixed {
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 49;
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-main:not(.np-homepage):not(.np-page-container) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* COVER PAGES */
|
||||
.np-resource-header-card {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.np-back-button .np-icon-back {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title {
|
||||
color: #59697b;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-item .np-card-content {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.np-optional-ribbon {
|
||||
background-color: rgba(60, 34, 138, 0.1);
|
||||
color: #3c228a;
|
||||
}
|
||||
.np-learning-path-outline-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.np-learning-path-outline-progress.np-color-success {
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
#learning-path-desktop .np-top-image {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
a.np-card {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-card-padding {
|
||||
padding: 32px 24px 24px;
|
||||
}
|
||||
|
||||
.np-image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .np-card-ribbon {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .course-img-content {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.np-card .np-image-wrapper .np-card-content-title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.np-card .course-length {
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
margin: 0 !important;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-title {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.np-card-article .np-card-content-title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-subtitle {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.np-card .np-card-content-footer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.np-card-content-progress {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-card .np-image-wrapper .np-card-content-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ONGOING COURSE CARDS */
|
||||
.np-card.np-card-ongoing .np-card-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.np-card.np-card-ongoing .np-card-content-footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ILT CARDS */
|
||||
.np-card-training-event .np-card-padding {
|
||||
padding: 12px 20px 32px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-content-title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-training-session {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.np-card-training-event .np-card-content-label,
|
||||
.np-card-training-event .np-card-training-sessions-icon {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* LEARNING PATH CARDS */
|
||||
.np-card .np-learning-path .np-card-content-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
/* LEARNING PATH PROGRESS CARDS */
|
||||
.np-card.np-card-learning-path-progress {
|
||||
padding: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.np-learning-path .np-card-content-footer {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-learning-path {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.lp-image-wrapper {
|
||||
width: 32%;
|
||||
min-width: 32%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.np-learning-paths .lp-image-wrapper {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.np-learning-path .np-learning-path-image {
|
||||
width: auto;
|
||||
border-top-right-radius: 0;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-progress-card-wrapper {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 24px 16px 50px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-content {
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .learning-path-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses,
|
||||
.np-card-learning-path-progress .lp-completed-items {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses span,
|
||||
.np-card-learning-path-progress .lp-completed-items span {
|
||||
color: #3c228a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-completed-items span > div {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-card-learning-path-progress .lp-progress-card-wrapper {
|
||||
padding: 64px 16px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.np-card-learning-path-progress .learning-path-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-total-courses,
|
||||
.np-card-learning-path-progress .lp-completed-items {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.np-card-learning-path-progress .lp-content {
|
||||
padding-left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* MODAL POPUP */
|
||||
.first-time-user-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
padding: 1em;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.25s ease-out;
|
||||
}
|
||||
.first-time-user-popup.is-active {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.first-time-user-popup-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
transform: translateY(-1em) scale(0.95);
|
||||
background-color: white;
|
||||
transition: transform 0.25s ease-out;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.first-time-user-popup.is-active .first-time-user-popup-container {
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 20px;
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-links {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
border: 2px solid #3c228a;
|
||||
background: #3c228a;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
width: calc(50% - 8px);
|
||||
margin: 0 8px;
|
||||
border-radius: 30px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.modal-links a.secondary {
|
||||
background: transparent;
|
||||
color: #3c228a;
|
||||
}
|
||||
|
||||
.modal-links a:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #13014a;
|
||||
}
|
||||
|
||||
.modal-links a.secondary:hover {
|
||||
border: 2px solid #13014a;
|
||||
background: #ebe8f3;
|
||||
color: #13014a;
|
||||
}
|
||||
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.first-time-user-popup-content {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.modal-headline {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.modal-links a {
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user