Anthology back up

This commit is contained in:
Norm Rasmussen
2025-03-18 22:59:56 -04:00
parent d182cda6dc
commit 7640e4cca9
232 changed files with 1192 additions and 1255 deletions

View File

@ -0,0 +1,66 @@
<div class="np-hidden-mobile">
<p>{% t .description %}</p>
<p>{% t .requirements %}</p>
</div>
<img
alt=""
class="np-account-avatar-image"
src="{{ form.gravatar_url }}?s=200"
id="{{version}}_gravatar_img"
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
/>
<img
alt=""
class="np-account-avatar-image"
src="{{ form.secure_custom_avatar_url }}"
id="{{version}}_custom_avatar_img"
{% if form.use_gravatar? %}style="display: none"{% endif %}
/>
<div class="np-account-avatar-choice">
<div class="np-form-field">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_true"
name="learner[use_gravatar]"
type="radio"
value="true"
{% if form.use_gravatar? %}checked{% endif %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label">
{% t .use_gravatar %}
</span>
</label>
</div>
<div class="np-form-field">
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
<span class="radio__input">
<input
id="{{version}}_learner_use_gravatar_false"
name="learner[use_gravatar]"
type="radio"
value="false"
{% unless form.use_gravatar? %}checked{% endunless %}
/>
<span class="np-button-color radio__control"></span>
</span>
<span class="radio__label">
{% t .upload_custom_photo %}
</span>
</label>
</div>
<div>
<button
id="{{version}}_upload_avatar"
type="button"
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
>
{% t .upload %}
</button>
</div>
</div>

View File

@ -0,0 +1,19 @@
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
{% form_authenticity_token %}
<div class="np-card">
<div class="np-card-container np-card-padding">
<div class="row">
<div class="col-sm-7 np-account-form">
{% render "account_form", form: form, version: "desktop" %}
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t shared.account.save %}
</button>
</div>
<div class="col-sm-5 np-account-avatar">
{% include "account_avatar", version: "desktop" %}
</div>
</div>
</div>
</div>
</form>

View File

@ -0,0 +1,139 @@
<div class="np-resource-title">
{% t .header %}
</div>
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
<input
{% if form.options.invite? %} disabled {% endif %}
autofocus="autofocus"
class="np-input"
id="{{version}}_learner_email"
name="learner[email]"
type="email"
value="{{ form.email }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_first_name">
{% t shared.first_name %} *
</label>
<input
class="np-input"
id="{{version}}_learner_first_name"
name="learner[first_name]"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_last_name">
{% t shared.last_name %} *
</label>
<input
class="np-input"
id="{{version}}_learner_last_name"
name="learner[last_name]"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_display_name">
{% t .display_name %}
</label>
<input
class="np-input"
id="{{version}}_learner_display_name"
name="learner[display_name]"
value="{{ form.display_name }}"
/>
</div>
{% unless form.options.invite? %}
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_current_password">
{% t .current_password %} *
</label>
<input
class="np-input"
id="{{version}}_learner_current_password"
name="learner[current_password]"
type="password"
/>
</div>
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_password">
{% t .new_password %} *
</label>
<input
class="np-input"
id="{{version}}_learner_password"
name="learner[password]"
type="password"
/>
</div>
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
{% t .confirm_new_password %} *
</label>
<input
class="np-input"
id="{{version}}_learner_password_confirmation"
name="learner[password_confirmation]"
type="password"
/>
</div>
{% endunless %}
{% if form.options.invite? %}
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
<label class="np-input-label" for="{{version}}_learner_password">
{% t shared.password %} *
</label>
<input
class="np-input"
id="{{version}}_learner_password"
name="learner[password]"
type="password"
/>
</div>
{% if form.terms_of_service_required? %}
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
<input
id="{{version}}_learner_terms_of_service"
name="learner[terms_of_service_accepted]"
type="checkbox"
/>
<div class="label">
{% t .terms_of_service %}
<a
target="_blank"
href={{ form.terms_of_service_url }}
>
{% t .terms_link %}
</a>
</div>
</div>
{% else %}
<div class="np-margin-top">
<span class="np-form-terms ">
{% t .terms %}
<a
class="np-form-link np-button-color"
target="_blank"
href={{ form.terms_of_service_url }}
>
{% t .terms_link %}
</a>
</span>
</div>
{% endif %}
<input
id="{{version}}_invite_token"
name="learner[token]"
value="{{ form.invite_token }}"
type="hidden"
/>
{% endif %}

View File

@ -0,0 +1,17 @@
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
{% form_authenticity_token %}
<div class="np-card np-account-form">
<div class="np-card-container np-card-padding">
{% render "account_form", form: form, version: "mobile" %}
</div>
</div>
<div class="np-card np-account-avatar">
<div class="np-card-container np-card-padding">
{% include "account_avatar", version: "mobile" %}
</div>
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t shared.account.save %}
</button>
</form>

View File

@ -0,0 +1,388 @@
{% if course.properties.product_names_for_course_cards == 'Anthology Reach' %}
{% assign product_logo = 'https://cdn.northpass.io/anthology/Reach.svg' %}
{% assign product_alt = 'Anthology Reach' %}
{% 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 product_alt = 'Anthology Engage' %}
{% 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 product_alt = 'Anthology Beacon' %}
{% 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 product_alt = 'Anthology Milestone' %}
{% 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 product_alt = 'Anthology Occupation Insight' %}
{% 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 product_alt = 'Anthology Raise' %}
{% 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 product_alt = 'Anthology Digital Assistant' %}
{% 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 product_alt = 'Anthology Baseline' %}
{% 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 product_alt = 'Anthology Encompass' %}
{% 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 product_alt = 'Anthology Student' %}
{% 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 product_alt = 'Anthology Insight' %}
{% 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 product_alt = 'Anthology Finance & HCM' %}
{% 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 product_alt = 'Anthology Payroll' %}
{% 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 product_alt = 'Anthology Academic Economics' %}
{% 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 product_alt = 'Blackboard Learn' %}
{% 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 product_alt = 'Anthology Ally' %}
{% 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://s3.amazonaws.com/static.northpass.com/anthology/Course+Evaluations.svg' %}
{% assign product_alt = 'Anthology Course Evaluations' %}
{% 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 product_alt = 'Anthology Portfolio' %}
{% 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://s3.amazonaws.com/static.northpass.com/anthology/Program+Review.svg' %}
{% assign product_alt = 'Anthology Program Review' %}
{% 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 product_alt = 'Anthology Planning' %}
{% 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 product_alt = 'Anthology Accreditation' %}
{% 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 %}
{% unless flag == 'dashboard' %}
{% assign flag = '' %}
{% endunless %}
<div class="np-card course-card">
{%- comment -%} {% unless flag == 'catalog' %}
{% endunless %} {%- endcomment -%}
<div class="np-progress-bar-container" style="background: {{ color_light }}">
<div
style="width: 75%; background: {{ color_dark }}"
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
</div>
</div>
<div class="card-product-banner">
{% if product_logo != 'blank' %}
<img src='{{ product_logo }}' alt='{{ product_alt }}' class="product-logo"/>
{% else %}
Anthology
{% endif %}
</div>
<div class="np-card-container">
<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? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
</div>
<div class="card-bottom-details">
{% if flag == 'dashboard' %}
<div style="
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 15px;
width: 70%;">
<div style="
background: #BACCE9;
border-radius: 10px;
height: 8px;
margin-right: 15px;
width: 60%;
">
<div
style="height: 8px; background: {{ color_main }}; border-radius: 10px; width: {{ course.progress }}%; "
class="np-button-background-color np-card-progress-bar course-card-progress-bar">
</div>
</div>
<div>
{%- comment -%} {{course.properties.course_duration}} left {%- endcomment -%}
</div>
</div>
{% else %}
{%- comment -%} <div class="np-card-content-progress np-button-color">
{% t shared.progress, count: course.progress %}
</div> {%- endcomment -%}
<div style="padding-left: 15px">
{%- comment -%} {{course.properties.course_duration}} duration {%- endcomment -%}
</div>
{% endif %}
<a class="np-button np-button-wide course-card-button"
{% if course.properties.video_on_demand == true %}
{% 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 %}
{% else %}
href="{{ course_path }}"
{% endif %}
>
{% if course.progress > 0 and course.progress < 100 %}
Continue
{% else %}
View
{% endif %}
</a>
</div>
</div>
</div>
<style>
.card-product-banner{
align-items: center;
background: #FFF;
box-shadow: 0 3px 30px rgba(0,0,0,.1);
display: flex;
height: 32px;
overflow: hidden;
padding: 6px 8px;
width: 100%;
}
.product-logo{
height: 100%;
}
.card-image-replacement{
/* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 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% - 38px);
justify-content: center;
position: absolute;
top: 0;
}
.course-card-title{
font-size: 24px;
font-weight: 600;
line-height: 25px;
margin-top: 8px !important;
}
.course-card-button{
border-radius: 0;
font-size: 14px;
font-weight: 600;
height: 100%;
line-height: 21px;
width: 30%;
}
.course-card-button:focus{
border: 2px solid blue;
}
.np-progress-bar-container,
.np-card-progress-bar{
border-radius: 0;
height: 6px;
margin: 0;
}
.np-card-content-progress{
height: 25px;
margin: 0;
}
.course-card-progress-bar{
min-width: 0;
}
.np-card-content-progress{
font-size: 16px;
font-weight: 400;
line-height: 25px;
}
@media screen and (min-width: 768px){
.course-card-wrapper{
margin-bottom: 32px;
/* max-height: 315px;
max-width: 445px; */
}
.course-card{
padding: 0 10px !important;
}
.course-card-wrapper,
.course-card{
height: 100%;
}
}
</style>

View File

@ -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>

View File

@ -0,0 +1,70 @@
<div class="np-card np-no-horizontal-padding">
<div class="np-card-container">
<div class="np-learning-path">
<img
alt="{{ learning_path.name }}"
class="np-card-image np-learning-path-image"
src="{{ learning_path.image_url }}"
/>
<div class="np-card-text-wrapper">
<div class="np-hidden-desktop np-card-header">
<i class="np-card-header-icon far fa-road"></i>
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<div class="np-hidden-desktop np-card-header-items-count">
{{ learning_path.items.count }} {% t .items %}
</div>
</div>
<div class="np-hidden-mobile np-card-header">
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<i class="np-card-header-icon far fa-road"></i>
</div>
<div class="np-card-content np-card-padding np-card-content-vertical">
<h3 class="np-card-content-title">
{{ learning_path.name }}
</h3>
<div class="np-card-content-subtitle">
{{ learning_path.instructor_names }}
</div>
<div class="np-hidden-mobile np-card-content-description">
{{ learning_path.description }}
</div>
<div class="np-hidden-mobile np-card-content-progress
np-button-color">
{% t shared.progress, count: learning_path.progress %}
</div>
<div class="np-hidden-mobile np-card-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-card-content-footer">
<div class="np-hidden-desktop np-card-content-progress
np-button-color">
{% t shared.progress, count: learning_path.progress %}
</div>
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
{% t shared.view %}
</a>
<span class="np-hidden-mobile np-learning-path-items">
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
<span class="np-learning-path-items-count">
{{ learning_path.items.count }} {% t .items %}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="np-card-stack">
<div class="np-card-stack-level-1"></div>
<div class="np-card-stack-level-2"></div>
</div>
</div>

View File

@ -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>

View File

@ -0,0 +1,4 @@
<div class="col-xs-12 col-md-4 spacing-clear">
{% include "certificates_verification" %}
{% include "certificates_metadata" %}
</div>

View File

@ -0,0 +1,59 @@
<div class="np-card spacing-clear">
<div class="np-card-container padding-spacing-8">
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .learner %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{certificate.learner_name}}
</p>
</div>
</div>
<div class="line"></div>
{% if certificate.issuer_name_enabled? %}
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title">
{% t .issued_by %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.issuer_name }}
</p>
</div>
</div>
<div class="line"></div>
{% endif %}
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .issued_on %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.issue_date }}
</p>
</div>
</div>
<div class="line"></div>
<div class="row np-certificate-metadata-row">
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-title" >
{% t .expires_on %}
</p>
</div>
<div class="col-xs-6 col-md-6">
<p class="np-certificate-metadata-value">
{{ certificate.expiration_date_translation }}
</p>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,35 @@
<script type="text/javascript">
const resizeIframe = () => {
const combinedPadding = 16;
const previewIframe = document.getElementById("previewIframe");
const previewIFrameCard = document.getElementById("previewIFrameCard");
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
templateInPreviewContainer.style.margin = 0;
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
const scale = scaledIframeHeight / previewIframeContentHeight;
previewIframe.style.transform = `scale(${scale})`;
}
window.onresize = resizeIframe;
</script>
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
<div class="np-card spacing-clear">
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
<iframe
id="previewIframe"
onload="resizeIframe()"
class="np-certificate-iframe-preview"
srcdoc="{{ certificate.certificate_template_html }}"
></iframe>
</div>
</div>
</div>

View File

@ -0,0 +1,44 @@
<div class="top-bar np-certificate-top-bar-spacing">
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
<div class="top-bar__col">
<h2 class="np-certificate-title" >
{{certificate.certificate_name}}
</h2>
</div>
<div class="button-container np-certificate-button-container">
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
<a
class="np-button np-certificate-button np-certificate-button-secondary"
href="{{certificate.linkedin_share_url}}"
target="_blank"
>
<i class="fab fa-linkedin np-certificate-share-icon"></i>
{% t .share %}
</a>
{% endif %}
<button
id="print"
type="button"
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
>
{% t .print %}
</button>
{% if certificate.generating_pdf %}
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
</div>
{% else %}
<a
href="{{ certificate.download_url }}"
aria-label="{% t .download %}"
target="_blank"
rel="noopener noreferrer"
download
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
>
{% t .download %}
</a>
{% endif %}
</div>
</div>
</div>

View File

@ -0,0 +1,15 @@
<div class="np-card spacing-clear np-certificate-verification-card">
<div class="np-card-container np-certificate-verification-container">
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
</div>
<div class="np-certificate-verification-info-container">
<h2 class="np-certificate-verification-info-status spacing-clear">
{{certificate.verification_title}}
</h2>
<p class="np-certificate-verification-info-description spacing-clear">
{{certificate.verification_description}}
</p>
</div>
</div>
</div>

View File

@ -0,0 +1,4 @@
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
<span class="np-course-outline-content-activity-title">
{{ activity.title }}
</span>

View File

@ -0,0 +1,15 @@
{% if course.enrolled? %}
<a
href="{% route activity_viewer,
id: activity.id,
course_id: params.course_id,
learning_path_id: params.learning_path_id
%}" class="{{ class }}"
>
{{ activity.title }}
</a>
{% else%}
<span class="{{ class }}">
{{ activity.title }}
</span>
{% endif %}

View File

@ -0,0 +1,10 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for category in course.categories %}
<div class="np-content-categories-content-item">
{{ category.name }}
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .header, key: current_school.course_vocabulary %}
</h3>
<div class="np-card-text">
{{ course.full_description }}
</div>

View File

@ -0,0 +1,260 @@
{% 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%); */
background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
}
.course-cover-title{
font-size: 2em;
line-height: 45px;
margin-bottom: 20px;
}
.course-cover-info{
display: flex;
flex-direction: column;
height: 25em;
justify-content: center;
}
</style>

View File

@ -0,0 +1,28 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex-column">
{% for event in course.events %}
<div class="np-course-events-content-item">
<div class="np-course-events-content-date np-button-background-color">
<div class="np-course-events-content-month">
{{ event.sessions.first.abbreviated_month }}
</div>
<div class="np-course-events-content-day">
{{ event.sessions.first.day }}
</div>
</div>
<div class="np-course-events-content-details">
<div class="np-course-events-content-name">
{{ event.title }}
</div>
<div class="np-course-events-content-type np-text-light">
{% t shared.event_types, key: event.event_type %}
</div>
<div class="np-course-events-content-time np-button-color">
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
</div>
</div>
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,68 @@
<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>
<span class="desktop-back-label">Back</span>
</div>
{%- comment -%} <img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/> {%- endcomment -%}
<div class="product-banner np-hidden-desktop">
{% if product_logo != 'blank' %}
<img src='{{ product_logo }}' class="product-logo" style="height: 36px;"/>
{% else %}
Anthology
{% endif %}
</div>
{%- comment -%} <div class="course-image-replacement np-hidden-desktop" style="border-radius: 0;"> {%- endcomment -%}
<div class="course-cover-info np-hidden-desktop">
<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>
<style>
.desktop-back-label{
font-size: 16px;
}
@media screen and (max-width: 767px){
.desktop-back-label{
display: none;
}
.course-cover-info{
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%);
}
.np-flex-1{
padding-left: 25px;
}
}
</style>

View File

@ -0,0 +1,22 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-flex">
{% for instructor in course.instructors %}
<div class="np-content-instructors-content-item">
<img
src="{{ instructor.avatar_url }}"
class="np-content-instructors-content-image"
alt="{{ instructor.name }}"
/>
<div class="np-content-instructors-content-description">
<div class="np-content-instructors-content-name">
{{ instructor.name }}
</div>
<div class="np-content-instructors-content-info np-text-light">
{{ instructor.title }}
</div>
</div>
</div>
{% endfor %}
</div>

View File

@ -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 %}

View File

@ -0,0 +1,40 @@
<div class="np-course-outline">
<div class="np-text-title np-course-outline-title">
{% t .header, key: current_school.course_vocabulary %}
</div>
<div class="np-course-outline-content">
<ol class="np-course-outline-content-section">
{% for section in course.sections %}
<li class="np-course-outline-content-section-list">
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
{{ section.name }}
</div>
<ol class="np-course-outline-content-activity">
{% for activity in section.activities %}
<li class="np-course-outline-content-activity-list">
{% if activity.completed? %}
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
{% if activity.locked? %}
{% include "course_activity_locked" %}
{% else %}
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
{% endif %}
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
{% else %}
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
{% if activity.locked? %}
{% include "course_activity_locked" %}
{% else %}
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
{% endif %}
<div class="np-course-outline-content-activity-list-bar"></div>
{% endif %}
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
</div>
</div>

View File

@ -0,0 +1,63 @@
{% assign external_course_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 external_course_url %}
<a
class="np-top-button np-button-font-color np-button np-button-big"
href="{{external_course_url}}"
target="_blank"
>
{% if 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>
{% 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 %}

View File

@ -0,0 +1,7 @@
{% if courses.include_courses_to_restart? %}
<div role="alert" class="np-alert np-alert-global np-alert-info">
<div class="np-alert-container uk-container uk-container-center">
{% t .content %}
</div>
</div>
{% endif %}

View File

@ -0,0 +1,33 @@
<div class="np-course-version-outdated-popup np-popup">
<div class="np-popup-positioner">
<i
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
data-toggle-class-on-target="np-popup-tooltip--visible"
data-toggle-target-parent=".np-popup-tooltip"
data-toggle-outside
></i>
<div
class="np-popup-tooltip"
role="tooltip"
aria-hidden="true"
>
<header class="np-popup-header">
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
<h3 class="np-popup-header-title">
{% t .title %}
</h3>
</header>
<div class="np-popup-body">
<h4>{% t .body.header %}</h4>
<p>{% t .body.content %}</p>
<a
class="np-popup-body-button"
href="{{ path }}"
>
{% t .body.button %}
</a>
</div>
<div class="np-popup-tail"></div>
</div>
</div>
</div>

View File

@ -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_names_for_course_cards}}">
{%- comment -%} {% include "cards_course" with course, flag: 'catalog' %} {%- endcomment -%}
{% include "cards_course" with course, flag: 'null' %}
</div>
{% endunless %}
{% endfor %}
</div>

View File

@ -0,0 +1,16 @@
{% if courses.enrolled.any? %}
<div class="row row-with-thumbnails">
{% for course in courses.enrolled %}
<div class="{{ class }}">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.index,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

@ -0,0 +1,65 @@
{% assign totalCountCompleted = 0 %}
{% for course in courses.enrolled %}
{% if course.progress == 100 %}
{% assign totalCountCompleted = totalCountCompleted | plus: 1 %}
{% endif %}
{% endfor %}
{%- comment -%} {% 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 %} {%- endcomment -%}
<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_names_for_course_cards}}">
{% 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_names_for_course_cards}}">
{% if outerClass == "dashboard-courses-index" %}
{% include "cards_course" with course, flag: 'dashboard' %}
{% else %}
{% include "cards_course" with course %}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>

View File

@ -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 -%}
{%- comment -%} <div class="np-dashboard-resources-title">
In Progress
</div> {%- endcomment -%}
{%- 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_names_for_course_cards}}">
{% 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_names_for_course_cards}}">
{% if outerClass == "dashboard-courses-index" %}
{% include "cards_course" with course, flag: 'dashboard' %}
{% else %}
{% include "cards_course" with course %}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>

View File

@ -0,0 +1,6 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{{ message }}
</div>
<img class="np-zero-state-courses" alt="{{ message }}" />
</div>

View File

@ -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>

View File

@ -0,0 +1,33 @@
<div class="np-filter" tabindex="0">
<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>

View File

@ -0,0 +1,157 @@
<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>Product</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('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
if(!allProductTypesHome.includes('{{ course.properties.product_names_for_course_cards }}')){
allProductTypesHome.push("{{ course.properties.product_names_for_course_cards }}");
}
}
{% endif %}
{% endfor %}
{% for course in courses.enrolled %}
{% unless course.progress == 0 %}
if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
if(!allProductTypesDash.includes('{{ course.properties.product_names_for_course_cards }}')){
allProductTypesDash.push("{{ course.properties.product_names_for_course_cards }}");
}
}
{% 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('&amp;') > -1){
product = product.replace('&amp;', '&');
}
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 = () => {
console.log(event.target.value);
let allLearning = document.querySelector('.np-catalog-courses').children;
for(let i = 0; i < allLearning.length; i++){
if(event.target.value == 'Default'){
if(!allLearning[i].classList.contains('hidden-by-search')){
allLearning[i].style.display = 'block';
}
allLearning[i].classList.remove('filtered')
} else {
if(allLearning[i].dataset.product != event.target.value){
allLearning[i].style.display = 'none';
allLearning[i].classList.add('filtered');
} else {
if(!allLearning[i].classList.contains('hidden-by-search')){
allLearning[i].style.display = 'block';
}
allLearning[i].classList.remove('filtered');
};
};
};
//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('&amp;') > -1){
product = product.replace('&amp;', '&');
}
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';
document.querySelector('.view-swapper-container').style.marginBottom = '0';
}
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(event.target.value)
//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>
<style>
.filtered{
display: none !important;
}
</style>

View File

@ -0,0 +1,10 @@
<input
id={{value}}
name={{ name }}
value={{ value }}
type="checkbox"
{% if selected %} checked="checked" {% endif %}
/>
<label for={{value}}>
{{label}}
</label>

View File

@ -0,0 +1,33 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
{%
include "filter_select",
filters: filters,
key: key,
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

View File

@ -0,0 +1,22 @@
{% if params.q %}
<input type="hidden" name="q" value="{{ params.q }}">
{% endif %}
<label class="dropdown-label" for="filter[category_uuid][in][]">
{{ label }}
</label>
<select
class="np-filter-select"
multiple
name="filter[{{ key }}][in][]"
>
{% for filter in filters %}
<option
value="{{ filter.value }}"
{% if filter.selected? %} selected="selected" {% endif %}
>
{{ filter.name }}
</option>
{% endfor %}
</select>

View File

@ -0,0 +1,100 @@
<footer class="np-footer">
<div class="np-footer-top">
{% if website_footer.show_navigation_links? %}
<div class="np-footer-navigation">
<ul class="np-footer-navigation-list">
{% for website_navigation in navigations.footer_navigations %}
{% unless website_navigation.name == 'Learning Paths' %}
<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>
{% endunless %}
{% endfor %}
{%- comment -%} <li class="np-footer-navigation-item">
<a
type="button"
class="np-footer-navigation-link np-button-color info-form-trigger"
data-toggle-class-on-target
data-toggle-target="#dialog_Q6szN"
data-toggle-escape
data-toggle-modal>
toggle
</a>
</li> {%- endcomment -%}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="https://baseline.campuslabs.com/htu/beta"
target="_blank"
>
Tell Us What You Think!
</a>
</li>
</ul>
</div>
{% endif %}
{% if current_school.logo_url %}
<h2 class="np-footer-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-footer-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h2>
{% else %}
<div class="np-school-name np-header-font-color">
{{ current_school.name }}
</div>
{% endif %}
</div>
<div class="np-footer-bottom">
<nav class="np-footer-social-links">
{% if website_footer.show_social_media_links? %}
<ul class="np-footer-social-links-list">
{% for social_media_link in website_footer.social_media_links %}
<li class="np-footer-social-links-item">
<a
class="np-footer-social-links-link np-button-color"
href="{{ social_media_link.link }}"
target="_blank" title="{{ social_media_link.name }}"
>
<i class="np-footer-social-links-icon
np-button-color
fab fa-{{ social_media_link.name }}"
></i>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if website_footer.show_customer_service_email? and
website_footer.school_customer_service_email
%}
<div class="np-footer-support">
<div class="np-footer-support-item np-footer-support-help">
{% t .need_help %}
</div>
<div class="np-footer-support-item np-footer-support-email">
{% t .email %}
</div>
<a
class="np-footer-support-item np-footer-support-link np-button-color"
href="mailto:{{ website_footer.school_customer_service_email }}"
>
{{ website_footer.school_customer_service_email }}
</a>
</div>
{% endif %}
</div>
</footer>

View File

@ -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>

View File

@ -0,0 +1,273 @@
{% if current_person.signed_in? == false %}
<script>
if (localStorage.getItem('registered') == true) {
localStorage.removeItem('registered')
} else {
window.location.href = '/app/sign-up-follow-up'
}
</script>
{% endif %}
{% if current_person.signed_in? and current_person.properties.learner_completed_additional_info == false %}
{% unless current_person.email contains '+preview-' %}
<script>
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
window.location.href = '/app/dashboard'
} else {
window.location.href = '/app/sign-up-follow-up'
}
</script>
{% endunless %}
{% endif %}
{%- 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">
<a class="header-survey-link" href="https://baseline.campuslabs.com/htu/beta" target="_blank">
Tell Us What You Think!
</a>
<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 %}
<a
href="https://baseline.campuslabs.com/htu/beta" target="_blank"
class="np-header-mobile-menu-content-button"
>
Survey
</a>
<div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}
<script>
let nameAdjuster = () => {
let allCardNames = document.querySelectorAll('.course-card-title');
for(let i = 0; i < allCardNames.length; i++){
let base = allCardNames[i].textContent.slice(0, 95);
if(base.length > 94){
allCardNames[i].textContent = base.trim() + '...'
}
}
}
$( document ).ready(function() {
nameAdjuster();
});
</script>
<style>
@media screen and (min-width: 678px){
.header-survey-link{
color: #000;
cursor: pointer;
font-size: 16px;
font-weight: 400;
line-height: 25px;
padding-right: 15px;
text-decoration: none;
}
}
</style>

View File

@ -0,0 +1,17 @@
<header class="np-box-header np-header-color">
<a class="np-box-header-link" href="{% route home %}">
{% if current_school.logo_url %}
<img
alt="{{ current_school.name }}"
src="{{ current_school.logo_url }}"
class="np-box-header-logo"
/>
{% else %}
<span class="np-school-name np-header-font-color">
{{ current_school.name }}
</span>
{% endif %}
</a>
</header>
{% include "messages" %}

View File

@ -0,0 +1,5 @@
{% if learning_path.new_content_available? %}
{% include "learning_path_new_content_banner" %}
{% else %}
{% include "learning_path_completed_banner" %}
{% endif %}

View File

@ -0,0 +1,17 @@
{% if learning_path.has_certificate? %}
{% if learning_path.certificate_completed? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-certificate-link"
href="{{ learning_path.certificate_link }}"
>
<div class="np-learning-path-certificate">
{% include "learning_path_certificate_content" %}
</div>
</a>
{% else %}
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
{% include "learning_path_certificate_content" %}
</div>
{% endif %}
{% endif %}

View File

@ -0,0 +1,19 @@
<div class="np-learning-path-certificate-content">
<div class="np-learning-path-certificate-avatar" role="img">
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
<h5 class="np-learning-path-certificate-avatar-title">
{% t .avatar_title %}
</h5>
</div>
<h4 class="np-learning-path-certificate-name">
{{ learning_path.certificate_name }}
</h4>
{% if learning_path.certificate_completed? %}
<time
class="np-learning-path-certificate-issue-date"
datetime="{{ learning_path.certificate_issue_date }}"
>
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
</time>
{% endif %}
</div>

View File

@ -0,0 +1,13 @@
<div class="np-learning-path-completed-banner np-learning-path-banner">
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
{% endif %}
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
</div>
</div>
</div>

View File

@ -0,0 +1,56 @@
{% if learning_path.enrolled? and course.unlocked? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-outline-item np-card-container"
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
>
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
{% if course.instructors %}
<div class="np-learning-path-outline-caption">
{{ course.instructors }}
</div>
{% endif %}
<div class="np-learning-path-outline-progress
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
{% else %}
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
</div>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
{% endif %}

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .about %}
</h3>
<div class="np-card-text">
{{ learning_path.description }}
</div>

View File

@ -0,0 +1,21 @@
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="np-card-container">
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
<div class="np-card-padding-dynamic">
{% include "learning_path_description" %}
{% include "learning_path_instructors" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 np-grid-spacing">
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
{% include "learning_path_outline" %}
</div>
</div>

View File

@ -0,0 +1,12 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
<div class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-icon-back"></i>
</a>
{{ learning_path.name }}
</div>
</div>

View File

@ -0,0 +1,2 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_desktop_content" %}

View File

@ -0,0 +1,26 @@
{% if learning_path.instructors.any? %}
<div class="np-card-content-divider">
<h3 class="np-card-heading">
{% t shared.instructors %}
</h3>
<div class="np-content-instructors-content row">
{% for instructor in learning_path.instructors %}
<div class="np-content-instructors-content-item col-xs-12 col-lg">
<img
src="{{ instructor.avatar_url }}"
class="np-content-instructors-content-image"
alt="{{ instructor.name }}"
>
<div class="np-content-instructors-content-description">
<div class="np-content-instructors-content-name">
{{ instructor.name }}
</div>
<div class="np-content-instructors-content-info np-text-light">
{{ instructor.title }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}

View File

@ -0,0 +1,19 @@
{% if learning_path.in_progress? %}
{% include "learning_path_outline" %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_description" %}
</div>
{% else %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_description" %}
</div>
<div class="np-card-spacing">
{% include "learning_path_outline" %}
</div>
{% endif %}
{% if learning_path.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_instructors" %}
</div>
{% endif %}

View File

@ -0,0 +1,17 @@
<div class="np-resource-header np-card-padding-vertical">
<div class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
{{ learning_path.name }}
</div>
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
</div>

View File

@ -0,0 +1,2 @@
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

View File

@ -0,0 +1,12 @@
<div class="np-learning-path-new-content-banner np-learning-path-banner">
<div class="np-learning-path-banner-content">
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
<p class="np-learning-path-banner-description">{% t .description %}</p>
<div class="np-learning-path-banner-actions">
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
{% if learning_path.certificate_link %}
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
{% endif %}
</div>
</div>
</div>

View File

@ -0,0 +1,10 @@
<div class="np-learning-path-outline">
{% for item in learning_path.items %}
{% if item.course? %}
{% include "learning_path_course", course: item %}
{% elsif item.training_event? %}
{% include "learning_path_training_session", training_session: item %}
{% endif %}
{% endfor %}
{% include "learning_path_certificate" %}
</div>

View File

@ -0,0 +1,20 @@
{% if learning_path.enrolled? %}
<div class="np-top-cta-progress-content">
<div class="np-top-cta-progress-title np-text-title">
{% t .progress %}
</div>
<div class="np-progress-bar-container">
<div
style="width: {{ learning_path.progress }}%"
class="np-button-background-color np-card-progress-bar">
</div>
</div>
<div class="np-top-cta-progress-text
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
">
{% t shared.progress, count: learning_path.progress %}
</div>
</div>
{% endif %}
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}

View File

@ -0,0 +1,3 @@
{% include "learning_path_desktop_header" %}
{% include "learning_path_banners" %}
{% include "learning_path_desktop_content" %}

View File

@ -0,0 +1,5 @@
<div class="np-card-padding">
{% include "learning_path_banners" %}
</div>
{% include "learning_path_mobile_header" %}
{% include "learning_path_mobile_content" %}

View File

@ -0,0 +1,53 @@
{% if learning_path.enrolled? and training_session.unlocked? %}
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
<a
class="np-learning-path-outline-item np-card-container"
href="{% route training_session, id: training_session.id %}"
>
<div class="np-card-content np-card-padding">
<div class="np-events-content-date np-button-background-color">
<div class="np-events-content-month">
{{ training_session.month }}
</div>
<div class="np-events-content-day">
{{ training_session.day }}
</div>
</div>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
{{ training_session.time }} {{ training_session.time_zone }}
</div>
</div>
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
{% if training_session.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</a>
{% else %}
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
<div class="np-card-content np-card-padding">
<div class="np-events-content-date np-button-background-color">
<div class="np-events-content-month">
{{ training_session.month }}
</div>
<div class="np-events-content-day">
{{ training_session.day }}
</div>
</div>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
</div>
{% if training_session.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
{% endif %}

View File

@ -0,0 +1,14 @@
<div class="np-learning-paths-resources">
{% if items.any? %}
{% for learning_path in items %}
{% include "cards_learning_path" with learning_path %}
{% endfor %}
{% else %}
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
</div>
{% endif %}
</div>

View File

@ -0,0 +1,19 @@
{% if messages.alert.size > 0 %}
<div class="np-alert np-alert-error">
<div class="np-alert-wrapper">
{% for message in messages.alert %}
<div>{{ message }}</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if messages.notice.size > 0 %}
<div class="np-alert np-alert-success">
<div class="np-alert-wrapper">
{% for message in messages.notice %}
<div>{{ message }}</div>
{% endfor %}
</div>
</div>
{% endif %}

View File

@ -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>

View File

@ -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.enrolled %}
{% 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_names_for_course_cards }}">
{% include "cards_course" with course, flag: 'null' %}
</div>
{% endif %}
{% endfor %}
</div>

View File

@ -0,0 +1,503 @@
<div class="info-form" id="dialog_Q6szN">
<section class="info-form-container">
<div class="info-form-content">
<div class="modal-intro">
<div class="header">Tell Us More!</div>
<p>Providing more information about yourself can unlock more relevent content</p>
</div>
{%- comment -%} <div class="input-wrapper">
<label for="learner-name">Name</label>
<input type="text" name="learner-name" value="" />
</div>
<div class="input-wrapper">
<label for="learner-email">Email Address</label>
<input type="text" name="learner-email" value="" />
</div> {%- endcomment -%}
<div class="input-wrapper">
<label for="learner-title">Title</label>
<input type="text" name="learner-title" value="" />
</div>
<div class="input-wrapper">
<label for="role"><span class="required">*</span>What brought you to Anthology Academy?</label>
<select name="primary-role">
<option value="" selected>Select</option>
<option value="Product Expert">I’d like to become an expert user of my Anthology product(s).</option>
<option value="Product Implementation">I am implementing a new Anthology product.</option>
{%- comment -%} <option value="Parent">Parent</option> {%- endcomment -%}
<option value="Professional Development">I’m seeking professional development for higher ed faculty and staff.</option>
<option value="Reference">I was directed to this site by someone on my campus.</option>
<option value="Blackboard Learner">I am a Blackboard Academy user and am here to explore.</option>
<option value="Anthology Academy User">I am an Anthology Academy user, ready to check out the new site.</option>
<option value="Other">Other</option>
</select>
<div class="input-wrapper" style="display:none;" id="primaryRoleOther">
<label for="primary-role-other">If other, please specify</label>
<input type="text" name="primary-role-other" value="" />
</div>
</div>
<div class="input-wrapper">
<input type="checkbox" id="privacy" name="privacy" value="yes">
<label class="checkbox" for="privacy">Please confirm that you have read and agree to Anthology's <a href="{{current_school.terms_of_service_url}}" target="_blank">Terms of Service.</a></label>
</div>
<div class="input-wrapper">
<input type="checkbox" id="consent" name="consent" value="yes">
<label class="checkbox" for="consent">Please confirm that you have read and agree to Anthology's <a href="https://www.anthology.com/trust-center/privacy-statement" target="_blank">Privacy Policy.</a></label>
</div>
<button class="np-button disabled" id="updateInfoBtn">Update</button>
</div>
</section>
</div>
<script>
let unlockButton = () => {
let privacyCheckboxField = $("input[name='privacy']");
let consentCheckboxField = $("input[name='consent']");
if(privacyCheckboxField[0].checked && consentCheckboxField[0].checked){
$("#updateInfoBtn").removeClass('disabled');
} else {
$("#updateInfoBtn").addClass('disabled');
}
}
$("input[name='privacy']").change(function(){
unlockButton();
})
$("input[name='consent']").change(function(){
unlockButton();
})
$("#updateInfoBtn").click(function(e) {
e.preventDefault()
validateForm()
})
$("select[name='primary-role']").change(function() {
if ($(this).val() == "Other") {
$("#primaryRoleOther").show()
} else {
$("#primaryRoleOther").hide()
$("#primaryRoleOther").find("input").val('')
}
})
function validateForm() {
let allDataValidated = false;
//Final user data
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: '{{current_person.first_name}} {{current_person.last_name}}',
learner_email: '{{current_person.email}}',
learner_title: '',
primaryRole: '',
primaryRoleOther: '',
}
// get all form values
//let learnerName = $("input[name='learner-name']").val();
//let learnerEmail = $("input[name='learner-email']").val();
let learnerTitle = $("input[name='learner-title']").val();
let primaryRoleField = $("select[name='primary-role']").val();
let primaryRoleOtherField = $("input[name='primary-role-other']").val();
let privacyCheckboxField = $("input[name='privacy']");
let consentCheckboxField = $("input[name='consent']");
//learnerName == "" ? "" : userData.learner_name = learnerName;
//learnerEmail == "" ? "" : userData.learner_email = learnerEmail;
learnerTitle == "" ? "" : userData.learner_title = learnerTitle;
primaryRoleField == "" ? "" : userData.primaryRole = primaryRoleField;
if (primaryRoleField == "Other") {
primaryRoleOtherField == "" ? "" : userData.primaryRoleOther = primaryRoleOtherField
};
privacyCheckboxField[0].checked ? userData.privacyCheckbox = true : userData.privacyCheckbox = false;
consentCheckboxField[0].checked ? userData.consentCheckbox = true : userData.consentCheckbox = false;
console.log(userData)
let formHasErrors = false
//if(!learnerName){
// $("input[name='learner-name']").addClass('err')
// formHasErrors = true
//}
//if(!learnerEmail){
// $("input[name='learner-email']").addClass('err')
// formHasErrors = true
//}
if(!learnerTitle){
$("input[name='learner-title']").addClass('err')
formHasErrors = true
}
if (!primaryRoleField) {
$("select[name='primary-role']").addClass('err')
formHasErrors = true
} else {
$("select[name='primary-role']").removeClass('err')
if (primaryRoleField == "Other") {
if (!primaryRoleOtherField) {
$("input[name='primary-role-other']").addClass('err')
formHasErrors = true
} else {
$("input[name='primary-role-other']").removeClass('err')
}
}
}
if (formHasErrors) {
console.log("has errors")
} else {
console.log("submit form info")
formHasErrors = false
submitValidatedDataToLocalStorage(userData)
submitValidatedDataToWorkato(userData)
}
}
function submitValidatedDataToLocalStorage(data) {
console.log("submitting user data to local storage")
// Save entered data as individual variables in local storage for later use
//localStorage.setItem("learnerDiocese", data.diocese);
//localStorage.setItem("learnerGuardianEmail", data.guardianEmail);
//localStorage.setItem("learnerGroups", data.northpassGroups);
//localStorage.setItem("learnerAge", data.overEighteen);
//localStorage.setItem("learnerName", data.learner_name);
//localStorage.setItem("learnerEmail", data.learner_email);
localStorage.setItem("learnerTitle", data.learner_title);
localStorage.setItem("learnerPrimaryRole", data.primaryRole);
localStorage.setItem("learnerPrimaryRoleOther", data.primaryRoleOther);
//localStorage.setItem("learnerSecondaryRoles", data.secondaryRoles);
//localStorage.setItem("learnerStudentsTaughtCount", data.studentsTaughtCount);
//localStorage.setItem("learnerWorkplace", data.workplace);
// Set isValidated value in local storage to true
localStorage.setItem("learnerCompletedAdditionalInfo", "true");
}
function submitValidatedDataToWorkato(data) {
console.log("submitting user data to Workato")
console.log(data);
const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")
$('#updateInfoBtn').prop("disabled",true);
$('#updateInfoBtn').addClass('submitting')
$('.loader').show()
$('#updateInfoBtn span').text('Completing Registration')
$.ajax({
url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
data: JSON.stringify(data),
method: 'POST',
success: function(res){
console.log(res)
window.location.replace('/app/dashboard');
},
error: function (xhr, status, error) {
console.error("Error posting to workato!");
if (secondaryInfoStored == "true") {
console.log("secondary information completed and stored in local storage")
setTimeout(function() {
document.querySelector(".info-form-trigger").click()
}, 1000)
}
}
});
}
</script>
<style>
.info-form {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 900;
display: flex;
padding: 1em;
/*background-color: rgba(0,0,0,.75);
pointer-events: none; */
transition: .25s ease-out;
overflow: scroll;
max-width: 900px;
margin: auto;
}
.disabled{
background: #808080;
pointer-events: none;
}
.disabled:hover{
background: #808080;
}
.err {
border: 2px solid red!important;
}
.radio-err {
outline: 2px solid red;
}
.info-form-trigger {
color: #015893;
opacity:0;
}
.info-form-trigger:hover,
.info-form-trigger:focus {
text-decoration: none;
}
.info-form.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.info-form-container {
width: 100%;
margin: auto;
transform: translateY(-1em) scale(.95);
background-color: white;
transition: transform .25s ease-out;
}
.info-form.is-active .info-form-container {
transform: translateY(0) scale(1);
}
.info-form-header,
.info-form-content,
.info-form-footer {
padding: 16px;
}
.info-form-footer {
background-color: whitesmoke;
text-align: right;
}
.info-form-footer button {
display: inline-block;
padding: .25em .5em;
border: none;
background-color: #015893;
color: white;
}
.info-form-footer button:hover,
.info-form-footer button:focus {
background-color: white ;
color: #fff;
}
.modal-intro {
text-align:center;
margin:12px 32px 32px;
}
.modal-intro .header {
font-size:26px;
font-weight:700;
}
.info-form-content {
max-height: 90vh;
overflow: scroll;
}
.info-form-content .input-wrapper {
margin-bottom: 16px;
}
.info-form-content .input-wrapper label,
.info-form-content .input-wrapper p {
display: block;
margin-bottom: 6px;
font-size: 14px;
color:#264c6f;
font-weight: 500;
}
.info-form-content .input-wrapper label.checkbox {
display: inline;
}
.info-form-content .input-wrapper input[type='text'],
.info-form-content .input-wrapper input[type='number'],
.info-form-content .input-wrapper select {
width:100%;
background-color: hsla(0,0%,40%,.05);
border: 1px solid #264c6f;
border-radius: 6px;
padding: 14px 18px;
}
.info-form-content .input-wrapper select {
cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3C/svg%3E");
background-position: 98% 50%;
background-size: 15px;
background-repeat: no-repeat;
}
.info-form-content .input-wrapper select:after {
content: "";
position: absolute;
right: 14px;
top: calc(50% - 6px);
display: inline-block;
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 8px;
height: 8px;
transform: rotate(45deg) translateY(calc(-50% + 5px));
}
.info-form-content .input-wrapper select:focus {
-webkit-box-shadow: inset 0 0 0 2px #264c6f;
box-shadow: inset 0 0 0 1px #264c6f;
border-color: #264c6f;
}
#addAdditionalRole {
margin-bottom: 18px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
fieldset {
padding:16px;
display: flex;
flex-wrap: wrap;
}
legend {
font-size: 14px;
padding: 0 8px;
}
.checkbox-wrapper {
display:flex;
align-items:center;
margin-bottom:8px;
width:50%;
}
.checkbox-wrapper label {
margin:0 0 0 8px!important;
}
.diocese-dropdown-btn {
cursor: pointer;
width: 100%;
text-align: left;
position:relative;
background-color: hsla(0,0%,40%,.05);
border: 1px solid #264c6f;
border-radius: 6px;
padding: 16px 18px;
}
.diocese-dropdown-btn:after {
content: "";
position: absolute;
right: 14px;
top: calc(50% - 6px);
display: inline-block;
border-right: 2px solid black;
border-bottom: 2px solid black;
width: 8px;
height: 8px;
transform: rotate(45deg) translateY(calc(-50% + 5px));
}
.diocese-dropdown.dropdown-open .diocese-dropdown-btn:after {
transform: rotate(-135deg) translateY(-50%);
}
/* The search field */
#dioceseInput {
box-sizing: border-box;
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 490.4 490.4' style='enable-background:new 0 0 490.4 490.4;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796 s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
background-position: 12px 50%;
background-repeat: no-repeat;
background-size: 16px auto;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
width:100%;
}
#dioceseInput:focus {outline: 3px solid #c9c2bc;}
.diocese-dropdown {
position: relative;
display: inline-block;
width:100%;
}
/* Dropdown Content (Hidden by Default) */
.diocese-dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
width:100%;
max-height: 250px;
overflow: scroll;
}
.diocese-dropdown-content .diocese-item {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.diocese-dropdown-content .diocese-item:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.dropdown-show {display:block;}
#updateInfoBtn.submitting {
background-color:#63666a;
cursor:text;
}
@media (min-width:768px) {
.info-form-header,
.info-form-content,
.info-form-footer {
padding: 32px 64px;
}
.info-form-content .input-wrapper {
margin-bottom: 22px;
}
}
</style>

View File

@ -0,0 +1,283 @@
<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;"
/>
{%- comment -%} <div class="profile-bio-header">
Account Details
</div> {%- endcomment -%}
<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>
</div>
</div>
<div class="product-subscriptions-card-wrapper">
<div class="product-subscriptions-card">
{% 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">
<span class="subscription-name" style="border: none;">
Product Subscriptions
</span>
{%- comment -%} <span class="subscription-level">
PLAN
</span> {%- endcomment -%}
</div>
<ul class="product-subscriptions">
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
<div class="product-subscription-level-header">
Essential
</div>
<div style="background: #795CA0; height: 3px; margin: 5px; width: 20px;"></div>
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Essential' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endif %}
{% endfor %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced
</div>
<div style="background: #49A9E1; height: 3px; margin: 5px; width: 20px;"></div>
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced' %}
{% unless product_sub_level contains 'Enhanced+' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endunless %}
{% endif %}
{% endfor %}
<div class="product-subscription-level-header" style="margin-top: 20px;">
Enhanced Plus
</div>
<div style="background: #E26B37; height: 3px; margin: 5px; width: 20px;"></div>
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
{% if product_sub_level contains 'Enhanced+' %}
<li class="product-subscription">
{% include "profile_logo_calculator", product: name_level_pair[0] %}
{%- comment -%} <span class="subscription-name">
{{ name_level_pair[0] }}
</span> {%- endcomment -%}
{%- comment -%} <span class="subscription-level">
{{ name_level_pair[1] }}
</span> {%- endcomment -%}
{%- 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 -%}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
<style>
.profile-card-container{
margin-bottom: 45px;
}
/* .profile-card-wrapper{
background: #AA7FB8;
border: 1px solid #EFEFEF;
padding-top: 14px;
} */
.profile-card{
background: #FFF;
border: 1px solid #f2f4f5;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
margin-bottom: 25px;
/* padding: 12px;
padding-bottom: 32px; */
padding: 45px 0;
width: 100%;
}
.profile-bio{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.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{
line-height: 25px;
text-align: center;
}
.profile-bio-name{
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
.profile-bio-email{
font-size: 16px;
font-weight: 400;
margin-bottom: 35px;
}
.profile-bio-account-settings-button{
background-color: #aa7fb8;
border-radius: 25px;
color: #FFF;
font-weight: 400;
line-height: 1;
margin: 20px 30px;
padding: 12px 18px 12px;
position: relative;
text-align: center;
text-decoration: none;
transition: .3s ease all;
}
.product-subscriptions-card{
border: 1px solid #f2f4f5;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
}
.product-subscriptions-banner{
align-items: center;
/* background: #EAEAEA; */
border-bottom: 1px solid #f2f4f5;
display: flex;
/* font-size: 14px;
font-weight: 400; */
font-size: 16px;
font-weight: 600;
height: 55px;
justify-content: center;
/* line-height: 25px; */
}
.product-subscriptions{
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
.product-subscription-level-header{
color: #595959;
font-size: 1em;
/* margin-bottom: 10px; */
}
.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: 25px; */
margin: 3px 0;
}
.profile-card-product-logo{
height: 1.25em;
}
/* .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>

View File

@ -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://s3.amazonaws.com/static.northpass.com/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://s3.amazonaws.com/static.northpass.com/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='profile-card-product-logo'/>
</span>
{% endif %}

View File

@ -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>

View File

@ -0,0 +1,19 @@
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,13 @@
<div class="np-card np-search-zero-state">
<div class="np-card-container">
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
<h3 class="np-search-zero-state-title">
{% t .nothing_found %}
</h3>
<div class="np-search-zero-state-subtitle">
{% t .empty %}
</div>
<div class="np-search-zero-state-image"></div>
</div>
</div>
</div>

View File

@ -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>

View File

@ -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>

View File

@ -0,0 +1,53 @@
<div class="np-filter">
<div class="dropdown">
<button
class="np-button dropdown-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t shared.filters.filter %}
</button>
<div class="dropdown-menu" data-test="modal">
<form method="get">
<span class="dropdown-label">
{% t shared.filters.by_event_type %}
</span>
<ul class="dropdown-checkboxes">
{% for event_type in training_events.filters.event_types %}
{% capture label %}
{% t shared.event_types, key: event_type.value %}
{% endcapture %}
<li>
{% include "filter_checkbox",
label: label,
name: event_type.name,
value: event_type.value
selected: event_type.selected?
%}
</li>
{% endfor %}
</ul>
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
{%
include "filter_select",
filters: training_events.filters.courses,
key: "courses_uuid",
label: label
%}
<button
class="np-button dropdown-button-apply"
data-toggle-trigger-off
type="submit"
>
{% t shared.filters.apply %}
</button>
</form>
</div>
</div>
</div>

View File

@ -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 Events</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>

View File

@ -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>

View File

@ -0,0 +1,52 @@
<div class="dropdown dropdown-calendar">
<button
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
data-toggle-class="is-open"
data-toggle-escape
data-toggle-outside
data-toggle-target-next
type="button"
>
{% t .add_to_calendar %}
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
</button>
<ul class="dropdown-calendar-menu">
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.google_calendar_url }}"
target="_blank"
>
{% t .google_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_calendar_url }}"
target="_blank"
>
{% t .outlook_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.outlook_office_calendar_url }}"
target="_blank"
>
{% t .office_calendar %}
</a>
</li>
<li class="dropdown-calendar-item">
<a
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
href="{{ training_session.ical_calendar_url }}"
target="_blank"
>
{% t .ical_calendar %}
</a>
</li>
</ul>
</div>

View File

@ -0,0 +1,53 @@
{% if training_session.approved? %}
<div class="np-training-session-cta-note">
<i class="far fa-check np-training-session-icon"></i>
{% t .registered %}
</div>
{% elsif training_session.pending? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .pending %}
</div>
{% elsif training_session.denied? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .denied %}
</div>
{% elsif training_session.too_late? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .too_late %}
</div>
{% elsif training_session.no_seats? %}
<div class="np-training-session-cta-note np-training-session-cta-note-error">
{% t .no_seats %}
</div>
{% endif %}
<div class="np-training-session-cta">
<div class="np-training-session-cta-buttons">
<form
action="{% route training_session_registration, id: training_session.id %}"
method="post"
>
{% form_authenticity_token %}
{% if training_session.internal? and training_session.approved? %}
{% if features.training_events_google_calendar? %}
{% include "training_session_calendars" %}
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
{% t .unregister %}
</button>
{% else %}
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
{% t .unregister %}
</button>
{% endif %}
<input type="hidden" name="_method" value="delete" />
{% endif %}
{% if training_session.not_registered? %}
<button type="submit" class="np-top-button np-button np-button-big">
{% t .register %}
</button>
{% endif %}
</form>
</div>
</div>

View File

@ -0,0 +1,14 @@
<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_session.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_session.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_session.year }}
</div>
</div>
</div>

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .header %}
</h3>
<div class="np-card-text">
{{ training_event.description }}
</div>

View File

@ -0,0 +1,40 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
{% include "training_session_header" %}
</div>
<div class="row">
<div class="col-xs-12 col-sm-7">
<div class="np-card-container">
<div class="row">
<div class="col-xs-12 col-sm-5">
{% include "training_session_details" %}
</div>
<div class="col-xs-12 col-sm-7">
{% include "training_session_cta" %}
</div>
</div>
<div class="np-card-padding-large">
<div class="np-card-content-divider">
{% include "training_session_description" %}
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-5 np-grid-spacing">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% if training_event.sessions.size > 1 %}
{% include "training_session_more_sessions" %}
{% else %}
<div class="np-training-session-zero-state">
<img
alt="{% t .empty %}"
class="np-zero-state-training-sessions"
/>
<div class="np-training-session-zero-state-text">
{% t .empty %}
</div>
</div>
{% endif %}
</div>
</div>

View File

@ -0,0 +1,24 @@
<div class="np-card-spacing-large">
{% include "training_session_date" %}
<div class="np-training-session-time">
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
{{ training_session.time_period }} {{ training_session.time_zone }}
</div>
{% if training_session.location %}
<div class="np-training-session-location">
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
{{ training_session.location }}
</div>
{% endif %}
{% if training_session.session_url %}
<div class="np-training-session-location">
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
{{ training_session.session_url }}
</a>
</div>
{% endif %}
</div>

View File

@ -0,0 +1,10 @@
<div class="np-top-vocabulary np-text-title">
{% t shared.event_types, key: training_event.event_type %}
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
{{ training_event.title }}
</div>

View File

@ -0,0 +1,22 @@
<div class="np-card-container-training-session">
<div class="np-card-spacing-large">
{% include "training_session_header" %}
</div>
{% include "training_session_details" %}
<div class="np-card-padding-large">
{% include "training_session_cta" %}
</div>
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "training_session_description" %}
</div>
{% if training_event.sessions.size > 1 %}
<div class="np-card-spacing">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% include "training_session_more_sessions" %}
</div>
{% endif %}

View File

@ -0,0 +1,3 @@
{% for session in training_event.sessions %}
{% include "training_session_tile", current_session: training_session %}
{% endfor %}

View File

@ -0,0 +1,17 @@
{% if current_session.id != session.id %}
<a
class="np-training-session-tile"
href="{% route training_session, id: session.id %}"
>
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
<div>
<div class="np-training-session-tile-date">
{{ session.month }} {{ session.day }}, {{ session.year }}
</div>
<div class="np-training-session-tile-time">
{{ session.time_period }} {{ session.time_zone }}
</div>
</div>
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
</a>
{% endif %}

View File

@ -0,0 +1,14 @@
{% include "header" %}
<main class="np-main np-subpage-container np-account">
<div class="np-hidden-desktop">
{% include "account_mobile_view", form: form %}
</div>
<div class="np-hidden-mobile np-flex np-flex-center">
{% include "account_desktop_view", form: form %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,59 @@
<main class="np-box-container np-open-access">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
{% form_authenticity_token %}
<div class="np-form-headline">
{% t shared.welcome_to_school, school_name: current_school.name %}
</div>
<div class="np-form-subheadline">
{% t .headline, key: current_school.course_vocabulary %}
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_first_name">
{% t shared.first_name %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="text"
name="first_name"
id="learner_first_name"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
type="text"
name="last_name"
id="learner_last_name"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
class="np-input"
type="text"
name="email"
id="learner_email"
value="{{ form.email }}"
/>
</div>
<input
type="submit"
name="commit"
value="{% t shared.enter %}"
class="np-button np-button-big np-form-action"
/>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,59 @@
<main class="np-box-container np-open-access">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
{% form_authenticity_token %}
<div class="np-form-headline">
{% t shared.welcome_to_school, school_name: current_school.name %}
</div>
<div class="np-form-subheadline">
{% t .headline, key: current_school.course_vocabulary %}
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_employee_id">
{% t shared.employee_id %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="text"
name="employee_id"
id="learner_employee_id"
value="{{ form.employee_id }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_first_name">
{% t shared.first_name %}
</label>
<input
class="np-input"
type="text"
name="first_name"
id="learner_first_name"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
type="text"
name="last_name"
id="learner_last_name"
value="{{ form.last_name }}"
/>
</div>
<input
type="submit"
name="commit"
value="{% t shared.enter %}"
class="np-button np-button-big np-form-action"
/>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,40 @@
<main class="np-box-container np-open-access">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
{% form_authenticity_token %}
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="text"
name="last_name"
id="learner_last_name"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_phone_number">
{% t shared.phone_number %}
</label>
<input
class="np-input"
type="text"
name="phone_number"
id="learner_phone_number"
value="{{ form.phone_number }}"
/>
</div>
<button type="submit" class="np-button np-button-big np-form-action">
{% t shared.enter %}
</button>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,74 @@
<main class="np-box-container np-open-access">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
{% form_authenticity_token %}
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="email"
name="email"
id="learner_email"
value="{{ form.email }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_first_name">
{% t shared.first_name %}
</label>
<input
class="np-input"
type="text"
name="first_name"
id="learner_first_name"
value="{{ form.first_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_last_name">
{% t shared.last_name %}
</label>
<input
class="np-input"
type="text"
name="last_name"
id="learner_last_name"
value="{{ form.last_name }}"
/>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_phone_number">
{% t shared.phone_number_optional %}
</label>
<input
class="np-input"
type="text"
name="phone_number"
id="learner_phone_number"
value="{{ form.phone_number }}"
/>
</div>
<div class="np-form-field np-open-access-terms">
<input type="hidden" name="terms" value="0" />
<input id="terms" type="checkbox" name="terms" value="1" />
<label for="terms" class="np-open-access-terms-checkbox">
{{ current_school.custom_terms }}
</label>
</div>
<input
type="submit"
name="commit"
value="{% t shared.enter %}"
class="np-button np-button-big np-form-action"
/>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,23 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="np-resource-title">{{ catalog.headline }}</div>
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
</div>
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
{% if courses.in_catalog.any? %}
{%
include "filter_dropdown",
filters: courses.filters,
key: "category_uuid",
label: label
%}
{% endif %}
</div>
{% include "courses_catalog" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,10 @@
{% 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" %}

View File

@ -0,0 +1,11 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-courses np-subpage-container np-max-width">
<div class="np-resource-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
<div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div>
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,271 @@
{% 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-subtitle">
Track Progress and Continue Learning
</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">
<div class="dashboard-filter-label">Filter By: </div>
{% include "filter_by_product", page: 'Dashboard' %}
</div>
</div>
<div id="dashboard-resources-pane">
<div class="np-dashboard-resources-title">
Your Resources
</div>
{% 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>
{%- comment -%} {% assign swapper_spacer = 0 %}
{% for course in courses.enrolled %}
{% unless course.progress == 0 %}
{% assign swapper_spacer = 1 %}
{% endunless %}
{% endfor %} {%- endcomment -%}
<style>
.dashboard-main-title{
color: #0a0a0a;
font-size: 2em;
font-weight: 900;
line-height: 2.375REM;
margin-bottom: 12px;
}
.dashboard-subtitle{
color: #595959;
font-size: 1.25rem;
font-weight: 400;
margin-bottom: 24px;
}
.np-dashboard-resources-title{
color: #000000;
font-size: 1.5em;
font-weight: 600;
line-height: 25px;
margin-bottom: 25px;
text-transform: none;
}
.dashboard-control-panel{
align-items: center;
border-bottom: 1px solid #F2F4F5;
display: flex;
flex-direction: column-reverse;
justify-content: center;
margin-top: 24px;
margin-bottom: 30px;
}
.view-swapper-container{
display: flex;
flex-direction: row;
height: 40px;
justify-content: flex-start;
width: 100%;
}
.view-swapper-button{
align-items: center;
color: #595959;
display: flex;
font-size: 15px;
font-weight: 400;
justify-content: center;
text-align: center;
width: 125px;
}
.view-swapper-button-active{
background: #f2f4f5;
color: #000;
font-weight: 600;
/* border-bottom: 2px solid #000000; */
margin-bottom: -1px;
}
.view-swapper-button:hover{
cursor: pointer;
}
.filter-buttons-container{
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.dashboard-filter-label{
color: #595959;
font-size: 1em;
font-weight: 700;
padding-right: 10px;
}
#dashboard-events-pane,
#dashboard-completed-pane{
display: none;
}
.product-filter-container{
margin: 0;
}
@media screen and (min-width: 768px){
.np-dashboard{
padding: 70px 24px;
}
.dashboard-main-title{
margin-bottom: 16px;
}
.dashboard-control-panel{
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.view-swapper-container{
margin-bottom: -38px;
width: unset;
}
.dashboard-learning-content{
margin: 0;
padding: 0;
}
.dashboard-courses-index{
margin: 0;
margin-left: -10px;
}
}
</style>
{%- comment -%} {% if swapper_spacer == 0 %}
<style>
.view-swapper-container{
margin-bottom: 0 !important;
}
</style>
{% endif %} {%- endcomment -%}

View File

@ -0,0 +1,25 @@
<main class="np-box-container">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{% route forgot_password_create %}" method="post" novalidate>
{% form_authenticity_token %}
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
autofocus="autofocus"
class="np-input"
id="learner_email"
name="learner[email]"
type="email"
>
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t .button_label %}
</button>
</form>
</div>
</div>
</main>

View File

@ -0,0 +1,371 @@
<script>
function showPopup() {
setTimeout(function() {
console.log("show popup")
document.querySelector(".info-form-trigger").click()
}, 3000)
}
function rerunAdditionalLearnerInfoWorkflow(data) {
console.log("re-running workflow with local storage data: ", data)
$.ajax({
url: "https://webhooks.workato.com/webhooks/rest/604b4fc0-fcd9-4f3b-b715-b42d7f740ba6/additional-info-form-submitted",
data: JSON.stringify(data),
method: 'POST',
success: function(res){
console.log(res)
window.location.replace('/app/dashboard');
},
error: function (xhr, status, error) {
console.error("Error posting to workato!");
if (secondaryInfoStored == "true") {
console.log("secondary information completed and stored in local storage")
setTimeout(function() {
document.querySelector(".info-form-trigger").click()
}, 1000)
}
}
});
}
</script>
{% 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>
{%- comment -%} {% if current_person.email contains "+preview" %}
<form 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=""
onkeyup="searchCourses()"
/>
<i class="far fa-search search-icon"></i>
</form>
{% else %}
<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>
{% endif %} {%- endcomment -%}
<form 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=""
onkeyup="searchCourses()"
/>
<i class="far fa-search search-icon"></i>
</form>
</div>
{%- comment -%} {% if current_person.email contains "+preview" %}
<div class="catalog-filter-component">
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
<div class="filter-buttons-container">
{% include "filter_by_product", page: 'Homepage' %}
</div>
</div>
{% endif %} {%- endcomment -%}
<div class="catalog-filter-component">
<span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
<div class="filter-buttons-container">
{% include "filter_by_product", page: 'Homepage' %}
</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 %}
{%- comment -%} {% if renderPopular == true %}
{% include "popular_courses_non_carousel" %}
{% endif %} {%- endcomment -%}
{% 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" %}
<script>
let searchCourses = () => {
let homepageCourses = document.querySelector('.np-catalog-courses').children;
for(let i = 0; i < homepageCourses.length; i++){
if(event.target.value.length == 0){
if(!homepageCourses[i].classList.contains('filtered')){
homepageCourses[i].style.display = 'block';
}
homepageCourses[i].classList.remove('hidden-by-search');
}
let courseName = homepageCourses[i].querySelector('.np-card-content-title').textContent.toLowerCase();
if(courseName.indexOf(event.target.value) > -1){
if(!homepageCourses[i].classList.contains('filtered')){
homepageCourses[i].style.display = 'block';
}
homepageCourses[i].classList.remove('hidden-by-search');
} else {
homepageCourses[i].style.display = 'none';
homepageCourses[i].classList.add('hidden-by-search');
}
};
}
</script>
{% if current_person.signed_in? %}
{% unless current_person.email contains "+preview" %}
{% if current_person.properties.learner_completed_additional_info == false %}
<script>
console.log('user not completed additional info')
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo")
const learnerName = localStorage.getItem("learnerName");
const learnerEmail = localStorage.getItem("learnerEmail");
const learnerTitle = localStorage.getItem("learnerTitle");
const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: learnerName,
leaner_northpass_name: '{{current_person.first_name}} {{current_person.last_name}}',
learner_email: learnerEmail,
learner_northpass_email: '{{current_person.email}}',
learner_title: learnerTitle,
primaryRole: learnerPrimaryRole,
primaryRoleOther: learnerPrimaryRoleOther,
}
rerunAdditionalLearnerInfoWorkflow(userData)
} else {
showPopup()
}
</script>
{% elsif current_person.properties.learner_completed_additional_info == true %}
<script>
console.log("property is set, deleting local storage")
localStorage.removeItem("learnerCompletedAdditionalInfo")
localStorage.removeItem("learnerName");
localStorage.removeItem("learnerEmail");
localStorage.removeItem("learnerTitle");
localStorage.removeItem("learnerPrimaryRole");
localStorage.removeItem("learnerPrimaryRoleOther");
</script>
{% else %}
<script>
console.log('custom prop doesnt yet exist')
if (localStorage.getItem('learnerCompletedAdditionalInfo') != null) {
const secondaryInfoStored = localStorage.getItem("learnerCompletedAdditionalInfo");
const learnerName = localStorage.getItem("learnerName");
const learnerEmail = localStorage.getItem("learnerEmail");
const learnerTitle = localStorage.getItem("learnerTitle");
const learnerPrimaryRole = localStorage.getItem("learnerPrimaryRole");
const learnerPrimaryRoleOther = localStorage.getItem("learnerPrimaryRoleOther");
let userData = {
learner_uuid: '{{current_person.id}}',
learner_name: '{{current_person.first_name}} {{current_person.last_name}}'
learner_email: '{{current_person.email}}',
learner_title: learnerTitle,
primaryRole: learnerPrimaryRole,
primaryRoleOther: learnerPrimaryRoleOther,
}
rerunAdditionalLearnerInfoWorkflow(userData)
} else {
showPopup()
}
</script>
{% endif %}
{% endunless %}
{% endif %}
<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; */
}
}
@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>

View File

@ -0,0 +1,10 @@
{% include "header" %}
<main class="np-main np-max-width np-page-container">
<div class="np-hidden-mobile" id="learning-path-desktop">
{% include "learning_path_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="learning-path-mobile">
{% include "learning_path_mobile_view" %}
</div>
</main>
{% include "footer" %}

View File

@ -0,0 +1,10 @@
{% include "header" %}
<main class="np-main np-max-width np-page-container">
<div class="np-hidden-mobile" id="learning-path-desktop">
{% include "learning_path_summary_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="learning-path-mobile">
{% include "learning_path_summary_mobile_view" %}
</div>
</main>
{% include "footer" %}

View File

@ -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" %}

View File

@ -0,0 +1,53 @@
<main class="np-main np-box-container">
<div class="np-box">
{% include "header_minimal" %}
<div class="np-box-content-container">
<form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
{% form_authenticity_token %}
<div class="np-form-field">
<label class="np-input-label" for="learner_email">
{% t shared.email_address %}
</label>
<input
class="np-input"
autofocus="autofocus"
type="email"
name="learner[email]"
id="learner_email"
>
</div>
<div class="np-form-field">
<label class="np-input-label" for="learner_password">
{% t shared.password %}
</label>
<input
class="np-input"
type="password"
name="learner[password]"
id="learner_password"
>
</div>
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
{% t shared.sign_in %}
</button>
<a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
{% t .forgot_password %}
</a>
{% if features.account_creation? %}
<a class="np-form-link np-button-color" href="{% route sign_up %}">
{% t shared.sign_up %}
</a>
{% endif %}
{% if features.request_access? %}
<a
class="np-form-link np-button-color"
target="_blank"
href="{{ current_school.request_access_link }}"
>
{{ current_school.request_access_label }}
</a>
{% endif %}
</form>
</div>
</div>
</main>

Some files were not shown because too many files have changed in this diff Show More