Cin7 templates, Luminate templates. Walmart scripts and directory reorg

This commit is contained in:
Norm Rasmussen
2024-08-19 17:06:01 -04:00
parent d4c72dcc79
commit 46240bb702
133 changed files with 8027 additions and 83 deletions

Binary file not shown.

View File

@ -6,7 +6,7 @@
<ul class="product-subscriptions col-xs-12 col-sm-9">
{% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
{% for subscription_level in subscription_levels %}
{% assign name_level_pair = subscription_level | split: ":"%}
{% assign product_sub_level = name_level_pair | slice: 1 | strip %}
@ -33,7 +33,7 @@
margin: -20px -50px 20px;
padding: 0 50px 20px;
}
.product-subscription img{
height: 25px;
}
@ -110,4 +110,4 @@
margin-top: 18%;
}
} */
</style>
</style>

View File

@ -1,7 +1,4 @@
{% if result.type == 'course' %}
{% if both_gorups or partners %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
@ -21,50 +18,4 @@
</div>
</div>
</div>
{% elsif omni %}
{% if result.name contains 'Omni' %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
</div>
</div>
</div>
{% endif %}
{% elsif core %}
{% if result.name contains 'Core' %}
<div class="np-card np-search-result">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{ result.description }}</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
{%endif%}

View File

@ -1,24 +1,7 @@
{% assign omni = false %}
{% assign core = false %}
{% assign partners = false %}
{% assign log_out = true %}
{% assign both_gorups = false %}
{% if current_person.signed_in? %}
{% assign log_out = false %}
{% for group in current_person.groups %}
{% if group.name contains 'Partners' %}
{% assign partners = true %}
{% elsif group.name contains 'Core' %}
{% assign core = true %}
{% elsif group.name contains 'Omni' %}
{% assign omni = true %}
{% endif %}
{% endfor %}
{% endif %}
{% if omni and core %}
{% assign both_gorups = true %}
{% endif %}
{% include "header" %}
@ -35,7 +18,7 @@
</div>
</div>
{% if results.items.any? %}
{% render "search_result" for results.items as result, core: core , omni: omni, partners: partners, both_gorups: both_gorups %}
{% render "search_result" for results.items as result %}
{% else %}
{% include "search_zero_state" %}
{% endif %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,83 @@
<div class="np-card">
<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>
{% comment %} {% if course.properties.course_length %}
<div class="course-length">{{course.properties.course_length}}</div>
{% endif %} {% endcomment %}
</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">
{% if course.short_description != "" %}
<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>
{% else %}
<div></div>
{% endif %}
<div class="np-card-content-footer">
<div class="np-card-content-progress np-button-color">
{% if current_person.properties.language == "en" %}
{% if course.progress > 0 and course.progress < 100 %}
{{course.progress }}% Complete
{% elsif course.progress == 100 %}
{{course.progress }}% Complete
{% else %}
Not Started
{% endif %}
{% elsif current_person.properties.language == "es" %}
{% if course.progress > 0 and course.progress < 100 %}
{{course.progress }}% Completo
{% elsif course.progress == 100 %}
{{course.progress }}% Completo
{% else %}
No empezado
{% endif %}
{% endif %}
</div>
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% if course.has_to_restart? %}
{% include "course_version_outdated_popup", path: course_path %}
{% endif %}
<a class="np-button np-button-wide" href="{{ course_path }}">
{% if current_person.properties.language == "en" %}
{% if course.progress > 0 and course.progress < 100 %}
Continue
{% elsif course.progress == 100 %}
Retake
{% else %}
View
{% endif %}
{% elsif current_person.properties.language == "es" %}
{% if course.progress > 0 and course.progress < 100 %}
Continuar
{% elsif course.progress == 100 %}
Repetir
{% else %}
Vista
{% endif %}
{% endif %}
</a>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,52 @@
{% 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">
{% if current_person.properties.language == "es" %}
{% if course.progress > 0 and course.progress < 100 %}
{{course.progress }}% Completo
{% elsif course.progress == 100 %}
{{course.progress }}% Completo
{% else %}
No empezado
{% endif %}
{% elsif current_person.properties.language == "en" %}
{% if course.progress > 0 and course.progress < 100 %}
{{course.progress }}% Complete
{% elsif course.progress == 100 %}
{{course.progress }}% Complete
{% else %}
Not Started
{% endif %}
{% endif %}
</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>

View File

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

View File

@ -0,0 +1,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>

View File

@ -0,0 +1,45 @@
<div class="np-card np-card-training-event">
<div class="np-card-container">
<div class="np-card-content-training-event">
<h3 class="np-card-content-title">
{{ training_event.title }}
</h3>
<div class="np-card-content-subtitle">
{% t shared.event_types, key: training_event.event_type %}
</div>
<div class="np-card-training-session">
<span class="np-card-content-label">
{% t .next_session %}
</span>
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-day">
{{ training_event.sessions.first.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_event.sessions.first.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_event.sessions.first.year }}
</div>
</div>
</div>
</div>
</div>
<div class="np-card-content np-card-content-vertical np-card-padding">
<div class="np-card-training-sessions">
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
<span class="np-card-training-sessions-label">
{% t .sessions, count: training_event.sessions.size %}
</span>
<a
class="np-button np-button-wide"
href="{% route training_session, id: training_event.sessions.first.id %}"
>
{% t shared.view %}
</a>
</div>
</div>
</div>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,43 @@
<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 col-md-5">
<div class="course-image-wrapper">
<div class="course-title">{{course.name}}</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-top-image-spacing"
alt="{{ course.name }}"
/>
</div>
{% 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 col-md-7">
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
{% include "course_outline" %}
</div>
</div>
</div>

View File

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

View File

@ -0,0 +1,34 @@
<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="javascript:goBack();" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
</a>
{% comment %} {{ course.name }} {% endcomment %}
</div>
<div class="course-image-wrapper np-hidden-desktop">
<div class="course-title ">{{course.name}}</div>
<img
src="{{ course.image_url }}"
class="np-top-image np-hidden-desktop"
alt="{{ course.name }}"
/>
</div>
<script>
function goBack() {
const fallbackUrl = '/app';
var prevPage = window.location.href;
window.history.go(-1);
setTimeout(function(){
if (window.location.href == prevPage) {
window.location.href = fallbackUrl;
}
}, 800);
}
</script>

View File

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

View File

@ -0,0 +1,40 @@
<div class="np-card-container np-card-padding-large">
{% include "course_header" %}
<div class="np-top-cta">
{% include "course_progress_and_cta" %}
</div>
</div>
{% if course.progress == 0 %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
{% else %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_outline" %}
</div>
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_description" %}
</div>
{% endif %}
{% if course.categories.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_categories" %}
</div>
{% endif %}
{% if course.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_instructors" %}
</div>
{% endif %}
{% if course.events.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "course_events" %}
</div>
{% endif %}

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,48 @@
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% unless course.properties.is_article_course %}
{% if course.properties.course_language == "es" and current_person.properties.language == "es" %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% elsif course.properties.course_language == "en" and current_person.properties.language == "en" %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% comment %}
{% if course.id == "6cc26c57-34db-4b8e-a38b-ad321ce18add" or course.id == "ac4fbf2e-ed8f-404d-b995-f0ef73481466" %}
{% if current_person.properties.hide_api_certification_exam_course == false %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endif %}
{% else %}
{% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
{% unless course.progress == 100 %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endunless %}
{% else %}
{% endif %}
{% endif %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_course" with course %}
</div>
{% endcomment %}
{% endunless %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog,
key: current_school.course_vocabulary
%}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,78 @@
<footer class="np-footer">
<div class="np-footer-top">
{% if website_footer.show_navigation_links? %}
<div class="np-footer-navigation">
<ul class="np-footer-navigation-list">
{% for website_navigation in navigations.footer_navigations %}
<li class="np-footer-navigation-item">
<a
class="np-footer-navigation-link np-button-color"
href="{{ website_navigation.path }}"
{% if website_navigation.external? %} target="_blank" {% endif %}
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if current_school.logo_url %}
<h2 class="np-footer-logo">
<a href="{% route home %}">
<img
alt="{{ current_school.name }}"
class="np-footer-logo-image"
src="{{ current_school.logo_url }}"
/>
</a>
</h2>
{% else %}
<div class="np-school-name np-header-font-color">
{{ current_school.name }}
</div>
{% endif %}
</div>
<div class="np-footer-bottom">
<nav class="np-footer-social-links">
{% if website_footer.show_social_media_links? %}
<ul class="np-footer-social-links-list">
{% for social_media_link in website_footer.social_media_links %}
<li class="np-footer-social-links-item">
<a
class="np-footer-social-links-link np-button-color"
href="{{ social_media_link.link }}"
target="_blank" title="{{ social_media_link.name }}"
>
<i class="np-footer-social-links-icon
np-button-color
fab fa-{{ social_media_link.name }}"
></i>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if website_footer.show_customer_service_email? and
website_footer.school_customer_service_email
%}
<div class="np-footer-support">
<div class="np-footer-support-item np-footer-support-help">
{% t .need_help %}
</div>
<div class="np-footer-support-item np-footer-support-email">
{% t .email %}
</div>
<a
class="np-footer-support-item np-footer-support-link np-button-color"
href="mailto:{{ website_footer.school_customer_service_email }}"
>
{{ website_footer.school_customer_service_email }}
</a>
</div>
{% endif %}
</div>
</footer>

View File

@ -0,0 +1,770 @@
<style>
.np-dashboard-resources-title.lp,
.np-dashboard-resources-title.modules,
.np-dashboard-resources-title.events,
.np-zero-state-text,
.np-button.np-button-wide,
.np-footer-support-item.np-footer-support-help,
.np-card-content-progress.np-button-color.notstarted,
.np-zero-state-text.training-events,
.np-button.lp,
.sub-navigation-label:nth-child(1),
.np-resource-title.modules,
.np-resource-subtitle.modules,
.np-resource-title.lp,
.np-resource-subtitle.lp,
.np-resource-title.articles,
.np-resource-subtitle.articles,
.np-card-header-type,
.np-resource-title.events,
.np-resource-subtitle.events,
.np-button.dropdown-button,
.np-top-vocabulary.np-text-title.np-text-muted,
.np-top-cta-progress-title.np-text-title,
.np-top-button.np-button-font-color.np-button.np-button-big,
.np-text-title.np-course-outline-title,
.np-card-heading,
.np-top-cta-progress-text.np-button-color,
.np-card-heading.lp,
.np-top-cta-progress-title.np-text-title.lp,
.np-top-vocabulary.np-text-title,
.np-homepage-headline,
.Home.np-homepage-headline,
.Home.np-homepage-subheadline,
.Featured.np-homepage-headline,
.Home.np-sub-navigation-content-item-link,
.Catalog.np-sub-navigation-content-item-link,
.Certifications.np-sub-navigation-content-item-link,
.Modules.np-sub-navigation-content-item-link,
.Dashboard.np-sub-navigation-content-item-link,
.Events.np-sub-navigation-content-item-link,
.Learning.Paths.np-sub-navigation-content-item-link,
.Home.np-footer-navigation-link.np-button-color,
.Learning.Paths.np-footer-navigation-link.np-button-color,
.Events.np-footer-navigation-link.np-button-color,
.course-completion,
.np-header-avatar-tooltip-navigation-link,
.np-header-avatar-tooltip-navigation-link.np-danger,
.np-button.np-button-big.np-button-large-font.np-form-action,
.np-resource-title.my-profile,
.np-input-label.email,
.np-input-label.first-name,
.np-input-label.last-name,
.np-input-label.display-name,
.np-input-label.password,
.np-input-label.password-confirmation,
.avatar-description,
.avatar-requirements,
.radio__label.gravatar,
.radio__label.custom,
.header-dropdown-shopper,
.header-dropdown-perception,
.header-dropdown-insights,
.header-dropdown-reports,
.Admin.np-header-avatar-tooltip-navigation-link,
.Resources.np-header-avatar-tooltip-navigation-link,
.Profile.np-header-avatar-tooltip-navigation-link,
.Support.np-header-avatar-tooltip-navigation-link,
.hero-search-input,
.Topics.np-section-header,
.Catalog.np-button,
.Ongoing.np-homepage-headline,
.Progress.np-section-header,
.Learning.Paths.np-dashboard-resources-title,
.Courses.np-dashboard-resources-title,
.Catalog.np-resource-title,
.Catalog.np-resource-subtitle,
.Learning.Paths.np-resource-title,
.Learning.Paths.np-resource-subtitle,
.Article.np-resource-title,
.Article.np-resource-subtitle,
.Certifications.np-resource-title,
.Certifications.np-resource-subtitle,
#desktop_upload_avatar,
body > main > div.np-homepage-ongoing.np-max-width > div.ongoing-see-more-wrapper > a,
body > footer > div.np-footer-top > div > ul > li:nth-child(1) > a,
body > footer > div.np-footer-top > div > ul > li:nth-child(2) > a,
body > footer > div.np-footer-top > div > ul > li:nth-child(3) > a,
body > main > div.np-catalog-header-wrapper > div.np-catalog-header > div.np-resource-title,
body > main > div.np-catalog-header-wrapper > div.np-catalog-header > div.np-resource-subtitle
{
text-indent: -9999999px;
}
/* CATALOG */
/*
body > main > div.np-catalog-header-wrapper > div.np-catalog-header > div.np-resource-title::after {
text-indent: 0;
line-height: 0;
display: block;
content: "Catalogue des cours";
}
body > main > div.np-catalog-header-wrapper > div.np-catalog-header > div.np-resource-subtitle::after {
text-indent: 0;
line-height: 0;
display: block;
content: "Des cours exceptionnels dans le confort de votre maison ou de votre bureau";
}*/
/* HEADER */
.np-header-avatar-tooltip-navigation-link::after {
/* Profile Settings */
text-indent: 0;
line-height: 0;
display: block;
content: "Paramètres du profil";
}
.np-header-avatar-tooltip-navigation-link.np-danger::after {
/* Sign Out */
text-indent: 0;
line-height: 0;
display: block;
content: "Déconnecter";
}
/* HEADER DROPDOWN */
.Support.np-header-avatar-tooltip-navigation-link::after {
/* Support */
text-indent: 0;
line-height: 0;
display: block;
content: "Soutien";
}
.Admin.np-header-avatar-tooltip-navigation-link::after {
/* Admin */
text-indent: 0;
line-height: 0;
display: block;
content: "Administrateur";
}
.Profile.np-header-avatar-tooltip-navigation-link::after {
/* Profile */
text-indent: 0;
line-height: 0;
display: block;
content: "Profil";
}
.Resources.np-header-avatar-tooltip-navigation-link::after {
/* Resources */
text-indent: 0;
line-height: 0;
display: block;
content: "Ressources";
}
.header-dropdown-shopper::after {
/* Sign Out */
text-indent: 0;
line-height: 0;
display: block;
content: "Acheteur";
}
.header-dropdown-insights::after {
/* Sign Out */
text-indent: 0;
line-height: 0;
display: block;
content: "Perspectives";
}
.header-dropdown-perceptions::after {
/* Sign Out */
text-indent: 0;
line-height: 0;
display: block;
content: "Perceptions";
}
.header-dropdown-reports::after {
/* Sign Out */
text-indent: 0;
line-height: 0;
display: block;
content: "Information";
}
/* ACCOUNT */
.radio__label.gravatar::after {
/* Use Gravatar™ */
text-indent: 0;
line-height: 0;
display: block;
content: "Utilisez Gravatar™";
}
.radio__label.custom::after{
/* Upload Custom Photo */
text-indent: 0;
line-height: 0;
display: block;
content: "Télécharger une photo personnalisée";
}
#desktop_upload_avatar::after {
/* Upload Photo */
text-indent: 0;
line-height: 0;
display: block;
content: "Sous-titre photo";
}
.avatar-description::after {
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
text-indent: 0;
line-height: auto;
display: block;
content: "L'ajout d'une photo ajoute une touche personnelle à votre profil. Votre photo de profil est utilisée comme icône de compte pour vous représenter. Elle est également affichée à plusieurs autres endroits à côté de votre nom.";
}
.avatar-requirements::after {
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
text-indent: 0;
line-height: auto;
display: block;
content: "Pour de meilleurs résultats, la taille de votre image de profil doit être d'au moins 400 x 400 pixels et d'une taille maximale de 2 Mo. Le format de fichier doit être PNG, JPG ou GIF.";
}
.np-button.np-button-big.np-button-large-font.np-form-action::after {
/* Save Profile */
text-indent: 0;
line-height: 0;
display: block;
content: "Enregistrer le profil";
}
.np-resource-title.my-profile::after {
/* My Profile */
text-indent: 0;
line-height: 1;
display: block;
content: "Mon profil";
margin-bottom: 24px;
margin-top: -24px;
}
.np-input-label.email::after {
/* Email */
text-indent: 0;
line-height: 1;
display: block;
content: "E-mail *";
}
.np-input-label.first-name::after {
/* First Name */
text-indent: 0;
line-height: 1;
display: block;
content: "Nombre *";
}
.np-input-label.last-name::after {
/* Last Name */
text-indent: 0;
line-height: 1;
display: block;
content: "Nom de famille *";
}
.np-input-label.display-name::after {
/* Display Name */
text-indent: 0;
line-height: 1;
display: block;
content: "Nom d'affichage";
}
.np-input-label.password::after {
/* Password */
text-indent: 0;
line-height: 1;
display: block;
content: "Mot de passe *";
}
.np-input-label.password-confirmation::after {
/* Password Confirmation */
text-indent: 0;
line-height: 1;
display: block;
content: "Confirmation du mot de passe *";
}
/* MAIN CONTENT */
.Catalog.np-button::after {
/* Explore Catalog */
text-indent: 0;
line-height: 0;
display: block;
content: "Parcourir le catalogue";
}
.Ongoing.np-homepage-headline::after {
/* Ongoing Training */
text-indent: 0;
line-height: 0;
display: block;
content: "Formation en cours";
}
.Progress.np-section-header::after {
/* Progress Tracker */
text-indent: 0;
line-height: 0;
display: block;
content: "Suivi des progrès";
}
.Topics.np-section-header::after {
/* Explore Courses by Category */
text-indent: 0;
line-height: 0;
display: block;
content: "Parcourir les cours par catégorie";
}
.hero-search-input::after {
/* What are you looking for? */
text-indent: 0;
line-height: 0;
display: block;
content[placeholder]: "¿Qué estás buscando?";
}
.Featured.np-homepage-headline::after {
/* Featured Courses */
text-indent: 0;
line-height: 0;
display: block;
content: "Cours en vedette";
}
.Home.np-homepage-headline::after {
/* Headline */
text-indent: 0;
line-height: .5;
display: block;
content: « Bienvenue dans l'apprentissage Walmart Luminate »;
}
.Home.np-homepage-subheadline::after {
/* Headline */
text-indent: 0;
line-height: 0;
display: block;
content: "Comment pouvons-nous vous aider aujourd'hui ?";
}
.np-dashboard-resources-title.lp::after {
/* Learning Paths */
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
}
.np-dashboard-resources-title.modules::after {
/* Modules */
text-indent: 0;
line-height: 0;
display: block;
content: "Modules";
}
.np-dashboard-resources-title.events::after {
/* Events */
text-indent: 0;
line-height: 0;
display: block;
content: "Événements à venir";
}
/* SUB-NAVIGATION */
.Home.np-sub-navigation-content-item-link::after {
/* Home */
text-indent: 0;
line-height: 0;
display: block;
content: "Page d'accueil";
margin-top: -9px;
}
.Events.np-sub-navigation-content-item-link::after {
/* Events */
text-indent: 0;
line-height: 0;
display: block;
content: "Événements à venir";
margin-top: -9px;
}
.Certifications.np-sub-navigation-content-item-link::after {
/* Events */
text-indent: 0;
line-height: 0;
display: block;
content: "Attestations";
margin-top: -9px;
}
.Dashboard.np-sub-navigation-content-item-link::after {
/* Dashboard */
text-indent: 0;
line-height: 0;
display: block;
content: "Panneau";
margin-top: -9px;
}
.Catalog.np-sub-navigation-content-item-link::after {
/* Modules */
text-indent: 0;
line-height: 0;
display: block;
content: "Catalogue";
margin-top: -9px;
}
.Modules.np-sub-navigation-content-item-link::after {
/* Modules */
text-indent: 0;
line-height: 0;
display: block;
content: "Modules";
margin-top: -9px;
}
.Learning.Paths.np-sub-navigation-content-item-link::after {
/* Learning Paths */
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
margin-top: -9px;
}
/* DASHBOARD */
.Learning.Paths.np-dashboard-resources-title::after {
/* Learning Paths */
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
}
.Courses.np-dashboard-resources-title::after {
/* Courses */
text-indent: 0;
line-height: 0;
display: block;
content: "Cours";
}
/* CATALOG */
.Catalog.np-resource-title::after {
/* Course Catalog */
text-indent: 0;
line-height: 0;
display: block;
content: "Catalogue des cours";
}
.Catalog.np-resource-subtitle::after {
/* Great courses from the comfort of your home or office. */
text-indent: 0;
line-height: 0;
display: block;
content: "D'excellents cours dans le confort de votre maison ou de votre bureau.";
}
/* LEARNING PATHS */
.np-button.lp::after {
/* View */
text-indent: 0;
line-height: 0;
display: block;
content: "Voir";
}
.np-zero-state-text::after {
/* Bummer! You're not assigned any Learning Paths. */
text-indent: 0;
line-height: inherit;
display: block;
content: "Aucun parcours d'apprentissage n'a été attribué.";
margin-top: -10px;
}
.Learning.Paths.np-resource-subtitle::after {
/* Explore curated sets of courses for a tailored learning experience */
text-indent: 0;
line-height: 0;
display: block;
content: "Explorez des ensembles de cours sélectionnés pour une expérience d'apprentissage personnalisée";
}
.np-card-header-type::after,
.Learning.Paths.np-resource-title::after,
.np-top-vocabulary.np-text-title::after
{
/* Learning Paths */
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
}
.np-top-cta-progress-text.np-button-color::after {
/* Not started */
text-indent: 0;
line-height: 1;
display: block;
content: "Pas démarré";
}
.np-card-heading.lp::after {
/* About This Learning Path */
text-indent: 0;
line-height: 1;
display: block;
content: "À propos de ce parcours d'apprentissage";
}
/* ARTICLES */
.Article.np-resource-title::after {
/* Articles */
text-indent: 0;
line-height: 1;
display: block;
content: "Articles";
}
.Article.np-resource-subtitle::after {
/* blank */
text-indent: 0;
line-height: 1;
display: block;
content: "";
}
/* CERTIFICATIONS */
.Certifications.np-resource-title::after {
/* Articles */
text-indent: 0;
line-height: 1;
display: block;
content: "Attestations";
}
/* COURSE CARDS */
.np-button.np-button-wide::after {
/* View */
text-indent: 0;
line-height: 0;
display: block;
content: "Voir";
}
.np-card-content-progress.np-button-color.notstarted::after {
/* Not started */
text-indent: 0;
line-height: 1;
display: block;
content: "Pas démarré";
}
.np-top-cta-progress-title.np-text-title.lp::after {
/* Learning Path Progress */
text-indent: 0;
line-height: 1;
display: block;
content: "Progression du parcours d'apprentissage";
}
.course-completion::after {
/* Complete */
text-indent: 0;
line-height: 1;
display: block;
content: "Complet";
margin-top: -13px;
}
/* EVENTS */
.np-zero-state-text.training-events::after {
/* You have no upcoming Events. Check back later for updates */
text-indent: 0;
line-height: inherit;
display: block;
content: "Vous n'avez aucun événement à venir. Veuillez revenir plus tard pour les mises à jour.";
margin-top: -10px;
}
.np-resource-title.events::after {
/* Training Events */
text-indent: 0;
line-height: 0;
display: block;
content: "Événements de formation";
}
.np-resource-subtitle.events::after {
/* Discover in-person and online events to maximize your learning */
text-indent: 0;
line-height: 0;
display: block;
content: "Découvrez des événements en personne et en ligne pour maximiser votre apprentissage";
}
.np-button.dropdown-button::after {
/* Filter */
text-indent: 0;
line-height: 0;
display: block;
content: "Filtre";
}
/* FOOTER */
.np-footer-support-item.np-footer-support-help::after {
/* Need help? */
text-indent: 0;
line-height: 0;
display: block;
float: right;
content: "As-tu besoin d'aide ?";
margin-top: 8px;
}
.Home.np-footer-navigation-link.np-button-color::after {
/* Home */
text-indent: 0;
line-height: 0;
display: block;
content: "Page d'accueil";
margin-top: -9px;
}
.Events.np-footer-navigation-link.np-button-color::after {
/* Events */
text-indent: 0;
line-height: 0;
display: block;
content: "Événements à venir";
margin-top: -9px;
}
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
/* Learning Paths */
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
margin-top: -9px;
}
/* MODULES */
.np-resource-title.modules::after {
/* Modules */
text-indent: 0;
line-height: 0;
display: block;
content: "Modules";
}
.np-resource-subtitle.modules::after {
/* Great Modules from the comfort of your home or office. */
text-indent: 0;
line-height: 0;
display: block;
content: "De grands modules dans le confort de votre maison ou de votre bureau.";
}
.np-top-vocabulary.np-text-title.np-text-muted::after {
/* Module */
text-indent: 0;
line-height: 0;
display: block;
content: "Module";
}
.np-top-cta-progress-title.np-text-title::after {
/* Course Progress */
text-indent: 0;
line-height: 0;
display: block;
content: "Progression du cours";
margin-bottom: 8px;
}
.np-top-button.np-button-font-color.np-button.np-button-big::after {
/* Continue */
text-indent: 0;
line-height: 0;
display: block;
content: "Continuer";
}
.np-text-title.np-course-outline-title::after {
/* Module outline */
text-indent: 0;
line-height: 0;
display: block;
content: "Schéma des modules";
}
.np-card-heading::after {
/* About the module */
text-indent: 0;
line-height: 0;
display: block;
content: "À propos du module";
}
body > main > div.np-homepage-ongoing.np-max-width > div.ongoing-see-more-wrapper > a::after {
/* See More */
text-indent: 0;
line-height: 0;
display: block;
content: "Voir plus";
}
body > footer > div.np-footer-top > div > ul > li:nth-child(1) > a::after {
text-indent: 0;
line-height: 0;
display: block;
content: "Page d'accueil";
}
body > footer > div.np-footer-top > div > ul > li:nth-child(2) > a::after {
text-indent: 0;
line-height: 0;
display: block;
content: "Panneau";
}
body > footer > div.np-footer-top > div > ul > li:nth-child(3) > a::after {
text-indent: 0;
line-height: 0;
display: block;
content: "Mes itinéraires";
}
</style>

View File

@ -0,0 +1,64 @@
{% styles default %}
{% styles colors %}
{% styles custom %}
<!-- language scripts -->
{% if current_person.signed_in? %}
{% assign lang = current_person.properties.language %}
{% case lang %}
{% when "es" %}
{% include "spanish_lang" %}
{% endcase %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function setLang(lang) {
if (localStorage.getItem('language') == null || localStorage.getItem('language') != lang) {
localStorage.setItem('language', lang)
}
var data = {
uuid : '{{current_person.id}}',
language : lang
};
$.ajax({
type : 'POST',
url : 'https://webhooks.workato.com/webhooks/rest/06186897-993c-458b-a8e6-394db4151bd0/langchange',
data: JSON.stringify(data),
success:function (data) {
console.log(data);
setTimeout(location.reload.bind(location), 1200);
},
error: function(xhr, status, error) {
console.log(error)
}
});
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
{% endif %}

View File

@ -0,0 +1,475 @@
<header class="np-header np-header-color">
<div class="np-header-content">
<div class="np-hidden-desktop np-header-mobile-menu-nav">
{% if current_person.signed_in? %}
<button
data-toggle-class="np-hidden"
class="np-header-mobile-menu-nav-button mobile-menu-open np-hidden np-header-font-color"
data-toggle-target=".np-header-mobile-avatar-menu,
.np-header-mobile-menu-content, .np-main, .np-footer"
>
<i class="fal fa-times"></i>
<div class="user-profile">
{% if current_person.first_name %}
{{current_person.first_name | slice: 0}}
{% endif %}
</div>
</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=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
>
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
</svg>
<div class="user-profile">
{% if current_person.first_name %}
{{current_person.first_name | slice: 0}}
{% endif %}
</div>
</button>
{% endif %}
</div>
{% if current_school.logo_url %}
<h1 class="np-header-logo">
<a href="{% route home %}">
<img
alt="Walmart Luminate Learn"
class="np-header-logo-image"
src="https://s3.amazonaws.com/static.northpass.com/walmart-luminate/luminate-icon-logo.svg"
/>
</a>
<div class="header-dropdown-container np-hidden-mobile">
<div class="dropdown-arrow"></div>
<div class="header-dropdown">
<a class="lang-en" href="https://walmartdataventures.mx/shopperbehavior">Shopper Behavior</a>
</div>
</div>
<div class="header-dropdown-container np-hidden-desktop">
<div class="dropdown-arrow"></div>
<div class="header-dropdown">
<a href="https://walmartdataventures.mx/shopperbehavior">Shopper Behavior</a>
</div>
</div>
<div class="header-text np-hidden-desktop">Learn</div>
<div class="header-text np-hidden-mobile">Walmart Luminate Learn</div>
</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">
<ul class="np-header-desktop-nav-list">
{% for website_navigation in navigations.header_navigations_external %}
<li class= "np-header-desktop-nav-item">
<a
href="{{ website_navigation.path }}"
class="np-header-desktop-nav-link np-header-font-color"
target="_blank"
>
{{ website_navigation.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% if current_person.signed_in? %}
<div class="language-dropdown-wrapper" style="margin-left:20px;">
<div class="header-language-selection">
<i class="fal fa-globe"></i>
<i class="fal fa-angle-down"></i>
</div>
<ul class="languages-dropdown">
<li data-lang="en" class="current-lang" onclick="setLang(this.getAttribute('data-lang'))">English</li>
<li data-lang="es" onclick="setLang(this.getAttribute('data-lang'))">Español</li>
</ul>
</div>
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
<form action="{% route search %}" method="get" data-test="desktop-search">
<input
aria-label="{% t .search %}"
class="np-header-search-input np-header-font-background-color"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
</div>
<div class="np-hidden-mobile np-header-avatar">
<button
class="np-header-avatar-button"
data-test="open-desktop-menu"
data-toggle-class-on-target="np-hidden"
data-toggle-target=".np-header-avatar-tooltip"
data-toggle-outside
>
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
</svg>
<div class="user-profile">
{% if current_person.first_name %}
{{current_person.first_name | slice: 0}}
{% endif %}
</div>
</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">
<a class="Profile np-header-avatar-tooltip-navigation-link" href="https://walmartdataventures.mx/profile">Profile</a>
<a class="Admin np-header-avatar-tooltip-navigation-link" href="https://walmartdataventures.mx/admin">Admin</a>
<a class="Resources np-header-avatar-tooltip-navigation-link" href="https://walmartdataventures.mx/resources">Resources</a>
<a class="Support np-header-avatar-tooltip-navigation-link" href="https://walmartdataventures.mx/support">Support</a>
<a
class="np-header-avatar-tooltip-navigation-link np-danger"
href="{% route logout %}"
>
Logout
</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 %}
</div>
{% endif %}
</div>
</header>
<div class="np-hidden-desktop">
<div class="np-header-mobile-menu-content np-hidden">
<div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
<form
class="np-header-search"
data-test="mobile-search"
method="get"
action="{% route search %}"
>
<input
aria-label="{% t .search %}"
class="np-header-search-input"
type="text"
name="q"
placeholder="{% t .search %}"
/>
<i class="np-header-search-icon far fa-search"></i>
</form>
{% for website_navigation in navigations.sub_navigation %}
{% unless website_navigation.label == "Events" %}
<a
href="{{ website_navigation.url }}"
class="np-header-mobile-menu-content-button"
>
{{ website_navigation.label }}
</a>
{% endunless %}
{% endfor %}
<a
href="/app/articles"
class="np-header-mobile-menu-content-button"
>
Articles
</a>
<a
href="/app/certificates"
class="np-header-mobile-menu-content-button"
>
Certificates
</a>
<div class="np-header-mobile-menu-content-line"></div>
<a
class="np-header-mobile-menu-content-button np-danger"
href="{% route logout %}"
>
Logout
</a>
</div>
</div>
</div>
{% include "messages" %}
<style>
.np-header-content {
max-width:1920px;
margin:auto;
}
.np-header-logo {
justify-content: flex-start;
margin: 0 auto 0 0;
flex-grow:unset;
position:relative;
align-items:center;
}
.np-header-logo-image {
height:50px;
}
.dropdown-arrow {
position: relative;
cursor: pointer;
padding: 0 22px;
height: 64px;
left: 0;
}
.dropdown-arrow:after {
content: "\f078";
font-family: "Font Awesome 5 Pro";
position: absolute;
width: 12px;
height: 12px;
top: 50%;
transform: translateY(-50%);
left: 16px;
font-weight: 400;
font-size: 13px;
transition: transform 0.2s;
color: #333;
}
.header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
.header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
transform: rotate(180deg) translateY(5px);
}
.header-dropdown {
display:none;
position:absolute;
background-color:#fff;
z-index:10;
left:32px;
top: 56px;
padding: 8px 0;
font-size:16px;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
min-width:220px;
}
.header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
.header-dropdown-container.np-hidden-desktop.open .header-dropdown {
display:block;
}
.header-dropdown a {
display:block;
padding: 16px;
color:#282828;
text-decoration:none;
font-size:16px;
font-weight:400;
}
.header-dropdown a:hover {
background-color:#F2F2F2;
}
.np-header-logo .header-text {
font-size:24px;
font-weight:400;
}
.user-profile {
background-color: #3C228A;
color: #fff;
border-radius: 50%;
width: 26px;
min-width: 26px;
height:26px;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
margin-left:14px;
}
.np-header-mobile-menu-content .user-profile {
margin-top: 24px;
width: 50px;
height: 50px;
font-size: 18px;
}
.np-header-avatar-tooltip-navigation-link {
font-weight: 400;
font-size:16px;
color:#333;
padding:22px 16px;
}
.np-header-avatar-tooltip-navigation-link:hover {
background: #F2F2F2;
font-weight: 400;
}
.np-header-search-input {
background-color:#F2F2F2;
opacity: 0.15;
border-radius: 4px;
}
.np-header-search-icon {
color:#3C228A;
}
.np-header-avatar-button,
.np-header-mobile-menu-nav-button {
border: 1px solid #DADCE0;
padding: 4px 4px 4px 10px;
border-radius: 25px;
display: flex;
align-items: center;
width:auto;
font-size:16px;
}
.np-header-avatar-tooltip {
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
box-shadow:none;
}
.np-header-mobile-menu-content-nav {
padding: 32px 16px;
}
.np-header-mobile-menu-content-button {
color:#333;
}
@media (min-width:768px) {
.np-header {
padding: 0 32px;
}
.np-header-search-input:focus {
background:#F2F2F2;
border:none;
}
.user-profile {
width: 30px;
min-width: 30px;
height:30px;
}
.header-dropdown {
top: 50px;
}
}
@media (min-width:1200px) {
.np-header-desktop-nav-list {
margin-right:48px;
}
.np-header-desktop-nav-item {
padding: 16px 24px;
}
}
/* LANGUAGE DROPDOWN */
.language-dropdown-wrapper {
position:relative;
}
.header-language-selection {
display: flex;
gap: 8px;
padding:20px;
font-size:20px;
cursor:pointer;
}
.header-language-selection .fa-angle-down {
font-size: 25px;
position: relative;
bottom: 3px;
transition: transform 0.2s;
}
.header-language-selection:hover .fa-angle-down,
.language-dropdown-wrapper:hover .fa-angle-down {
transform:rotate(180deg)
}
.languages-dropdown {
position:absolute;
top: 66px;
left:50%;
transform: translateX(-50%);
background-color:#fff;
margin:0;
border-radius:4px;
height:0;
opacity:0;
min-width:200px;
list-style:none;
transition: opacity 0.2s;
box-shadow: 0px 3px 5px rgba(0,0,0,.08),0px 0px 4px rgba(0,0,0,.12);
z-index: 1;
}
.languages-dropdown:after {
content: "";
position:absolute;
top:-10px;
left:50%;
transform: translate(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.languages-dropdown:not(.show) {
visibility: hidden;
}
.languages-dropdown.show {
height:auto;
opacity:1;
padding:20px 0;
}
.languages-dropdown li {
cursor: pointer;
width:100%;
padding:4px 12px;
font-size:16px;
}
.languages-dropdown li:hover {
text-decoration:underline;
background-color:#e4e6e9;
}
.languages-dropdown li.current-lang {
background-color:#edeef0;
}
/* END LANGUAGE DROPDOWN */
</style>
<script>
// Languages dropdown hover effect
document.querySelector(".header-language-selection").addEventListener('mouseover', () => {
document.querySelector(".languages-dropdown").classList.add('show');
})
document.querySelector(".language-dropdown-wrapper").addEventListener('mouseleave', () => {
document.querySelector(".languages-dropdown").classList.remove('show');
})
</script>

View File

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

View File

@ -0,0 +1,224 @@
<div class="np-homepage-featured np-max-width">
<div class="row">
<div class="col-xs-12">
<div class="np-homepage-featured-text">
<div class="Featured np-homepage-headline">
{{ homepage.featured_courses_headline }}
</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 course in items %}
{% if course.properties.is_article_course %}
{% assign is_featured = false %}
{% for cat in course.categories %}
{% assign cat_name = cat.name | downcase %}
{% if cat_name == "featured" %}
{% assign is_featured = true %}
{% endif %}
{% endfor %}
{% if course.properties.course_language == current_person.properties.language %}
{% if is_featured %}
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
{% include "cards_article" with course %}
</div>
{% endif %}
{% endif %}
{% 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">
There is no featured content at the moment. Be sure to check back here later.
</div>
<img
class="np-zero-state-courses"
alt="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">
There is no featured content at the moment. Be sure to check back here later.
</div>
<img
class="np-zero-state-courses"
alt="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: 400;
font-size: 24px;
line-height: 32px;
color:#333;
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: #3c228a;
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:#3C228A;
}
@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>

View File

@ -0,0 +1,194 @@
<div class="np-homepage-ongoing np-max-width">
<div class="np-homepage-ongoing-text">
<div class="Ongoing 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">
You don't have any ongoing training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="You don't have any ongoing training at this moment."
/>
<div class="zero-state-cta" style="margin-top:32px;">
<a href="/app/catalog" class="Catalog np-button">Explore Catalog</a>
</div>
</div>
{% endif %}
{% else %}
<div class="np-homepage-featured-empty">
<div class="np-zero-state-text">
You don't have any ongoing training at this moment.
</div>
<img
class="np-zero-state-courses"
alt="You don't have any ongoing training at this moment."
/>
<div class="zero-state-cta" style="margin-top:32px;">
<a href="/app/catalog" class="Catalog 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: #3c228a;
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:#3C228A;
}
@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>

View File

@ -0,0 +1,149 @@
<section class="homepage-topics np-max-width np-subpage-container">
<div class="row">
<div class="col-xs-12">
<div class="Topics 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>

View File

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

View File

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

View File

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

View File

@ -0,0 +1,51 @@
{% if learning_path.id == "fa4c61ac-e6cd-44dc-a8e0-9b95025968a5" %}
<div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
<img style="width:100%; height:100%"
id="image"
src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.png">
</a>
<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
<h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
<p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">Congratulations, you're Walmart Luminate Replenishment Certified. Click the button below to add your accomplishment to LinkedIn!</p>
<div class="np-learning-path-banner-actions">
<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Replenishment%20Certification&name=Walmart%20Luminate%20Replenishment%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com"
class="np-learning-path-banner-action np-learning-path-banner-action--primary">
Add to LinkedIn!</a>
</div>
</div>
</div>
{% else %}
<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>
{% endif %}
<script>
function downloadImage() {
axios({
url:"https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.png",
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
})
}
</script>

View File

@ -0,0 +1,141 @@
{% assign full_course_obj = "" %}
{% for course_obj in courses.in_catalog %}
{% if course_obj.id == course.id %}
{% assign full_course_obj = course_obj %}
{% endif %}
{% endfor %}
{% assign is_cert_category = false %}
{% for category in learning_path.categories %}
{% if category.name == 'Certifications' %}
{% assign is_cert_category = true %}
{% break %}
{% endif %}
{% endfor %}
{% if learning_path.enrolled? and course.unlocked? %}
{% if is_cert_category == true %}
<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-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-description">
{{ full_course_obj.short_description }}
</div>
{% if full_course_obj.properties.course_length %}
<div class="course-length">{{full_course_obj.properties.course_length}}</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>
{% endif %}
{% else %}
{% if is_cert_category == true %}
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
</div>
{% else %}
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
<div class="np-card-content np-card-padding">
<img
src="{{ item.image }}"
alt="{{ course.name }}"
class="np-learning-path-outline-course-image"
>
<div class="np-learning-path-outline-content">
<div class="np-learning-path-outline-name np-top-title">
{{ course.name }}
</div>
<div class="np-learning-path-outline-description">
{{ full_course_obj.short_description }}
</div>
{% if full_course_obj.properties.course_length %}
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
{% endif %}
</div>
{% if course.optional? %}
<div class="np-optional-ribbon">
{% t shared.optional %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{% endif %}

View File

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

View File

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

View File

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

View File

@ -0,0 +1,35 @@
<div class="np-resource-header np-resource-header-card np-card-padding-large">
<div class="np-top-vocabulary np-text-title">
{% t shared.learning_path.title %}
<i class="far fa-road np-button-color np-learning-path-icon"></i>
</div>
<div class="np-top-title">
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
<i class="far fa-arrow-left np-icon-back"></i>
</a>
{{ learning_path.name }}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-5">
<div class="lp-info">
{% comment %} <div class="lp-cover-image-wrapper">
<div class="lp-title">{{learning_path.name}}</div>
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
</div> {% endcomment %}
{% include "learning_path_description" %}
{% include "learning_path_instructors" %}
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-7">
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
{% include "learning_path_outline" %}
</div>
</div>

View File

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

View File

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

View File

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

View File

@ -0,0 +1,41 @@
<div class="np-resource-header 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">
{{ learning_path.name }}
</div>
{% comment %} <div class="lp-cover-image-wrapper">
<div class="lp-title">{{learning_path.name}}</div>
<img
src="{{ learning_path.image_url }}"
class="np-top-image"
alt="{{ learning_path.name }}"
/>
</div> {% endcomment %}
<div class="np-top-cta">
{% include "learning_path_progress_and_cta" %}
</div>
</div>
{% if learning_path.in_progress? %}
{% include "learning_path_outline" %}
<div class="card-description">
{% include "learning_path_description" %}
</div>
{% else %}
<div class="card-description">
{% include "learning_path_description" %}
</div>
<div class="np-card-spacing">
{% include "learning_path_outline" %}
</div>
{% endif %}
{% if learning_path.instructors.any? %}
<div class="np-card-container np-card-padding np-card-spacing">
{% include "learning_path_instructors" %}
</div>
{% endif %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,37 @@
{% if result.type == "course" %}
{% unless result.course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" or result.course.id == "b3225a47-448d-4988-962a-18d37d6616d0" %}
<div class="np-card np-search-result" data-id="{{result.course.id}}">
<div class="np-card-container">
<div class="np-card-content">
<img
class="np-search-result-image"
alt="{{ result.name }}"
src="{{ result.image_url }}"
/>
<div class="np-search-result-content">
<div>
<a class="np-search-result-title" href="{{ result.path }}">
{{ result.name }}
</a>
</div>
<div class="np-search-result-snippet">{{result.course.short_description}}</div>
</div>
<div class="category-pills">
{% for course in catalog_courses %}
{% if course.id == result.course.id %}
{% for cat in course.categories %}
{% assign cat_name = cat.name | upcase %}
{% unless cat_name == "FEATURED" or cat_name == "ARTICLES" %}
<div class="cat-item">{{cat.name}}</div>
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endunless %}
{% endif %}

View File

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

View File

@ -0,0 +1,50 @@
<nav class="np-sub-navigation np-hidden-mobile">
<div class="np-sub-navigation-content">
{% for link in navigations.sub_navigation %}
<div class="np-sub-navigation-content-item {{ link.active_class }}">
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
<a class="{{ link.label }} np-sub-navigation-content-item-link" href="{{ link.url }}">
{{ link.label }}
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
{% endfor %}
{% comment %} <div class="np-sub-navigation-content-item articles-link">
<a class="np-sub-navigation-content-item-link" href="/app/articles">
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
Blog
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div>
<div class="np-sub-navigation-content-item certifications-link">
<a class="np-sub-navigation-content-item-link" href="/app/certifications">
<i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
Certifications
</a>
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
</div> {% endcomment %}
</div>
</nav>
<script>
if (window.location.pathname == "/app/articles") {
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
} else {
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
}
if (window.location.pathname == "/app/certifications") {
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
} else {
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
}
</script>
<style>
/*
.np-sub-navigation-content-item-link,
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
color:#333;
}*/
</style>

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources">
{% if training_events.enrolled.any? %}
{% for training_event in training_events.enrolled %}
{% include "cards_training_event" with training_event %}
{% endfor %}
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>

View File

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

View File

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

View File

@ -0,0 +1,9 @@
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{% t .empty %}
</div>
<img
class="np-zero-state-training-events"
alt="{% t .empty %}"
/>
</div>

View File

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

View File

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

View File

@ -0,0 +1,14 @@
<div class="np-card-training-session-date">
<div class="np-button-background-color np-card-training-session-date-bar"></div>
<div class="np-card-training-session-date-day">
{{ training_session.day }}
</div>
<div>
<div class="np-card-training-session-date-month">
{{ training_session.month }}
</div>
<div class="np-card-training-session-date-year">
{{ training_session.year }}
</div>
</div>
</div>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,6 @@
<div class="np-training-session-cta-note np-training-session-tile-badge np-training-session-tile-badge-{{ training_session.status.type }}">
{% if training_session.approved? %}
<i class="far fa-check np-training-session-icon"></i>
{% endif %}
{{ training_session.status.label }}
</div>

View File

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

View File

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

View File

@ -0,0 +1,43 @@
{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="Article np-resource-title">{{ custom_page.headline }}</div>
<div class="Article np-resource-subtitle">{{ custom_page.subheadline }}</div>
</div>
</div>
{% if courses.in_catalog.any? %}
<div class="np-catalog-courses row row-with-thumbnails">
{% for course in courses.in_catalog %}
{% if course.properties.is_article_course %}
{% comment %}
{% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
{% unless course.progress == 100 %}
{% endunless %}
{% endif %};
{% endcomment %}
{% if course.properties.course_language == current_person.properties.language %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_article" with course %}
</div>
{% comment %}
{% else %}
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
{% include "cards_article" with course %}
</div>
{% endcomment %}
{% endif %}
{% endif %}
{% endfor %}
</div>
{% else %}
{% capture message %}
{% t shared.zero_state.courses.catalog
, key: current_school.course_vocabulary %}
{% endcapture %}
{% include "courses_zero_state", message: message %}
{% endif %}
</main>
{% include "footer" %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -0,0 +1,33 @@
{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-certifications np-subpage-container np-max-width">
<div class="np-catalog-header-wrapper">
<div class="np-catalog-header">
<div class="Certifications np-resource-title">{{ custom_page.headline }}</div>
<div class="Certifications np-resource-subtitle">{{ custom_page.subheadline }}</div>
</div>
</div>
<div class="np-learning-paths-main">
{% for learning_path in learning_paths.available %}
{% for category in learning_path.categories %}
{% if category.name == 'Certifications' %}
{% include "cards_learning_path" %}
</div>
{% else %}
{% endif %}
{% endfor %}
{% endfor %}
{% comment %}
<div class="row">
<div class="col-xs-12">
<div class="np-dashboard-resources-container">
<div class="np-zero-state-text">
{{ custom_page.content }}
</div>
<img class="np-zero-state-courses" />
</div>
</div>
</div>
{% endcomment %}
</main>
{% include "footer" %}

View File

@ -0,0 +1,63 @@
{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
{% if course.enrolled? %}
<script>window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")</script>
{% else %}
<script>window.location.replace("{% route course_enrollment, code: course.enrollment_code %}")</script>
{% endif %}
{% else %}
{% include "header" %}
<main class="np-main np-max-width np-page-container">
<div class="np-hidden-mobile" id="course-desktop">
{% include "course_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="course-mobile">
{% include "course_mobile_view" %}
</div>
</main>
{% include "footer" %}
{% endif %}
<style>
.np-header {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.np-flex {
flex-wrap:wrap;
}
.np-content-categories-content-item {
margin-bottom:12px;
}
.course-image-wrapper {
position:relative;
}
.course-title {
position:absolute;
color:#fff;
font-weight:700;
top:16px;
left:16px;
padding-right:16px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
font-size:24px;
line-height:32px;
}
@media (min-width:768px) {
.course-title {
font-size: 32px;
line-height: 40px;
}
}
@media (min-width:1200px) {
.course-title {
font-size: 40px;
line-height: 48px;
}
}
</style>

View File

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

View File

@ -0,0 +1,30 @@
{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
<div class="row np-flex-center">
<div class="col-xs-12 col-sm-8">
{% comment %}
{% if features.learning_paths? %}
<div class="Learning Paths np-dashboard-resources-title">
{% t shared.learning_paths %}
</div>
{% include "learning_paths_index", items: learning_paths.enrolled %}
{% endif %}
{% endcomment %}
<div class="Courses np-dashboard-resources-title">
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
</div>
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
</div>
{% if features.training_events? %}
<div class="np-grid-spacing col-xs-12 col-sm-4">
<div class="np-dashboard-resources-title">
{% t .upcoming_events %}
</div>
{% include "training_events_dashboard" %}
</div>
{% endif %}
</div>
</main>
{% include "footer" %}

View File

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

View File

@ -0,0 +1,590 @@
<script>
function showPopup() {
setTimeout(function() {
document.querySelector(".popup-trigger").click()
}, 500)
}
function showSurveyPopup() {
setTimeout(function() {
document.querySelector(".survey-popup-trigger").click()
}, 500)
}
function formatDate(date) {
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const year = date.getFullYear();
return `${month}/${day}/${year}`;
}
function RerunWorkato() {
const today = new Date();
const formattedDate = formatDate(today);
const data = {
person_uuid: '{{current_person.id}}',
date: formattedDate
}
let webhookUrl
if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
} else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
}
if (webhookUrl) {
fetch(webhookUrl, {
method: 'post',
body: JSON.stringify(data)
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log(res)
}).catch(error => {
console.log(error)
});
}
}
</script>
{% assign catalog_courses = courses.in_catalog %}
{% assign survey_courses = "" %}
{% assign survey_course_completed = false %}
{% comment %} {% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %} {% endif %}{% endcomment %}
{% comment %} LIVE SCHOOL {% endcomment %}
{% comment %} {% assign survey_course = catalog_courses | where: "id", "b3225a47-448d-4988-962a-18d37d6616d0" %} {% endcomment %}
{% comment %} {% if current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %} {% endif %} {% endcomment %}
{% comment %} SANDBOX SCHOOL {% endcomment %}
{% comment %} {% assign survey_course = catalog_courses | where: "id", "fdc8acdc-0b7c-4064-a52b-1955379d411b" %} {% endcomment %}
{% comment %} {% endif %} {% endcomment %}
{% comment %} {% for course in survey_course %} {% endfor %} {% endcomment %}
{% comment %} {% if course.progress == 100 %} {% endif %}{% endcomment %}
{% comment %} {% assign survey_course_completed = true %} {% endcomment %}
{% comment %} {% endif %} {% endcomment %}
{% comment %} {% endfor %} {% endcomment %}
{% include "header" %}
<main class="np-main np-homepage">
<div class="np-homepage-hero">
<div class="np-homepage-hero-container">
<div class="np-homepage-hero-content">
<div class="Home np-homepage-headline">
{{ homepage.headline }}
</div>
<div class="hero-search-wrapper">
<div class="Home np-homepage-subheadline">
{{ homepage.subheadline }}
</div>
<form
class="np-header-search np-hero-search"
data-test="mobile-search"
method="get"
action="{% route search %}">
{% if current_person.properties.language == "es" %}
<input
aria-label="¿Qué estás buscando?"
class="hero-search-input"
type="text"
name="q"
placeholder="¿Qué estás buscando?" />
{% else %}
<input
aria-label="What are you looking for?"
class="hero-search-input"
type="text"
name="q"
placeholder="What are you looking for?" />
{% endif %}
<i class="np-header-search-icon hero-search-icon far fa-search"></i>
</form>
</div>
</div>
<img
class="np-homepage-hero-image"
src="{{ homepage.artwork_url }}"
alt="{{ homepage.headline }}" />
</div>
</div>
{% include "sub_navigation" %}
{% include "homepage_featured", items: catalog_courses %}
{% comment %}
<div class="np-max-width np-homepage-row-wrapper">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
<div class="Progress np-section-header">Progress Tracker</div>
<div class="learning-path-progress-container">
<div class="row">
{% assign lps_in_progress = 0 %}
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
{% for learning_path in enrolled_learning_paths %}
{% if learning_path.progress > 0 %}
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
{% if lps_in_progress < 4 %}
<div class="col-xs-12 col-md-4">
{% include "cards_learning_path_progress" %}
</div>
{% endif %}
{% endif %}
{% endfor %}
{% if lps_in_progress > 0 %}
<div class="see-more-wrapper">
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
</div>
{% endif %}
{% if lps_in_progress == 0 %}
<div class="col-xs-12">
<div class="np-learning-paths-resources-container">
<div class="np-zero-state-text">
Yikes! You don't have any learning Paths in progress.
</div>
<img class="np-zero-state-learning-paths" alt="" />
</div>
</div>
{% endif %}
</div>
{% endcomment %}
</div>
</div>
{% comment %} {% if features.training_events? %}
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="homepage-events">
<div class="np-section-header">Upcoming Courses</div>
<div class="upcoming events">
{% if training_events.available.any? %}
{% for training_event in training_events.available limit:1 %}
{% include "cards_training_event" with training_event %}
{% endfor %}
<div class="see-more-wrapper">
<a href="/app/training_events" style="margin-top:24px;">See more</a>
</div>
{% else %}
{% include "training_events_zero_state" %}
{% endif %}
</div>
</div>
</div>
{% endif %} {% endcomment %}
</div>
</div>
{% include "homepage_ongoing_training", items: catalog_courses %}
{% comment %} {% include "homepage_topics" %} {% endcomment %}
<button
type="button"
class="popup-trigger"
data-toggle-class-on-target
data-toggle-target="#firstTimeUsers"
data-toggle-escape
data-toggle-modal>
Click
</button>
<button
type="button"
class="survey-popup-trigger"
data-toggle-class-on-target
data-toggle-target="#surveyPopup"
data-toggle-escape
data-toggle-modal>
Click
</button>
</main>
{% include "footer" %}
<div
class="first-time-user-popup"
id="firstTimeUsers"
role="dialog"
aria-labelledby="dialogTitle"
aria-describedby="dialogContent"
aria-hidden="true">
<section class="first-time-user-popup-container">
<div id="dialogContent" class="first-time-user-popup-content">
<div class="modal-headline">
{% if current_person.first_name %}&#128075; Hi, {{ current_person.first_name }}!{% endif %}
Welcome to Walmart Luminate Learning! Can we help you get familiar with the site?</div>
<div class="modal-links">
<a
href="javascript:setPopupSeenProperty('/app/dashboard')"
class="secondary"
data-toggle-trigger-off>No thanks! I can figure it out.</a>
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %}
{% comment %} LIVE SCHOOL {% endcomment %}
<a href="javascript:setPopupSeenProperty('https://walmartluminate.northpass.com/c/fabe6410eee0c1fa338f11d854edccada8780b6f')">Sure! Show me around.</a>
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
{% comment %} SANDBOX SCHOOL {% endcomment %}
<a href="javascript:setPopupSeenProperty('/app/courses/52f20328-9868-40e5-9ceb-699f6ab2c6ec')" ">Sure! Show me around.</a>
{% endif %}
</div>
</div>
</section>
</div>
<div
class="survey-popup"
id="surveyPopup"
role="dialog"
aria-labelledby="dialogTitle"
aria-describedby="dialogContent"
aria-hidden="true">
<section class="survey-popup-container">
<div id="dialogContent" class="survey-popup-content">
<div class="modal-headline">Help us improve your experience!</div>
<div class="modal-links">
{% if current_school.id == "10183441-2254-4b1e-a9f7-9549ca773257" %}
{% comment %} LIVE SCHOOL {% endcomment %}
<a href="javascript:setSurveyPopupSeen('/app/courses/b3225a47-448d-4988-962a-18d37d6616d0')">Go!</a>
{% elsif current_school.id == "804edb32-c300-42f3-82b7-e5d55fcbc2a6" %}
{% comment %} SANDBOX SCHOOL {% endcomment %}
<a href="javascript:setSurveyPopupSeen('/app/courses/fdc8acdc-0b7c-4064-a52b-1955379d411b')">Go!</a>
{% endif %}
</div>
</div>
</section>
</div>
{% if current_person.signed_in? %}
{% unless current_person.email contains "+preview" %}
{% if current_person.properties.first_time_user_popup_seen == false %}
<script>
console.log('property is false, check local storage')
if (localStorage.getItem('modal_clicked') != null) {
console.log("rerun workflow to set property")
RerunWorkato()
} else {
showPopup()
}
</script>
{% elsif current_person.properties.first_time_user_popup_seen == true %}
<script>
console.log("property is set, deleting local storage, don't initialize first modal")
localStorage.removeItem("modal_clicked")
</script>
{% else %}
<script>
console.log('custom prop doesnt yet exist')
if (localStorage.getItem('modal_clicked') != null) {
console.log("rerun workflow to set property")
RerunWorkato()
} else {
showPopup()
}
</script>
{% endif %}
{% endunless %}
{% endif %}
<script>
if (window.location.pathname == "/app") {
document
.querySelector(".np-sub-navigation")
.classList
.add("homepage-nav")
document
.querySelector(".np-header")
.classList
.add("homepage-nav")
}
document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
if (e
.target
.parentElement
.classList
.contains("open")) {
e
.target
.parentElement
.classList
.remove("open")
} else {
e
.target
.parentElement
.classList
.add("open")
}
})
window.onload = function() {
var stickySubNav = document.querySelector('.np-sub-navigation');
var headerOffset = findOffset(stickySubNav);
window.onscroll = function() {
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (bodyScrollTop > (headerOffset.top - 24)) {
stickySubNav.classList.add('fixed');
} else {
stickySubNav.classList.remove('fixed');
}
};
const firstPopupSeen = {{current_person.properties.first_time_user_popup_seen}}
if (firstPopupSeen == true) {
var popupSeenDate = new Date("{{current_person.properties.first_popup_date}}");
var popupSeenSeconds = popupSeenDate.getTime() / 1000;
var currentDate = new Date();
var currentDateSeconds = currentDate.getTime() / 1000;
if (currentDateSeconds > (popupSeenSeconds + 1209600) && currentDateSeconds) {
console.log("more than 2 weeks after first popup")
const surveyCourseCompleted = {{survey_course_completed}}
if (surveyCourseCompleted == false) {
if (localStorage.getItem("survey_modal_clicked") == null) {
showSurveyPopup()
} else {
const lastClickedDateSeconds = new Date(localStorage.getItem("survey_modal_clicked")).getTime() / 1000
if (currentDateSeconds > (lastClickedDateSeconds + 1209600) && currentDateSeconds) {
showSurveyPopup()
} else {
console.log(`dont show survey popup again until 2 weeks after ${
localStorage.getItem("survey_modal_clicked")
} or course completed`)
}
}
} else {
localStorage.removeItem("survey_modal_clicked");
}
}
}
};
function findOffset(element) {
var top = 0,
left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return {top: top, left: left};
}
window.addEventListener("load", function() {
var progressCards = document.querySelectorAll(".np-card-learning-path-progress");
for (var i = 0; i < progressCards.length; i++) {
var lpProgressCard = progressCards[i]
var progressRing = lpProgressCard.querySelector(".progress-ring")
let circle = progressRing.querySelector(".circle-progress")
let total = progressRing.getAttribute("data-total")
let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
const percent = numCompleted / total
setProgress(percent, circle)
}
function setProgress(percent, circle) {
const offset = circumference - percent * circumference;
circle.style.strokeDashoffset = offset;
}
})
function setPopupSeenProperty(redirectUrl) {
localStorage.setItem("modal_clicked", true);
const today = new Date();
const formattedDate = formatDate(today);
const data = {
person_uuid: '{{current_person.id}}',
date: formattedDate
}
const schoolID = '{{current_school.id}}'
let webhookUrl
if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
} else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
}
if (webhookUrl) {
fetch(webhookUrl, {
method: 'post',
body: JSON.stringify(data)
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log(res)
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
}).catch(error => {
console.log(error)
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
});
}
}
function setSurveyPopupSeen(redirectUrl) {
const today = new Date();
const formattedDate = formatDate(today);
localStorage.setItem("survey_modal_clicked", formattedDate);
setTimeout(function() {
window.location.href = redirectUrl;
}, 250)
}
</script>
<style>
.np-homepage-hero {
background-color: #3C228A;
padding: 40px 24px 24px;
flex-direction: column;
}
.np-homepage-hero-image {
object-fit: unset;
width: 115px;
height: auto;
min-height: unset;
margin-top: 24px;
}
.np-homepage-hero-content {
position: relative;
padding: 0;
color: #fff;
}
.np-homepage-hero .np-homepage-headline {
font-weight: 700;
font-size: 24px;
line-height: 33px;
margin-bottom: 24px;
}
.np-homepage-subheadline {
font-size: 20px;
line-height: 24px;
margin-bottom: 8px;
opacity: 1;
}
.np-hero-search {
width: 100%;
}
.hero-search-input {
background-color: #F1F3F4;
border-radius: 4px;
padding: 14px 19px 14px 44px;
border: none;
font-size: 14px;
line-height: 19px;
width: 100%;
background: #fff;
}
.hero-search-icon {
right: unset;
left: 16px;
color: #6C6C6C;
}
.np-homepage-row-wrapper {
padding: 0 16px;
margin-bottom: 56px;
}
.np-homepage-featured-empty {
margin: 0;
border: 2px solid #dadce0;
border-radius: 8px;
padding: 60px 32px;
}
.learning-path-progress-container,
.learning-path-progress-container > .row {
height: 100%;
}
.popup-trigger,
.survey-popup-trigger {
visibility: hidden;
opacity: 0;
}
@media(min-width:768px) {
.np-homepage-hero-container {
display: flex;
align-items: center;
}
.np-homepage-hero .np-homepage-headline {
font-size: 40px;
line-height: 50px;
margin-bottom: 20px;
text-align: left;
}
.np-homepage-hero-image {
width: 200px;
height: auto;
margin: 0 0 0 64px;
}
.hero-search-wrapper {
display: flex;
}
.np-hero-search {
margin-left: 32px;
flex: 2;
}
}
@media(min-width:768px) and (max-width:1365px) {
.np-homepage-hero .np-homepage-headline {
font-size: 3.516vw;
line-height: 4.249vw;
}
}
@media(min-width:1200px) {
.np-homepage-hero-image {
width: 300px;
margin: 0 0 0 100px;
}
}
@media(min-width:1366px) {
.np-homepage-hero .np-homepage-headline {
font-size: 48px;
line-height: 58px;
}
}
</style>

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