Walmart Supplier Mexico templates backed up.
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,76 @@
|
||||
<div class="banner-wrapper">
|
||||
<div class="banner-container">
|
||||
<div class="banner-image-wrapper">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/nav+images/Category+Advisor+Resources.png" alt="" class="banner-img">
|
||||
</div>
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-heading">
|
||||
Welcome Category Advisors!
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
This learning path contains a collection of resources, materials, and information related to the Category Advisor Program and is designed to support and assist you with the advisorship.
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
This page and the resources are for use by current category advisors only and cannot be shared.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner-wrapper {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
.banner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
background: #001E60;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.banner-heading {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.banner-descirption {
|
||||
font-size: 20px;
|
||||
}
|
||||
.bold-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
.deatils-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.banner-image-wrapper {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.banner-content-container {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 900px) {
|
||||
.banner-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.banner-descirption{
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<div class="carousel-wrapper">
|
||||
<div class="carousel-heading">Analysis and Reporting</div>
|
||||
<div class="carousel-filter-wrapper" id="carousel-filter-wrapper-analysis">
|
||||
<div class="filter-container">
|
||||
<div class="filter" id="filterToggleAnalysis">Filter</div>
|
||||
</div>
|
||||
<div class="filter-content" id="filterContentAnalysis">
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="a-not-started">
|
||||
<label class="filter-name">Not Started</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="a-in-progress">
|
||||
<label class="filter-name">In Progress</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="a-completed">
|
||||
<label class="filter-name">Completed</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="analysis-and-reporting-carousel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Analysis and Reporting' %}
|
||||
<div class="carousel-cards-container analysis-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
|
||||
{% include 'cards_course' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.analysis-and-reporting-carousel {
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".analysis-and-reporting-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
document.getElementById("filterToggleAnalysis").addEventListener("click", function() {
|
||||
const filterWrapper = document.querySelector('#carousel-filter-wrapper-analysis');
|
||||
filterWrapper.classList.toggle("filter-active");
|
||||
});
|
||||
|
||||
document.addEventListener("click", function(event) {
|
||||
const filterWrapper = document.querySelector('#carousel-filter-wrapper-analysis');
|
||||
const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggleAnalysis";
|
||||
|
||||
if (!isClickInside) {
|
||||
filterWrapper.classList.remove("filter-active");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCardsAnalysis() {
|
||||
const selectedFilters = Array.from(document.querySelectorAll('#filterContentAnalysis .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('a-', ''));
|
||||
const cards = document.querySelectorAll('.analysis-courses');
|
||||
|
||||
$(".analysis-and-reporting-carousel").slick('slickUnfilter');
|
||||
|
||||
if (selectedFilters.length === 0) {
|
||||
$(".analysis-and-reporting-carousel").slick('slickUnfilter');
|
||||
} else {
|
||||
$(".analysis-and-reporting-carousel").slick('slickFilter', function(index, element) {
|
||||
const cardProgress = element.getAttribute('progress');
|
||||
return selectedFilters.includes(cardProgress);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('#filterContentAnalysis .filter-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', filterCardsAnalysis);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,63 @@
|
||||
{% assign blog_counter = 0 %}
|
||||
<div class="heading-container">
|
||||
<a href='/app/blog' class="carousel-heading events-link">
|
||||
Anuncios relevantes
|
||||
</a>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<div class="announcement-carousel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Blog' %}
|
||||
<div class="event-cart-carousel-item">
|
||||
{% include "cards_course" with course %}
|
||||
{% assign blog_counter = blog_counter | plus: 1 %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if blog_counter == 0 %}
|
||||
{% include "courses_zero_state", message: "No tienes ningún curso asignado." %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<style>
|
||||
.events-grid-container {
|
||||
width: 33%;
|
||||
}
|
||||
.announcements-carousel {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".announcement-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="np-card np-card-article">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
Viewed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
{% assign skip_course_page = false %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Blog' or category.name == 'HelpDoc' %}
|
||||
{% assign skip_course_page = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="card-course" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<div class="button-container">
|
||||
{% if skip_course_page %}
|
||||
<a class="button-course" {% if course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="button-course" {% if course.properties.skip_course_page == true and course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a href="{{course_path}}" class="np-card np-card-ongoing">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,83 @@
|
||||
<div class="np-card np-no-horizontal-padding lp-card"
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Grow Program' %}
|
||||
prioritise = 'true'
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
categories="{% for category in learning_path.categories %}
|
||||
{{category.name}},
|
||||
{% endfor %}"
|
||||
progress="{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
in-progress
|
||||
{% elsif learning_path.progress == 100 %}
|
||||
completed
|
||||
{% else %}
|
||||
not-started
|
||||
{% endif %}">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<a class="button-course" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="np-card np-card-learning-path-progress">
|
||||
<div class="np-card-container lp-progress-card-wrapper">
|
||||
<div class="learning-path-title np-hidden-desktop">{{ learning_path.name }}</div>
|
||||
<div class="lp-progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="130"
|
||||
height="130"
|
||||
data-total="{{learning_path.items.count}}"
|
||||
>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="#E0E4EB"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-progress"
|
||||
stroke="#3C228A"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#333" dy=".3em">{{learning_path.progress}}%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="lp-content">
|
||||
<div class="learning-path-title np-hidden-mobile">{{ learning_path.name }}</div>
|
||||
<div class="lp-total-courses">
|
||||
Total Courses: <span>{{ learning_path.items.count }} Courses</span>
|
||||
</div>
|
||||
<div class="lp-completed-items">
|
||||
{% assign completed_count = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.completed? %}
|
||||
{% assign completed_count = completed_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
Completed:
|
||||
{% if completed_count > 1 or completed_count == 0 %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Courses</span>
|
||||
{% else %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Course</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
|
||||
<div class="card-course">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-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="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<a class="button-course" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
<div class="np-card event-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<div class="button-container">
|
||||
<a
|
||||
class="button-course"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,96 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
|
||||
{% if items.any? %}
|
||||
{% assign sorted_items =items | sort: "name" %}
|
||||
{% for course in sorted_items %}
|
||||
|
||||
{% comment %} USED FOR PROGRESS FILTER {% endcomment %}
|
||||
{% assign course_status = "" %}
|
||||
|
||||
{% if course.started? == false %}
|
||||
{% assign course_status = "not-started" %}
|
||||
{% elsif course.completed? %}
|
||||
{% assign course_status = "completed" %}
|
||||
{% elsif course.started? %}
|
||||
{% assign course_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if topic == "Not Categorized" %}
|
||||
<div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
|
||||
{% else %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == topic %}
|
||||
<div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".courses-carousel").not('.slick-initialized').slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
let npHideLang = getCookie("npLang");
|
||||
if (npHideLang == "es")
|
||||
{
|
||||
npHideLang = "English";
|
||||
}
|
||||
else if (npHideLang == "en")
|
||||
{
|
||||
npHideLang = "Spanish";
|
||||
}
|
||||
var element = document.querySelectorAll(`[language=${npHideLang}]`);
|
||||
element.forEach(card => {card.classList.add("np-hidden")});
|
||||
})
|
||||
function getCookie(name) {
|
||||
var dc = document.cookie;
|
||||
var prefix = name + "=";
|
||||
var begin = dc.indexOf("; " + prefix);
|
||||
if (begin == -1) {
|
||||
begin = dc.indexOf(prefix);
|
||||
if (begin != 0) return null;
|
||||
}
|
||||
else
|
||||
{
|
||||
begin += 2;
|
||||
var end = document.cookie.indexOf(";", begin);
|
||||
if (end == -1) {
|
||||
end = dc.length;
|
||||
}
|
||||
}
|
||||
return decodeURI(dc.substring(begin + prefix.length, end));
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,104 @@
|
||||
{% assign available_categories = "Ethics and Compliance,Item Creation,Getting Paid,Merchandising,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
|
||||
<div class="catalog-categories-container">
|
||||
<div class="text-container">
|
||||
<div class="text-heading text-center">
|
||||
Explore the module catalog below!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-links-wrapper" id="categories">
|
||||
{% assign uniq_cats = '' %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if available_categories contains category.name %}
|
||||
<script> console.log("{{ course.name }} + {{ category.name }}")</script>
|
||||
{% unless uniq_cats contains category.name %}
|
||||
<a class="category-card" id="{{category.name}}" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
|
||||
<img class="category-card-image" src="" alt="">
|
||||
</a>
|
||||
{% assign uniq_cats = uniq_cats | append: category.name%}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.category-links-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.category-card {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
padding: 10px;
|
||||
}
|
||||
.category-card:hover {
|
||||
transform: scale(1.075);
|
||||
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.category-card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.category-card-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const categoryCards = document.querySelectorAll('.category-card');
|
||||
const images = [
|
||||
{name: 'Ethics and Compliance', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/ethics.png"},
|
||||
{name: 'Onboarding', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/onboarding.png"},
|
||||
{name: 'Retail Basics', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/retail.png"},
|
||||
{name: 'Item Creation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/item_creation.png"},
|
||||
{name: 'Merchandising', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/merchandisin.png"},
|
||||
{name: 'Transportation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/transport.png"},
|
||||
{name: 'Packaging and Labeling', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/packing.png"},
|
||||
{name: 'Getting Paid', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/gettingPaid.png"},
|
||||
{name: 'Replenishment', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/Replenishment.png"},
|
||||
];
|
||||
|
||||
function addCategoryCardImage() {
|
||||
categoryCards.forEach((card) => {
|
||||
const cardName = card.id;
|
||||
const cardImage = card.querySelector('.category-card-image');
|
||||
|
||||
for (const i of images) {
|
||||
if (cardName === i.name) {
|
||||
cardImage.src = i.url;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sortCategoryCards() {
|
||||
const wrapper = document.querySelector('.category-links-wrapper');
|
||||
const sortedCards = Array.from(categoryCards).sort((a, b) => {
|
||||
const aIndex = images.findIndex(img => img.name === a.id);
|
||||
const bIndex = images.findIndex(img => img.name === b.id);
|
||||
return aIndex - bIndex;
|
||||
});
|
||||
|
||||
wrapper.innerHTML = '';
|
||||
|
||||
sortedCards.forEach(card => {
|
||||
wrapper.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
addCategoryCardImage();
|
||||
sortCategoryCards();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "grow-with-walmart-zero-state", message: message %}
|
||||
{% endif %}
|
||||
@ -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,58 @@
|
||||
{% assign uniqe_enrolled = '' %}
|
||||
<div class="heading-container">
|
||||
<div class="carousel-heading">
|
||||
Continue Learning
|
||||
</div>
|
||||
</div>
|
||||
<div class="continue_learning_wrapper">
|
||||
<div class="continue_learning_carousel">
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% unless category.name == "HelpDoc" %}
|
||||
{% unless uniqe_enrolled contains learning_path.name %}
|
||||
<div class="carousel-card-wrapper">
|
||||
{% include 'lp_progress_cards' %}
|
||||
</div>
|
||||
{% assign uniqe_enrolled = uniqe_enrolled | append: learning_path.name | append: ',' %}
|
||||
{% endunless %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.continue_learning_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".continue_learning_carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,15 @@
|
||||
{% if course.enrolled? %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
{% else%}
|
||||
<span class="{{ class }}">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="course-categories-wrapper">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h2 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h2>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Blog' %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
{% assign uniq_courses = '' %}
|
||||
{% assign course_counter = 0 %}
|
||||
{% assign learner_region = current_person.properties.person_locale %}
|
||||
|
||||
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% unless category.name == 'Blog' %}
|
||||
{% unless uniq_courses contains course.name %}
|
||||
{% if course.properties.course_locale == learner_region %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% assign uniq_courses = uniq_courses | append: course.name %}
|
||||
{% assign course_counter = course_counter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if course_counter == 0 %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "grow-with-walmart-zero-state", message: message %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,21 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'HelpDoc' %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container default-zero-state-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
|
||||
<div class="welcome-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction green-text">
|
||||
Crece con Walmart
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
Es la entrada al ecosistema Walmart. Aqui podrás fortalecer tus habilidades empresariales y digitales y conocer como iniciar tu camino en el Marketplace de Walmart Mexico.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<video width='100%' height="100%" controls muted>
|
||||
<source src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/introduccio%CC%81n_a_crece_con_walmart+(540p).mp4">
|
||||
</video>
|
||||
<div class="video-sub-text">
|
||||
<span class="bold-text">Soporte:</span> <a href="mailto:contacto@crececonwalmart.com">contacto@crececonwalmart.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.video-sub-text a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,32 @@
|
||||
|
||||
<a href="/app/crete-con-walmart" class="crete-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction green-text">
|
||||
Crece con Walmart
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
Programa dirigido a micro, pequeñas y medianas empresas (MIPYME) en México que buscan ampliar sus capacidades empresariales y digitales.
|
||||
</div>
|
||||
<div class="section-text">
|
||||
Descubre más aquí.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/homepage-image-4.png" alt="" class="section-img">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.crete-section-container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,47 @@
|
||||
|
||||
<div class="np-learning-paths-resources custom-lp-index">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == '{{cat}}' %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
No tienes asignadas rutas de aprendizaje.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function sortGrowLps() {
|
||||
const lpCards = Array.from(document.querySelectorAll('.lp-card'));
|
||||
|
||||
lpCards.sort((a, b) => {
|
||||
const aPrioritise = a.getAttribute('prioritise') === 'true';
|
||||
const bPrioritise = b.getAttribute('prioritise') === 'true';
|
||||
|
||||
return bPrioritise - aPrioritise;
|
||||
});
|
||||
|
||||
|
||||
const parentElement = lpCards[0].parentNode;
|
||||
|
||||
|
||||
while (parentElement.firstChild) {
|
||||
parentElement.removeChild(parentElement.firstChild);
|
||||
}
|
||||
|
||||
|
||||
lpCards.forEach(card => parentElement.appendChild(card));
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
sortGrowLps();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,63 @@
|
||||
<div class="sub-navigation-container">
|
||||
<a href="/app/aprendizaje-autogestionado" class="sub-nav-item">
|
||||
<div class="sub-nav-image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/laptop_icon.png" alt="" class="sub-nav-image">
|
||||
</div>
|
||||
<div class="sub-nav-item-name">Aprendizaje autogestionado</div>
|
||||
</a>
|
||||
<a href="/app/sesiones-en-vivo" class="sub-nav-item">
|
||||
<div class="sub-nav-image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/person_icon.png" alt="" class="sub-nav-image">
|
||||
</div>
|
||||
<div class="sub-nav-item-name">Sesiónes en vivo</div>
|
||||
</a>
|
||||
<a href="#" class="sub-nav-item">
|
||||
<div class="sub-nav-image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/walmart_icon.png" alt="" class="sub-nav-image">
|
||||
</div>
|
||||
<div class="sub-nav-item-name">Caja de herramientas</div>
|
||||
</a>
|
||||
<a href="#" class="sub-nav-item">
|
||||
<div class="sub-nav-image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/announcement_icon.png" alt="" class="sub-nav-image">
|
||||
</div>
|
||||
<div class="sub-nav-item-name">¡Muy pronto!</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sub-navigation-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
margin: 40px 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.sub-nav-item-name {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
.sub-nav-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
.sub-nav-item {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
width: 100%;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(to bottom, #04417a, #012449, #000f23);
|
||||
}
|
||||
.sub-nav-item:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,219 @@
|
||||
<div class="faq-section-container">
|
||||
<div class="text-container">
|
||||
<div class="text-heading text-center">
|
||||
FAQ | Academia de Proveedores de Walmart de México y Centroamérica
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-wrapper">
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Quién puede acceder a la Academia de Proveedores de Walmart de México y Centroamérica?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
La Academia de Proveedores está disponible para cualquier persona que quiera fortalecer sus habilidades empresariales así como aprender sobre Walmart y sus diferentes canales de venta. Los interesados deben registrarse via Retail Link. <br>
|
||||
Los programas de aprendizaje se ponen a tu disposición según el punto en el que te encuentres en tu trayectoria como empresario/proveedor, desde conocer los primeros pasos para trabajar con Walmart hasta lograr que tu producto esté en los estantes.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Qué costo tiene acceder al contenido?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
El contenido el 100% gratuito.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Cómo está compuesta la Academia de Proveedores?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
La Academia de Proveedores cuenta con diferentes programas de aprendizaje de temas específicos. A su vez, estos programas están compuestos por módulos de aprendizaje autogestionado, sesiones en vivo y cajas de herramientas.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿A quién esta dirigido el programa Crece con Walmart?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
Crece con Walmart esta dirigido a micro, pequeñas y medianas empresas que buscan aprender a vender sus productos en línea y modernizar sus operaciones.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Cada cuando se actualiza el contenido?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
La Academia de Proveedores sumará nuevos programas de aprendizaje constantemente. <br>
|
||||
Además, cada programa de aprendizaje se actualizará con frecuencia ofreciendo nuevos módulos de aprendizaje autogestionado y sesiones en vivo.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Quién me puede dar soporte?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
El equipo de la Academia de Proveedores es el encargado de ayudarte a apoyar tu aprendizaje. <br>
|
||||
Envía un correo electrónico a contacto@crececonwalmart.com y te responderemos lo antes posible.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Cómo puedo dar seguimiento a mi progreso?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
Cada uno de los programas de aprendizaje cuenta con un reporte de avance que te permitirá identificar tu progreso.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-card">
|
||||
<div class="faq-top">
|
||||
<div class="faq-cta">
|
||||
<i class="far fa-plus cta-faq-icon"></i>
|
||||
</div>
|
||||
<div class="card-heading">
|
||||
¿Cómo puedo dar retroalimentación al contenido?
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-content">
|
||||
<div class="faq-answer">
|
||||
Por favor, contáctanos a contacto@crececonwalmart.com y daremos seguimiento a tus comentarios.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% comment %} <div class="support-text text-center">
|
||||
Contact supplierdevelopment@walmart.com for additional support.
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.faq-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.faq-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-card {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.faq-top {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
margin-top: 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.faq-cta {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffc220;
|
||||
}
|
||||
|
||||
.cta-faq-icon {
|
||||
color: #000;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-card.active .faq-content {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.faq-top .card-heading {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.support-text {
|
||||
font-size: 1.5rem;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const faqCards = document.querySelectorAll('.faq-card');
|
||||
|
||||
faqCards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const icon = card.querySelector('.cta-faq-icon');
|
||||
|
||||
if (card.classList.contains('active')) {
|
||||
card.classList.remove('active');
|
||||
icon.classList.remove('fa-minus');
|
||||
icon.classList.add('fa-plus');
|
||||
} else {
|
||||
card.classList.add('active');
|
||||
icon.classList.remove('fa-plus');
|
||||
icon.classList.add('fa-minus');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,9 @@
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="feature-lp-card">
|
||||
<div class="lp-card-image-container">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="lp-feature-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,63 @@
|
||||
<div class="feature-learning-paths-container">
|
||||
<div class="text-container">
|
||||
<div class="text-heading">
|
||||
Grow With Walmart Learning Pathways
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-lp-carousel">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Featured' %}
|
||||
<div class="feature-lp-carousel-card-container">
|
||||
{% include 'feature_cards_lp' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.feature-cards-container {
|
||||
display: flex;
|
||||
}
|
||||
.feature-lp-carousel-card-container {
|
||||
margin: 10px;
|
||||
}
|
||||
.feature-learning-paths-container {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".feature-lp-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,117 @@
|
||||
{% assign topic_classname = topic | split: " " %}
|
||||
|
||||
<div class="np-progress-filter-wrapper">
|
||||
{% if label %}
|
||||
<div class="np-progress-filter-label">
|
||||
<span class="lang-en">{{ label }}</span>
|
||||
<span class="lang-es">Filtrar por progreso:</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="progress-filter filter-select-wrapper select-wrapper np-button lang-en" data-topic="{{ topic_classname | join: '-' | downcase }}" style="border-radius: 8px;">
|
||||
|
||||
<select >
|
||||
<option selected disabled hidden>{{ default_option}}</option>
|
||||
<option value="a">All Courses</option>
|
||||
<option value="n">Not Started</option>
|
||||
<option value="i">In Progress</option>
|
||||
<option value="c">Completed</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-progress-filter-label {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
padding-right: 7px;
|
||||
text-transform: none;
|
||||
font-weight:500;
|
||||
font-size:0.812rem;
|
||||
}
|
||||
.np-progress-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.filter-select-wrapper {
|
||||
position: relative;
|
||||
padding:0;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
height:auto;
|
||||
text-transform: none;
|
||||
background: transparent;
|
||||
border-radius:0;
|
||||
}
|
||||
.filter-select-wrapper:hover {
|
||||
background:transparent;
|
||||
color:#fff;
|
||||
}
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: #062531;
|
||||
top: 105%;
|
||||
left: -2px;
|
||||
z-index: 99;
|
||||
width: 102%;
|
||||
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||
border-top:none;
|
||||
}
|
||||
.select-items div {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-top:none;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.select-items div:hover { color: rgba(255, 255, 255, 1); }
|
||||
.select-selected {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 9px 66px 9px 20px;
|
||||
position: relative;
|
||||
color:#fff;
|
||||
}
|
||||
.select-selected::after {
|
||||
content:"\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
color:rgba(255, 255, 255, 0.5);
|
||||
right:10px;
|
||||
top:0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size:1rem;
|
||||
}
|
||||
.select-selected::before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
width:20px;
|
||||
height:100%;
|
||||
border-left:2px solid rgba(255, 255, 255, 0.25);
|
||||
right:20px;
|
||||
top:0;
|
||||
}
|
||||
.select-selected.select-arrow-active::after { transform: rotate(180deg); }
|
||||
.same-as-selected,
|
||||
.filter-select-wrapper select,
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
.mo-filter-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: #062531;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,108 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="copyright">© 2025 Walmart Inc.</div>
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<div class="footer-support-container">
|
||||
<div class="support-text-footer">
|
||||
Soporte:
|
||||
</div>
|
||||
<a href="mailto:contacto@crececonwalart.com" class="support-text-footer">
|
||||
contacto@crececonwalart.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
max-width:1380px;
|
||||
margin:auto;
|
||||
border-top: 1px solid #DADCE0;
|
||||
padding: 24px 16px 0px;
|
||||
background: #001E60;
|
||||
}
|
||||
.support-text-footer {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
.footer-support-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.np-footer-top {
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-direction:row;
|
||||
flex-wrap:wrap;
|
||||
margin:0;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-footer-navigation {
|
||||
min-height:auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
font-size:16px;
|
||||
line-height:30px;
|
||||
margin: 0 12px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width:1381px) {
|
||||
.np-footer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,100 @@
|
||||
<div class="carousel-wrapper">
|
||||
<div class="carousel-heading">Getting Started</div>
|
||||
<div class="carousel-filter-wrapper" id="carousel-filter-wrapper-started">
|
||||
<div class="filter-container">
|
||||
<div class="filter" id="filterToggle">Filter</div>
|
||||
</div>
|
||||
<div class="filter-content" id="filterContent">
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="gs-not-started">
|
||||
<label class="filter-name">Not Started</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="gs-in-progress">
|
||||
<label class="filter-name">In Progress</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="gs-completed">
|
||||
<label class="filter-name">Completed</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="getting-started-carousel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Getting Started' %}
|
||||
<div class="carousel-cards-container gettin-started-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
|
||||
{% include 'cards_course' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.getting-started-carousel {
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$(".getting-started-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
document.getElementById("filterToggle").addEventListener("click", function() {
|
||||
const filterWrapper = document.querySelector('.carousel-filter-wrapper');
|
||||
filterWrapper.classList.toggle("filter-active");
|
||||
});
|
||||
document.addEventListener("click", function(event) {
|
||||
const filterWrapper = document.querySelector('#carousel-filter-wrapper-started');
|
||||
const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggle";
|
||||
|
||||
if (!isClickInside) {
|
||||
filterWrapper.classList.remove("filter-active");
|
||||
}
|
||||
});
|
||||
function filterCards() {
|
||||
const selectedFilters = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id.replace('gs-', ''));
|
||||
const cards = document.querySelectorAll('.gettin-started-courses');
|
||||
|
||||
$(".getting-started-carousel").slick('slickUnfilter');
|
||||
|
||||
if (selectedFilters.length === 0) {
|
||||
$(".getting-started-carousel").slick('slickUnfilter');
|
||||
} else {
|
||||
$(".getting-started-carousel").slick('slickFilter', function(index, element) {
|
||||
const cardProgress = element.getAttribute('progress');
|
||||
return selectedFilters.includes(cardProgress);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('#filterContent .filter-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', filterCards);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,118 @@
|
||||
{% if us_user_grow or us_user_supplier %}
|
||||
<div class="banner-wrapper">
|
||||
<div class="banner-container">
|
||||
<div class="banner-image-wrapper">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/GWW+Logo.png" alt="" class="banner-img">
|
||||
<div class="deatils-container">
|
||||
<div class="banner-descirption text-center">Email <span class="bold-text">supplierdevelopment@walmart.com</span></div>
|
||||
<div class="banner-descirption text-center">for additional support.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-descirption">
|
||||
If you are a U.S. based supplier wanting to sell your product in our U.S. stores, clubs, or online marketplace, <span class="bold-text">Grow With Walmart</span> will help prepare you for success.
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
Learn foundational business skills in our Business Fundamentals and Advanced Business pathways. Explore the skills necessary for a successful experience working with Walmart in our Retail Ready Capabilities and Walmart Ways of Working pathways.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif mexico_user %}
|
||||
<div class="banner-wrapper">
|
||||
<div class="banner-container">
|
||||
<div class="banner-image-wrapper">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Crece-con-Walmart-Blanco.png" alt="" class="banner-img">
|
||||
<div class="deatils-container">
|
||||
<div class="banner-descirption text-center">Correo electrónico <span class="bold-text">contacto@crececonwalmart.com</span></div>
|
||||
<div class="banner-descirption text-center">para soporte adicional.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-descirption">
|
||||
Crece con Walmart es un programa de desarrollo de proveedores que tiene como objetivo trabajar con personas que lideran micro, pequeñas y medianas empresas en México para ampliar sus capacidades empresariales y digitales.
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
Por medio de módulos de aprendizaje autogestionado, sesiones grupales en vivo y mentorías uno a uno, se busca apoyar a empresarias y empresarios para fortalecer sus capacidades y habilidades de venta en línea.
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
Crece con Walmart te permite desarrollar, aprender y conectar para, juntos, hacer que tu negocio llegue al siguiente nivel.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% elsif india_user %}
|
||||
<div class="banner-wrapper">
|
||||
<div class="banner-container">
|
||||
<div class="banner-image-wrapper">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Banners/Vriddhi+Logo.png" alt="" class="banner-img">
|
||||
<div class="deatils-container">
|
||||
<div class="banner-descirption text-center">Email <span class="bold-text">contactus@walmartvriddhi.org</span></div>
|
||||
<div class="banner-descirption text-center">for additional support.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-content-container">
|
||||
<div class="banner-descirption">
|
||||
Walmart Vriddhi is a supplier development program that aims to work with 50,000 Micro, Small and Medium Enterprises (MSMEs) in India to expand their domestic capabilities.
|
||||
</div>
|
||||
<div class="banner-descirption">
|
||||
The program offers the opportunity to develop through on-demand learning and personalized mentoring. Participants also have support onboarding to Flipkart Marketplace.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.banner-wrapper {
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
.banner-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
background: #001E60;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.banner-descirption {
|
||||
font-size: 20px;
|
||||
}
|
||||
.bold-text {
|
||||
font-weight: 700;
|
||||
}
|
||||
.deatils-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.banner-image-wrapper {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
.banner-content-container {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 900px) {
|
||||
.banner-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.banner-descirption{
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,28 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script>
|
||||
function changeTranscriptPageText() {
|
||||
if (window.location.pathname == "/app/transcript") {
|
||||
const heading = document.querySelector('.Transcript_Caption');
|
||||
const subHeading = document.querySelector('.Transcript_SchoolName');
|
||||
subHeading.style.color = "#fff";
|
||||
heading.style.color = "#fff";
|
||||
heading.innerText = "Transcript";
|
||||
}
|
||||
}
|
||||
addEventListener("DOMContentLoaded", (event) => {
|
||||
changeTranscriptPageText();
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,358 @@
|
||||
{% assign us_user_grow = false %}
|
||||
{% assign us_user_supplier = false %}
|
||||
{% assign india_user = false %}
|
||||
{% assign mexico_user = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == 'Grow With Walmart' %}
|
||||
{% assign us_user_grow = true %}
|
||||
{% endif %}
|
||||
{% if group.name == 'Supplier Academy' %}
|
||||
{% assign us_user_supplier = true %}
|
||||
{% endif %}
|
||||
{% if group.name == 'Walmart Vriddhi' %}
|
||||
{% assign india_user = true %}
|
||||
{% endif %}
|
||||
{% if group.name == 'Crece con Walmart' %}
|
||||
{% assign mexico_user = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign category_advisors = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if group.name == 'Category Advisors' %}
|
||||
{% assign category_advisors = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
{% 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-mobile np-header-desktop-nav hidden-mobile">
|
||||
<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 %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Inicio
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app/mi-ruta-de-conocimiento"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Mi ruta de conocimiento
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="/app/crete-con-walmart"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
<img class="header-nav-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/homepage-image-4.png" alt="">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hidden-desktop header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<i class="fal fa-bars hamburger-menu"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/250314-Icono-Usuario-Academia-de-Proveedores.png"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="header-mobile-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button start-here-btn-mobile"
|
||||
href="/app/grow-with-walmart-catalog"
|
||||
>
|
||||
Start Here
|
||||
</a>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% unless website_navigation.name == 'Dashboard' %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{% if website_navigation.name == '' %}
|
||||
|
||||
{% endif %}
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/welcome-to-walmart"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Welcome to Walmart
|
||||
</a>
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Courses
|
||||
</a>
|
||||
<a
|
||||
href="/app/blog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
<a
|
||||
href="/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d/activities"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Help Docs
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a
|
||||
href="#"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.start-here-btn {
|
||||
color: #000;
|
||||
}
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-dropdown-container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
z-index: 10;
|
||||
width: fit-content;
|
||||
top: 40px;
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:hover .header-dropdown-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-dropdown-option {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown-nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-dropdown-option:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.hidden-mobile {
|
||||
display: none;
|
||||
}
|
||||
.hidden-desktop {
|
||||
display: block;
|
||||
}
|
||||
.header-mobile-menu-nav {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.hamburger-menu {
|
||||
color: #fff;
|
||||
}
|
||||
.header-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.header-mobile-search-input {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
}
|
||||
.start-here-btn-mobile {
|
||||
background: #FFC220;
|
||||
}
|
||||
.header-nav-image {
|
||||
max-width: 175px;
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
align-items: center;
|
||||
}
|
||||
@media only screen and (min-width: 1100px) {
|
||||
.hidden-mobile {
|
||||
display: flex;
|
||||
}
|
||||
.hidden-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.np-header-mobile-menu-content {
|
||||
top: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@ -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,220 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Grow With Walmart Learning Pathways
|
||||
</div>
|
||||
<div class="featured-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign featured_courses_count = 0 %}
|
||||
<div class="featured-courses-wrapper">
|
||||
<div class="featured-courses-slider">
|
||||
{% for learning_path in items %}
|
||||
{% assign is_featured = false %}
|
||||
|
||||
{% for cat in learning_path.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "featured" %}
|
||||
{% assign is_featured = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if featured_courses_count > 0 %}
|
||||
<div class="featured-see-more-wrapper">
|
||||
<a href="/app/articles">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! There is no featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! There is no featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".featured-courses-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initFeaturedCoursesCarousel() {
|
||||
var featuredSlider = tns({
|
||||
container: '.featured-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:true,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.featured-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#fff;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.featured-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #0071ce;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.featured-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color:#0071ce;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-featured-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<div class="homepage-nav-wrapper">
|
||||
<div class="nav-heading-container">
|
||||
<div class="carousel-heading">
|
||||
Your one-stop-shop for success with Walmart.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-homepage-container">
|
||||
<a href="/app/grow-with-walmart-catalog" class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<img class="nav-icon-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/nav+images/Bus+Fund+Icon.svg" alt="">
|
||||
</div>
|
||||
<div class="nav-title">Business Fundamentals</div>
|
||||
</a>
|
||||
<a href="/app/welcome-to-walmart" class="nav-item">
|
||||
<div class="nav-icon">
|
||||
<img class="nav-icon-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/nav+images/New+to+WM+Icon.svg" alt="">
|
||||
</div>
|
||||
<div class="nav-title">New to Walmart</div>
|
||||
</a>
|
||||
<a class="nav-item" href="#categories">
|
||||
<div class="nav-icon">
|
||||
<img class="nav-icon-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/nav+images/Explore+Modules+Icon.svg" alt="">
|
||||
</div>
|
||||
<div class="nav-title">Explore Modules</div>
|
||||
</a>
|
||||
<a class="nav-item" href="/courses/a891fcb0-ed3a-4851-8e64-0f4f0b602c2d/activities">
|
||||
<div class="nav-icon">
|
||||
<img class="nav-icon-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/nav+images/Help+Docs+Icon.svg" alt="">
|
||||
</div>
|
||||
<div class="nav-title">Help Docs</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.nav-item {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
.nav-icon-image {
|
||||
height: 175px;
|
||||
width: 175px;
|
||||
}
|
||||
.nav-homepage-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.homepage-nav-wrapper {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.nav-title {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
.nav-heading-container {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,194 @@
|
||||
<div class="np-homepage-ongoing np-max-width">
|
||||
<div class="np-homepage-ongoing-text">
|
||||
<div class="np-homepage-headline">
|
||||
Ongoing Training
|
||||
</div>
|
||||
<div class="ongoing-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign ongoing_courses_count = 0 %}
|
||||
<div class="ongoing-courses-wrapper">
|
||||
<div class="ongoing-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course == false %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if ongoing_courses_count > 0 %}
|
||||
<div class="ongoing-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{ongoing_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var ongoingSlider = tns({
|
||||
container: '.ongoing-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.ongoing-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
controls:true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.ongoing-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #0071ce;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.ongoing-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper a {
|
||||
color:#0071ce;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-ongoing-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<section class="homepage-topics np-max-width np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-section-header">Explore Courses by Category</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="category-cards">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
{% if category_name != "featured" and category_name != "articles" %}
|
||||
{% assign cat_image = "" %}
|
||||
|
||||
{% if category_name == "customer perception" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
|
||||
{% elsif category_name == "shopper behavior" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
|
||||
{% elsif category_name == "insights dashboard" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
|
||||
{% elsif category_name == "report builder" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
|
||||
{% elsif category_name == "apis" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
|
||||
{% elsif category_name == "know your store" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
|
||||
{% elsif category_name == "metrics" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
|
||||
{% elsif category_name == "channel performance" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
|
||||
{% elsif category_name == "know your customer" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
|
||||
{% elsif category_name == "advanced" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
|
||||
{% elsif category_name == "beginner" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
|
||||
{% endif %}
|
||||
|
||||
<a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
|
||||
{% comment %} {% if cat_image %}
|
||||
<img class="category-card-image" src="{{cat_image}}" />
|
||||
{% endif %} {% endcomment %}
|
||||
{% comment %} <div class="category-card-content">
|
||||
{{category.name}}
|
||||
</div> {% endcomment %}
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.homepage-topics {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.category-cards {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
border-radius:30px;
|
||||
border:2px solid #3c228a;
|
||||
background-color: #3c228a;
|
||||
color: #fff;
|
||||
width:100%;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-align:center;
|
||||
margin-bottom:16px;
|
||||
padding:16px;
|
||||
font-weight:700;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
background-color: #13014a;
|
||||
}
|
||||
|
||||
.category-card-image {
|
||||
max-width:80px;
|
||||
}
|
||||
|
||||
.category-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (min-width:500px) {
|
||||
.category-card {
|
||||
width:calc(50% - 16px);
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(odd) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(even) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.category-card {
|
||||
width:calc(33.33% - 22px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(even),
|
||||
.category-card:nth-child(odd) {
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.category-card {
|
||||
width:calc(25% - 24px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+4) {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="widget-and-events-wrapper">
|
||||
<div class="widget-grid-container">
|
||||
{% include "widget_course_progress" %}
|
||||
</div>
|
||||
<div class="events-grid-container">
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
<div class="announcements-grid-container">
|
||||
{% include "announcements" %}
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.widget-and-events-wrapper {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
.widget-grid-container {
|
||||
width: 33%;
|
||||
}
|
||||
.events-grid-container {
|
||||
width: 33%;
|
||||
}
|
||||
.event-card, .np-card-content-training-event {
|
||||
height: 100%;
|
||||
}
|
||||
.announcements-grid-container {
|
||||
width: 33%;
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.widget-and-events-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.widget-grid-container, .events-grid-container, .announcements-grid-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
{% assign available_categories = "Operativo Cros funcional,Etica y Cumplimiento,Resposabilidad Social y Ambienta,Ecosistema Walmart" %}
|
||||
<div class="catalog-categories-container">
|
||||
{% comment %} <div class="text-container">
|
||||
<div class="text-heading text-center">
|
||||
Explore the module catalog below!
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="category-links-wrapper" id="categories">
|
||||
<a class="category-card" id="Operativo Cros funcional" href="/app/operativo-cros-funcional">
|
||||
<img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/ethics.png" alt="">
|
||||
</a>
|
||||
<a class="category-card" id="Etica y Cumplimiento" href="/app/etica-y-cumplimiento">
|
||||
<img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/onboarding.png" alt="">
|
||||
</a>
|
||||
<a class="category-card" id="Resposabilidad Social y Ambienta" href="/app/resposabilidad-social-y-ambienta">
|
||||
<img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/merchandisin.png" alt="">
|
||||
</a>
|
||||
<a class="category-card" id="Ecosistema Walmart" href="/app/ecosistema-walmart">
|
||||
<img class="category-card-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/gettingPaid.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.category-links-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.catalog-categories-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.category-card {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
padding: 10px;
|
||||
}
|
||||
.category-card:hover {
|
||||
transform: scale(1.075);
|
||||
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.category-card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.category-card-image {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// const categoryCards = document.querySelectorAll('.category-card');
|
||||
// const images = [
|
||||
// {name: 'Ethics and Compliance', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/ethics.png"},
|
||||
// {name: 'Onboarding', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/onboarding.png"},
|
||||
// {name: 'Retail Basics', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/retail.png"},
|
||||
// {name: 'Item Creation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/item_creation.png"},
|
||||
// {name: 'Merchandising', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/merchandisin.png"},
|
||||
// {name: 'Transportation', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/transport.png"},
|
||||
// {name: 'Packaging and Labeling', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/packing.png"},
|
||||
// {name: 'Getting Paid', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/gettingPaid.png"},
|
||||
// {name: 'Replenishment', url: "https://s3.us-east-1.amazonaws.com/static.northpass.com/Supplier+Academy/New+Category+Images/Replenishment.png"},
|
||||
// ];
|
||||
|
||||
// function addCategoryCardImage() {
|
||||
// categoryCards.forEach((card) => {
|
||||
// const cardName = card.id;
|
||||
// const cardImage = card.querySelector('.category-card-image');
|
||||
|
||||
// for (const i of images) {
|
||||
// if (cardName === i.name) {
|
||||
// cardImage.src = i.url;
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// function sortCategoryCards() {
|
||||
// const wrapper = document.querySelector('.category-links-wrapper');
|
||||
// const sortedCards = Array.from(categoryCards).sort((a, b) => {
|
||||
// const aIndex = images.findIndex(img => img.name === a.id);
|
||||
// const bIndex = images.findIndex(img => img.name === b.id);
|
||||
// return aIndex - bIndex;
|
||||
// });
|
||||
|
||||
// wrapper.innerHTML = '';
|
||||
|
||||
// sortedCards.forEach(card => {
|
||||
// wrapper.appendChild(card);
|
||||
// });
|
||||
// }
|
||||
|
||||
// addEventListener("DOMContentLoaded", (event) => {
|
||||
// addCategoryCardImage();
|
||||
// sortCategoryCards();
|
||||
// });
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
{% assign available_events = 0 %}
|
||||
{% for training_event in training_events.available %}
|
||||
{% if training_event.title contains cat %}
|
||||
{% assign available_events = available_events | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="custom-events-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
Próxima sesiones
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-dashboard-resources">
|
||||
{% if available_events > 0 %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
{% if training_event.title contains cat %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.custom-events-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
|
||||
<div class="welcome-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
{{heading}}
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
{{desc}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<img class="section-img" src="{{img}}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.video-sub-text a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="impulsa-nav-container">
|
||||
<div class="impulsa-nav-wrapper">
|
||||
<a href="/app/impulsa-tu-exito" class="impulsa-nav-option">Rutas de Aprendizaje</a>
|
||||
<a href="/app/impulsa-tu-exito-sesiones-en-vivo" class="impulsa-nav-option">Sesiónes en vivo</a>
|
||||
<a href="/app/impulsa-tu-exito-contenido-especial" class="impulsa-nav-option">Contenido Especial</a>
|
||||
<a href="/app/impulsa-tu-exito-caja-de-herramientas" class="impulsa-nav-option">Caja de Herramientas</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.impulsa-nav-container {
|
||||
margin: 80px 0;
|
||||
}
|
||||
.impulsa-nav-wrapper {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.impulsa-nav-option {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
border: 2px solid #fff;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
background: linear-gradient(to bottom, #04417a, #012449, #000f23);
|
||||
}
|
||||
.impulsa-nav-option:hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,29 @@
|
||||
|
||||
<div class="crete-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
Impulsa tu Éxito
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
Es un programa diseñado especialmente para incentivar el aceleramiento de las pequeñas y medianas empresas que ya forman parte de nuestra red de proveedores del autoservicio y sam’s club.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/homepage-image-4.png" alt="" class="section-img">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
A través de las 4 rutas de aprendizaje que lograrás consolidar una visión más amplia del negocio para mejorar tu desempeño comercial, operativo y financiero.
|
||||
</div>
|
||||
<div class="section-text">
|
||||
Recuerda tu constancia y compromiso serán propocionales a tu éxito. Por los que te sugerimos complertar todos los módulos para construir una visión integral del negocio de Walmart que te lleve a
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
|
||||
<div class="crete-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
Impulsa tu Éxito
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
Formación grupal en vivo con especialistas de Walmart en los principales temas para el crecimiento de tu negocio y su incorporación al Marketplace de Walmart.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/homepage-image-4.png" alt="" class="section-img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
<div class="carousel-wrapper">
|
||||
<div class="carousel-heading">In Progress</div>
|
||||
<div class="in-progress-carousel">
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
<div class="carousel-cards-container">
|
||||
{% include 'cards_course' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.in-progress-carousel {
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$(".in-progress-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,5 @@
|
||||
{% if learning_path.new_content_available? %}
|
||||
{% include "learning_path_new_content_banner" %}
|
||||
{% else %}
|
||||
{% include "learning_path_completed_banner" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
{% if learning_path.has_certificate? %}
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-certificate-link"
|
||||
href="{{ learning_path.certificate_link }}"
|
||||
>
|
||||
<div class="np-learning-path-certificate">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-learning-path-certificate-content">
|
||||
<div class="np-learning-path-certificate-avatar" role="img">
|
||||
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
|
||||
<h5 class="np-learning-path-certificate-avatar-title">
|
||||
{% t .avatar_title %}
|
||||
</h5>
|
||||
</div>
|
||||
<h4 class="np-learning-path-certificate-name">
|
||||
{{ learning_path.certificate_name }}
|
||||
</h4>
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<time
|
||||
class="np-learning-path-certificate-issue-date"
|
||||
datetime="{{ learning_path.certificate_issue_date }}"
|
||||
>
|
||||
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-learning-path-completed-banner np-learning-path-banner">
|
||||
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
|
||||
{% endif %}
|
||||
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,56 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title np-learning-path-outline-name-locked">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="/app/learning_paths" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,26 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="np-resource-header np-card-padding-vertical">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-new-content-banner np-learning-path-banner">
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "learning_path_certificate" %}
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title np-learning-path-outline-name-locked">{{ 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,52 @@
|
||||
{% assign uniq_lps = '' %}
|
||||
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% for category in learning_path.categories %}
|
||||
<script> console.log('{{ learning_path.name }}')</script>
|
||||
{% unless category.name == 'Category Advisors' %}
|
||||
{% unless uniq_lps contains learning_path.name %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% assign uniq_lps = uniq_lps | append: learning_path.name %}
|
||||
{% endunless %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
No tienes asignadas rutas de aprendizaje.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function sortGrowLps() {
|
||||
const lpCards = Array.from(document.querySelectorAll('.lp-card'));
|
||||
|
||||
lpCards.sort((a, b) => {
|
||||
const aPrioritise = a.getAttribute('prioritise') === 'true';
|
||||
const bPrioritise = b.getAttribute('prioritise') === 'true';
|
||||
|
||||
return bPrioritise - aPrioritise;
|
||||
});
|
||||
|
||||
|
||||
const parentElement = lpCards[0].parentNode;
|
||||
|
||||
|
||||
while (parentElement.firstChild) {
|
||||
parentElement.removeChild(parentElement.firstChild);
|
||||
}
|
||||
|
||||
|
||||
lpCards.forEach(card => parentElement.appendChild(card));
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
sortGrowLps();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,23 @@
|
||||
{% assign uniq_lps = '' %}
|
||||
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Category Advisors' %}
|
||||
{% unless uniq_lps contains learning_path.name %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% assign uniq_lps = uniq_lps | append: learning_path.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,39 @@
|
||||
|
||||
<div class="welcome-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
{{heading}}
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
{{desc}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<img class="section-img" src="{{img}}" alt="">
|
||||
<div class="video-sub-text">
|
||||
<a class="bold-text" href="mailto:_DesarrollodeProveedores@email.wal-mart.com">{{support}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.video-sub-text a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
<div class="lp-filter-wrapper">
|
||||
<div class="filter-container">
|
||||
<div class="filter" id="filterToggle">Filter</div>
|
||||
</div>
|
||||
<div class="filter-content" id="filterContent">
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="not-started">
|
||||
<label class="filter-name" >Not Started</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="in-progress">
|
||||
<label class="filter-name" >In Progress</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="completed">
|
||||
<label class="filter-name" >Completed</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.lp-filter-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-checkbox {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter {
|
||||
background-color: #d9dfe2;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
color: #305263;
|
||||
font-size: 14px;
|
||||
font-weight: 700;;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: 250px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, width 0.4s ease;
|
||||
z-index: 111;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-active .filter-content {
|
||||
display: flex;
|
||||
max-height: 500px;
|
||||
width: 250px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.getElementById("filterToggle").addEventListener("click", function() {
|
||||
const filterWrapper = document.querySelector('.lp-filter-wrapper');
|
||||
filterWrapper.classList.toggle("filter-active");
|
||||
});
|
||||
|
||||
|
||||
function filterCards() {
|
||||
const selectedCategories = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id);
|
||||
const cards = document.querySelectorAll('.np-card');
|
||||
|
||||
if (selectedCategories.length === 0) {
|
||||
cards.forEach(card => card.style.display = 'block');
|
||||
} else {
|
||||
cards.forEach(card => {
|
||||
|
||||
const cardCategories = card.getAttribute('progress').split(',');
|
||||
const isVisible = selectedCategories.some(category => cardCategories.includes(category));
|
||||
card.style.display = isVisible ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.filter-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', filterCards);
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,28 @@
|
||||
|
||||
<div class="card-course" progress="{% if learning_path.progress == 100 %}completed{% elsif learning_path.progress == 0 %}not-started{% else %}in-progress{% endif %}">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-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="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<a class="button-course" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,103 @@
|
||||
<div class="carousel-wrapper">
|
||||
<div class="carousel-heading">Merchandising</div>
|
||||
<div class="carousel-filter-wrapper" id="carousel-filter-wrapper-merchandising">
|
||||
<div class="filter-container">
|
||||
<div class="filter" id="filterToggleMerchandising">Filter</div>
|
||||
</div>
|
||||
<div class="filter-content" id="filterContentMerchandising">
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="m-not-started">
|
||||
<label class="filter-name">Not Started</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="m-in-progress">
|
||||
<label class="filter-name">In Progress</label>
|
||||
</div>
|
||||
<div class="filter-option">
|
||||
<input class="filter-checkbox" type="checkbox" id="m-completed">
|
||||
<label class="filter-name">Completed</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merchandising-carousel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Merchandising' %}
|
||||
<div class="carousel-cards-container merchandising-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
|
||||
{% include 'cards_course' %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.merchandising-carousel {
|
||||
margin-top: 25px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
$(".merchandising-carousel").slick({
|
||||
slidesToShow: 3,
|
||||
cssEase: 'linear',
|
||||
prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1170,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
dots: false,
|
||||
arrows: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
document.getElementById("filterToggleMerchandising").addEventListener("click", function() {
|
||||
const filterWrapper = document.querySelector('#carousel-filter-wrapper-merchandising');
|
||||
filterWrapper.classList.toggle("filter-active");
|
||||
});
|
||||
|
||||
document.addEventListener("click", function(event) {
|
||||
const filterWrapper = document.querySelector('#carousel-filter-wrapper-merchandising');
|
||||
const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggleMerchandising";
|
||||
|
||||
if (!isClickInside) {
|
||||
filterWrapper.classList.remove("filter-active");
|
||||
}
|
||||
});
|
||||
|
||||
function filterCards1() {
|
||||
const selectedFilters = Array.from(document.querySelectorAll('#filterContentMerchandising .filter-checkbox:checked')).map(checkbox => checkbox.id.replace('m-', ''));
|
||||
const cards = document.querySelectorAll('.merchandising-courses');
|
||||
|
||||
$(".merchandising-carousel").slick('slickUnfilter');
|
||||
|
||||
if (selectedFilters.length === 0) {
|
||||
$(".merchandising-carousel").slick('slickUnfilter');
|
||||
} else {
|
||||
$(".merchandising-carousel").slick('slickFilter', function(index, element) {
|
||||
const cardProgress = element.getAttribute('progress');
|
||||
return selectedFilters.includes(cardProgress);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('#filterContentMerchandising .filter-checkbox').forEach(checkbox => {
|
||||
checkbox.addEventListener('change', filterCards1);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,87 @@
|
||||
{% comment %}
|
||||
<a href="/app/impulsa-tu-exito" class="crete-section-container">
|
||||
<div class="welcome-section-wrapper">
|
||||
<div class="image-container">
|
||||
<img src="https://s3.us-east-1.amazonaws.com/static.northpass.com/Walmart+Mexico/homepage-image-4.png" alt="" class="section-img">
|
||||
</div>
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
Impulsa tu Éxito
|
||||
</div>
|
||||
<div class="section-text-container">
|
||||
<div class="section-text">
|
||||
Es un programa diseñado especialmente para incentivar el aceleramiento de las pequeñas y medianas empresas que ya forman parte de nuestra red de proveedores del autoservicio y sam’s club.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a> {% endcomment %}
|
||||
|
||||
<div class="coming-soon-wrapper">
|
||||
<div class="welcome-content-wrapper">
|
||||
<div class="introduction yellow-text">
|
||||
¡Más cursos proximamente!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.coming-soon-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.crete-section-container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.welcome-section-wrapper {
|
||||
background: #001E60;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(2,1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: #00bf63;
|
||||
}
|
||||
.heading {
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.video-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.section-img {
|
||||
width: 100%;
|
||||
}
|
||||
.text-link {
|
||||
color: #fff;
|
||||
}
|
||||
@media (max-width:1000px) {
|
||||
.welcome-section-wrapper {
|
||||
grid-template-columns: repeat(1,1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.introduction, .heading {
|
||||
font-size: 25px
|
||||
}
|
||||
.get-started-list {
|
||||
padding: 15px;
|
||||
}
|
||||
.get-started-item {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user