Downloaded WoodMac Learn templates for the first time. Added some tasks for WML. Re-downloaded SPS to reference some code. SPS's app says all templates were last uploaded in April 18 2025. Last local changes (my hunch is downloaded) on my machine is May 13, 2025.

This commit is contained in:
Norm Rasmussen
2025-07-07 09:42:08 -04:00
parent 85ffb9a4f3
commit 1980bd456d
254 changed files with 8454 additions and 0 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,32 @@
{% capture settings_path %}{% route account %}{% endcapture %}
{% capture transcript_path %}{% route transcript %}{% endcapture %}
{% capture order_history_path %}{% route order_history %}{% endcapture %}
{% if current_person.signed_in? %}
{% unless current_school.sso_active? %}
<nav class="np-tabs np-account-tabs">
<div class="np-tabs-content">
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
<a class="np-tab-link" href="{{ settings_path}}">
{% t .profile_settings %}
</a>
<div class="np-tab-indicator np-button-background-color"></div>
</div>
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
<a class="np-tab-link" href="{{ transcript_path }}">
{% t .transcript %}
</a>
<div class="np-tab-indicator np-button-background-color"></div>
</div>
{% if features.commerce? %}
<div class="np-tab{% if page.path == order_history_path %} np-tab-active{% endif %}">
<a class="np-tab-link" href="{{ order_history_path }}">
{% t .order_history %}
</a>
<div class="np-tab-indicator np-button-background-color"></div>
</div>
{% endif %}
</div>
</nav>
{% endunless %}
{% endif %}

View File

@ -0,0 +1,6 @@
<h3 class="np-card-heading">
{% t .about %}
</h3>
<div class="np-card-text">
{{ product.description }}
</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.product_types.bundle %}
<i class="far fa-layer-group np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route catalog %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-icon-back"></i>
</a>
{{ product.name }}
</div>
</div>

View File

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

View File

@ -0,0 +1,27 @@
<div class="np-card-container np-card-padding-large">
<div class="np-top-vocabulary np-text-title np-text-muted">
{% t shared.product_types.bundle %}
</div>
<div class="np-top-title">
<a href="{% route catalog %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
{{ product.name }}
</div>
<img
src="{{ product.image_url }}"
class="np-top-image"
alt="{{ product.name }}"
/>
<div class="np-top-cta">
{% include "product_price_and_cta" %}
</div>
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "bundle_description" %}
</div>
<div class="np-card-spacing">
{% include "bundle_product_outline" %}
</div>

View File

@ -0,0 +1,12 @@
<div class="np-learning-path-outline">
<h3 class="np-product-outline-title">{% t shared.bundle.title %}</h3>
{% for item in product.bundle_items %}
{% if item.course? %}
{% include "product_outline_course", id: forloop.index %}
{% elsif item.training_event? %}
{% include "product_outline_event", id: forloop.index %}
{% elsif item.learning_path? %}
{% include "product_outline_lp", id: forloop.index %}
{% endif %}
{% endfor %}
</div>

View File

@ -0,0 +1,38 @@
<div class="np-card">
<div class="np-card-container">
<img
class="np-card-image"
alt="{{ item.name }}"
src="{{ item.image_url }}"
>
<div class="np-card-content np-card-content-vertical np-card-padding">
<h3 class="np-catalog-card-title">
{{ item.name }}
</h3>
<div class="np-product-badge np-product-badge-catalog">
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</h3>
</div>
<div class="np-card-content-footer np-catalog-card-footer">
{% if item.free_course? %}
<div class="np-card-content-progress np-learning-progress-text-color">
{% t shared.progress, count: item.progress %}
</div>
{% if item.has_to_restart? %}
{% include "course_version_outdated_popup", path: item.path %}
{% endif %}
<a class="np-button np-button-wide" href="{{ item.path }}">
{% t shared.view %}
</a>
{% else %}
<span class="np-catalog-card-price">
{{ item.formatted_price}}
</span>
<a class="np-button np-button-wide" href="{{ item.path }}">
{% t shared.learn_more %}
</a>
{% endif %}
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,34 @@
<div class="np-card">
<div class="np-card-container">
{% if course.ribbon %}
<div class="np-card-ribbon">
{{ course.ribbon }}
</div>
{% endif %}
<img
class="np-card-image"
alt="{{ course.name }}"
src="{{ course.image_url }}"
>
<div class="np-card-content np-card-content-vertical np-card-padding">
<h2 class="np-card-content-title">
{{ course.name }}
</h2>
<div class="np-card-content-subtitle">
{{ course.instructor_names }}
</div>
<div class="np-card-content-footer">
<div class="np-card-content-progress np-learning-progress-text-color">
{% t shared.progress, count: course.progress %}
</div>
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% t shared.view %}
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,71 @@
<div class="np-card np-no-horizontal-padding lp-card" categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}">
<div class="np-card-container">
<div class="np-learning-path">
<div class="lp-card-image-wrapper">
<img
alt="{{ learning_path.name }}"
class="np-card-image np-learning-path-image"
src="{{ learning_path.image_url }}"
/>
</div>
<div class="np-card-text-wrapper">
<div class="np-hidden-desktop np-card-header">
<i class="np-card-header-icon far fa-road"></i>
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<div class="np-hidden-desktop np-card-header-items-count">
{{ learning_path.items.count }} {% t .items %}
</div>
</div>
<div class="np-hidden-mobile np-card-header">
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
<i class="np-card-header-icon far fa-road"></i>
</div>
<div class="np-card-content np-card-padding np-card-content-vertical">
<h2 class="np-card-content-title">
{{ learning_path.name }}
</h2>
<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-learning-progress-text-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-card-progress-bar np-learning-progress-bar-color">
</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,53 @@
<div class="np-card np-card-training-event">
<div class="np-card-container">
<div class="np-card-content-training-event">
<h2 class="np-card-content-title">
{{ training_event.title }}
</h2>
<div class="np-card-content-subtitle">
<i class="far {{ training_event.event_type_icon }} np-training-session-icon"></i>
{% t shared.event_types, key: training_event.event_type %}
<span class="np-card-training-sessions-separator">•</span>
<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>
</div>
<div class="np-card-training-session">
<span class="np-card-content-label">
{% t .next_session %} -
<span class="{{ training_event.sessions.first.status.type}}">
{{ training_event.sessions.first.status.label}}
</span>
</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-label">
<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>
<div class="np-card-content np-card-content-vertical np-card-content-training-event">
<div class="np-card-training-sessions">
<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 @@
<h2 class="np-card-heading">
{% t .header %}
</h2>
<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 @@
<h2 class="np-card-heading">
{% t .header, key: current_school.course_vocabulary %}
</h2>
<div class="np-card-text">
{{ course.full_description }}
</div>

View File

@ -0,0 +1,40 @@
<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">
<img
src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing"
alt="{{ course.name }}"
/>
{% 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>

View File

@ -0,0 +1,29 @@
<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">
<a href="{{ event.sessions.first.session_url }}">
Register: {{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}</a>
</div>
</div>
</div>
{% endfor %}
</div>

View File

@ -0,0 +1,16 @@
<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>
{{ course.name }}
</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/>

View File

@ -0,0 +1,22 @@
<h2 class="np-card-heading">
{% t .header %}
</h2>
<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,41 @@
<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">
<img
src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing"
alt="{{ course.name }}"
/>
{% 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 np-card-container np-card-padding np-product-cta">
{% include "product_price_and_cta" %}
</div>
{% include "product_outline" %}
</div>
</div>
</div>

View File

@ -0,0 +1,31 @@
<div class="np-card-container np-card-padding-large">
{% include "course_header" %}
<div class="np-top-cta">
{% include "product_price_and_cta" %}
</div>
</div>
<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 "product_outline" %}
</div>
{% 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,48 @@
<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-card-progress-bar np-learning-progress-bar-color">
</div>
</div>
<div class="np-top-cta-progress-text
{% if course.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
">
{% t shared.progress, count: course.progress %}
</div>
{% include "product_expiration_date", date: course.expiration_date %}
</div>
<div class="np-top-cta-container">
{% 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 %}
</div>

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>
<h2 class="np-popup-header-title">
{% t .title %}
</h2>
</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,16 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

@ -0,0 +1,38 @@
<div class="section-text-container">
<div class="dashboard-resources-title">
My Courses
</div>
<div class="dashboard-resources-subtitle">
Courses in which you're currently enrolled
</div>
</div>
<div class="content-container">
<div class="filter-container">
<div class='filter-section course-filter'>
<div class='filter-title'>Filter by:</div>
{% assign course_categories = '' | split: '' %}
{% for course in courses.enrolled %}
{% for cat in course.categories %}
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
{% assign course_categories = course_categories | concat: cat_name %}
{% endfor %}
{% endfor %}
{% assign course_categories = course_categories | uniq %}
<div class="filter-options-wrapper">
<div class="filter-option-container">
<input type="checkbox" class="input-checkbox" name="all" />
<label class="input-label" >All</label>
</div>
{% for cat in course_categories %}
<div class="filter-option-container">
<input type="checkbox" class="input-checkbox" name="{{cat}}" />
<label class="input-label" >{{cat}}</label>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="cards-wrapper">
{% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content course-card" %}
</div>
</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 }}" categories="{% for category in course.categories %}{{category.name}},{% endfor %}">
{% 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,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,25 @@
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
<div class="np-card np-card-training-event">
<div class="np-card-container">
<div class="np-card-content-training-event">
<h2 class="np-card-content-title">
{{title}}
</h2>
<div class="np-card-content-subtitle">
<i class="far fa-video np-training-session-icon"></i>
Other Event
</div>
<div class="card-description">
Click here for more information:
</div>
</div>
<div class="np-card-content np-card-content-vertical np-card-content-training-event">
<div class="np-card-training-sessions">
<a class="np-button np-button-wide" href="{{link}}">
Click Here
</a>
</div>
</div>
</div>
</div>
</div>

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,78 @@
<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 %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="{{ website_navigation.path }}"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% 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,7 @@
<div class="np-dashboard-resources">
<div class="row row-with-thumbnails">
{% include 'custom_events_card' title: "Getting Started with Fulfillment" link: "https://trainingcenter.spscommerce.com/courses/ccc29da0-f636-4a96-bfca-52d37e1b1ec6/activities/b308e860-f2b5-418c-a29a-3a722af5b3bf" %}
{% include 'custom_events_card' title: "Fulfillment Product Training" link: "https://trainingcenter.spscommerce.com/courses/eff337de-64dd-4e1f-9abc-837520c12664/activities/d85c6894-9f20-41f4-94dd-ecbdebc336ac" %}
</div>
</div>

View File

@ -0,0 +1,3 @@
{% styles default %}
{% styles colors %}
{% styles custom %}

View File

@ -0,0 +1,232 @@
<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="https://s3.us-east-1.amazonaws.com/static.northpass.com/SPS/school_logo-1.png"
/>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-header-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h1>
{% else %}
<h1>
<a href="{% route home %}" class="np-school-name np-header-font-color">
{{ current_school.name }}
</a>
</h1>
{% endif %}
<div class="np-hidden-mobile np-header-desktop-nav">
<ul class="np-header-desktop-nav-list">
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
{% if features.commerce? %}
<a class="np-hidden-mobile np-header-button np-header-button-cart" href="{% route cart %}">
<i class="np-header-button-icon far fa-shopping-cart"></i>
{% t .cart %}
{% commerce_cart_badge %}
</a>
{% endif %}
<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"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<img
alt="{{ current_person.name }}"
class="np-header-avatar-image"
src="https://s3.us-east-1.amazonaws.com/static.northpass.com/SPS/school_logo-1.png"
>
</button>
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
<span class="np-header-avatar-tooltip-arrow-up"></span>
<div class="np-header-avatar-tooltip-learner">
<div class="np-header-avatar-tooltip-learner-name">
{{ current_person.name }}
</div>
<div class="np-header-avatar-tooltip-learner-email">
{{ current_person.email }}
</div>
</div>
<nav class="np-header-avatar-tooltip-navigation">
{% unless current_school.sso_active? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
{% if current_person.signed_in? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route transcript %}"
>
{% t .transcript %}
</a>
{% endif %}
{% if current_person.signed_in? and features.commerce? %}
<a
class="np-header-avatar-tooltip-navigation-link"
href="{% route order_history %}"
>
{% t .order_history %}
</a>
{% endif %}
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</nav>
</div>
</div>
{% else %}
<a
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
aria-label="{% t shared.sign_in %}"
href="{% route login %}"
>
{% t shared.sign_in %}
</a>
{% endif %}
</div>
</header>
<div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden">
{% if current_person.signed_in? %}
<img
alt="{{ current_person.name }}"
class="np-header-mobile-menu-content-avatar"
src="{{ current_person.avatar_url }}"
/>
<div class="np-header-mobile-menu-content-name">
{{ current_person.name }}
</div>
{% endif %}
<div class="np-header-mobile-menu-content-nav">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
{% for website_navigation in navigations.header_navigations %}
<a
href="{{ website_navigation.path }}"
class="np-header-mobile-menu-content-button"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
{% endfor %}
<div class="np-header-mobile-menu-content-line"></div>
{% unless current_school.sso_active? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route account %}"
>
{% t .profile_settings %}
</a>
{% endunless %}
{% if current_person.signed_in? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route transcript %}"
>
{% t .transcript %}
</a>
{% endif %}
{% if current_person.signed_in? and features.commerce? %}
<a
class="np-header-mobile-menu-content-button"
href="{% route order_history %}"
>
{% t .order_history %}
</a>
{% endif %}
{% if current_person.signed_in? and features.commerce? %}
<div class="np-header-mobile-menu-content-line"></div>
<a
class="np-header-mobile-menu-content-button np-header-mobile-menu-content-button-cart"
href="{% route cart %}"
>
<i class="np-header-mobile-menu-content-button-icon far fa-shopping-cart"></i>
{% t .cart %}
{% commerce_cart_badge %}
</a>
{% endif %}
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
{% t .sign_out %}
</a>
</div>
</div>
</div>
{% include "messages" %}

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="{% route 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-learning-progress-text-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 @@
<h2 class="np-card-heading">
{% t .about %}
</h2>
<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">
<h2 class="np-learning-path-banner-headline">{% t .headline %}</h2>
<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,22 @@
{% include "learning_path_desktop_header", learning_path: product %}
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="np-card-container">
<img
src="{{ product.image_url }}"
class="np-top-image"
alt="{{ product.name }}"
/>
<div class="np-card-padding-dynamic">
{% include "learning_path_description", learning_path: product %}
{% include "learning_path_instructors", learning_path: product %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 np-grid-spacing">
<div class="np-top-cta np-card-container np-card-padding np-product-cta">
{% include "product_price_and_cta"%}
</div>
{% include "learning_path_product_outline" %}
</div>
</div>

View File

@ -0,0 +1,34 @@
<div class="np-card-container np-card-padding-large">
<div class="np-top-vocabulary np-text-title np-text-muted">
{% t shared.learning_path.title %}
<i class="far fa-road 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>
{{ product.name }}
</div>
<img
src="{{ product.image_url }}"
class="np-top-image"
alt="{{ product.name }}"
/>
<div class="np-top-cta">
{% include "product_price_and_cta" %}
</div>
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_description", learning_path: product %}
</div>
<div class="np-card-spacing">
{% include "learning_path_product_outline" %}
</div>
{% if product.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_instructors", learning_path: product %}
</div>
{% endif %}

View File

@ -0,0 +1,10 @@
<div class="np-learning-path-outline">
<h3 class="np-product-outline-title">{% t .title %}</h3>
{% for item in product.learning_path_items %}
{% if item.course? %}
{% include "product_outline_course", id: forloop.index %}
{% elsif item.training_event? %}
{% include "product_outline_event", id: forloop.index %}
{% endif %}
{% endfor %}
</div>

View File

@ -0,0 +1,23 @@
{% 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-card-progress-bar np-learning-progress-bar-color">
</div>
</div>
<div class="np-top-cta-progress-text
{% if learning_path.completed? %} np-color-success {% else %} np-learning-progress-text-color {% endif %}
">
{% t shared.progress, count: learning_path.progress %}
</div>
{% include "product_expiration_date", date: learning_path.expiration_date %}
</div>
{% endif %}
<div class="np-top-cta-container">
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
</div>

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,40 @@
<div class="section-text-container">
<div class="dashboard-resources-title">
My Paths
</div>
<div class="dashboard-resources-subtitle">
Learning Paths in which you're currently enrolled
</div>
</div>
<div class="content-container">
<div class="filter-container">
<div class='filter-section lp-filter'>
<div class='filter-title'>Filter by:</div>
{% assign lp_categories = '' | split: '' %}
{% for lp in learning_paths.enrolled %}
{% for cat in lp.categories %}
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
{% assign lp_categories = lp_categories | concat: cat_name %}
{% endfor %}
{% endfor %}
{% assign lp_categories = lp_categories | uniq %}
<div class="filter-options-wrapper">
<div class="filter-option-container">
<input type="checkbox" class="input-checkbox" name="all" />
<label class="input-label" >All</label>
</div>
{% for cat in lp_categories %}
<div class="filter-option-container">
<input type="checkbox" class="input-checkbox" name="{{cat}}" />
<label class="input-label" >{{cat}}</label>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="cards-wrapper">
{% if features.learning_paths? %}
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
</div>
</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,8 @@
<div class="np-dashboard-resources">
<div class="row row-with-thumbnails">
{% include 'custom_events_card' title: "SPS Commerce presents MAPADOC Training for Sage 100" link: "https://www.spscommerce.com/lp/mapadoc-training-sage-100/" %}
{% include 'custom_events_card' title: "SPS Commerce presents MAPADOC Training for Sage X3" link: "https://www.spscommerce.com/lp/mapadoc-training-sage-x3/" %}
{% include 'custom_events_card' title: "SPS Commerce presents MAPADOC Training for Sage 500" link: "https://www.spscommerce.com/lp/mapadoc-training-sage-500/" %}
</div>
</div>

View File

@ -0,0 +1,7 @@
{% if date %}
{% capture date_format %}{% t date.formats.short_humanized %}{% endcapture %}
{% capture formatted_date %}{{ date | date: date_format }}{% endcapture %}
<time class="np-product-expiration-date" datetime="{{ date }}">
{% t .label, date: formatted_date %}
</time>
{% endif %}

View File

@ -0,0 +1,25 @@
<div class="np-course-outline">
<div class="np-text-title np-course-outline-title">
{% t .header.course %}
</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">
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
{% include "course_activity_locked" %}
<div class="np-course-outline-content-activity-list-bar"></div>
</li>
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
</div>
</div>

View File

@ -0,0 +1,82 @@
<div class="np-card-container np-card-padding np-product-outline-container">
<div class="np-product-outline-base-container">
<img
src="{{ item.image }}"
alt="{{ item.name }}"
class="np-product-outline-course-image"
>
<div class="np-product-outline-content">
<div class="np-product-outline-name np-top-title">
{{ item.name }}
</div>
<p class="np-product-outline-caption">
{% if item.instructors.any? %}
{{ item.instructor_names }}
{% endif %}
</p>
<div class="np-product-outline-base-bottom">
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
<i class="far fa-graduation-cap np-product-badge-icon np-product-badge-catalog-icon"></i>
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.course %}</h3>
</div>
<button
class="np-button np-product-outline-details-button"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-expand-{{ id }}"
data-toggle-outside
>
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
</button>
</div>
</div>
</div>
<div class="np-expand-{{ id }} np-hidden">
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
<p class="np-product-outline-section-content">{{ item.full_description }}</p>
</div>
{% if item.categories.any? %}
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">
{% t .categories %}
</h3>
<div class="np-flex">
{% for category in item.categories %}
<div class="np-content-categories-content-item">
{{ category.name }}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if item.instructors.any? %}
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">
{% t shared.instructors %}
</h3>
<div class="np-content-instructors-content row">
{% for instructor in item.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 %}
</div>
</div>

View File

@ -0,0 +1,49 @@
<div class="np-card-container np-card-padding np-product-outline-container">
<div class="np-product-outline-content">
{% if item.available? %}
{% if item.location %}
<span class="np-product-location">{{ item.location }} |</span>
{% endif %}
<span class="np-product-date">{{ item.time }} {{ item.time_zone }}, {{ item.date }}</span>
<a class="np-product-outline-name np-top-title" href="{{ item.preview_path }}">{{ item.name }}</a>
{% else %}
<span class="np-product-outline-name np-top-title">{{ item.name }}</span>
{% endif %}
<div class="np-learning-path-outline-caption">{{ item.caption }}</div>
<div class="np-product-outline-base-bottom np-product-ilt-bottom">
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</h3>
</div>
<button
class="np-button np-product-outline-details-button"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-expand-{{ id }}"
data-toggle-outside
>
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
</button>
</div>
<div class="np-expand-{{ id }} np-hidden">
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
<p class="np-product-outline-section-content">{{ item.description }}</p>
</div>
{% if item.instructors %}
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">
{% t shared.instructors %}
</h3>
<div class="np-content-instructors-content row">
<div class="np-content-instructors-content-item col-xs-12 col-lg">
<div class="np-content-instructors-content-name">
{{ item.instructors }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>

View File

@ -0,0 +1,65 @@
<div class="np-card-container np-card-padding np-product-outline-container">
<div class="np-product-outline-base-container">
<img
src="{{ item.image_url }}"
alt="{{ item.name }}"
class="np-product-outline-course-image"
>
<div class="np-product-outline-content">
<div class="np-product-outline-name np-top-title">
{{ item.name }}
</div>
<p class="np-product-outline-caption">
{% if item.instructor_names %}
{{ item.instructor_names }}
{% endif %}
</p>
<div class="np-product-outline-base-bottom">
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
<i class="far fa-road np-product-badge-icon np-product-badge-catalog-icon"></i>
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.learning_path %}</h3>
</div>
<button
class="np-button np-product-outline-details-button"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-expand-{{ id }}"
data-toggle-outside
>
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
</button>
</div>
</div>
</div>
<div class="np-expand-{{ id }} np-hidden">
<div class="np-card-content-divider np-product-outline-spacer">
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
{{ item.description }}
</div>
<h3 class="np-product-outline-section-headline">{% t .content %}</h3>
{% for learning_path_item in item.learning_path_items %}
<div class="np-product-outline-lp-product-container">
<div class="np-product-outline-lp-product-info">
{% if learning_path_item.course? %}
<h3 class="np-product-outline-name np-top-title">{{learning_path_item.name}}</h3>
<p class="np-product-outline-caption">{{learning_path_item.instructor_names}}</p>
{% elsif learning_path_item.training_event? %}
{% if learning_path_item.available? %}
<a class="np-product-outline-name np-top-title" href="{{ learning_path_item.preview_path }}">{{learning_path_item.name}}</a>
<span class="np-product-date">{{ learning_path_item.time }} {{ learning_path_item.time_zone }}, {{ learning_path_item.date }}</span>
{% else %}
<span class="np-product-outline-name np-top-title">{{learning_path_item.name}}</span>
<span class="np-product-date">{{ learning_path_item.caption }}</span>
{% endif %}
{% endif %}
</div>
<div class="np-product-badge np-product-badge-catalog">
<i class="far {{ learning_path_item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ learning_path_item.formatted_type }}</h3>
</div>
</div>
{% endfor %}
</div>
</div>

View File

@ -0,0 +1,12 @@
<div class="np-top-cta-price-content">
<div>
<span class="np-catalog-card-price np-commerce-outline-description-price">{{ product.formatted_price }}</span>
<span class="np-commerce-outline-description-access">
{{ product.formatted_access_period}}
</span>
</div>
</div>
<div class="np-top-cta-container">
{% commerce_add_to_cart product %}
{% commerce_buy_more_access product %}
</div>

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">
<h2 class="np-search-zero-state-title">
{% t .nothing_found %}
</h2>
<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,60 @@
<nav aria-label="subnavigation" class="np-sub-navigation">
<div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %}
{% if link.label == 'Home' %}
<div class="np-sub-navigation-content-item {{ link.active_class }}">
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
{{ link.label }}
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% endif %}
{% break %}
{% endfor %}
<div id="courses-nav" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="/app/courses">
<i class="far fa-graduation-cap np-button-color np-sub-navigation-content-item-icon"></i>
Courses
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% for link in navigations.sub_navigation %}
{% unless link.label == 'Home' or link.label == 'Dashboard' or link.label == 'Catalog' %}
<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 id="catalog-nav" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
<a class="np-sub-navigation-content-item-link" href="/app/catalog">
<i class="far fa-store np-button-color np-sub-navigation-content-item-icon"></i>
Catalog
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
</div>
</nav>
<script>
document.addEventListener('DOMContentLoaded', function() {
const path = window.location.pathname;
const coursesNav = document.getElementById('courses-nav');
const catalogNav = document.getElementById('catalog-nav');
if (path.includes('/app/courses')) {
coursesNav.classList.add('np-sub-navigation-content-item-active');
coursesNav.classList.remove('np-sub-navigation-content-item-inactive');
} else if (path.includes('/app/catalog')) {
catalogNav.classList.add('np-sub-navigation-content-item-active');
catalogNav.classList.remove('np-sub-navigation-content-item-inactive');
}
});
</script>

View File

@ -0,0 +1,42 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
{% include "training_session_header" %}
</div>
<div class="row np-training-session-row">
<div class="col-xs-12 col-sm-8">
<div class="np-card-container">
<div class="np-card-padding-large">
<div>
{% include "training_session_status" %}
{% include "training_session_date" %}
</div>
<div class="np-training-session-details">
{% include "training_session_details" %}
</div>
</div>
<div class="np-card-content-divider"></div>
<div class="np-card-padding-large">
{% include "training_session_description" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 np-grid-spacing">
<div class="np-training-session-container">
<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>
</div>

View File

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

View File

@ -0,0 +1,42 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
{% include "training_session_header" %}
</div>
<div class="row np-training-session-row">
<div class="col-xs-12 col-sm-8">
<div class="np-card-container">
<div class="np-card-padding-large">
<div>
{% include "training_session_status" %}
{% include "training_session_date" %}
</div>
<div class="np-training-session-details">
{% include "training_session_details" %}
</div>
</div>
<div class="np-card-content-divider"></div>
<div class="np-card-padding-large">
{% include "training_session_description" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 np-grid-spacing">
<div class="np-training-session-container">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% if training_event.sessions.size > 0 %}
{% include "training_event_preview_more_sessions" %}
{% else %}
<div class="np-training-session-zero-state">
<img
alt="{% t themes.default._training_event_desktop_view.empty %}"
class="np-zero-state-training-sessions"
/>
<div class="np-training-session-zero-state-text">
{% t themes.default._training_event_desktop_view.empty %}
</div>
</div>
{% endif %}
</div>
</div>
</div>

View File

@ -0,0 +1,23 @@
<div class="np-training-session-view">
<div class="np-training-session-view-header">
{% include "training_session_header" %}
</div>
<div class="np-card-container np-training-session-view-details np-card-padding np-card-spacing">
{% include "training_session_status" %}
{% include "training_session_date" %}
{% include "training_session_details" %}
{% include "training_session_description" %}
</div>
{% if training_event.sessions.size > 0 %}
<div class="np-card-spacing">
<div class="np-training-session-container">
<div class="np-training-session-sessions-title">
{% t shared.more_sessions %}
</div>
{% include "training_event_preview_more_sessions" %}
</div>
</div>
{% endif %}
</div>

View File

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

View File

@ -0,0 +1,18 @@
<div class="np-training-session-tile">
<div class="np-training-session-tile-header">
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
<div class="np-training-session-tile-badge np-training-session-tile-badge-{{ session.status.type }}">
{{ session.status.label }}
</div>
</div>
<div class="np-training-session-tile-content">
<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>
</div>
</div>

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% include "cards_training_event" with training_event %}
{% endfor %}
{% else %}
{% include "training_events_zero_state" %}
{% 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,13 @@
<div class="np-dashboard-resources">
{% if training_events.available.any? %}
<div class="row row-with-thumbnails">
{% for training_event in training_events.available %}
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
{% include "cards_training_event" with training_event %}
</div>
{% endfor %}
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

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,35 @@
<div class="np-training-session-cta">
<div class="np-training-session-cta-buttons">
<form
action="{{ training_session.cta.url }}"
method="post"
>
{% form_authenticity_token %}
{% if training_session.show_calendar_links? %}
{% include "training_session_calendars" %}
{% endif %}
{% if training_session.cta.undo? %}
<input type="hidden" name="_method" value="delete" />
{% endif %}
{% if training_session.cta.label %}
<button
type="submit"
class="
np-top-button
np-button
np-button-big
{% if training_session.show_calendar_links? %}
np-button-secondary
{% endif %}
"
>
{{ training_session.cta.label }}
</button>
{% endif %}
</form>
</div>
</div>

View File

@ -0,0 +1,16 @@
<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-label">
<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>
</div>

View File

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

View File

@ -0,0 +1,43 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
{% include "training_session_header" %}
</div>
<div class="row np-training-session-row">
<div class="col-xs-12 col-sm-8">
<div class="np-card-container">
<div class="np-card-padding-large">
<div>
{% include "training_session_status" %}
{% include "training_session_date" %}
</div>
<div class="np-training-session-details">
{% include "training_session_details" %}
{% include "training_session_cta" %}
</div>
</div>
<div class="np-card-content-divider"></div>
<div class="np-card-padding-large">
{% include "training_session_description" %}
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 np-grid-spacing">
<div class="np-training-session-container">
<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>
</div>

View File

@ -0,0 +1,23 @@
<div class="np-training-session-info">
<div class="np-training-session-time">
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
<time>{{ training_session.time_period }} {{ training_session.time_zone }}</time>
</div>
{% if training_session.approved? and 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.approved? and 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,7 @@
<div class="np-top-vocabulary np-text-title">
{% t shared.event_types, key: training_event.event_type %}
<i class="fal {{ training_event.event_type_icon }} np-button-color np-training-session-icon"></i>
</div>
<div class="np-top-title">
{{ training_event.title }}
</div>

View File

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

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