Downloaded Instacart's templates and deleted folders from churned customers.
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,20 @@
|
||||
<div
|
||||
class="achievments-display">
|
||||
{% comment %} TODO: display array after implementig gamification {% endcomment %}
|
||||
{% include "badge_icon"
|
||||
, badgeimg: ''
|
||||
, badgename: ''
|
||||
, showname: false %}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.achievments-display {
|
||||
padding: 0 0.5rem;
|
||||
display: none;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<div onclick="window.history.back()" class="carrot-back-button np-hidden-desktop">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
Back
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.carrot-back-button {
|
||||
background-color: var(--np-header-color);
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
padding: 10px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.history.scrollRestoration = 'manual';
|
||||
if(window.history.length > 1) {
|
||||
document.querySelector('.carrot-back-button').style.display = 'block';
|
||||
} else {
|
||||
document.querySelector('.carrot-back-button').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
@ -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,76 @@
|
||||
<div
|
||||
class="catalog-card minified-catalog-card"
|
||||
priority="{{ course.properties.priority }}"
|
||||
category="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}"
|
||||
progress="{{ course.progress }}">
|
||||
<div class="np-card-container carrot-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 carrot-card-padding flex-1">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle flex-1">
|
||||
<div class="course-rating">
|
||||
<i class="fas fa-star" style="color: #ffc445;"></i>
|
||||
{% if course.properties.course_rating and course.properties.course_rating != 0 and course.properties.course_reviews_count and course.properties.course_reviews_count >= 5 %}
|
||||
{{ course.properties.course_rating | round: 1 }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="course-duration">
|
||||
<i class="fas fa-clock"></i>
|
||||
{{ course.properties.course_duration }}
|
||||
</div>
|
||||
</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
|
||||
{% elsif course.progress > 0 and course.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>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<span class="lang-en">Continue</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% else %}
|
||||
<span class="lang-en">Retake</span>
|
||||
<span class="lang-es">Repetir</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div
|
||||
class="catalog-card"
|
||||
priority="{{ course.properties.priority }}"
|
||||
category="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}">
|
||||
<a class="minified-card-container" href="{{ course_path }}">
|
||||
<div class="minified-card-image-container minified-card-padding">
|
||||
<div class="minified-card-image-container-image" style="background-image: url({{ course.image_url }})"></div>
|
||||
<div class="np-card-content-subtitle">
|
||||
<i class="fas fa-clock"></i>
|
||||
{{ course.properties.course_duration }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical minified-card-padding flex-1">
|
||||
<div class="np-card-content-subtitle">
|
||||
<i class="fas fa-star" style="color: #ffc445;"></i>
|
||||
{% if course.properties.course_rating and course.properties.course_rating != 0 %}
|
||||
{{ course.properties.course_rating | round: 1 }}
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-title flex-1">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<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
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@ -0,0 +1,79 @@
|
||||
<div
|
||||
class="np-card np-no-horizontal-padding"
|
||||
categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}"
|
||||
progress="{{ learning_path.progress }}">
|
||||
<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>
|
||||
{% elsif 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,79 @@
|
||||
<div
|
||||
class="np-card"
|
||||
categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}"
|
||||
progress="{{ learning_path.progress }}">
|
||||
<div class="np-card-container carrot-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">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">{{ 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-content-vertical carrot-card-padding">
|
||||
<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
|
||||
{% elsif 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>
|
||||
{% elsif 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">Retake</span>
|
||||
<span class="lang-es">Repetir</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,39 @@
|
||||
<div
|
||||
class="np-card"
|
||||
categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}"
|
||||
progress="{{ learning_path.progress }}">
|
||||
<a class="minified-card-container" href="{% route learning_path, id: learning_path.id %}">
|
||||
<div class="minified-card-image-container minified-card-padding justify-center">
|
||||
<div class="minified-card-image-container-image" style="background-image: url({{ learning_path.image_url }})"></div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical minified-card-padding flex-1">
|
||||
<div class="np-card-content-title flex-1">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<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
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<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,27 @@
|
||||
<h3 class="np-card-heading">
|
||||
<span class="lang-en">Lesson categories</span>
|
||||
<span class="lang-es">Categorías de la lección</span>
|
||||
</h3>
|
||||
<div class="np-flex categories-flex">
|
||||
{% for category in course.categories %}
|
||||
{% assign firstChar = category.name | truncate: 1, "" %}
|
||||
{% if firstChar != '[' %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.categories-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.categories-flex .np-content-categories-content-item {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
<h3 class="np-card-heading">
|
||||
<span class="lang-en">About</span>
|
||||
<span class="lang-es">Sobre</span>
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,38 @@
|
||||
<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>
|
||||
</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,18 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
<span class="lang-en">Lesson</span>
|
||||
<span class="lang-es">Lección</span>
|
||||
<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,34 @@
|
||||
<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>
|
||||
{% else %}
|
||||
<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,48 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
<span class="lang-en">Lesson Outline</span>
|
||||
<span class="lang-es">Plan de la lección</span>
|
||||
</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">
|
||||
{% if section.name == "Overview" %}
|
||||
<span class="lang-en">Overview</span>
|
||||
<span class="lang-es">Resumen</span>
|
||||
{% else %}
|
||||
{{ section.name }}
|
||||
{% endif %}
|
||||
</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,59 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
<span class="lang-en">Progress</span>
|
||||
<span class="lang-es">Progreso</span>
|
||||
</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 %}
|
||||
">
|
||||
<span class="lang-en">
|
||||
{% t shared.progress
|
||||
, count: course.progress %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
{% if course.progress == 100 %}
|
||||
Completado
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% endif %}
|
||||
</span>
|
||||
</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">
|
||||
<span class="lang-en">Retake</span>
|
||||
<span class="lang-es">Repetir</span>
|
||||
</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 %}
|
||||
<span class="lang-en">{% t shared.enroll %}</span>
|
||||
<span class="lang-es">Inscribirse</span>
|
||||
{% elsif course.progress == 0 %}
|
||||
<span class="lang-en">Start</span>
|
||||
<span class="lang-es">Comenzar</span>
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
<span class="lang-en">Continue</span>
|
||||
<span class="lang-es">Continuar</span>
|
||||
{% else %}
|
||||
<span class="lang-en">Retake</span>
|
||||
<span class="lang-es">Repetir</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% 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">
|
||||
<span class="lang-en">
|
||||
Updated lessons await you! See
|
||||
<i class="np-alert-content-icon fas fa-exclamation-circle"></i>
|
||||
on your lesson tiles below to see what's been changed.
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
Las lecciones actualizadas te esperan! Mira
|
||||
<i class="np-alert-content-icon fas fa-exclamation-circle"></i>
|
||||
en los tiles de las lecciones a continuación para ver qué ha cambiado.
|
||||
</span>
|
||||
</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,182 @@
|
||||
<style>
|
||||
.course-carousel-container .catalog-card:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
.course-carousel-container .catalog-card {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
{% assign showOnlyInProgress = showOnlyInProgress | default: false %}
|
||||
{% assign hideOnlyCompleted = hideOnlyCompleted | default: false %}
|
||||
{% assign sortByPriority = sortByPriority | default: false %}
|
||||
{% assign showAllOnNoResults = showAllOnNoResults | default: false %}
|
||||
{% assign minified = minified | default: false %}
|
||||
{% assign displayedCount = 0 %}
|
||||
|
||||
<div class="course-carousel-container">
|
||||
{% if courses.enrolled.any? %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if showOnlyInProgress %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% if minified %}
|
||||
{% include "cards_course_minified" with course %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% elsif hideOnlyCompleted %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if minified %}
|
||||
{% include "cards_course_minified" with course %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if minified %}
|
||||
{% include "cards_course_minified" with course %}
|
||||
{% else %}
|
||||
{% include "cards_course" with course %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if showAllOnNoResults and displayedCount == 0 and courses.in_catalog.any? %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.progress < 100 %}
|
||||
{% include "cards_course" with course %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const coursesCarousel = $('.course-carousel-container');
|
||||
|
||||
{% if displayedCount > 0 %}
|
||||
$(document).ready(function(){
|
||||
const windowWidth = $(window).width();
|
||||
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);
|
||||
if(aPriority === bPriority) {
|
||||
// Sort alphabetically by title when priorities match
|
||||
const aTitle = extractTitle(a);
|
||||
const bTitle = extractTitle(b);
|
||||
return aTitle.localeCompare(bTitle);
|
||||
}else{
|
||||
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 displayedCount > 2 %}
|
||||
if ($(window).width() > {{breakpoint}}) {
|
||||
initialSlide = 1;
|
||||
}
|
||||
{% endif %}
|
||||
{% if displayedCount > 1 %}
|
||||
if(windowWidth > 768){
|
||||
coursesCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: initialSlide,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: {{breakpoint}},
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}else{
|
||||
coursesCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: 0
|
||||
});
|
||||
}
|
||||
{% else %}
|
||||
coursesCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: 0
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
cards[i].classList.add('card-visible');
|
||||
}
|
||||
|
||||
{% if displayedCount > 2 %}
|
||||
// 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) {
|
||||
coursesCarousel.slick('slickGoTo', 1);
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
{% endif %}
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
function extractPriority(element){
|
||||
const priority = $(element).attr('priority');
|
||||
return priority ? Number(priority) : 0;
|
||||
}
|
||||
|
||||
function extractTitle(element){
|
||||
const titleElement = $(element).find('.np-card-content-title');
|
||||
return titleElement.length ? titleElement.text().trim() : '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (max-width: {{breakpoint}}px) {
|
||||
.course-carousel-container .catalog-card {
|
||||
margin: 0 10px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,297 @@
|
||||
{% 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 %}
|
||||
|
||||
{% assign sortedCourses = courseslist | sort: 'name' %}
|
||||
|
||||
{% for course in sortedCourses %}
|
||||
{% assign language = 'en' %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name contains '[lang]' %}
|
||||
{% assign language = category.name | remove: '[lang]' %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_person.properties.preferred_language == 'en' and language != 'en' %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% 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 sortedCourses %}
|
||||
{% assign language = 'en' %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name contains '[lang]' %}
|
||||
{% assign language = category.name | remove: '[lang]' %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_person.properties.preferred_language == 'en' and language != 'en' %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
{% 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() {
|
||||
// Sort course items by progress (lowest first)
|
||||
const courseContainer = document.querySelector('.carrot-padded-row');
|
||||
if (courseContainer) {
|
||||
const courseItems = Array.from(courseContainer.querySelectorAll('.course-item'));
|
||||
const loadMoreBtn = courseContainer.querySelector('.load-more-btn');
|
||||
|
||||
// Sort by progress (ascending order - lowest progress first)
|
||||
courseItems.sort(function(a, b) {
|
||||
const cardA = a.querySelector('.catalog-card');
|
||||
const cardB = b.querySelector('.catalog-card');
|
||||
|
||||
if (!cardA || !cardB) return 0;
|
||||
|
||||
const progressA = parseInt(cardA.getAttribute('progress')) || 0;
|
||||
const progressB = parseInt(cardB.getAttribute('progress')) || 0;
|
||||
|
||||
return progressA - progressB; // Ascending order
|
||||
});
|
||||
|
||||
// Remove load more button temporarily to preserve its position
|
||||
if (loadMoreBtn) {
|
||||
loadMoreBtn.remove();
|
||||
}
|
||||
|
||||
// Reorder course items in the DOM
|
||||
courseItems.forEach(function(item) {
|
||||
courseContainer.appendChild(item);
|
||||
});
|
||||
|
||||
// Re-add load more button at the end
|
||||
if (loadMoreBtn) {
|
||||
courseContainer.appendChild(loadMoreBtn);
|
||||
}
|
||||
|
||||
// Reset visibility: show only first 4, hide the rest
|
||||
courseItems.forEach(function(item, index) {
|
||||
if (index < 4) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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.categoryValues || [];
|
||||
const selectedProgress = event.detail.progressValues || [];
|
||||
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');
|
||||
const cardProgress = parseInt(card.getAttribute('progress')) || 0;
|
||||
let shouldShow = false;
|
||||
|
||||
// Check category filter
|
||||
let categoryMatch = true;
|
||||
if (selectedCategories.length > 0) {
|
||||
categoryMatch = false;
|
||||
if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
categoryMatch = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check progress filter
|
||||
let progressMatch = true;
|
||||
if (selectedProgress.length > 0) {
|
||||
progressMatch = selectedProgress.some(selectedProg => {
|
||||
if (selectedProg === 'Not Started') {
|
||||
return cardProgress === 0;
|
||||
} else if (selectedProg === 'In Progress') {
|
||||
return cardProgress > 0 && cardProgress < 100;
|
||||
} else if (selectedProg === 'Completed') {
|
||||
return cardProgress === 100;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Show item if both filters match
|
||||
shouldShow = categoryMatch && progressMatch;
|
||||
|
||||
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');
|
||||
const cardProgress = parseInt(card.getAttribute('progress')) || 0;
|
||||
|
||||
// Check category filter
|
||||
let categoryMatch = true;
|
||||
if (selectedCategories.length > 0) {
|
||||
categoryMatch = false;
|
||||
if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
categoryMatch = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check progress filter
|
||||
let progressMatch = true;
|
||||
if (selectedProgress.length > 0) {
|
||||
progressMatch = selectedProgress.some(selectedProg => {
|
||||
if (selectedProg === 'Not Started') {
|
||||
return cardProgress === 0;
|
||||
} else if (selectedProg === 'In Progress') {
|
||||
return cardProgress > 0 && cardProgress < 100;
|
||||
} else if (selectedProg === 'Completed') {
|
||||
return cardProgress === 100;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
const shouldShow = categoryMatch && progressMatch;
|
||||
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,57 @@
|
||||
<div id="instacart-event-banner">
|
||||
<div class="instacart-event-banner-content">
|
||||
<div class="banner-content-column">
|
||||
<img
|
||||
class="banner-content-column-icon"
|
||||
src="https://cdn.northpass.io/Instacart/saw_banner/saw_icon.svg"
|
||||
alt="Instacart Event Banner Image">
|
||||
</div>
|
||||
<div class="banner-content-column">
|
||||
<img class="banner-content-column-text" src="https://cdn.northpass.io/Instacart/saw_banner/saw_text.svg">
|
||||
<a class="banner-content-column-button" href="instashopper://webview?url=https://community.instacartshopper.com/">
|
||||
<span class="lang-en">Go to event</span>
|
||||
<span class="lang-es">Más información</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#instacart-event-banner {
|
||||
background-color: #003d29;
|
||||
padding: 50px 24px;
|
||||
display: none;
|
||||
}
|
||||
.instacart-event-banner-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.banner-content-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
.banner-content-column-icon {
|
||||
height: 105px;
|
||||
}
|
||||
.banner-content-column-text {
|
||||
height: 81px;
|
||||
}
|
||||
|
||||
.banner-content-column-button {
|
||||
background-color: #58B947;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -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,Español" | 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,67 @@
|
||||
<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">
|
||||
<div class="dropdown-button-reset-container">
|
||||
<button class="dropdown-button-reset" onclick="resetFilter('{{ givenId }}')">
|
||||
<span class="lang-en">Reset</span>
|
||||
<span class="lang-es">Restablecer</span>
|
||||
</button>
|
||||
</div>
|
||||
{%
|
||||
include "filter_progress_select"
|
||||
%}
|
||||
|
||||
{%
|
||||
include "filter_category_select"
|
||||
%}
|
||||
|
||||
|
||||
<div class="dropdown-button-apply-container">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dropdown-button-apply-container {
|
||||
text-align: center;
|
||||
}
|
||||
.dropdown-button-reset-container {
|
||||
text-align: right;
|
||||
}
|
||||
.dropdown-button-reset {
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<label class="dropdown-label" for="progress-filter">
|
||||
<span class="lang-en">By progress</span>
|
||||
<span class="lang-es">Por progreso</span>
|
||||
</label>
|
||||
|
||||
{% assign language = current_person.properties.preferred_language | default: 'en' %}
|
||||
{% if language == 'es' %}
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="progress-filter">
|
||||
<option value="Not Started">No iniciado</option>
|
||||
<option value="In Progress">En progreso</option>
|
||||
<option value="Completed">Completado</option>
|
||||
</select>
|
||||
{% elsif language == 'en' %}
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="progress-filter">
|
||||
<option value="Not Started">Not Started</option>
|
||||
<option value="In Progress">In Progress</option>
|
||||
<option value="Completed">Completed</option>
|
||||
</select>
|
||||
{% endif %}
|
||||
@ -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">
|
||||
<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="instashopper://webview?url=https://community.instacartshopper.com/"
|
||||
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,344 @@
|
||||
<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">
|
||||
{% include "language_selector"
|
||||
, desktopMode: true
|
||||
, parentClass: 'np-header-avatar-tooltip-navigation' %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route achievements %}">
|
||||
<span class="lang-en">Achievements</span>
|
||||
<span class="lang-es">Logros</span>
|
||||
</a>
|
||||
|
||||
{% 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 lang-en" href="{% route transcript %}">
|
||||
{% t.transcript %}
|
||||
</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link lang-es" href="{% route transcript %}">
|
||||
Transcripción
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link np-danger" href="{% route logout %}">
|
||||
<span class="lang-en">{% t.sign_out %}</span>
|
||||
<span class="lang-es">Cerrar sesión</span>
|
||||
</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">
|
||||
{% include "language_selector"
|
||||
, desktopMode: false
|
||||
, parentClass: 'np-header-mobile-menu-content-nav' %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route achievements %}">
|
||||
<span class="lang-en">Achievements</span>
|
||||
<span class="lang-es">Logros</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=" mobile-menu-search lang-en"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
<form
|
||||
class=" mobile-menu-search lang-es"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}">
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="np-header-search-input "
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Buscar" />
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
<a href="/app" 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/dashboard" 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;
|
||||
}
|
||||
|
||||
.mobile-menu-search {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 30px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
.mobile-menu-search > i {
|
||||
position: absolute;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
top: 43px;
|
||||
left: 19px;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.mobile-menu-search > input {
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 58px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
</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,66 @@
|
||||
<div id="homepage-achievments-container">
|
||||
<div class="global-section-title" id="achievments-header">
|
||||
<span class="lang-en">Achievements</span>
|
||||
<span class="lang-es">Logros</span>
|
||||
</div>
|
||||
{% assign achievments = current_person.properties.achievments | split: "," %}
|
||||
{% assign SAWcompleted = false %}
|
||||
{% for achievment in achievments %}
|
||||
{% if achievment == 'saw_week' %}
|
||||
{% assign SAWcompleted = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="achievements-carousel-container">
|
||||
{% assign displayedCount = 0 %}
|
||||
|
||||
<!-- SAW Achievement -->
|
||||
{% if SAWcompleted %}
|
||||
<div class="homepage-carrot-achievments-item">
|
||||
|
||||
<img
|
||||
src="https://cdn.northpass.io/Instacart/badges/SAW_active.svg"
|
||||
alt="SAW completed badge"
|
||||
class="carrot-achievment-modal"
|
||||
desc-en="Congrats on participating in the 2025 learning sweepstakes!"
|
||||
desc-es="¡Felicidades por participar en el reto de aprendizaje 2025!">
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#homepage-achievments-container {
|
||||
display: none;
|
||||
}
|
||||
.achievements-carousel-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.achievements-carousel-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.achievements-carousel-container {
|
||||
padding: 0 82px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const achievments = document.querySelector('.achievements-carousel-container');
|
||||
if(achievments.children.length > 0) {
|
||||
document.getElementById('homepage-achievments-container').style.display = 'block';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,98 @@
|
||||
{% assign desktopMode = desktopMode | default: false %}
|
||||
{% assign parentClass = parentClass | default: "" %}
|
||||
|
||||
<a class="
|
||||
{% if desktopMode %}
|
||||
np-header-avatar-tooltip-navigation-link
|
||||
{% else %}
|
||||
np-header-mobile-menu-content-button
|
||||
{% endif %}
|
||||
" onclick="toggleLanguageSelector('{{parentClass}}')">
|
||||
<span class="lang-en">Language</span>
|
||||
<span class="lang-es">Idioma</span>
|
||||
<div
|
||||
{% if desktopMode %}
|
||||
style="padding-top: 10px;"
|
||||
{% endif %}
|
||||
class="language-selector-dropdown">
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" onclick="changeLanguage('en')">English</div>
|
||||
<div class="{% if desktopMode %}np-header-avatar-tooltip-navigation-link{% else %}language-selector-dropdown-item{% endif %}" 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(parentClass) {
|
||||
$(`.${parentClass} .language-selector-dropdown`).toggle();
|
||||
}
|
||||
|
||||
function changeLanguage(language) {
|
||||
const url = "https://instacart.northpass.com/learning/api/v1/carrot_academy/languages/{{current_person.id}}";
|
||||
const token = document.querySelector('meta[name="csrf-token"]')?.content;
|
||||
|
||||
fetch(url, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRF-Token": token
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
language: language,
|
||||
})
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response;
|
||||
})
|
||||
.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,44 @@
|
||||
<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">
|
||||
<span class="lang-en">Congratulations!</span>
|
||||
<span class="lang-es">¡Felicid ades!</span>
|
||||
</h3>
|
||||
<p class="np-learning-path-banner-description">
|
||||
<span class="lang-en">You've completed this learning path.</span>
|
||||
<span class="lang-es">¡Has completado esta ruta de aprendizaje!</span>
|
||||
</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">
|
||||
<span class="lang-en">View Certificate</span>
|
||||
<span class="lang-es">Ver certificado</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/app/learning_paths" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">
|
||||
<span class="lang-en">Explore More Learning Paths</span>
|
||||
<span class="lang-es">Explorar más rutas de aprendizaje</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const url = window.location.href.split('/');
|
||||
const pathId = url[url.length - 2];
|
||||
if (pathId === '20f0173e-1d4d-4b46-b652-548277a21bf8') {
|
||||
fetch('https://webhooks.workato.com/webhooks/rest/a542031c-264f-4ab7-a43b-3d79da6e4def/carrot-academy-saw-completion', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
path: pathId,
|
||||
user: '{{current_person.id}}'
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -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,7 @@
|
||||
<h3 class="np-card-heading">
|
||||
<span class="lang-en">About</span>
|
||||
<span class="lang-es">Sobre</span>
|
||||
</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,16 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
<span class="lang-en">Learning Path</span>
|
||||
<span class="lang-es">Ruta de aprendizaje</span>
|
||||
<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-container np-card-padding 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">
|
||||
<span class="lang-en">Learning Path</span>
|
||||
<span class="lang-es">Ruta de aprendizaje</span>
|
||||
<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,21 @@
|
||||
<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">
|
||||
<span class="lang-en">New Content Available</span>
|
||||
<span class="lang-es">Nuevo contenido disponible</span>
|
||||
</h3>
|
||||
<p class="np-learning-path-banner-description">
|
||||
<span class="lang-en">You have new content to review.</span>
|
||||
<span class="lang-es">Tienes nuevo contenido para revisar.</span>
|
||||
</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">
|
||||
<span class="lang-en">View Certificate</span>
|
||||
<span class="lang-es">Ver certificado</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
{% comment %} <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> {% endcomment %}
|
||||
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
<span class="lang-en">Outline</span>
|
||||
<span class="lang-es">Plan de estudio</span>
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if item.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if item.locked? %}
|
||||
{% include "path_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "path_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 item.locked? %}
|
||||
{% include "path_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "path_activity_unlocked"
|
||||
, class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</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,32 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
<span class="lang-en">Progress</span>
|
||||
<span class="lang-es">Progreso</span>
|
||||
</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 %}
|
||||
">
|
||||
<span class="lang-en">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</span>
|
||||
<span class="lang-es">
|
||||
{% if learning_path.progress == 100 %}
|
||||
Completado
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
En progreso
|
||||
{% else %}
|
||||
No iniciado
|
||||
{% endif %}
|
||||
</span>
|
||||
</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,195 @@
|
||||
{% assign showOnlyInProgress = showOnlyInProgress | default: false %}
|
||||
{% assign hideOnlyCompleted = hideOnlyCompleted | default: false %}
|
||||
{% assign sortByPriority = sortByPriority | default: false %}
|
||||
{% assign showAllOnNoResults = showAllOnNoResults | default: false %}
|
||||
{% assign minified = minified | default: false %}
|
||||
{% assign displayedCount = 0 %}
|
||||
|
||||
|
||||
<div class="paths-carousel-container">
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if showOnlyInProgress %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% if minified %}
|
||||
{% include "cards_learning_path_minified" with learning_path %}
|
||||
{% else %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% elsif hideOnlyCompleted %}
|
||||
{% if learning_path.progress < 100 %}
|
||||
{% if minified %}
|
||||
{% include "cards_learning_path_minified" with learning_path %}
|
||||
{% else %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if minified %}
|
||||
{% include "cards_learning_path_minified" with learning_path %}
|
||||
{% else %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if showAllOnNoResults and displayedCount == 0 and learning_paths.available.any? %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% assign language = 'en' %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name contains '[lang]' %}
|
||||
{% assign language = category.name | remove: '[lang]' %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_person.properties.preferred_language == 'en' and language != 'en' %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.progress < 100 %}
|
||||
{% if minified %}
|
||||
{% include "cards_learning_path_minified" with learning_path %}
|
||||
{% else %}
|
||||
{% include "cards_learning_path_custom" with learning_path %}
|
||||
{% endif %}
|
||||
{% assign displayedCount = displayedCount | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const pathsCarousel = $('.paths-carousel-container');
|
||||
|
||||
{% if displayedCount > 0 %}
|
||||
|
||||
$(document).ready(function () {
|
||||
const windowWidth = $(window).width();
|
||||
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);
|
||||
if (aPriority === bPriority) {
|
||||
// Sort alphabetically by title when priorities match
|
||||
const aTitle = extractTitle(a);
|
||||
const bTitle = extractTitle(b);
|
||||
return aTitle.localeCompare(bTitle);
|
||||
} else {
|
||||
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 displayedCount > 2 %}
|
||||
if ($(window).width() > {{ breakpoint }}) {
|
||||
initialSlide = 1;
|
||||
} {% endif %}
|
||||
|
||||
{% if displayedCount > 1 %}
|
||||
if (windowWidth > 768) {
|
||||
pathsCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: initialSlide,
|
||||
responsive: [{
|
||||
breakpoint: {{ breakpoint }},
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
}]
|
||||
});
|
||||
} else {
|
||||
pathsCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: 0
|
||||
});
|
||||
} {% else %}
|
||||
|
||||
pathsCarousel.slick({
|
||||
centerMode: true,
|
||||
dots: false,
|
||||
infinite: false,
|
||||
speed: 300,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
initialSlide: 0
|
||||
}); {% endif %}
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
cards[i].classList.add('card-visible');
|
||||
}
|
||||
}); {% endif %}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function extractTitle(element) {
|
||||
const titleElement = $(element).find('.np-card-content-title');
|
||||
return titleElement.length ? titleElement.text().trim() : '';
|
||||
}
|
||||
|
||||
// Redirect to slide 1 if user slides to slide 0 above breakpoint
|
||||
{% if displayedCount > 2 %}
|
||||
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); {% endif %}
|
||||
</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,247 @@
|
||||
<div class="np-learning-paths-resources carrot-padded-row row row-with-thumbnails">
|
||||
{% if items.any? %}
|
||||
{% assign sortedLearningPaths = items | sort: 'name' %}
|
||||
{% for learning_path in sortedLearningPaths %}
|
||||
{% assign language = 'en' %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name contains '[lang]' %}
|
||||
{% assign language = category.name | remove: '[lang]' %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if current_person.properties.preferred_language == 'en' and language != 'en' %}
|
||||
{% continue %}
|
||||
{% endif %}
|
||||
|
||||
<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 items.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() {
|
||||
// Sort learning path items by progress (lowest first)
|
||||
const pathContainer = document.querySelector('.np-learning-paths-resources');
|
||||
if (pathContainer) {
|
||||
const pathItems = Array.from(pathContainer.querySelectorAll('.path-item'));
|
||||
const loadMoreBtn = pathContainer.querySelector('.load-more-btn');
|
||||
|
||||
// Sort by progress (ascending order - lowest progress first)
|
||||
pathItems.sort(function(a, b) {
|
||||
const cardA = a.querySelector('.np-card');
|
||||
const cardB = b.querySelector('.np-card');
|
||||
|
||||
if (!cardA || !cardB) return 0;
|
||||
|
||||
const progressA = parseInt(cardA.getAttribute('progress')) || 0;
|
||||
const progressB = parseInt(cardB.getAttribute('progress')) || 0;
|
||||
|
||||
return progressA - progressB; // Ascending order
|
||||
});
|
||||
|
||||
// Remove load more button temporarily to preserve its position
|
||||
if (loadMoreBtn) {
|
||||
loadMoreBtn.remove();
|
||||
}
|
||||
|
||||
// Reorder path items in the DOM
|
||||
pathItems.forEach(function(item) {
|
||||
pathContainer.appendChild(item);
|
||||
});
|
||||
|
||||
// Re-add load more button at the end
|
||||
if (loadMoreBtn) {
|
||||
pathContainer.appendChild(loadMoreBtn);
|
||||
}
|
||||
|
||||
// Reset visibility: show only first 4, hide the rest
|
||||
pathItems.forEach(function(item, index) {
|
||||
if (index < 4) {
|
||||
item.style.display = 'block';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for filter events
|
||||
{% if eventId %}
|
||||
document.addEventListener('filterUpdate', function(event) {
|
||||
if (event.detail.filterId === '{{ eventId }}') {
|
||||
const selectedCategories = event.detail.categoryValues || [];
|
||||
const selectedProgress = event.detail.progressValues || [];
|
||||
const pathItems = document.querySelectorAll('.path-item');
|
||||
const loadMoreBtn = document.querySelector('.load-more-btn');
|
||||
const filteredZeroState = document.querySelector('.filtered-zero-state');
|
||||
|
||||
let visibleFilteredCount = 0;
|
||||
let totalFilteredCount = 0;
|
||||
|
||||
pathItems.forEach(function(pathItem) {
|
||||
const card = pathItem.querySelector('.np-card');
|
||||
if (card) {
|
||||
const cardCategories = card.getAttribute('categories');
|
||||
const cardProgress = parseInt(card.getAttribute('progress')) || 0;
|
||||
let shouldShow = false;
|
||||
|
||||
// Check category filter
|
||||
let categoryMatch = true;
|
||||
if (selectedCategories.length > 0) {
|
||||
categoryMatch = false;
|
||||
if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
categoryMatch = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check progress filter
|
||||
let progressMatch = true;
|
||||
if (selectedProgress.length > 0) {
|
||||
progressMatch = selectedProgress.some(selectedProg => {
|
||||
if (selectedProg === 'Not Started') {
|
||||
return cardProgress === 0;
|
||||
} else if (selectedProg === 'In Progress') {
|
||||
return cardProgress > 0 && cardProgress < 100;
|
||||
} else if (selectedProg === 'Completed') {
|
||||
return cardProgress === 100;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Show item if both filters match
|
||||
shouldShow = categoryMatch && progressMatch;
|
||||
|
||||
if (shouldShow) {
|
||||
totalFilteredCount++;
|
||||
// Show only first 4 filtered items initially
|
||||
if (totalFilteredCount <= 4) {
|
||||
pathItem.style.display = 'block';
|
||||
visibleFilteredCount++;
|
||||
} else {
|
||||
pathItem.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
pathItem.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide zero state for filtered results
|
||||
if (filteredZeroState) {
|
||||
if (totalFilteredCount === 0 && (selectedCategories.length > 0 || selectedProgress.length > 0)) {
|
||||
filteredZeroState.style.display = 'block';
|
||||
} else {
|
||||
filteredZeroState.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(pathItems).filter(item => {
|
||||
const card = item.querySelector('.np-card');
|
||||
if (!card) return false;
|
||||
|
||||
const cardCategories = card.getAttribute('categories');
|
||||
const cardProgress = parseInt(card.getAttribute('progress')) || 0;
|
||||
|
||||
// Check category filter
|
||||
let categoryMatch = true;
|
||||
if (selectedCategories.length > 0) {
|
||||
categoryMatch = false;
|
||||
if (cardCategories) {
|
||||
const cardCategoryArray = cardCategories.split(',');
|
||||
categoryMatch = selectedCategories.some(selectedCat =>
|
||||
cardCategoryArray.some(cardCat =>
|
||||
cardCat.trim().toLowerCase().includes(selectedCat.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check progress filter
|
||||
let progressMatch = true;
|
||||
if (selectedProgress.length > 0) {
|
||||
progressMatch = selectedProgress.some(selectedProg => {
|
||||
if (selectedProg === 'Not Started') {
|
||||
return cardProgress === 0;
|
||||
} else if (selectedProg === 'In Progress') {
|
||||
return cardProgress > 0 && cardProgress < 100;
|
||||
} else if (selectedProg === 'Completed') {
|
||||
return cardProgress === 100;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
const shouldShow = categoryMatch && progressMatch;
|
||||
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,39 @@
|
||||
{% assign has_alert_messages = false %}
|
||||
{% for message in messages.alert %}
|
||||
{% if message != "You are already logged in." %}
|
||||
{% assign has_alert_messages = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if has_alert_messages %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
{% if message != "You are already logged in." %}
|
||||
<div>{{ message }}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% assign has_notice_messages = false %}
|
||||
{% for message in messages.notice %}
|
||||
{% if message != "You are already logged in." %}
|
||||
{% assign has_notice_messages = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if has_notice_messages %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
{% if message != "You are already logged in." %}
|
||||
<div>{{ message }}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -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">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
@ -0,0 +1,3 @@
|
||||
<span class="{{ class }}">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
@ -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,97 @@
|
||||
<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">
|
||||
<i class="fas fa-user icon-color np-sub-navigation-content-item-icon"></i>
|
||||
<span class="lang-en">For you</span>
|
||||
<span class="lang-es">Para ti</span>
|
||||
</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/dashboard">
|
||||
<i class="fas fa-ellipsis-h icon-color np-sub-navigation-content-item-icon"></i>
|
||||
<span class="lang-en">In progress</span>
|
||||
<span class="lang-es">En progreso</span>
|
||||
</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>
|
||||
<span class="lang-en">All lessons</span>
|
||||
<span class="lang-es">Todas las lecciones</span>
|
||||
</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>
|
||||
<span class="lang-en">All paths</span>
|
||||
<span class="lang-es">Todas las rutas</span>
|
||||
</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,59 @@
|
||||
<div class="subheader-search-container">
|
||||
<form
|
||||
class="lang-en"
|
||||
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"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search" />
|
||||
</form>
|
||||
<form
|
||||
class="lang-es"
|
||||
action="{% route search %}"
|
||||
method="get"
|
||||
data-test="desktop-search">
|
||||
<i class="subheader-search-icon far fa-search"></i>
|
||||
<input
|
||||
aria-label="Buscar"
|
||||
class="subheader-search-input"
|
||||
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: 25px;
|
||||
font-weight: bold;
|
||||
top: 20px;
|
||||
left: 34px;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.subheader-search-input {
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 58px;
|
||||
border-radius: 4px;
|
||||
height: 45px;
|
||||
border: none;
|
||||
}
|
||||
</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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user