Instacart, while still in implementation, came to their AE (J.Jones) with some access issues. Some of these templates don't work yet (internal server errors) but backing them up just in case
This commit is contained in:
Norm Rasmussen
@ -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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -0,0 +1,23 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% 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>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div
|
||||
class="achievments-display">
|
||||
{% comment %} TODO: display array after implementig gamification {% endcomment %}
|
||||
{% include "badge_icon"
|
||||
, badgeimg: 'https://s3.us-east-1.amazonaws.com/static.northpass.com/Instacart/medal.png'
|
||||
, badgename: ''
|
||||
, showname: false %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.achievments-display {
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="flex-column-center badge-icon-container">
|
||||
<div class="img-container" title="{{ badgename }}">
|
||||
<img src="{{ badgeimg }}">
|
||||
</div>
|
||||
{% if showname %}
|
||||
<div class="badge-name">{{ badgename }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.badge-icon-container {
|
||||
gap: 10px;
|
||||
width: calc(20% - 16px);
|
||||
}
|
||||
.badge-icon-container > .img-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fbf2e5;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge-icon-container > .img-container > img {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
}
|
||||
|
||||
.badge-icon-container > .badge-name {
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.badge-icon-container {
|
||||
width: calc(33% - 16px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ product.description }}
|
||||
</div>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,69 @@
|
||||
<div
|
||||
class="catalog-card"
|
||||
priority="{{ course.properties.priority }}"
|
||||
category="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}">
|
||||
<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 flex-1">
|
||||
<div class="np-card-content-subtitle">
|
||||
<i class="fas fa-star" style="color: #ffc445;"></i>
|
||||
{{ course.properties.course_rating | round: 1 }}
|
||||
</div>
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle flex-1">
|
||||
<i class="fas fa-clock"></i>
|
||||
{{ course.properties.course_duration }}
|
||||
</div>
|
||||
<div class="lp-footer-placeholder"></div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div
|
||||
class="np-card-content-progress"
|
||||
{% if course.progress == 100 %}
|
||||
style="color: #0AAD0A;"
|
||||
{% endif %}>
|
||||
<span class="lang-en">
|
||||
{% t shared.progress
|
||||
, count: course.progress %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
{% if course.progress == 100 %}
|
||||
Completado
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% 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 %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.progress == 0 %}
|
||||
<span class="lang-en">Start</span>
|
||||
<span class="lang-es">Comenzar</span>
|
||||
{% else if course.progress >0 and course.progress < 100 %}
|
||||
<span class="lang-en">Continue</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% else %}
|
||||
<span class="lang-en">{% t shared.view %}</span>
|
||||
<span class="lang-es">Ver</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
<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">
|
||||
{% 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">
|
||||
{% t shared.progress
|
||||
, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
<span class="lang-en">Start</span>
|
||||
<span class="lang-es">Comenzar</span>
|
||||
{% else if learning_path.progress >0 and learning_path.progress < 100 %}
|
||||
<span class="lang-en">Continue</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon fas fa-folder"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }}
|
||||
<span class="lang-en">Courses</span>
|
||||
<span class="lang-es">Cursos</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
<div class="np-card" categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}">
|
||||
<div class="np-card-container">
|
||||
<div class="custom-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image"
|
||||
src="{{ learning_path.image_url }}" />
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="custom-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-card-header-items-count">
|
||||
{% if learning_path.items.count == 0 %}
|
||||
<span class="lang-en"></span>No Lessons</span>
|
||||
<span class="lang-es">No hay lecciones</span>
|
||||
{% elsif learning_path.items.count == 1 %}
|
||||
<span class="lang-en">1 Lesson</span>
|
||||
<span class="lang-es">1 Lección</span>
|
||||
{% else %}
|
||||
<span class="lang-en"></span>{{ learning_path.items.count }} Lessons</span>
|
||||
<span class="lang-es">{{ learning_path.items.count }} Lecciones</span>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</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="lp-footer-placeholder"></div>
|
||||
<div class="np-card-content-footer">
|
||||
<div
|
||||
class="np-card-content-progress"
|
||||
{% if learning_path.progress == 100 %}
|
||||
style="color: #0AAD0A;"
|
||||
{% endif %}>
|
||||
<span class="lang-en">
|
||||
{% t shared.progress
|
||||
, count: learning_path.progress %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
{% if learning_path.progress == 100 %}
|
||||
Completado
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
<span class="lang-en">Start</span>
|
||||
<span class="lang-es">Comenzar</span>
|
||||
{% else if learning_path.progress >0 and learning_path.progress < 100 %}
|
||||
<span class="lang-en">Continue</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% else %}
|
||||
<span class="lang-en">{% t shared.view %}</span>
|
||||
<span class="lang-es">Ver</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
<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>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="carrot-button-container">
|
||||
<a href="{{buttonUrl}}">
|
||||
{% if buttonTextEs %}
|
||||
<span class="lang-en">{{ buttonText }}</span>
|
||||
<span class="lang-es">{{ buttonTextEs }}</span>
|
||||
{% else %}
|
||||
{{ buttonText }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="col-xs-12 col-md-4 spacing-clear">
|
||||
{% include "certificates_verification" %}
|
||||
{% include "certificates_metadata" %}
|
||||
</div>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 }}"
|
||||
/>
|
||||
@ -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>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -0,0 +1,46 @@
|
||||
<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 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 %}
|
||||
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -0,0 +1,125 @@
|
||||
<style>
|
||||
.course-carousel-container .catalog-card:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
.course-carousel-container .catalog-card {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
{% assign filterInProgress = filterInProgress | default: false %}
|
||||
{% assign sortByPriority = sortByPriority | default: false %}
|
||||
{% assign displayedCount = 0 %}
|
||||
|
||||
{% if items.any? %}
|
||||
<div class="course-carousel-container">
|
||||
{% for course in items %}
|
||||
{% if filterInProgress %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% include "cards_course" with course %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course
|
||||
, hiddenByDefault: false %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if displayedCount == 0 %}
|
||||
{% include "courses_zero_state"
|
||||
, message: 'Nothing found! Start some lessons to fill this gap.'
|
||||
, messageEs: '¡Nada encontrado! Comienza algunas lecciones para llenar este vacío.' %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state"
|
||||
, message: message %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
const coursesCarousel = $('.course-carousel-container');
|
||||
|
||||
$(document).ready(function(){
|
||||
const maxItems = 5;
|
||||
const cards = coursesCarousel.find('.catalog-card').get();
|
||||
|
||||
{% if sortByPriority %}
|
||||
|
||||
cards.sort(function(a, b) {
|
||||
const aPriority = extractPriority(a);
|
||||
const bPriority = extractPriority(b);
|
||||
return bPriority - aPriority;
|
||||
});
|
||||
|
||||
// Re-append sorted cards to container
|
||||
$.each(cards, function(index, card) {
|
||||
coursesCarousel.append(card);
|
||||
});
|
||||
|
||||
{% endif %}
|
||||
|
||||
for(let i = 5; i < cards.length; i++) {
|
||||
cards[i].remove();
|
||||
}
|
||||
|
||||
let initialSlide = 0;
|
||||
|
||||
// Go to 2nd slide if width is higher than breakpoint
|
||||
if ($(window).width() > {{breakpoint}}) {
|
||||
initialSlide = 1;
|
||||
}
|
||||
|
||||
coursesCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: initialSlide,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: {{breakpoint}},
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
cards[i].classList.add('card-visible');
|
||||
}
|
||||
|
||||
// Redirect to slide 1 if user slides to slide 0 above breakpoint
|
||||
setInterval(function() {
|
||||
if ($(window).width() > {{breakpoint}}) {
|
||||
const currentSlide = coursesCarousel.slick('slickCurrentSlide');
|
||||
if (currentSlide === 0) {
|
||||
console.log('redirecting from slide 0 to slide 1');
|
||||
coursesCarousel.slick('slickGoTo', 1);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
function extractPriority(element){
|
||||
const priority = $(element).attr('priority');
|
||||
return priority ? Number(priority) : 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (max-width: {{breakpoint}}px) {
|
||||
.course-carousel-container .catalog-card {
|
||||
margin: 0 10px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
{% assign filterInProgress = filterInProgress | default: false %}
|
||||
|
||||
{% if courseslist.any? %}
|
||||
<div class="carrot-padded-row row row-with-thumbnails">
|
||||
|
||||
{% assign visibleCount = 0 %}
|
||||
{% assign totalCount = 0 %}
|
||||
|
||||
{% comment %}
|
||||
We want to count how many courses will be shown (after filter if used),
|
||||
and keep track of how many are visible initially (up to 4).
|
||||
{% endcomment %}
|
||||
|
||||
{% for course in courseslist %}
|
||||
{% if filterInProgress %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign totalCount = totalCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign totalCount = totalCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courseslist %}
|
||||
{% if filterInProgress %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign visibleCount = visibleCount | plus: 1 %}
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 np-stretch-content course-item"
|
||||
{% if visibleCount > 4 %}
|
||||
style="display: none;"
|
||||
{% endif %}>
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign visibleCount = visibleCount | plus: 1 %}
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 np-stretch-content course-item"
|
||||
{% if visibleCount > 4 %}
|
||||
style="display: none;"
|
||||
{% endif %}>
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
|
||||
{% if totalCount > 4 %}
|
||||
<div class="load-more-btn">
|
||||
<span class="lang-en">See More</span>
|
||||
<span class="lang-es">Ver Más</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if visibleCount == 0 %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state"
|
||||
, message: 'Nothing found! Start some lessons to fill this gap.'
|
||||
, messageEs: '¡Nada encontrado! Comienza algunas lecciones para llenar este vacío.' %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state"
|
||||
, message: message %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const loadMoreBtn = document.querySelector('.load-more-btn');
|
||||
if (!loadMoreBtn) return;
|
||||
|
||||
const courseItems = document.querySelectorAll('.course-item');
|
||||
let currentlyVisible = 4;
|
||||
|
||||
loadMoreBtn.addEventListener('click', function() {
|
||||
const nextItems = Array.from(courseItems).slice(currentlyVisible, currentlyVisible + 4);
|
||||
nextItems.forEach(item => item.style.display = 'block');
|
||||
|
||||
currentlyVisible += 4;
|
||||
|
||||
if (currentlyVisible >= courseItems.length) {
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for filter events
|
||||
{% if eventId %}
|
||||
document.addEventListener('filterUpdate', function(event) {
|
||||
if (event.detail.filterId === '{{ eventId }}') {
|
||||
const selectedCategories = event.detail.selectedValues;
|
||||
const courseItems = document.querySelectorAll('.course-item');
|
||||
const loadMoreBtn = document.querySelector('.load-more-btn');
|
||||
|
||||
let visibleFilteredCount = 0;
|
||||
let totalFilteredCount = 0;
|
||||
|
||||
courseItems.forEach(function(courseItem) {
|
||||
const card = courseItem.querySelector('.catalog-card');
|
||||
if (card) {
|
||||
const cardCategories = card.getAttribute('category');
|
||||
let shouldShow = false;
|
||||
|
||||
// If no categories selected, show all
|
||||
if (selectedCategories.length === 0) {
|
||||
shouldShow = true;
|
||||
} else {
|
||||
// Check if card has at least one matching category
|
||||
if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
|
||||
shouldShow = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldShow) {
|
||||
totalFilteredCount++;
|
||||
// Show only first 4 filtered items initially
|
||||
if (totalFilteredCount <= 4) {
|
||||
courseItem.style.display = 'block';
|
||||
visibleFilteredCount++;
|
||||
} else {
|
||||
courseItem.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
courseItem.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update load more button visibility
|
||||
if (loadMoreBtn) {
|
||||
if (totalFilteredCount > 4) {
|
||||
loadMoreBtn.style.display = 'block';
|
||||
} else {
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Reset the load more functionality for filtered results
|
||||
let currentlyVisible = 4;
|
||||
if (loadMoreBtn) {
|
||||
loadMoreBtn.onclick = function() {
|
||||
const hiddenFilteredItems = Array.from(courseItems).filter(item => {
|
||||
const card = item.querySelector('.catalog-card');
|
||||
if (!card) return false;
|
||||
|
||||
const cardCategories = card.getAttribute('category');
|
||||
let shouldShow = false;
|
||||
|
||||
if (selectedCategories.length === 0) {
|
||||
shouldShow = true;
|
||||
} else if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
shouldShow = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return shouldShow && item.style.display === 'none';
|
||||
});
|
||||
|
||||
// Show next 4 items
|
||||
const nextItems = hiddenFilteredItems.slice(0, 4);
|
||||
nextItems.forEach(item => item.style.display = 'block');
|
||||
currentlyVisible += nextItems.length;
|
||||
|
||||
// Hide load more if no more items
|
||||
if (hiddenFilteredItems.length <= 4) {
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
</script>
|
||||
@ -0,0 +1,17 @@
|
||||
{% 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 %}
|
||||
@ -0,0 +1,11 @@
|
||||
<div class="np-dashboard-resources-container zero-state-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% if messageEs %}
|
||||
<span class="lang-en">{{ message }}</span>
|
||||
<span class="lang-es">{{ messageEs }}</span>
|
||||
{% else %}
|
||||
{{ message }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,17 @@
|
||||
{% assign categories = "New shopper,Wrong Items,Damaged Items,Missing Items,Finding Items,Quality,Replacements,Refunds,Safety,Batches,Video,Departments,Retailers,Customer Ratings,Non-grocery" | split: "," %}
|
||||
|
||||
<label class="dropdown-label" for="category-filter">
|
||||
<span class="lang-en">By category</span>
|
||||
<span class="lang-es">Por categoría</span>
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="category-filter">
|
||||
{% for category in categories %}
|
||||
<option value="{{ category }}">
|
||||
{{ category }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,10 @@
|
||||
<input
|
||||
id={{value}}
|
||||
name={{ name }}
|
||||
value={{ value }}
|
||||
type="checkbox"
|
||||
{% if selected %} checked="checked" {% endif %}
|
||||
/>
|
||||
<label for={{value}}>
|
||||
{{label}}
|
||||
</label>
|
||||
@ -0,0 +1,36 @@
|
||||
<div class="np-filter" id="filter-dropdown-{{ givenId }}">
|
||||
<div class="dropdown carrot-button-container">
|
||||
<button
|
||||
class="np-button dropdown-button carrot-button-secondary"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button">
|
||||
<span class="lang-en">Filter by:</span>
|
||||
<span class="lang-es">Filtrar por:</span>
|
||||
<span class="filter-value-label">
|
||||
<span class="lang-en">All</span>
|
||||
<span class="lang-es">Todos</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
{%
|
||||
include "filter_category_select"
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
onclick="updateFilter('{{ givenId }}')">
|
||||
<span class="lang-en">
|
||||
{% t shared.filters.apply %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Aplicar
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
{% 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>
|
||||
@ -0,0 +1,45 @@
|
||||
<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">
|
||||
<li class="np-footer-navigation-item">
|
||||
<a class="np-footer-navigation-link" href="/app/dashboard">
|
||||
<span class="lang-en">For You</span>
|
||||
<span class="lang-es">Para Ti</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a class="np-footer-navigation-link" href="/app/catalog">
|
||||
<span class="lang-en">Lessons</span>
|
||||
<span class="lang-es">Lecciones</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a class="np-footer-navigation-link" href="/app/learning_paths">
|
||||
<span class="lang-en">Paths</span>
|
||||
<span class="lang-es">Rutas</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link"
|
||||
href="#"
|
||||
target="_blank">
|
||||
<span class="lang-en">Shop Talk Community</span>
|
||||
<span class="lang-es">Comunidad Shop Talk</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Instacart/logoInsta.png" />
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,20 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
|
||||
@ -0,0 +1,307 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
{% if current_person.signed_in? %}
|
||||
<div
|
||||
class="np-hidden-desktop custom-hamburger-btn-container"
|
||||
id="nav-profile-btn"
|
||||
onclick="toggleSidemenu('nav-profile')">
|
||||
<button class="closed-btn">
|
||||
<img alt="{{ current_person.name }}" src="{{ current_person.avatar_url }}" />
|
||||
</button>
|
||||
<button class="fas fa-times np-hidden open-btn"></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
<div
|
||||
class="np-hidden-desktop custom-hamburger-btn-container"
|
||||
id="nav-hamburger-btn"
|
||||
onclick="toggleSidemenu('nav-hamburger')">
|
||||
<button class="closed-btn fas fa-bars"></button>
|
||||
<button class="fas fa-times np-hidden open-btn"></button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}">
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
|
||||
{% t.transcript %}
|
||||
</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" id="nav-profile">
|
||||
{% 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">
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="#"
|
||||
">
|
||||
<span class="lang-en">Certificates</span>
|
||||
<span class="lang-es">Certificados</span>
|
||||
</a>
|
||||
{% include "language_selector" %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="#"
|
||||
">
|
||||
<span class="lang-en">Profile settings</span>
|
||||
<span class="lang-es">Configuración del perfil</span>
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
<span class="lang-en">Sign out</span>
|
||||
<span class="lang-es">Cerrar sesión</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden" id="nav-hamburger">
|
||||
<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="Search"
|
||||
class="np-header-search-input lang-en"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="np-header-search-input lang-es"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
<a href="/app/dashboard" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">For You</span>
|
||||
<span class="lang-es">Para Ti</span>
|
||||
</a>
|
||||
<a href="/app" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">In Progress</span>
|
||||
<span class="lang-es">En Progreso</span>
|
||||
</a>
|
||||
<a href="/app/catalog" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">All Lessons</span>
|
||||
<span class="lang-es">Todas las Lecciones</span>
|
||||
</a>
|
||||
<a href="/app/learning_paths" class="np-header-mobile-menu-content-button">
|
||||
<span class="lang-en">All Paths</span>
|
||||
<span class="lang-es">Todas las Rutas</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile">
|
||||
{% include "sub_navigation" %}
|
||||
</div>
|
||||
|
||||
|
||||
{% include "messages" %}
|
||||
<style>
|
||||
@media (min-width: 768px) {
|
||||
.np-header-search-mobile-always {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.np-header-search-mobile-always {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
padding: 18px 0 12px;
|
||||
|
||||
background: {
|
||||
{
|
||||
color_palette.header_color
|
||||
}
|
||||
};
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always form {
|
||||
width: 90vw;
|
||||
max-width: 350px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always .np-header-search-input {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #d3d3d3;
|
||||
background: #fff;
|
||||
color: #1a3c2c;
|
||||
font-size: 18px;
|
||||
padding: 10px 40px 10px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.np-header-search-mobile-always .np-header-search-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #b0b0b0;
|
||||
font-size: 22px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-hamburger-btn-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.custom-hamburger-btn-container > button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
font-size: 26px;
|
||||
}
|
||||
.custom-hamburger-btn-container > button > img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.np-header-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nav-hamburger-btn {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.np-header-search {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function toggleSidemenu(id){
|
||||
const button = document.getElementById(`${id}-btn`);
|
||||
const menu = document.getElementById(id);
|
||||
const hiddenClass = 'np-hidden';
|
||||
const menuClosed = menu.classList.contains(hiddenClass);
|
||||
closeMenus(hiddenClass)
|
||||
if(menuClosed){
|
||||
menu.classList.toggle(hiddenClass);
|
||||
Array.from(button.children).forEach(element => {
|
||||
element.classList.toggle(hiddenClass)
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function closeMenus(hiddenClassName){
|
||||
for(const buttons of document.getElementsByClassName('custom-hamburger-btn-container')){
|
||||
const menuOpenedBtn = buttons.querySelector('.open-btn');
|
||||
if(!menuOpenedBtn.classList.contains(hiddenClassName)){
|
||||
menuOpenedBtn.classList.add(hiddenClassName);
|
||||
buttons.querySelector('.closed-btn').classList.remove(hiddenClassName);
|
||||
}
|
||||
}
|
||||
for(const menu of document.getElementsByClassName('np-header-mobile-menu-content')){
|
||||
if(!menu.classList.contains(hiddenClassName)){
|
||||
menu.classList.add(hiddenClassName)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -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" %}
|
||||
@ -0,0 +1,83 @@
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
onclick="toggleLanguageSelector()"
|
||||
">
|
||||
<span class="lang-en">Language</span>
|
||||
<span class="lang-es">Idioma</span>
|
||||
<div class="language-selector-dropdown">
|
||||
<div class="language-selector-dropdown-item" onclick="changeLanguage('en')">English</div>
|
||||
<div class="language-selector-dropdown-item" onclick="changeLanguage('es')">Español</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
<style>
|
||||
.language-selector-dropdown {
|
||||
position: absolute;
|
||||
width: 97%;
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
top: 54px;
|
||||
padding: 0 10px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.65);
|
||||
}
|
||||
.language-selector-dropdown-item {
|
||||
align-items: center;
|
||||
background: #e4e8eb;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px 0 rgba(72, 103, 118, 0.15);
|
||||
color: #305263;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 52px;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.language-selector-dropdown').hide();
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
$(document).on('click', function(event) {
|
||||
if (!$(event.target).closest('.language-selector-dropdown, [onclick*="toggleLanguageSelector"]').length) {
|
||||
$('.language-selector-dropdown').hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function toggleLanguageSelector() {
|
||||
$('.language-selector-dropdown').toggle();
|
||||
}
|
||||
|
||||
function changeLanguage(language) {
|
||||
fetch("https://webhooks.workato.com/webhooks/rest/a542031c-264f-4ab7-a43b-3d79da6e4def/carrot-academy-change-language", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({
|
||||
language: language,
|
||||
userId: '{{current_person.id}}'
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
const currentUrl = new URL(window.location.href);
|
||||
currentUrl.searchParams.set('lang', language);
|
||||
window.location.href = currentUrl.toString();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Error sending language information:", error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
{% if learning_path.new_content_available? %}
|
||||
{% include "learning_path_new_content_banner" %}
|
||||
{% else %}
|
||||
{% include "learning_path_completed_banner" %}
|
||||
{% endif %}
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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" %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -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 %}
|
||||
@ -0,0 +1,125 @@
|
||||
{% assign filterInProgress = filterInProgress | default: false %}
|
||||
{% assign sortByPriority = sortByPriority | default: false %}
|
||||
{% assign displayedCount = 0 %}
|
||||
|
||||
{% if items.any? %}
|
||||
<div class="paths-carousel-container">
|
||||
{% for learning_path in items %}
|
||||
{% if filterInProgress %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if displayedCount == 0 %}
|
||||
{% include "courses_zero_state"
|
||||
, message: 'Nothing found! Start some paths to fill this gap.'
|
||||
, messageEs: '¡Nada encontrado! Comienza algunas rutas para llenar este vacío.' %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state"
|
||||
, message: message %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
const pathsCarousel = $('.paths-carousel-container');
|
||||
|
||||
$(document).ready(function(){
|
||||
const maxItems = 5;
|
||||
const cards = pathsCarousel.find('.np-card').get();
|
||||
|
||||
{% if sortByPriority %}
|
||||
|
||||
cards.sort(function(a, b) {
|
||||
const aPriority = extractPriorityFromCategories(a);
|
||||
const bPriority = extractPriorityFromCategories(b);
|
||||
return bPriority - aPriority;
|
||||
});
|
||||
|
||||
// Re-append sorted cards to container
|
||||
$.each(cards, function(index, card) {
|
||||
pathsCarousel.append(card);
|
||||
});
|
||||
|
||||
{% endif %}
|
||||
|
||||
for(let i = 5; i < cards.length; i++) {
|
||||
cards[i].remove();
|
||||
}
|
||||
let initialSlide = 0;
|
||||
// Go to 2nd slide if width is higher than breakpoint
|
||||
if ($(window).width() > {{breakpoint}}) {
|
||||
initialSlide = 1;
|
||||
}
|
||||
pathsCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: initialSlide,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: {{breakpoint}},
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
cards[i].classList.add('card-visible');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function extractPriorityFromCategories(element){
|
||||
const categories = $(element).attr('categories');
|
||||
const priorityIndex = categories.indexOf('[priority]');
|
||||
if (priorityIndex !== -1) {
|
||||
const categoriesAfterPriority = categories.substring(priorityIndex);
|
||||
return Number(categoriesAfterPriority.substring(10, categoriesAfterPriority.indexOf(',')))
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Redirect to slide 1 if user slides to slide 0 above breakpoint
|
||||
setInterval(function() {
|
||||
if ($(window).width() > {{breakpoint}}) {
|
||||
const currentSlide = pathsCarousel.slick('slickCurrentSlide');
|
||||
if (currentSlide === 0) {
|
||||
console.log('redirecting from slide 0 to slide 1');
|
||||
pathsCarousel.slick('slickGoTo', 1);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.paths-carousel-container .np-card:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
.paths-carousel-container .np-card {
|
||||
visibility: hidden;
|
||||
}
|
||||
@media (max-width: {{breakpoint}}px) {
|
||||
.paths-carousel-container .np-card {
|
||||
margin: 0 10px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
<div class="np-learning-paths-resources carrot-padded-row row row-with-thumbnails">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
<div
|
||||
class="col-xs-12 col-sm-6 np-stretch-content path-item"
|
||||
{% if forloop.index > 4 %}
|
||||
style="display: none;"
|
||||
{% endif %}>
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if courses.in_catalog.size > 4 %}
|
||||
<div class="load-more-btn">
|
||||
<span class="lang-en">See More</span>
|
||||
<span class="lang-es">Ver Más</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const loadMoreBtn = document.querySelector('.load-more-btn');
|
||||
if (!loadMoreBtn) return;
|
||||
|
||||
const courseItems = document.querySelectorAll('.path-item');
|
||||
let currentlyVisible = 4;
|
||||
|
||||
loadMoreBtn.addEventListener('click', function() {
|
||||
const nextItems = Array.from(courseItems).slice(currentlyVisible, currentlyVisible + 4);
|
||||
nextItems.forEach(item => item.style.display = 'block');
|
||||
|
||||
currentlyVisible += 4;
|
||||
|
||||
if (currentlyVisible >= courseItems.length) {
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -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 %}
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,93 @@
|
||||
<nav class="sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% comment %} {% for link in navigations.sub_navigation %}
|
||||
<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>
|
||||
{% endfor %} {% endcomment %}
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/dashboard">
|
||||
<i class="fas fa-user icon-color np-sub-navigation-content-item-icon"></i>
|
||||
For You
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app">
|
||||
<i class="fas fa-ellipsis-h icon-color np-sub-navigation-content-item-icon"></i>
|
||||
In Progress
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/catalog">
|
||||
<i class="fas fa-book-alt icon-color np-sub-navigation-content-item-icon"></i>
|
||||
All Lessons
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/learning_paths">
|
||||
<i class="fas fa-list-ul icon-color np-sub-navigation-content-item-icon"></i>
|
||||
All Paths
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.sub-navigation {
|
||||
background: #003d29;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.np-sub-navigation-content-item-link {
|
||||
color: #fff;
|
||||
}
|
||||
.icon-color {
|
||||
color: #fff;
|
||||
}
|
||||
.np-sub-navigation-content-item {
|
||||
margin: 0 15px;
|
||||
}
|
||||
.active-nav .np-sub-navigation-content-item-link {
|
||||
color: #0AAD0A;
|
||||
}
|
||||
.active-nav .icon-color {
|
||||
color: #0AAD0A;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.np-sub-navigation-content-item {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.np-sub-navigation-content-item-link {
|
||||
font-size: 0.95rem;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
.np-sub-navigation-content {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const currentPath = window.location.pathname;
|
||||
const navItems = document.querySelectorAll(".np-sub-navigation-content-item");
|
||||
|
||||
navItems.forEach(item => {
|
||||
const link = item.querySelector(".np-sub-navigation-content-item-link");
|
||||
if (link) {
|
||||
const linkPath = link.getAttribute("href");
|
||||
|
||||
if (currentPath === linkPath) {
|
||||
item.classList.add("active-nav");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,49 @@
|
||||
<div class="subheader-search-container">
|
||||
<form
|
||||
action="{% route search %}"
|
||||
method="get"
|
||||
data-test="desktop-search">
|
||||
<i class="subheader-search-icon far fa-search"></i>
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="subheader-search-input lang-en"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="subheader-search-input lang-es"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
</form>
|
||||
</div>
|
||||
<style>
|
||||
.subheader-search-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #013d29;
|
||||
padding: 10px 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subheader-search-container > form {
|
||||
width: 100%;
|
||||
}
|
||||
.subheader-search-icon {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
top: 20px;
|
||||
left: 36px;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.subheader-search-input {
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 58px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,3 @@
|
||||
{% for session in training_event.sessions %}
|
||||
{% include "training_event_preview_session_tile", current_session: training_session %}
|
||||
{% endfor %}
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user