Doordash templates, notes for Mizuno, a few template changes. Anthology,included.
This commit is contained in:
Norm Rasmussen
@ -182,16 +182,27 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
<div class="card-image-replacement"></div>
|
||||
{%- comment -%} <img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
> {%- endcomment -%}
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="np-card-content-title course-card-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% assign act_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% for activity in section.activities %}
|
||||
{% assign act_count = act_count| plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<span style="color: #757575; font-size: 14px">
|
||||
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
@ -208,7 +219,7 @@
|
||||
padding-left: 15px;
|
||||
width: 70%;">
|
||||
<div style="
|
||||
background: {{ color_light }};
|
||||
background: #BACCE9;
|
||||
border-radius: 10px;
|
||||
height: 8px;
|
||||
margin-right: 15px;
|
||||
@ -247,9 +258,10 @@
|
||||
.card-product-banner{
|
||||
align-items: center;
|
||||
background: #FFF;
|
||||
box-shadow: 0 3px 30px rgba(0,0,0,.1);
|
||||
display: flex;
|
||||
height: 32px;
|
||||
padding: 6px 8px 2px;
|
||||
padding: 6px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -257,8 +269,26 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-image-replacement{
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
|
||||
height: 12rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 550px) and (max-width: 649px){
|
||||
.card-image-replacement{
|
||||
height: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 650px) and (max-width: 767px){
|
||||
.card-image-replacement{
|
||||
height: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.course-card-info{
|
||||
height: calc(100% - 41px);
|
||||
height: calc(100% - 38px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@ -317,4 +347,4 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<div class="np-card course-card" style="padding: 0 !important;">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="np-card-content-title course-card-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</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 course-card-button" href="{{ course_path }}">
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
{%- comment -%} {% t shared.view %} {%- endcomment -%}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-bottom-details">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div>
|
||||
{{course.properties.course_duration}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media screen and (min-width: 768px){
|
||||
.course-card-wrapper{
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.course-card{
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card event-card col-xs-12 col-sm-6 col-lg-4">
|
||||
<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,258 @@
|
||||
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Radius' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F3798A' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Engage' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F16423' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Beacon' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F16423' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Milestone' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F3798A' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Occupation Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#F58545' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Raise' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F9B5B5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Digital Assistant' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F58545' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Baseline' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#D94827' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Encompass' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#731013' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Talisma' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#F06A32' %}
|
||||
{% assign color_dark = '#D94827' %}
|
||||
{% assign color_light = '#F3798A' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Student' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#96CA51' %}
|
||||
{% assign color_light = '#F3E588' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'CVue' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#286734' %}
|
||||
{% assign color_light = '#F3E588' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#286734' %}
|
||||
{% assign color_light = '#82C342' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Finance & HCM' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#539542' %}
|
||||
{% assign color_light = '#C9BD2E' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Payroll' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#82C342' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Academic Economics' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
|
||||
{% assign color_main = '#82C342' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#286734' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Blackboard Learn' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#1BA8E1' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Ally' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#1BA8E1' %}
|
||||
{% assign color_light = '#A3DBDC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Course Evaluations' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#004C6D' %}
|
||||
{% assign color_light = '#027BB6' %}
|
||||
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Evaluate' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#A3DBDC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Portfolio' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#0090A1' %}
|
||||
{% assign color_light = '#5CC6CC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Program Review' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#027BB6' %}
|
||||
{% assign color_light = '#5CC6CC' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Planning' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#004C6D' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology Accreditation' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
||||
{% assign color_main = '#1BA8E1' %}
|
||||
{% assign color_dark = '#0090A1' %}
|
||||
{% assign color_light = '#1BA8E1' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Anthology 101' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#573376' %}
|
||||
{% assign color_light = '#7F59A5' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Academy Use & Navigation' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#6283C2' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Data Strategy' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#573376' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Faculty Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#7F59A5' %}
|
||||
{% assign color_light = '#AA7FB8' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Power BI' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#573376' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% elsif course.properties.product_names_for_course_cards == 'Professional Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#7F59A5' %}
|
||||
{% assign color_dark = '#000000' %}
|
||||
{% assign color_light = '#87ADDB' %}
|
||||
{% else %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% assign color_main = '#DCE4E9' %}
|
||||
{% assign color_dark = '#747A7B' %}
|
||||
{% assign color_light = '#B2B7BA' %}
|
||||
{% endif %}
|
||||
|
||||
<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">
|
||||
{%- comment -%} <div class="np-progress-bar-container" style="background: {{ color_light }}; border-radius: 0;">
|
||||
<div
|
||||
style="width: {{ course.progress }}%; background: {{ color_dark }}"
|
||||
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
|
||||
</div>
|
||||
</div> {%- endcomment -%}
|
||||
<div class="product-banner">
|
||||
{% if product_logo != 'blank' %}
|
||||
<img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
|
||||
{% else %}
|
||||
Anthology
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0;">
|
||||
<div class="course-cover-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="course-cover-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% assign act_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% for activity in section.activities %}
|
||||
{% assign act_count = act_count| plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<span style="color: #757575; font-size: 18px">
|
||||
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{%- comment -%} <img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/> {%- endcomment -%}
|
||||
{% 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">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-image-replacement{
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
|
||||
}
|
||||
|
||||
.course-cover-title{
|
||||
font-size: 2rem;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.course-cover-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 25em;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<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="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
Back
|
||||
</div>
|
||||
{%- comment -%} <img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/> {%- endcomment -%}
|
||||
|
||||
{%- comment -%} <div class="card-product-banner">
|
||||
{% if product_logo != 'blank' %}
|
||||
<img src='{{ product_logo }}' class="product-logo"/>
|
||||
{% else %}
|
||||
Anthology
|
||||
{% endif %}
|
||||
</div> {%- endcomment -%}
|
||||
{%- comment -%} <div class="np-top-image np-top-image-spacing course-image-replacement" style="border-radius: 0; margin-top: -32px;">
|
||||
<div class="course-cover-info">
|
||||
<div class="np-flex-1">
|
||||
<h3 class="course-cover-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% assign act_count = 0 %}
|
||||
{% for section in course.sections %}
|
||||
{% for activity in section.activities %}
|
||||
{% assign act_count = act_count| plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<span style="color: #757575; font-size: 18px">
|
||||
{{ act_count }} {% if act_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div> {%- endcomment -%}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,57 @@
|
||||
{% assign shell_redirect_url = course.properties.external_course_url %}
|
||||
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if shell_redirect_url %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
href="http://{{shell_redirect_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
View Course
|
||||
</a>
|
||||
{% else %}
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="homepage-resource-header catalog-header" style="margin-top: 50px; margin-bottom: 20px;">
|
||||
All Learning
|
||||
</div>
|
||||
{%- comment -%} Catalog is not used in this school. The "catalog" is the set of unstarted enrolled courses shown at the homepage {%- endcomment -%}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.progress > 0 %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_type}}">
|
||||
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
{% assign totalCountCompleted = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign totalCountCompleted = totalCountCompleted | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if totalCountCompleted > 3 %}
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderCompleted.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderCompleted.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
Completed
|
||||
</div>
|
||||
|
||||
{%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}
|
||||
{% if totalCountCompleted <= 3 %}
|
||||
col-xs-12 np-stretch-content
|
||||
{% endif %}"
|
||||
{% if totalCountCompleted <= 3 %}
|
||||
style="padding: 0;"
|
||||
{% else %}
|
||||
style="margin-left: 0;"
|
||||
{% endif %}>
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="course-card-wrapper {% if totalCountCompleted <= 3 %}col-xs-12 col-sm-4{% endif %}" {% if totalCountCompleted <= 3 %} style="padding: 0" {% endif %} data-product="{{ course.properties.product_type}}">
|
||||
{% include "cards_course" with course, flag:'completed' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
<div class="row row-with-thumbnails courses-completed col-xs-12 np-stretch-content
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}"
|
||||
style="padding: 0;">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_type}}">
|
||||
{% if outerClass == "dashboard-courses-index" %}
|
||||
{% include "cards_course" with course, flag: 'dashboard' %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
{% assign totalCountInProg = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign totalCountInProg = totalCountInProg | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{%- comment -%} {% if totalCountInProg > 3 %}
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">
|
||||
In Progress
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderInProg.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderInProg.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">
|
||||
In Progress
|
||||
</div>
|
||||
|
||||
{%- comment -%} <div class="row row-with-thumbnails courses-in-prog-carousel
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}
|
||||
{% if totalCountInProg <= 3 %}
|
||||
col-xs-12 np-stretch-content
|
||||
{% endif %}"
|
||||
{% if totalCountInProg <= 3 %}
|
||||
style="padding: 0;"
|
||||
{% else %}
|
||||
style="margin-left: 0;"
|
||||
{% endif %}>
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="course-card-wrapper {% if totalCountInProg <= 3 %}col-xs-12 col-sm-4{% endif %}" {% if totalCountInProg <= 3 %} style="padding: 0" {% endif %} data-product="{{ course.properties.product_type}}">
|
||||
{% include "cards_course" with course, flag: 'inProg' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div> {%- endcomment -%}
|
||||
|
||||
<div class="row row-with-thumbnails courses-in-prog col-xs-12 np-stretch-content
|
||||
{% if outerClass %}
|
||||
{{outerClass}}
|
||||
{% endif %}"
|
||||
style="padding: 0;">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="course-card-wrapper col-xs-12 col-sm-6 col-md-4" style="padding: 0" data-product="{{ course.properties.product_type}}">
|
||||
{% if outerClass == "dashboard-courses-index" %}
|
||||
{% include "cards_course" with course, flag: 'dashboard' %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<a
|
||||
class="np-header-desktop-nav-item"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-event="mouseover"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-courses-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
{{title}}
|
||||
</a>
|
||||
<div class="np-dropdown-tooltip np-courses-tooltip np-hidden" role="tooltip">
|
||||
<nav class="np-tooltip-navigation">
|
||||
{% assign categories_by_name = categories | sort: "name" %}
|
||||
{% for category in categories_by_name %}
|
||||
{% assign category_name_split = category.name | split: " " %}
|
||||
{% assign category_name_joined = category_name_split | join: "-" | downcase %}
|
||||
{% assign category_name = "" %}
|
||||
{% assign courses_per_carousel = 0 %}
|
||||
{% assign catalog_courses = courses %}
|
||||
{% if courses.any? %}
|
||||
{% for course in courses %}
|
||||
{% for course_category in course.categories %}
|
||||
{% if category.name == course_category.name %}
|
||||
{% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
|
||||
{% if courses_per_carousel > 0 %}
|
||||
{% assign category_name = category.name %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if category_name != "" %}
|
||||
<a class="np-dropdown-tooltip-link" href="#{{category_name_joined}}">
|
||||
{{category_name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
if (!$('.np-homepage').length) {
|
||||
console.log("not the homepage")
|
||||
$(".np-dropdown-tooltip-link").each(function() {
|
||||
let homeLink = "/app/" + $(this).attr("href");
|
||||
$(this).attr("href", homeLink);
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="category-filter-dropdown np-input"
|
||||
type="text"
|
||||
name="category-filter-dropdown"
|
||||
id="category-filter-dropdown"
|
||||
onchange="filterCatalog()"
|
||||
>
|
||||
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
|
||||
<option class="category-filter-entry" value="" selected disabled>All Categories</option>
|
||||
|
||||
<option class="category-filter-entry" value="0">All Categories</option>
|
||||
{% for category in sorted_categories %}
|
||||
<option class="category-filter-entry" value="{{ category.id }}">{{ category.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let filterCatalog = () => {
|
||||
console.log(event.target.value);
|
||||
if(event.target.value.length > 0){
|
||||
if(event.target.value == 0){
|
||||
window.location.href = '/app'
|
||||
} else {
|
||||
window.location.href = `/app?filter[category_uuid][in][]=${event.target.value}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,135 @@
|
||||
<div class="np-filter product-filter-container">
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="product-filter-dropdown np-input"
|
||||
type="text"
|
||||
name="product-filter-dropdown"
|
||||
id="product-filter-dropdown"
|
||||
onchange="filterByProduct()"
|
||||
>
|
||||
<option class="product-filter-entry" value="Default" selected>All Products</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allProductTypesHome = ['Anthology-Default'];
|
||||
let allProductTypesDash = ['Anthology-Default'];
|
||||
let productFilterEl = document.querySelector("#product-filter-dropdown");
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 0 or course.properties.most_popular == true %}
|
||||
if(!allProductTypesHome.includes('{{ course.properties.product_type }}')){
|
||||
allProductTypesHome.push("{{ course.properties.product_type }}");
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.progress == 0 %}
|
||||
if(!allProductTypesDash.includes('{{ course.properties.product_type }}')){
|
||||
allProductTypesDash.push("{{ course.properties.product_type }}");
|
||||
}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
allProductTypesHome = allProductTypesHome.sort();
|
||||
allProductTypesDash = allProductTypesDash.sort();
|
||||
|
||||
{% if page == 'Homepage' %}
|
||||
if(allProductTypesHome.length > 1){
|
||||
allProductTypesHome.map((product) => {
|
||||
if(product != 'Anthology-Default'){
|
||||
if(product.indexOf('&') > -1){
|
||||
product = product.replace('&', '&');
|
||||
}
|
||||
let productOption = document.createElement('option');
|
||||
productOption.classList.add('product-filter-entry');
|
||||
productOption.setAttribute('value', product);
|
||||
productOption.innerHTML = `${product}`;
|
||||
productFilterEl.appendChild(productOption);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
productFilterEl.style.display = 'none';
|
||||
}
|
||||
|
||||
let filterByProduct = () => {
|
||||
let allLearning = document.querySelector('.np-catalog-courses').children;
|
||||
let popular = document.querySelector('.popular-courses').children;
|
||||
|
||||
for(let i = 0; i < allLearning.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
allLearning[i].style.display = 'block';
|
||||
} else {
|
||||
if(allLearning[i].dataset.product != event.target.value){
|
||||
allLearning[i].style.display = 'none';
|
||||
} else {
|
||||
allLearning[i].style.display = 'block';
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
for(let i = 0; i < popular.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
popular[i].style.display = 'block';
|
||||
} else {
|
||||
if(popular[i].dataset.product != event.target.value){
|
||||
popular[i].style.display = 'none';
|
||||
} else {
|
||||
popular[i].style.display = 'block';
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
{% elsif page == 'Dashboard' %}
|
||||
if(allProductTypesDash.length > 1){
|
||||
allProductTypesDash.map((product) => {
|
||||
if(product != 'Anthology-Default'){
|
||||
if(product.indexOf('&') > -1){
|
||||
product = product.replace('&', '&');
|
||||
}
|
||||
let productOption = document.createElement('option');
|
||||
productOption.classList.add('product-filter-entry');
|
||||
productOption.setAttribute('value', product)
|
||||
productOption.innerHTML = `${product}`;
|
||||
|
||||
productFilterEl.appendChild(productOption);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
productFilterEl.style.display = 'none';
|
||||
}
|
||||
|
||||
let filterByProduct = () => {
|
||||
let inProgressCourses = document.querySelector('.courses-in-prog').children;
|
||||
let completedCourses = document.querySelector('.courses-completed').children;
|
||||
|
||||
for(let i = 0; i < inProgressCourses.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
inProgressCourses[i].style.display = 'block';
|
||||
} else {
|
||||
//console.log(inProgressCourses[i].dataset.product)
|
||||
if(inProgressCourses[i].dataset.product != event.target.value){
|
||||
inProgressCourses[i].style.display = 'none';
|
||||
} else {
|
||||
inProgressCourses[i].style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(let i = 0; i < completedCourses.length; i++){
|
||||
if(event.target.value == 'Default'){
|
||||
completedCourses[i].style.display = 'block';
|
||||
} else {
|
||||
console.log(completedCourses[i].dataset.product)
|
||||
if(completedCourses[i].dataset.product != event.target.value){
|
||||
completedCourses[i].style.display = 'none';
|
||||
} else {
|
||||
completedCourses[i].style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
@ -0,0 +1,10 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<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/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
@ -0,0 +1,206 @@
|
||||
{%- comment -%} Desktop Header {%- endcomment -%}
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- comment -%} School Desktop View Logo {%- endcomment -%}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{%- comment -%} Desktop Nav Links {%- endcomment -%}
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
{%- comment -%} <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> {%- endcomment -%}
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{%- comment -%} Desktop Search Box {%- endcomment -%}
|
||||
{% if current_person.signed_in? %}
|
||||
{%- comment -%} <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> {%- endcomment -%}
|
||||
|
||||
{%- comment -%} Desktop Profile Button {%- endcomment -%}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button desktop-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
|
||||
{%- comment -%} Desktop Profile Tooltip {%- endcomment -%}
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<span class="header-username">{{ current_person.name }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
{%- comment -%} Desktop Sign In Button {%- endcomment -%}
|
||||
<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 %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{%- comment -%} Mobile Header {%- endcomment -%}
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{%- comment -%} {% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
<div class="carousel-buttons-container">
|
||||
<div class="homepage-resource-header most-popular-header">
|
||||
Most Popular
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div class="previous-carousel-button previous-courses-button" onclick="sliderPopular.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-courses-button" onclick="sliderPopular.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-with-thumbnails popular-courses-carousel" style="margin: 0; padding: 5px;"}>
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
<div class="course-card-wrapper">
|
||||
{% include "cards_course" with course, flag: 'popular' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var sliderPopular = tns({
|
||||
container: '.popular-courses-carousel',
|
||||
controls: false,
|
||||
items: 1,
|
||||
nav: false,
|
||||
navPosition: 'bottom',
|
||||
responsive: {
|
||||
1024:{
|
||||
items: 2
|
||||
},
|
||||
1200:{
|
||||
items: 3
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="homepage-resource-header most-popular-header" style="margin-top: 50px; margin-bottom: 20px;">
|
||||
Most Popular
|
||||
</div>
|
||||
<div class="row row-with-thumbnails popular-courses" style="margin: 0; margin-left: -10px; padding: 5px;"}>
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-3 np-stretch-content course-card-wrapper" data-product="{{ course.properties.product_type }}">
|
||||
{% include "cards_course" with course, flag: 'null' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,192 @@
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-5 col-md-4 col-lg-3 profile-card-container">
|
||||
<div class="profile-card-wrapper">
|
||||
<div class="profile-card">
|
||||
<div class="profile-bio">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
style="
|
||||
height: 102px;
|
||||
margin-bottom: 23px;
|
||||
width: 102px;"
|
||||
/>
|
||||
<div class="profile-bio-header">
|
||||
Account Details
|
||||
</div>
|
||||
<span class="profile-bio-name">{{ current_person.first_name }} {{current_person.last_name}}</span>
|
||||
<span class="profile-bio-email">{{ current_person.email }}</span>
|
||||
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="profile-bio-account-settings-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Edit Profile
|
||||
</a>
|
||||
{% endunless %}
|
||||
</div>
|
||||
|
||||
{% assign sub_levels_length = current_person.properties.subscription_levels | size %}
|
||||
{% if sub_levels_length > 0 %}
|
||||
<div class="product-subscriptions-container">
|
||||
<div class="product-subscriptions-banner">
|
||||
<div class="product-subscription-banner-content">
|
||||
<span class="subscription-name" style="border: none;">
|
||||
PRODUCT SUBSCRIPTION
|
||||
</span>
|
||||
<span class="subscription-level">
|
||||
PLAN
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="product-subscriptions">
|
||||
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
|
||||
|
||||
{% for subscription_level in subscription_levels %}
|
||||
{% assign name_level_pair = subscription_level | split: ":"%}
|
||||
|
||||
<li class="product-subscription">
|
||||
{% include "profile_logo_calculator", product: name_level_pair[0] %}
|
||||
{%- comment -%} <span class="subscription-name">
|
||||
{{ name_level_pair[0] }}
|
||||
</span> {%- endcomment -%}
|
||||
<span class="subscription-level">
|
||||
{%- comment -%} {% if '{{name_level_pair[1]}}' == 'ESS' %}
|
||||
Essential
|
||||
{% elsif '{{name_level_pair[1]}}' == 'ENH' %}
|
||||
Enhanced
|
||||
{% elsif '{{name_level_pair[1]}}' == 'ENH+' %}
|
||||
Enhanced Plus
|
||||
{% endif %} {%- endcomment -%}
|
||||
{{ name_level_pair[1] }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.profile-card-container{
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.profile-card-wrapper{
|
||||
background: #AA7FB8;
|
||||
border: 1px solid #EAEAEA;
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.profile-card{
|
||||
background: #fafafa;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
padding-bottom: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile-bio{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 35px 0 85px
|
||||
}
|
||||
|
||||
.profile-bio-header{
|
||||
border-bottom: 1px solid #D9D9D9;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 25px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
text-align: center;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.profile-bio-name,
|
||||
.profile-bio-email{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-bio-name{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.profile-bio-email{
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.profile-bio-account-settings-button{
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.product-subscriptions-banner{
|
||||
align-items: center;
|
||||
background: #EAEAEA;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
height: 36px;
|
||||
justify-content: center;
|
||||
line-height: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-subscription-banner-content{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
padding-right: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-subscriptions{
|
||||
padding: 0;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.product-subscription{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 35px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.subscription-name{
|
||||
align-items: center;
|
||||
border-right: 2px solid #EAEAEA;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.subscription-level{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.profile-card-container{
|
||||
padding: 0;
|
||||
padding-right: 3%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
{% assign product_name = product %}
|
||||
|
||||
{% if product_name contains 'Reach' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
|
||||
{% elsif product_name contains 'Radius' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Engage' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Engage.svg' %}
|
||||
{% elsif product_name contains 'Beacon' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Beacon.svg' %}
|
||||
{% elsif product_name contains 'Milestone' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Milestone.svg' %}
|
||||
{% elsif product_name contains 'Occupation Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Occupation+Insight.svg' %}
|
||||
{% elsif product_name contains 'Raise' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Raise.svg' %}
|
||||
{% elsif product_name contains 'Digital Assistant' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Digital+Assistant.svg' %}
|
||||
{% elsif product_name contains 'Baseline' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Baseline.svg' %}
|
||||
{% elsif product_name contains 'Encompass' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Encompass.svg' %}
|
||||
{% elsif product_name contains 'Talisma' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Student' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Student.svg' %}
|
||||
{% elsif product_name contains 'CVue' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Insight' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Insight.svg' %}
|
||||
{% elsif product_name contains 'Finance & HCM' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Finance+%26+HCM.svg' %}
|
||||
{% elsif product_name contains 'Payroll' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Payroll.svg' %}
|
||||
{% elsif product_name contains 'Academic Economics' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Academic+Economics.svg' %}
|
||||
{% elsif product_name contains 'Blackboard Learn' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/BBLearn.svg' %}
|
||||
{% elsif product_name contains 'Ally' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Ally.svg' %}
|
||||
{% elsif product_name contains 'Course Evaluations' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Course+Evaluations.svg' %}
|
||||
{%- comment -%} NEED DIFF IMG FORMAT FOR THIS ONE {%- endcomment -%}
|
||||
{% elsif product_name contains 'Evaluate' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Portfolio' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Portfolio.svg' %}
|
||||
{% elsif product_name contains 'Program Review' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Program+Review.svg' %}
|
||||
{% elsif product_name contains 'Planning' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Planning.svg' %}
|
||||
{% elsif product_name contains 'Accreditation' %}
|
||||
{% assign product_logo = 'https://cdn.northpass.io/anthology/Accreditation.svg' %}
|
||||
{% elsif product_name contains '101' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Academy Use & Navigation' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Data Strategy' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Faculty Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Power BI' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% elsif product_name contains 'Professional Development' %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% else %}
|
||||
{% assign product_logo = 'blank' %}
|
||||
{% endif %}
|
||||
|
||||
{% if product_logo contains 'blank' %}
|
||||
<span class="subscription-name">
|
||||
{{ product_name }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="subscription-name" data-profile-product="{{ product_name }}">
|
||||
<img src='{{ product_logo }}' alt="{{ product_name }}" class='profil-card-product-logo' style="height: 60%;"/>
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,73 @@
|
||||
<div class="section-resources np-max-width">
|
||||
<hr />
|
||||
<div class="np-section-title">
|
||||
Resources
|
||||
</div>
|
||||
<div class="resources-list-container">
|
||||
<div class="resource">
|
||||
<div class="resource-title">Tutorials</div>
|
||||
<a class="np-button download-btn" href="https://docs.google.com/document/d/1PNZUTw295P78jgfv1SFc3E4iV9asvZPTKf1--SqeTG0/edit?usp=sharing" target="_blank">
|
||||
Download PDF
|
||||
<i class="far fa-file-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="resource">
|
||||
<div class="resource-title">Templates</div>
|
||||
<a class="np-button download-btn" href="https://docs.google.com/document/d/180gvmn6HlGwWkS1ZBhpiM4_0z8A2_t1llMef6EpSDec/edit?usp=sharing" target="_blank">
|
||||
Download PDF
|
||||
<i class="far fa-file-download"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.section-resources {
|
||||
padding:32px 0;
|
||||
}
|
||||
|
||||
.np-section-title {
|
||||
font-size:40px;
|
||||
font-weight:500;
|
||||
text-align:center;
|
||||
margin-top:48px;
|
||||
margin-bottom:48px;
|
||||
}
|
||||
|
||||
.resources-list-container {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.resource {
|
||||
width:100%;
|
||||
padding: 12px 18px;
|
||||
margin-bottom:32px;
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
font-size:18px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgb(89 105 123 / 50%);
|
||||
margin: 16px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.fa-file-download {
|
||||
margin-left:12px;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.resource {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resource-title {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == 'Catalog' or link.label == 'Learning Paths' %}
|
||||
<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>
|
||||
</nav>
|
||||
@ -0,0 +1,20 @@
|
||||
<div class="homepage-section np-homepage-featured np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline homepage-heading">
|
||||
Upcoming Events
|
||||
</div>
|
||||
</div>
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails" style="padding: 1% 3%;">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content" style="margin-bottom: 10px;">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div style="margin: 15px;">
|
||||
{% include "training_events_zero_state" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
{% if training_events.enrolled.any? or training_events.available.any? %}
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% assign enrolledEvents = 0 %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% assign enrolledEvents = enrolledEvents | plus: 1 %}
|
||||
{% endfor %}
|
||||
<div class="np-dashboard-resources">
|
||||
{%- comment -%} {% if enrolledEvents > 3 %}
|
||||
<div class="carousel-buttons-container events-enrolled-carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">Registered</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-events-enrolled-button" onclick="eventsESlider.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-events-enrolled-button" onclick="eventsESlider.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">Registered</div>
|
||||
|
||||
<div class="row row-with-thumbnails events-grid">
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_events.available.any? %}
|
||||
{% assign availableEvents = 0%}
|
||||
{% for training_event in training_events.available %}
|
||||
{% assign availableEvents = availableEvents | plus: 1 %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
{%- comment -%} {% if availableEvents > 3 %}
|
||||
<div class="carousel-buttons-container events-available-carousel-buttons-container">
|
||||
<div class="np-dashboard-resources-title">Upcoming</div>
|
||||
<div style="display: flex">
|
||||
<div class="previous-carousel-button previous-events-available-button" onclick="eventsASlider.goTo('prev')">
|
||||
<i class="far fa-solid fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="next-carousel-button next-events-available-button" onclick="eventsASlider.goTo('next')">
|
||||
<i class="far fa-solid fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
<div class="np-dashboard-resources-title">Upcoming</div>
|
||||
|
||||
<div class="row row-with-thumbnails events-grid">
|
||||
{% for training_event in training_events.available %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.non-carousel{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.events-grid{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,229 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
{% include "profile_card" %}
|
||||
|
||||
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9 dashboard-learning-content">
|
||||
<div class="dashboard-main-title">
|
||||
Dashboard
|
||||
</div>
|
||||
|
||||
<div class='dashboard-control-panel' style="
|
||||
">
|
||||
{%- comment -%} =============== THIS IS WHERE THE SWAPPER WILL LIVE =============== {%- endcomment -%}
|
||||
<div class="view-swapper-container">
|
||||
<div id="dashboard-view-button" class="view-swapper-button view-swapper-button-active" onclick="swapView()">
|
||||
Resources
|
||||
</div>
|
||||
<div id="events-view-button" class="view-swapper-button" onclick="swapView()">
|
||||
Live Events
|
||||
</div>
|
||||
{% assign completedCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completedCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if completedCourseFound %}
|
||||
<div id="completed-view-button" class="view-swapper-button" onclick="swapView()">
|
||||
Completed
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{%- comment -%} =============== THIS IS WHERE THE PRODUCT FILTER WILL LIVE =============== {%- endcomment -%}
|
||||
<div class="filter-buttons-container">
|
||||
{% include "filter_by_product", page: 'Dashboard' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-resources-pane">
|
||||
{% assign ipCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ipCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if ipCourseFound %}
|
||||
{% include "courses_index_in_prog", outerClass: "dashboard-courses-index" %}
|
||||
{% endif %}
|
||||
|
||||
{%- comment -%} {% if courses.enrolled.any? %}
|
||||
{% include "courses_index", outerClass: "dashboard-courses-index" %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
</div>
|
||||
|
||||
<div id="dashboard-events-pane">
|
||||
{% include "training_events_index" %}
|
||||
</div>
|
||||
|
||||
<div id="dashboard-completed-pane">
|
||||
{% assign completedCourseFound = false %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign completedCourseFound = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if completedCourseFound %}
|
||||
{% include "courses_index_completed", outerClass: "dashboard-courses-index" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<script>
|
||||
let swapView = () => {
|
||||
console.log(event.target.classList);
|
||||
|
||||
if(!event.target.classList.contains('view-swapper-button-active')){
|
||||
if(event.target.id == 'dashboard-view-button'){
|
||||
|
||||
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
||||
if(document.getElementById('completed-view-button')){
|
||||
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
||||
}
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-events-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'block';
|
||||
|
||||
|
||||
} else if(event.target.id == 'events-view-button'){
|
||||
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
||||
if(document.getElementById('completed-view-button')){
|
||||
document.getElementById('completed-view-button').classList.remove('view-swapper-button-active');
|
||||
}
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-events-pane').style.display = 'block';
|
||||
|
||||
} else if(event.target.id == 'completed-view-button'){
|
||||
document.getElementById('dashboard-view-button').classList.remove('view-swapper-button-active');
|
||||
document.getElementById('events-view-button').classList.remove('view-swapper-button-active');
|
||||
event.target.classList.add('view-swapper-button-active');
|
||||
|
||||
document.getElementById('dashboard-resources-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-events-pane').style.display = 'none';
|
||||
document.getElementById('dashboard-completed-pane').style.display = 'block';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dashboard-main-title{
|
||||
color: #000000;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title{
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
.dashboard-control-panel{
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #000000;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.view-swapper-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 50px;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view-swapper-button{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.view-swapper-button-active{
|
||||
border-bottom: 2px solid #000000;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.view-swapper-button:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dashboard-events-pane,
|
||||
#dashboard-completed-pane{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-filter-container{
|
||||
margin: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-dashboard{
|
||||
padding: 70px 24px;
|
||||
}
|
||||
|
||||
.dashboard-main-title{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.dashboard-control-panel{
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-swapper-container{
|
||||
margin-bottom: -14px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.dashboard-learning-content{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard-courses-index{
|
||||
margin: 0;
|
||||
margin-left: -6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,225 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
|
||||
<div class="np-homepage-hero">
|
||||
<img class="np-homepage-hero-image"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/anthology/hero.svg"
|
||||
alt="{{ homepage.headline }}"
|
||||
/>
|
||||
<div class="np-homepage-hero-content">
|
||||
<div class="np-homepage-headline np-header-font-color">
|
||||
Welcome to Anthology Academy
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color" style="line-height: 28px; margin: 8px auto 0; text-align: center; width: 60%;">
|
||||
Benefit from expert training and on-demand learning content to improve skills and ensure your team is getting the best Anthology experience possible.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="mobile-subnav" style="margin: -24px -20px 16px;">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
<div class="np-catalog-header-wrapper catalog-header-wrapper">
|
||||
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title catalog-title">Catalog</div>
|
||||
<div class="catalog-subtitle">Explore our collection of learning resources</div>
|
||||
</div>
|
||||
|
||||
<div class="search-and-filter-component">
|
||||
<div class="catalog-search-component">
|
||||
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
|
||||
<input
|
||||
aria-label="search_topics"
|
||||
class="np-header-font-background-color catalog-search"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder=""
|
||||
/>
|
||||
<i class="far fa-search search-icon"></i>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="catalog-filter-component">
|
||||
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
|
||||
<div class="filter-buttons-container">
|
||||
{%- comment -%} <span class="homepage-resource-header" style="
|
||||
font-size: 18px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 15px;
|
||||
">Filter By: </span> {%- endcomment -%}
|
||||
{% include "filter_by_product", page: 'Homepage' %}
|
||||
|
||||
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||
{% if current_school.filterable_categories.any? %}
|
||||
{%
|
||||
include "filter_by_category",
|
||||
label: label
|
||||
%}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% assign renderPopular = false %}
|
||||
{% assign totalCount = 0 %}
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.most_popular == true %}
|
||||
{% assign totalCount = totalCount | plus : 1 %}
|
||||
{% assign renderPopular = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if renderPopular == true %}
|
||||
{%- comment -%} {% if totalCount > 3 %}
|
||||
{% include "popular_courses_carousel" %}
|
||||
{% else %}
|
||||
{% endif %} {%- endcomment -%}
|
||||
{% include "popular_courses_non_carousel" %}
|
||||
{% endif %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
{% include "courses_catalog" %}
|
||||
{% 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" %}
|
||||
|
||||
<style>
|
||||
.catalog-header-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-title{
|
||||
color: #0A0A0A;
|
||||
font-size: 2em;
|
||||
font-weight: 900;
|
||||
line-height: 2.375rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.catalog-subtitle{
|
||||
color: #595959;
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.search-and-filter-component{
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-search-wrapper{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.catalog-search-component,
|
||||
.catalog-filter-component{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.catalog-search-component{
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.catalog-search{
|
||||
background-color: #fefefe;
|
||||
border: 1px solid #ce9dc7;
|
||||
border-radius: 30px;
|
||||
font-weight: 400;
|
||||
height: 60px;
|
||||
line-height: 1;
|
||||
padding-left: 75px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-icon{
|
||||
left: 30px;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
}
|
||||
|
||||
.homepage-resource-header{
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 25px;
|
||||
margin-bottom: 12px
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.mobile-subnav{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-and-filter-component{
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.np-catalog-courses{
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.np-subpage-container{
|
||||
padding: 50px 50px 184px;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
.catalog-search-component{
|
||||
margin-bottom: 0;
|
||||
margin-right: 50px;
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1440px){
|
||||
.np-homepage-hero{
|
||||
width: calc(100vw + 1.75em);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2200px){
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px){
|
||||
.catalog-header-wrapper{
|
||||
margin-top: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="np-learning-paths-main">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.available %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,180 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
|
||||
|
||||
html,
|
||||
body{
|
||||
color: #000000;
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
}
|
||||
|
||||
body,
|
||||
main{
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
/* HEADER STYLES */
|
||||
|
||||
.np-header{
|
||||
border-top: 15px solid #f6f9fc;
|
||||
border-bottom: 2px solid #f6f9fc;
|
||||
height: 95px;
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.np-header-content{
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-header-logo{
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav{
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav{
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.np-header-avatar{
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.desktop-avatar-button{
|
||||
margin: 0;
|
||||
margin-right: 11px;
|
||||
}
|
||||
|
||||
.header-username{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-bar{
|
||||
color: #0A0A0A
|
||||
}
|
||||
|
||||
/* GLOBAL CARD STYLES */
|
||||
|
||||
.np-card-padding{
|
||||
padding: 15px 16px
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.course-card .np-card-container{
|
||||
border-radius: 0;
|
||||
box-shadow: 0 3px 30px rgba(0,0,0,.1)
|
||||
}
|
||||
|
||||
.course-card .np-card-image{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.card-bottom-details{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-size: 0.875em;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* CAROUSEL BUTTON STYLES */
|
||||
.carousel-buttons-container{
|
||||
/* align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.next-carousel-button,
|
||||
.previous-carousel-button{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.next-carousel-button{
|
||||
margin-left: 39px;
|
||||
}
|
||||
|
||||
.next-carousel-button:hover,
|
||||
.previous-carousel-button:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fa-arrow-left,
|
||||
.fa-arrow-right{
|
||||
font-size: 24px;
|
||||
} */
|
||||
|
||||
/* EVENT CARDS */
|
||||
.event-card{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.event-card{
|
||||
padding: 0 0 64px 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* FILTER STYLES */
|
||||
.np-filter{
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.filter-buttons-container{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.product-filter-dropdown,
|
||||
.category-filter-dropdown{
|
||||
background-color: #fefefe;
|
||||
border: 1px solid #ce9dc7;
|
||||
border-radius: 30px;
|
||||
font-weight: 700;
|
||||
height: 60px;
|
||||
line-height: 1;
|
||||
padding-top: 12px;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px){
|
||||
.np-filter{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* HERO STYLING */
|
||||
@media screen and (min-width: 768px){
|
||||
.np-homepage-hero{
|
||||
margin: 0 -24px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-10">
|
||||
<div class="np-resource-title">
|
||||
{% t .title %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% t .subtitle %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2">
|
||||
{% include "training_events_filter" %}
|
||||
</div>
|
||||
</div>
|
||||
{% include "training_events_index" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -9,10 +9,13 @@
|
||||
{% elsif link.label == "Home" %}
|
||||
<div class="np-sub-navigation-content-item" style="display:none;">
|
||||
</div>
|
||||
{% elsif link.label == "Catalog" %}
|
||||
<div class="np-sub-navigation-content-item" style="display:none;">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
{% comment %} {{ link.label }} {% endcomment %}
|
||||
{{ link.label }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content" course-vehicle="{{ course.properties.course_vehicle }}">
|
||||
<div class="np-card">
|
||||
<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 | split: ' v2' | first }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class='np-card-header-rate' style='display: flex; justify-content: space-between;'>
|
||||
<h3 class="np-card-content-title" {% if nz_status %}style='margin: 0.6rem -10px; align-self: center;'{% endif %}>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
{% comment %} <div class='np-card-header-right'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}} ({{course.properties.np_course_rating_count}})
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00; align-self: center;'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.progress == 100 %}
|
||||
<div class="np-card-content-progress" {% if nz_status %}style="color: rgb(0, 165, 0); font-size: 1.5rem; margin-left: -10px;"{% endif %}>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color" {% if nz_status %}style="font-size: 1.5rem; margin-left: -10px"{% endif %}>
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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 nz_status %}style="margin-right: -10px; {% if course.progress == 100 %} border: 2px solid #ff2c00; color: #ff2c00; background: white;{% endif %}"{% endif %}>
|
||||
{% if nz_status %}
|
||||
{% if course.progress == 100%}
|
||||
View
|
||||
{% else %}
|
||||
{% if course.progress > 0%}
|
||||
Continue
|
||||
{% else %}
|
||||
Start
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,91 @@
|
||||
<div class="np-card np-no-horizontal-padding" course-vehicle="{{ course.properties.course_vehicle }}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<div class='np-card-header-left'>
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap" style='padding-right: 10px;'></i>
|
||||
<div class="np-card-header-type" style='font-size: 0.75rem !important; align-self: center;'>Course</div>
|
||||
</div>
|
||||
{% comment %} <div class='np-card-header-right'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}}
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">Course</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<div class='np-card-header-rate' style='display: flex; justify-content: space-between; '>
|
||||
<h3 class="np-card-content-title" style='margin: 0;'>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
</h3>
|
||||
|
||||
{% comment %} <div class='np-card-header-right np-hidden-mobile'>
|
||||
<div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
|
||||
{{course.properties.np_course_rating}}
|
||||
</div>
|
||||
<i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00'></i>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.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: course.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="https://doordash.northpass.com/courses/{{course.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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-card-header-left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-card-header-right {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
<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-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{% if course.name contains "v2" %}
|
||||
{{ course.name | split: ' v2' | first }}
|
||||
{% elsif course.name contains "v3" %}
|
||||
{{ course.name | split: ' v3' | first }}
|
||||
{% else %}
|
||||
{{ course.name }}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
Learn how in this {{ course.properties.course_time}} {{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name | split: ' v2' | first }}"
|
||||
/>
|
||||
<style>
|
||||
|
||||
.np-top-title {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.np-text-title{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
{% comment %} <div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div> {% endcomment %}
|
||||
{% if course.id == "1683955c-1edf-44c3-a6fa-d2bbeb693525" or course.id == "6b82ee8b-1120-4cf8-9f49-56458b6ea4ee" or course.id == "0bf212ae-aeea-4b4c-a1e1-de2ac4e43143" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.id == "1683955c-1edf-44c3-a6fa-d2bbeb693525" or course.id == "6b82ee8b-1120-4cf8-9f49-56458b6ea4ee" or course.id == "0bf212ae-aeea-4b4c-a1e1-de2ac4e43143" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% comment %} <div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div> {% endcomment %}
|
||||
{% endif %}
|
||||
{% comment %}
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,60 @@
|
||||
{% comment %} <div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
id="btnAnimateCountdown"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
Get Started Now
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
#course-mobile > div > div.np-top-cta > a {
|
||||
min-height: 80px;
|
||||
font-size:1.5rem;
|
||||
}
|
||||
|
||||
.np-top-cta {
|
||||
background: #fff;
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
{% assign completed_courses_count = 0%}
|
||||
{% assign first_level_completed = false %}
|
||||
{% assign orientation_course = '91007f87-8d34-4f17-80fd-bd8cb44395e4' %}
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% assign ANZ = false %}
|
||||
{% assign first_level_courses = '0c3468c6-a6b1-47ca-ad01-49983bf11808,d770f3b2-029e-4def-a420-7841edb1234f,d4227707-e8d4-42dc-a80c-e7d60deb37f6' | split: ',' %}
|
||||
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Dasher101" %}
|
||||
{% if course.progress == 100%}
|
||||
{% assign completed_courses_count = completed_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if ANZ and first_level_completed == false %}
|
||||
{% if first_level_courses contains course.id %}
|
||||
{% if course.completed? %}
|
||||
{% assign first_level_completed = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
<script>console.log('{{completed_courses_count}}')</script>
|
||||
{% if completed_courses_count > 7%}
|
||||
<div class="np-learning-paths-resources">
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% if course_categories contains "Feedback" %}
|
||||
{% include 'cards_course_lp' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% if ANZ %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% unless course_categories contains "Feedback" %}
|
||||
{% if course.id != orientation_course or first_level_completed %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign course_categories = course.categories | map: 'name' %}
|
||||
{% unless course_categories contains "Feedback" %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</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,115 @@
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% comment %} {% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
<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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
{% comment %} <a href="{% route home %}"> {% endcomment %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
{% comment %} </a> {% endcomment %}
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<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">
|
||||
Visit
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="https://help.doordash.com/dashers/s/dasher-support?language=en_US"
|
||||
target="_blank"
|
||||
>
|
||||
Dasher Support
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% if nz_status %}
|
||||
<style>
|
||||
html,
|
||||
body{
|
||||
font-family: "TT Norms Pro-Regular", sans-serif !important;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
.courses_page_title{
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.courses_page_title,
|
||||
.np-card-content-progress,
|
||||
.group-selection-select{
|
||||
font-family: "TT Norms Pro", sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
.group-selection-select{
|
||||
padding: 10px 40px 15px 40px !important;
|
||||
}
|
||||
|
||||
.np-button,
|
||||
.np-button-background-color{
|
||||
border-radius: 30px;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
@ -0,0 +1,468 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.np-button-color.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
/*.np-top-button.np-button-font-color.np-button.np-button-big,*/
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Paramètres de profil";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Se déconnecter";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Utiliser Gravatar™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Télécharger une Photo Personnalisée";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Envoyer la Photo";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "L'ajout d'une photo ajoute une touche personnelle à votre profil. Votre photo de profil est utilisée comme icône de votre compte pour vous représenter. Il est également affiché à divers autres endroits à côté de votre nom.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Pour de meilleurs résultats, la taille de votre photo de profil doit être d'au moins 400 x 400 pixels et une taille maximale de 2 Mo. Le format de fichier doit être PNG, JPG ou GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Enregistrer le Profil";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mon Profil";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "E-mail *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom de Famille *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Afficher un Nom";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mot de Passe *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Confirmation Mot de Passe *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Dommage! Aucun parcours d'apprentissage ne vous est attribué.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Explorez des ensembles de cours organisés pour une expérience d'apprentissage sur mesure";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Pas commencé";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "À propos de ce parcours d'apprentissage";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "No empezado";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Progression du parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Compléter";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Vous n'avez aucun événement à venir. Vérifiez plus tard pour avoir les mises à jour.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements de formation";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Découvrez des événements en personne et en ligne pour maximiser votre apprentissage";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Filtre";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "Besoin d'aide?";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Grands modules dans le confort de votre maison ou de votre bureau.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Module";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Progression du cours";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
/*
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Continuer";
|
||||
}*/
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Aperçu du module";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "À propos du module";
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
<div class="group-selection">
|
||||
<div class="group-selection-title">
|
||||
What type of vehicle do you have?
|
||||
</div>
|
||||
<div class="select-wrapper" {% if nz_status %}style="border-radius: 30px;"{% endif %}>
|
||||
<select class="group-selection-select" autocomplete="off">
|
||||
{% unless current_person.properties.learner_vehicle %}
|
||||
<option class="group-selection-select-default" disabled selected>Select Your Vehicle</option>
|
||||
{% endunless %}
|
||||
<option class="group-selection-select-option" value="Car"
|
||||
{% if current_person.properties.learner_vehicle == 'Car' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Car
|
||||
</option>
|
||||
|
||||
<option class="group-selection-select-option" value="Bike"
|
||||
{% if current_person.properties.learner_vehicle == 'Bike' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Bike
|
||||
</option>
|
||||
|
||||
<option class="group-selection-select-option" value="Scooter/Motorbike"
|
||||
{% if current_person.properties.learner_vehicle == 'Scooter/Motorbike' %}
|
||||
selected
|
||||
{% endif %}
|
||||
>
|
||||
Scooter/Motorbike
|
||||
</option>
|
||||
</select>
|
||||
<i class="far fa-regular fa-angle-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.group-selection {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.group-selection-select {
|
||||
background: transparent;
|
||||
color: white;
|
||||
padding: 10px 30px 10px 15px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
margin-top: 5px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.group-selection-select-option {
|
||||
background-color: #f2f4f5;
|
||||
color: #1b3e4f;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
background: #ff2c00;
|
||||
border-radius: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.select-wrapper .fa-angle-down {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 15px;
|
||||
pointer-events: none;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.select-wrapper {
|
||||
margin: 15px auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementsByClassName("group-selection-select")[0].addEventListener('change', changeVehicle);
|
||||
function changeVehicle() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/add_vehicle";
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(
|
||||
JSON.stringify({
|
||||
user_id: '{{ current_person.id }}',
|
||||
vehicle: $('.group-selection-select')[0].value
|
||||
})
|
||||
);
|
||||
$('[course-vehicle]').hide();
|
||||
if ($('.group-selection-select')[0].value == 'Car') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
console.log($(this).attr('course-vehicle')[0])
|
||||
if ($(this).attr('course-vehicle')[0] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Bike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[1] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Scooter/Motorbike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[2] == '1') {
|
||||
$(this).show();
|
||||
}
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,217 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
|
||||
{% comment %} Single variable determining if user is part of NZ training group {% endcomment %}
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
{% if current_school.id == '30e76dee-eb3f-46d1-9faf-852e8650287f' %}
|
||||
{% comment %} sandbox school variables {% endcomment %}
|
||||
{% assign ANZ_group = 'f7cf641a-3198-4897-81c9-993ca28f7f6c' %}
|
||||
{% endif %}
|
||||
{% assign ANZ = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_school.properties.anz_address_form and current_person.signed_in? and current_person.properties.learner_vehicle == "None" and ANZ == true %}
|
||||
{% unless current_person.email contains "+preview" %}
|
||||
<script>
|
||||
if (!localStorage.getItem("form_filled")) {
|
||||
if (window.location.hash != "ommit-infos") {
|
||||
window.location.replace("/app/infos")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
|
||||
<header class="np-header np-header-color" {% if nz_status == true%}style="height: 60px; padding: 0px 1%; position: inherit; border-bottom: 1px solid rgb(214, 214, 214);"{% endif %}>
|
||||
<div class="np-header-content">
|
||||
{% comment %} <div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div> {% endcomment %}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
{% comment %} <a href="{% route home %}"> {% endcomment %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
{% if nz_status == true %}style="height: 20px;"{% endif %}
|
||||
/>
|
||||
{% comment %} </a> {% endcomment %}
|
||||
</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>
|
||||
|
||||
{% comment %} {% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% comment %} {% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form> {% endcomment %}
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% comment %} <div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,16 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
|
||||
{% if link.label != "Home" %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,131 @@
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true%}
|
||||
{% else %}
|
||||
{% assign nz_status = false%}
|
||||
{% endif %}
|
||||
|
||||
{% if course.properties.is_single_activity_course %}
|
||||
|
||||
<script>
|
||||
window.location.replace("/courses/{{course.id}}");
|
||||
</script>
|
||||
|
||||
{% 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" %}
|
||||
|
||||
{% if nz_status %}
|
||||
<style>
|
||||
#course-mobile .np-top-button:after,
|
||||
#course-desktop .np-top-button:after{
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-page-container {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* button countdown animation and styles associated with it */
|
||||
#course-mobile .np-top-button.animate,
|
||||
#course-desktop .np-top-button.animate {
|
||||
position:relative;
|
||||
background:#000000;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
#course-mobile .np-top-button:after,
|
||||
#course-desktop .np-top-button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
border-radius:4px;
|
||||
transition:border-radius 0.2s;
|
||||
}
|
||||
|
||||
#course-mobile .np-top-button.animate:after,
|
||||
#course-desktop .np-top-button.animate:after {
|
||||
background-color:#ff2c00;
|
||||
animation-name: bgColorLeftToRight;
|
||||
animation-duration: 10s;
|
||||
animation-timing-function: linear;
|
||||
z-index:-1;
|
||||
border-top-right-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
|
||||
@keyframes bgColorLeftToRight {
|
||||
0% { width:0 }
|
||||
100% { width:100% }
|
||||
}
|
||||
/* end button animaation */
|
||||
|
||||
</style>
|
||||
{% if course.properties.course_language == 'fr' %}
|
||||
<script>
|
||||
$('div.np-top-vocabulary.np-text-title.np-text-muted').text('APPRENEZ COMMENT DANS CE COURS DE 3 MINUTES')
|
||||
$('div.np-text-title.np-course-outline-title').text('PLAN DE COURS')
|
||||
$('.np-card-heading').text('À propos du module')
|
||||
</script>
|
||||
{% if course.progress == 0 %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Commencer le cours')
|
||||
</script>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Continuer')
|
||||
</script>
|
||||
{% else %}
|
||||
<script>
|
||||
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Reprendre le cours')
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% if course.properties.course_language != 'fr' %}
|
||||
<script>
|
||||
var progress = {{ course.progress }}
|
||||
progress < 100 ? initCourseCountdown() : "";
|
||||
console.log("script")
|
||||
// Init 10 second countdown to auto start learner in course
|
||||
function initCourseCountdown() {
|
||||
console.log("init countdown")
|
||||
let btn
|
||||
|
||||
window.innerWidth < 768 ?
|
||||
btn = document.getElementById("course-mobile").querySelector('.np-top-button') :
|
||||
btn = document.getElementById("course-desktop").querySelector('.np-top-button')
|
||||
|
||||
btn.classList.add('animate')
|
||||
|
||||
btn.addEventListener("animationend", () => {
|
||||
console.log("ended")
|
||||
btn.classList.remove('animate')
|
||||
|
||||
// redirect learner to next activity
|
||||
{% if course.enrolled? %}
|
||||
window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
|
||||
{% endif %}
|
||||
}, false);
|
||||
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,91 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
{% assign groups = current_person.groups | map: 'name'%}
|
||||
{% assign completed_nz_count = 0 %}
|
||||
{% assign nz_status = false%}
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.nz_aus_courses %}
|
||||
{% if course.completed? %}
|
||||
{% assign completed_nz_count = completed_nz_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="np-resource-title" style="font-size: 2.5rem">
|
||||
{% comment %} {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
<div {% if groups contains 'NZ Mandatory Training' %}class="courses_page_title"{% endif %}>Resource Center</div>
|
||||
</div>
|
||||
<div class="np-resource-subtitle">
|
||||
{% comment %} {% t .headline, key: current_school.course_vocabulary %} {% endcomment %}
|
||||
Hey {{current_person.first_name}}, welcome to the Dasher Resource Center. You can review best practices used by experienced Dashers.
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% include 'group_selection' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
{% assign nz_status = true %}
|
||||
{% if completed_nz_count > 0%}
|
||||
<div class="np-resource-title">
|
||||
<div class="courses_page_title">
|
||||
Completed Courses
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.properties.nz_aus_courses %}
|
||||
{% if course.completed? %}
|
||||
{% include 'cards_course' with course, nz_status%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-resource-title">
|
||||
<div {% if groups contains 'NZ Mandatory Training' %}class="courses_page_title"{% endif %}>Enrolled Courses</div>
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
{% if groups contains 'NZ Mandatory Training' %}
|
||||
<script>
|
||||
$('div[course-vehicle]').hide()
|
||||
$(document).ready(function() {
|
||||
console.log('{{ current_person.properties.learner_vehicle }}')
|
||||
if ($('.group-selection-select')[0].value == 'Car') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
console.log($(this).attr('course-vehicle')[0])
|
||||
if ($(this).attr('course-vehicle')[0] == '1') {
|
||||
$(this).show()
|
||||
console.log(123)
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Bike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[1] == '1') {
|
||||
$(this).show()
|
||||
console.log(321)
|
||||
}
|
||||
})
|
||||
}
|
||||
else if ($('.group-selection-select')[0].value == 'Scooter/Motorbike') {
|
||||
$('[course-vehicle]').each(function() {
|
||||
if ($(this).attr('course-vehicle')[2] == '1') {
|
||||
$(this).show()
|
||||
console.log(321)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
@ -0,0 +1,59 @@
|
||||
<script>
|
||||
window.location = '/app/courses'
|
||||
</script>
|
||||
{% comment %}
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class='title' style='font-size: 18px; font-weight: 500; text-align: center;'>
|
||||
Hey {{current_person.first_name}}, welcome to the Dasher learning center. Educate yourself on the best practices used by the highest-rated Dashers.
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-dashboard-resources-title">
|
||||
LEARNING CENTER
|
||||
</div>
|
||||
<div class="np-learning-paths-resources">
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Dasher101" %}
|
||||
{% include 'cards_course_lp' with course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name != "Dasher101" %}
|
||||
<div class="col-xs-12 col-sm-6 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif%}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
{% 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" %} {% endcomment %}
|
||||
@ -0,0 +1,441 @@
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
var autocomplete = null
|
||||
function initAutocomplete() {
|
||||
const options = {
|
||||
componentRestrictions: { country: ["au", "nz"]},
|
||||
fields: ["address_components"],
|
||||
types: ["address"]
|
||||
}
|
||||
const address1 = $('#street_address')[0];
|
||||
autocomplete = new google.maps.places.Autocomplete(address1, options);
|
||||
autocomplete.addListener('place_changed', fillInAddress);
|
||||
}
|
||||
|
||||
function fillInAddress() {
|
||||
const address1 = $('#street_address')[0];
|
||||
const address2 = $('#street_address_2')[0];
|
||||
const suburb = $('#suburb')[0];
|
||||
const city = $('#city')[0];
|
||||
const postal = $('#postal')[0];
|
||||
|
||||
const place = autocomplete.getPlace();
|
||||
const address_components = place.address_components;
|
||||
var street_number = '';
|
||||
var street = '';
|
||||
var full_street_address = '';
|
||||
for (let i = 0; i < address_components.length; i++) {
|
||||
const component = address_components[i];
|
||||
switch (component.types[0]) {
|
||||
case 'street_number':
|
||||
street_number = component.long_name;
|
||||
break;
|
||||
case 'route':
|
||||
street = component.long_name;
|
||||
break;
|
||||
case 'street_address':
|
||||
full_street_address = component.long_name;
|
||||
break;
|
||||
case 'sublocality_level_1':
|
||||
suburb.value = component.long_name;
|
||||
break;
|
||||
case 'locality':
|
||||
city.value = component.long_name;
|
||||
break;
|
||||
case 'postal_code':
|
||||
postal.value = component.long_name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
address1.value = full_street_address || street_number + ' ' + street;
|
||||
address2.focus();
|
||||
document.querySelectorAll('input[req]').forEach(checkInput)
|
||||
}
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
initAutocomplete();
|
||||
})
|
||||
</script>
|
||||
|
||||
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5tTAncWjVZPaPO30fNogteWYvlm2wnIk&libraries=places&callback=initAutocomplete"></script>
|
||||
|
||||
|
||||
|
||||
{% assign ANZ_group = 'eeabc17d-8364-42fc-b667-c83ca18797f8' %}
|
||||
{% if current_school.id == '30e76dee-eb3f-46d1-9faf-852e8650287f' %}
|
||||
{% comment %} sandbox school variables {% endcomment %}
|
||||
{% assign ANZ_group = 'f7cf641a-3198-4897-81c9-993ca28f7f6c' %}
|
||||
{% endif %}
|
||||
{% assign ANZ = false %}
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.id == ANZ_group %}
|
||||
{% assign ANZ = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_school.properties.anz_address_form == false or current_person.signed_in? == false or current_person.properties.learner_vehicle != 'None' or ANZ == false %}
|
||||
<script>
|
||||
window.location.replace("/app/courses")
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<body>
|
||||
<div class="form-window col-12 col-sm-10 col-md-8">
|
||||
<div class="form-wrapper">
|
||||
<img class="logo" src="{{current_school.logo_url}}">
|
||||
<div class="title">
|
||||
Let's order your Dasher Kit
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
All activated Dashers will receive a kit including a DoorDash Hoodie, a delivery Hotbag, and PPE hygiene essentials. Enter your postal details so we can get the right kit sent to you </div>
|
||||
<form class="form">
|
||||
<div class="form-row">
|
||||
<label class="form-label" for="vehicle">
|
||||
Your Vehicle Type
|
||||
</label>
|
||||
<div class="form-selection-wrapper">
|
||||
<select class="form-selection pre-required" id="vehicle" name="vehicle" autocomplete="off" req-sel>
|
||||
<option class="form-selection-default" disabled selected value="None">
|
||||
Please Select
|
||||
</option>
|
||||
<option class="form-selection-option" value="Car">
|
||||
Car
|
||||
</option>
|
||||
<option class="form-selection-option" value="Bike">
|
||||
Bike
|
||||
</option>
|
||||
<option class="form-selection-option" value="Scooter/Motorbike">
|
||||
Scooter/Motorbike
|
||||
</option>
|
||||
</select>
|
||||
<i class="fal fa-angle-down form-selection-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="form-label" for="hoodie">
|
||||
Size For Your Dasher Hoodie
|
||||
</label>
|
||||
<div class="form-selection-wrapper">
|
||||
<select class="form-selection pre-required" id="hoodie" name="hoodie" autocomplete="off" req-sel>
|
||||
<option class="form-selection-default" disabled selected value="None">
|
||||
Please Select
|
||||
</option>
|
||||
<option class="form-selection-option" value="S">
|
||||
S
|
||||
</option>
|
||||
<option class="form-selection-option" value="M">
|
||||
M
|
||||
</option>
|
||||
<option class="form-selection-option" value="L">
|
||||
L
|
||||
</option>
|
||||
<option class="form-selection-option" value="XL">
|
||||
XL
|
||||
</option>
|
||||
</select>
|
||||
<i class="fal fa-angle-down form-selection-arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label class="form-label">
|
||||
Address To Send Your Dasher Kit To
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input pre-required" type="text" id="street_address" name="street_address" req autocomplete="off">
|
||||
<label class="form-label-small" for="street_address">
|
||||
Street Address
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input" type="text" id="street_address_2" name="street_address_2" autocomplete="off">
|
||||
<label class="form-label-small" for="street_address_2">
|
||||
Street Address 2
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-one-line">
|
||||
<div class="form-row short-width margin">
|
||||
<input class="form-input pre-required" type="text" id="suburb" name="suburb" req autocomplete="off">
|
||||
<label class="form-label-small" for="suburb">
|
||||
Suburb
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-row short-width">
|
||||
<input class="form-input pre-required" type="text" id="city" name="city" req autocomplete="off">
|
||||
<label class="form-label-small" for="city">
|
||||
City
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<input class="form-input pre-required" type="text" id="postal" name="postal" req autocomplete="off">
|
||||
<label class="form-label-small" for="postal">
|
||||
Postal Code
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<button class="form-button disabled-button" disabled>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
@font-face {
|
||||
font-family: TTNormsPro;
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Regular.otf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: TTNormsPro;
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Bold.otf);
|
||||
font-weight: bold;
|
||||
}
|
||||
body {
|
||||
background: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: TTNormsPro, sans-serif;
|
||||
color: black;
|
||||
}
|
||||
.form-window {
|
||||
background: white;
|
||||
box-shadow: rgba(87, 100, 126, 0.21) 0px 4px 4px 0px;
|
||||
border-radius: 3px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.form-wrapper {
|
||||
width: 90%;
|
||||
margin: 40px auto;
|
||||
}
|
||||
.logo {
|
||||
width: 200px;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.subtitle {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-selection-wrapper {
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.form-selection {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.form-selection {
|
||||
color: rgb(87, 100, 126);
|
||||
background: rgb(247, 247, 247);
|
||||
font-weight: bold;
|
||||
padding: 8px 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.form-selection-default {
|
||||
display: none;
|
||||
}
|
||||
.form-selection-option {
|
||||
color: black;
|
||||
font-family: TTNormsPro, sans-serif !important;
|
||||
}
|
||||
.form-selection-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-150%, -50%);
|
||||
color: rgb(87, 100, 126);
|
||||
font-weight: 600;
|
||||
}
|
||||
.form-input {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px 8px;
|
||||
font-weight: bold;
|
||||
background: rgb(247, 247, 247);
|
||||
}
|
||||
.form-input:hover, .form-input:focus {
|
||||
border: #57647e 2px solid;
|
||||
}
|
||||
.form-label-small {
|
||||
color: #57647E;
|
||||
font-size: 12px;
|
||||
margin-top: 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.form-one-line {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.form-button {
|
||||
width: 100%;
|
||||
background-color: rgb(235, 22, 0);
|
||||
color: white;
|
||||
padding: 8px 0;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 19px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.required {
|
||||
background: rgba(255, 127, 127, 0.6);
|
||||
}
|
||||
.disabled-button {
|
||||
background: lightgray;
|
||||
pointer-events: none;
|
||||
}
|
||||
.short-width {
|
||||
width: 48%;
|
||||
}
|
||||
.margin {
|
||||
margin-right: 4%;
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.form-one-line {
|
||||
flex-direction: column;
|
||||
}
|
||||
.short-width {
|
||||
width: 100%;
|
||||
}
|
||||
.margin {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function debounce(callback, wait) {
|
||||
let timeout;
|
||||
return (...args) => {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(function () { callback.apply(this, args); }, wait);
|
||||
};
|
||||
}
|
||||
function sendForm(){
|
||||
if (!checkBeforeSending()) { return false }
|
||||
|
||||
localStorage.setItem("form_filled", "true");
|
||||
|
||||
$('.form-button').unbind("click");
|
||||
var form_data = JSON.stringify({
|
||||
school_id: '{{current_school.id}}',
|
||||
user_id: '{{ current_person.id }}',
|
||||
user_email: '{{ current_person.email }}',
|
||||
user_name: '{{ current_person.name }}',
|
||||
vehicle: $('#vehicle').val(),
|
||||
hoodie: $('#hoodie').val(),
|
||||
street_address: $('#street_address').val(),
|
||||
street_address_2: $('#street_address_2').val(),
|
||||
suburb: $('#suburb').val(),
|
||||
city: $('#city').val(),
|
||||
postal: $('#postal').val()
|
||||
})
|
||||
var xhr = new XMLHttpRequest();
|
||||
var url = "https://www.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/order_kit";
|
||||
xhr.addEventListener("load", e => {
|
||||
window.location.replace('/app/courses#ommit-infos');
|
||||
});
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send(form_data);
|
||||
}
|
||||
|
||||
function checkBeforeSending() {
|
||||
$('[req]').each(function(){
|
||||
if ($(this).val().length == 0) {
|
||||
$(this).addClass('required');
|
||||
}
|
||||
|
||||
})
|
||||
$('[req-sel]').each(function(){
|
||||
if ($(this).val() == "None") {
|
||||
$(this).addClass('required');
|
||||
}
|
||||
})
|
||||
return checkIfReady()
|
||||
}
|
||||
|
||||
function checkIfReady() {
|
||||
if ($('[class*="required"]').length > 0) {
|
||||
$('#missing-info-alert').show();
|
||||
$('.form-button').prop('disabled', true);
|
||||
$('.form-button').addClass('disabled-button');
|
||||
$('.form-button').unbind("click")
|
||||
return false
|
||||
}
|
||||
else {
|
||||
$('#missing-info-alert').hide();
|
||||
$('.form-button').prop('disabled', false);
|
||||
$('.form-button').removeClass('disabled-button');
|
||||
$('.form-button').click(sendForm)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function checkInput(element) {
|
||||
if (element.value.length == 0) {
|
||||
element.classList.add('required');
|
||||
}
|
||||
else {
|
||||
element.classList.remove('required');
|
||||
element.classList.remove('pre-required');
|
||||
}
|
||||
checkIfReady();
|
||||
}
|
||||
|
||||
function checkSelect() {
|
||||
if (this.value == "None") {
|
||||
this.classList.add('required');
|
||||
}
|
||||
else {
|
||||
this.classList.remove('required');
|
||||
this.classList.remove('pre-required');
|
||||
}
|
||||
checkIfReady();
|
||||
}
|
||||
|
||||
function addSelectListener(element) {
|
||||
element.addEventListener('change', checkSelect);
|
||||
}
|
||||
|
||||
function addInputListener(element) {
|
||||
element.addEventListener('keyup', debounce( () => {
|
||||
checkInput(element);
|
||||
}, 500));
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
document.querySelectorAll('select[req-sel]').forEach(addSelectListener);
|
||||
document.querySelectorAll('input[req]').forEach(addInputListener);
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,64 @@
|
||||
/*
|
||||
Put your custom overlay styles in here
|
||||
You can use your northpass color palette in this file
|
||||
|
||||
{{ color_palette.button_font_color }}
|
||||
{{ color_palette.button_color }}
|
||||
{{ color_palette.button_hover_color }}
|
||||
{{ color_palette.header_font_color }}
|
||||
{{ color_palette.header_font_hover_color }}
|
||||
{{ color_palette.header_color }}
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.eot");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.eot") format("embedded-opentype"), url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.woff") format("woff"),
|
||||
url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Reg.otf");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/proximanova-regular-webfont.woff") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Proxima Nova";
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.eot");
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.woff") format("woff"), url("https://s3.amazonaws.com/static.northpass.com/fonts/ProximaNova-Bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TT Norms Pro";
|
||||
src: url(https://s3.amazonaws.com/static.northpass.com/fonts/TT+Norms+Pro+Bold.otf);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "TT Norms Pro-Regular";
|
||||
src: url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.eot");
|
||||
src: url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.woff") format("woff"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/07bc241768c969f6b6a27a7bf0dfb490.svg#TT Norms Regular") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Proxima Nova", "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
.np-resource-subtitle,
|
||||
.np-card-content-title {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.np-form-action.np-button-big{
|
||||
border-radius: 30px;
|
||||
}
|
||||
@ -139,3 +139,8 @@ Questions:
|
||||
|
||||
TODO: Can "allow retakes" default to yes for all newly created courses?
|
||||
|
||||
## 07/14/23
|
||||
|
||||
### Launch Day Nervousness
|
||||
|
||||
|
||||
|
||||
@ -47,3 +47,15 @@ Action items:
|
||||
* Make Mizuno Running available along the header - currently it is invisible.
|
||||
* Remove subnav completely.
|
||||
* Sign up page - store name + city + state - required. Store / City are text, States are drop down
|
||||
|
||||
## 07/14/2023
|
||||
|
||||
### Mizuno Running Canada
|
||||
|
||||
Mark Hansen handles both Golf and Running for both USA and Canada.
|
||||
|
||||
TODO: Ask Casey if USA and CA codes can be interchangeable.
|
||||
TODO: Connect with Matt on this whole things.
|
||||
|
||||
They will need to add CA people to Groups. Custom Analytics.
|
||||
Target Date: Early August.
|
||||
|
||||
@ -232,3 +232,35 @@ DONE: Directly ask Chloe about the technical complications.
|
||||
|
||||
TODO: Push lang changes from Internal Sandbox to Main sandbox for James' testing.
|
||||
|
||||
## 07/14/2023
|
||||
|
||||
### Internal Training Demo
|
||||
|
||||
Ines is from global training and onboarding
|
||||
Guillerhme is support and does monthly trainings for support teams.
|
||||
|
||||
Currently on TalentLMS but they hate it. It is only their host.
|
||||
Use EZ Generator is their authoring tool.
|
||||
Support: Portugal, Estonia, US
|
||||
Global: 10 offices across the world
|
||||
|
||||
They share a lot of content.
|
||||
Sales and Success don't have trainers, so they use the same content.
|
||||
|
||||
New Project: Pipedrive Academy
|
||||
|
||||
Learning Paths (proper). A lot of things are possible in TLMS, but not intuitive.
|
||||
No Learning Path Cover page - everything is separate.
|
||||
|
||||
They also host internal trainings hosted by internal coaches. Soft skills, feedback, workshops, etc.
|
||||
It would be nice to organize and manager sessions through the LMS.
|
||||
Live Webinar Trainings
|
||||
Waiting list would be nice. Not a deal breaker.
|
||||
|
||||
Reporting is another hugely important aspect.
|
||||
Portugal legal requirement: 40 hours per year per employee. Auditors will check this.
|
||||
One single source of truth with all the trainings that have happened.
|
||||
|
||||
HRIS: BambooHR, integrating very basically.
|
||||
|
||||
Last year they were already window shopping for LMS. Ines watched a demo of Northpas.
|
||||
|
||||
Reference in New Issue
Block a user