Sandata templates and Luminate. PDFs for Spark
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,139 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
<a
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,30 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% endcapture %}
|
||||
{% capture order_history_path %}{% route order_history %}{% endcapture %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<nav class="np-tabs np-account-tabs">
|
||||
<div class="np-tabs-content">
|
||||
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ settings_path}}">
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ transcript_path }}">
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-tab{% if page.path == order_history_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ order_history_path }}">
|
||||
{% t .order_history %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ product.description }}
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.product_types.bundle %}
|
||||
<i class="far fa-layer-group np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route catalog %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
{% include "bundle_desktop_header" %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "bundle_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta"%}
|
||||
</div>
|
||||
{% include "bundle_product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,27 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{% t shared.product_types.bundle %}
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "bundle_description" %}
|
||||
</div>
|
||||
|
||||
<div class="np-card-spacing">
|
||||
{% include "bundle_product_outline" %}
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-outline">
|
||||
<h3 class="np-product-outline-title"></h3>
|
||||
{% for item in product.bundle_items %}
|
||||
{% if item.course? %}
|
||||
{% include "product_outline_course", id: forloop.index %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "product_outline_event", id: forloop.index %}
|
||||
{% elsif item.learning_path? %}
|
||||
{% include "product_outline_lp", id: forloop.index %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,76 @@
|
||||
<div class="np-card course-card"></div>
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle short-desc">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
{% comment %} <div class="card-info">
|
||||
<div class="card-info-label">LESSONS</div>
|
||||
<div class="card-info-value">{{ course.activities_count }}</div>
|
||||
</div> {% endcomment %}
|
||||
{% if course.properties.course_duration %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">DURATION</div>
|
||||
<div class="card-info-value">{{ course.properties.course_duration }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.properties.price %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PRICE</div>
|
||||
<div class="card-info-value">{{ course.properties.price }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% if course.progress == 0 %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PROGRESS</div>
|
||||
<div class="card-info-value">{% t shared.progress
|
||||
, count: course.progress %}</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-info np-button-color">
|
||||
<div class="np-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar"></div>
|
||||
</div>
|
||||
<div class="card-info-value">{{ course.progress }}%</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
{% 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.signed_in? %}
|
||||
{% if course.progress == 0 %}
|
||||
Start Course
|
||||
{% elsif course.progress == 100 %}
|
||||
View Course
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Learn More
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-card course-card">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ item.name }}"
|
||||
src="{{ item.image_url }}">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ item.name }}
|
||||
</h3>
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">TYPE</div>
|
||||
<div class="card-info-value">
|
||||
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
{{ item.formatted_type | upcase }}
|
||||
</div>
|
||||
</div>
|
||||
{% unless item.free_course? %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PRICE</div>
|
||||
<div class="card-info-value">{{ item.formatted_price }}</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% if item.free_course? %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PROGRESS</div>
|
||||
<div class="card-info-value">{% t shared.progress, count: item.progress %}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
{% if item.free_course? %}
|
||||
{% if item.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: item.path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ item.path }}">
|
||||
{% if item.progress == 0 %}
|
||||
Start
|
||||
{% elsif item.progress == 100 %}
|
||||
View
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="np-button np-button-wide" href="{{ item.path }}">
|
||||
{% t shared.learn_more %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,70 @@
|
||||
<div class="np-card course-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle short-desc">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
{% comment %} <div class="card-info">
|
||||
<div class="card-info-label">LESSONS</div>
|
||||
<div class="card-info-value">{{ course.activities_count }}</div>
|
||||
</div> {% endcomment %}
|
||||
{% if course.properties.course_duration %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">DURATION</div>
|
||||
<div class="card-info-value">{{ course.properties.course_duration }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% if course.progress == 0 %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PROGRESS</div>
|
||||
<div class="card-info-value">{% t shared.progress
|
||||
, count: course.progress %}</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-info np-button-color">
|
||||
<div class="np-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar"></div>
|
||||
</div>
|
||||
<div class="card-info-value">{{ course.progress }}%</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
{% 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.signed_in? %}
|
||||
{% if course.progress == 0 %}
|
||||
Start Course
|
||||
{% elsif course.progress == 100 %}
|
||||
View Course
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Learn More
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<div class="certificate-badge">
|
||||
<img src="{{ course.properties.certification_badge_image }}" />
|
||||
</div>
|
||||
{% if course.name == "Gainsight Associate Admin Certificate: Level 1" %}
|
||||
<div class="certificate-label">Level 1</div>
|
||||
{% endif %}
|
||||
<h4 class="certificate-title gs-navy">{{ course.name }}</h4>
|
||||
{% if course.name == "Gainsight Associate Admin Certificate: Level 1" %}
|
||||
<ul class="certificate-text">
|
||||
<li>Complete Admin self-paced training on Gainsight University</li>
|
||||
<li>Complete a 36 question, multiple choice examination with a passing score of 85%</li>
|
||||
<li>On passing the exam, receive an Associate Admin certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
{% elsif course.name == "Gainsight End User Certification" %}
|
||||
<ul class="certificate-text">
|
||||
<li>Complete End User self-paced training on Gainsight University</li>
|
||||
<li>Complete a 32 question, multiple choice examination with a passing score of 80%</li>
|
||||
<li>On passing the exam, receive a Gainsight End User certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
{% elsif course.name == "Gainsight PX Level 1 Certification" %}
|
||||
<ul class="certificate-text">
|
||||
<li>Complete PX self-paced training on Gainsight University</li>
|
||||
<li>Complete a 32 question, multiple choice examination with a passing score of 80%</li>
|
||||
<li>On passing the exam, receive a Gainsight PX Level 1 certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">Exam Fee</div>
|
||||
<div class="card-info-value">${{ course.properties.price }} USD</div>
|
||||
</div>
|
||||
{% if course.name == "Gainsight Associate Admin Certificate: Level 1" %}
|
||||
<a class="np-button w-100" href="/app/catalog/courses/27415f38-848c-463f-81db-038b04ff7236">Learn More</a>
|
||||
{% elsif course.name == "Gainsight End User Certification" %}
|
||||
<a class="np-button w-100" href="/app/catalog/courses/75e63ad8-e9b8-4318-a03e-fb9aa0781849">Learn More</a>
|
||||
{% elsif course.name == "Gainsight PX Level 1 Certification" %}
|
||||
<a class="np-button w-100" href="/app/catalog/courses/30b81154-f7bc-44b0-8682-33d09d86da2e">Learn More</a>
|
||||
{% else %}
|
||||
<a class="np-button w-100" href="{% route course, id: course.id %}">Learn More</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<div class="certificate-badge">
|
||||
<img src="{{ image }}" />
|
||||
</div>
|
||||
{% if name == "Topic-Specific Certificates" %}
|
||||
<div class="certificate-label">Level 2</div>
|
||||
{% elsif name == "Gainsight NXT Admin Certificate" %}
|
||||
<div class="certificate-label">Level 3</div>
|
||||
{% endif %}
|
||||
<h4 class="certificate-title gs-navy">{{ name }}</h4>
|
||||
{% if name == "Topic-Specific Certificates" %}
|
||||
<ul class="certificate-text">
|
||||
<li>Complete a practical exam in the Gainsight environment with a passing score of 85%.</li>
|
||||
<li>On passing, receive a Gainsight certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
<li>Topics: Reporting & Dashboards or Journey Orchestrator & Surveys</li>
|
||||
</ul>
|
||||
{% elsif name == "Gainsight NXT Admin Certificate" %}
|
||||
<ul class="certificate-text">
|
||||
<li>Complete the Level 1 and Level 2 Certificates (recommended)</li>
|
||||
<li>Complete additional self-paced training</li>
|
||||
<li>Complete Admin Hands-on Training courses (recommended)</li>
|
||||
<li>Complete 60 question, proctored examination with a passing score of 70%</li>
|
||||
<li>On passing, receive a Gainsight Certified Admin certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">Exam Fee</div>
|
||||
<div class="card-info-value">${{ price }} USD</div>
|
||||
</div>
|
||||
<a class="np-button w-100" href="{{ link }}">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,70 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
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>
|
||||
@ -0,0 +1,58 @@
|
||||
<div class="np-card lp-card-vartical">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}">
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle short-desc">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">COURSES</div>
|
||||
<div class="card-info-value">{{ learning_path.items.count }}</div>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
{% if learning_path.progress == 0 %}
|
||||
<div class="card-info">
|
||||
<div class="card-info-label">PROGRESS</div>
|
||||
<div class="card-info-value">{% t shared.progress
|
||||
, count: learning_path.progress %}</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-info np-button-color">
|
||||
<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="card-info-value">{{ learning_path.progress }}%</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
<a class="np-button np-button-wide" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if current_person.signed_in? %}
|
||||
{% if learning_path.progress == 0 %}
|
||||
Start Learning Path
|
||||
{% elsif learning_path.progress == 100 %}
|
||||
View Learning Path
|
||||
{% else %}
|
||||
Continue
|
||||
{% endif %}
|
||||
{% else %}
|
||||
Learn More
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
<i class="far {{ training_event.event_type_icon }} np-training-session-icon"></i>
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<span class="np-card-training-sessions-separator">•</span>
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %} -
|
||||
<span class="{{ training_event.sessions.first.status.type}}">
|
||||
{{ training_event.sessions.first.status.label}}
|
||||
</span>
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-label">
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-content-training-event">
|
||||
<div class="np-card-training-sessions">
|
||||
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="category-filter-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="filter-checkbox {{ class }}-filter"
|
||||
name="{{ label | downcase | replace: " ", "-" }}"
|
||||
data-filter="{{ id }}"
|
||||
id="{{ id }}">
|
||||
<label for="{{ label | downcase | replace: " ", "-" }}">{{ label }}</label>
|
||||
</div>
|
||||
@ -0,0 +1,245 @@
|
||||
{% assign customer_success_categories = "[FEATURE] 360 ||| [FEATURE] Timeline ||| [FEATURE] Analytics ||| [FEATURE] Cockpit & Playbooks ||| [FEATURE] Gainsight Home ||| [FEATURE] Scorecards ||| [FEATURE] Journey Orchestrator ||| [FEATURE] Rules Engine ||| [FEATURE] Data & User Management ||| [FEATURE] Surveys ||| [FEATURE] Mobile & Sally Al Bot ||| [FEATURE] AI: Copilot, Cheat Sheet" | downcase %}
|
||||
{% assign product_experience_categories = "[FEATURE] Installation ||| [FEATURE] Engagements ||| [FEATURE] Knowledge Center Bot ||| [FEATURE] Analytics ||| [FEATURE] Integrations" | downcase %}
|
||||
{% assign customer_education_categories = "[FEATURE] Academy Setup ||| [FEATURE] Course Building ||| [FEATURE] Learning Management ||| [FEATURE] Customization ||| [FEATURE] Analytics ||| [FEATURE] Certification" | downcase %}
|
||||
{% assign customer_communities_categories = "" | downcase %}
|
||||
|
||||
<div class="mobile-filter-link np-hidden-desktop">Filter
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="catalog-filter-sidebar">
|
||||
<div class="mobile-filter-header np-hidden-desktop">
|
||||
<div class="mobile-filter-open-link">Filter
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
<div class="close-filter">
|
||||
<i class="fal fa-times"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-header main-header">Filters</div>
|
||||
<a class="clear-filters">Clear Filters</a>
|
||||
|
||||
<details class="filter-dropdown">
|
||||
<summary>
|
||||
<span class="filter-header">Type</span>
|
||||
</summary>
|
||||
<div class="filter-links type-filters">
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: "course"
|
||||
, class: "type"
|
||||
, label: "Courses"
|
||||
%}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: "learning-path"
|
||||
, class: "type"
|
||||
, label: "Learning Paths"
|
||||
%}
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_downcase = category.name | downcase %}
|
||||
{% if category_name_downcase contains "[type]" %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "type"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="filter-dropdown">
|
||||
<summary>
|
||||
<span class="filter-header">Role</span>
|
||||
</summary>
|
||||
<div class="filter-links role-filters">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_downcase = category.name | downcase %}
|
||||
{% if category_name_downcase contains "[role]" %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "role"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="filter-dropdown" {% if product_name == "customer communities" %} style="display: none !important" {% endif %}>
|
||||
<summary>
|
||||
<span class="filter-header">Features</span>
|
||||
</summary>
|
||||
<div class="filter-links role-filters">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_downcase = category.name | downcase %}
|
||||
{% if category_name_downcase contains "[feature]" %}
|
||||
{% if product_name == "customer success" %}
|
||||
{% if customer_success_categories contains category_name_downcase %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "feature"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% elsif product_name == "customer education" %}
|
||||
{% if customer_education_categories contains category_name_downcase %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "feature"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% elsif product_name == "customer communities" %}
|
||||
{% if customer_communities_categories contains category_name_downcase %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "feature"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% elsif product_name == "product experience" %}
|
||||
{% if product_experience_categories contains category_name_downcase %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "feature"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="filter-dropdown">
|
||||
<summary>
|
||||
<span class="filter-header">Language</span>
|
||||
</summary>
|
||||
<div class="filter-links language-filters">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_downcase = category.name | downcase %}
|
||||
{% if category_name_downcase contains "[language]" %}
|
||||
{% assign category_name = category.name | split: "]" | last | strip %}
|
||||
{% include "catalog_filter_checkbox"
|
||||
, id: category.id
|
||||
, class: "language"
|
||||
, label: category_name
|
||||
%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", function() {
|
||||
document.querySelector(".mobile-filter-link").addEventListener("click", function() {
|
||||
document.querySelector(".catalog-filter-sidebar").classList.add("open")
|
||||
})
|
||||
|
||||
document.querySelector(".close-filter").addEventListener("click", function() {
|
||||
document.querySelector(".catalog-filter-sidebar").classList.remove("open")
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (max-width: 767px) {
|
||||
.catalog-filter-sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -9999px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
width: 90%;
|
||||
transition: left 0.2s;
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.catalog-filter-sidebar.open {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mobile-filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.close-filter {
|
||||
font-size: 24px;
|
||||
color: #ADBDCC;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-filter-link,
|
||||
.mobile-filter-open-link {
|
||||
color: #40A0F4;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 140%;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mobile-filter-link i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-header {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.075em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #153d5e;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.filter-header.main-header {
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.filter-dropdown {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.clear-filters {
|
||||
color: #40A0F4;
|
||||
margin-bottom: 24px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-links {
|
||||
margin: 16px 0 32px;
|
||||
}
|
||||
|
||||
.filter-link {
|
||||
margin: 16px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-link.active {
|
||||
font-weight: 700;
|
||||
color: #48b2eb;
|
||||
}
|
||||
|
||||
.category-filter-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.category-filter-checkbox label {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
reorderContentAlphabetical()
|
||||
|
||||
document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
|
||||
checkbox.addEventListener("change", () => {filterCourses()})
|
||||
})
|
||||
|
||||
let params = new URLSearchParams(document.location.search);
|
||||
params.forEach(function(param) {
|
||||
document.querySelector(`.filter-checkbox[data-filter="${param}"]`).checked = true
|
||||
})
|
||||
|
||||
document.querySelector(".clear-filters").addEventListener("click", (e) => {
|
||||
e.preventDefault()
|
||||
clearAllFilters()
|
||||
})
|
||||
})
|
||||
|
||||
function clearAllFilters() {
|
||||
const filterableCards = document.querySelectorAll(".filterable-card");
|
||||
filterableCards.forEach((card) => {
|
||||
card.style.display = "flex"
|
||||
})
|
||||
|
||||
document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
|
||||
checkbox.checked = false
|
||||
})
|
||||
}
|
||||
|
||||
function reorderContentAlphabetical() {
|
||||
let filterableCards = document.querySelectorAll(".filterable-card");
|
||||
|
||||
let filterableCardsArray = Array.from(filterableCards);
|
||||
|
||||
filterableCardsArray.sort((a, b) => {
|
||||
let textA = a.querySelector('h3').textContent.trim().toLowerCase();
|
||||
let textB = b.querySelector('h3').textContent.trim().toLowerCase();
|
||||
if (textA < textB) return -1;
|
||||
if (textA > textB) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
let parentElement = filterableCards[0].parentNode;
|
||||
filterableCardsArray.forEach(element => parentElement.appendChild(element));
|
||||
}
|
||||
|
||||
function filterCourses() {
|
||||
let selectedTypeFilters = []
|
||||
let selectedRoleFilters = []
|
||||
let selectedFeatureFilters = []
|
||||
let selectedLanguageFilters = []
|
||||
const checkboxFilters = document.querySelectorAll(".filter-checkbox")
|
||||
|
||||
checkboxFilters.forEach((checkbox) => {
|
||||
if (checkbox.checked) {
|
||||
if (checkbox.classList.contains("type-filter")) {
|
||||
selectedTypeFilters.push(checkbox.getAttribute("data-filter"))
|
||||
} else if (checkbox.classList.contains("role-filter")) {
|
||||
selectedRoleFilters.push(checkbox.getAttribute("data-filter"))
|
||||
} else if (checkbox.classList.contains("feature-filter")) {
|
||||
selectedFeatureFilters.push(checkbox.getAttribute("data-filter"))
|
||||
} else if (checkbox.classList.contains("language-filter")) {
|
||||
selectedLanguageFilters.push(checkbox.getAttribute("data-filter"))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// console.log("Type Filters: ", selectedTypeFilters)
|
||||
// console.log("Role Filters: ", selectedRoleFilters)
|
||||
// console.log("Feature Filters: ", selectedFeatureFilters)
|
||||
// console.log("Language Filters: ", selectedLanguageFilters)
|
||||
// console.log("===========")
|
||||
|
||||
const filterableCards = document.querySelectorAll(".filterable-card")
|
||||
|
||||
filterableCards.forEach((card) => {
|
||||
const cardCategories = card.getAttribute("data-categories")
|
||||
const cardType = card.getAttribute("data-type")
|
||||
|
||||
if
|
||||
(
|
||||
(!selectedTypeFilters.length || selectedTypeFilters.some(part => cardType.includes(part))) &&
|
||||
(!selectedRoleFilters.length || selectedRoleFilters.some(part => cardCategories.includes(part))) &&
|
||||
(!selectedFeatureFilters.length || selectedFeatureFilters.some(part => cardCategories.includes(part))) &&
|
||||
(!selectedLanguageFilters.length || selectedLanguageFilters.some(part => cardCategories.includes(part)))
|
||||
) {
|
||||
card.style.display = "flex"
|
||||
} else {
|
||||
card.style.display = "none"
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,36 @@
|
||||
<div class="np-catalog-courses row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.name == "Gainsight Associate Admin Certificate: Level 1" or course.name == "Gainsight End User Certification" or course.name == "Gainsight PX Level 1 Certification" %}
|
||||
{% continue %}
|
||||
{% else %}
|
||||
{% assign course_categories = "" | split: "" %}
|
||||
{% assign course_types = "" | split: "" %}
|
||||
{% assign is_current_product = false %}
|
||||
|
||||
{% for category in course.categories %}
|
||||
{% assign category_id = category.id | split: '!@#$%^&*()' %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
|
||||
{% if category_name contains "[type]" %}
|
||||
{% assign course_types = course_types | concat: category_id %}
|
||||
{% else %}
|
||||
{% assign course_categories = course_categories | concat: category_id %}
|
||||
{% endif %}
|
||||
|
||||
{% if category_name contains "[product]" and category_name contains product_name %}
|
||||
{% assign is_current_product = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_current_product == true %}
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content filterable-card"
|
||||
data-categories="{{ course_categories }}"
|
||||
data-type="course {{ course_types }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
<div class="np-catalog-courses row">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% assign learning_path_categories = "" | split: "" %}
|
||||
{% assign learning_path_types = "" | split: "" %}
|
||||
{% assign is_current_product = false %}
|
||||
|
||||
{% for category in learning_path.categories %}
|
||||
{% assign category_id = category.id | split: '!@#$%^&*()' %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
|
||||
{% if category_name contains "[type]" %}
|
||||
{% assign learning_path_types = learning_path_types | concat: category_id %}
|
||||
{% else %}
|
||||
{% assign learning_path_categories = learning_path_categories | concat: category_id %}
|
||||
{% endif %}
|
||||
|
||||
{% if category_name contains "[product]" and category_name contains product_name %}
|
||||
{% assign is_current_product = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_current_product == true %}
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content filterable-card"
|
||||
data-categories="{{ learning_path_categories }}"
|
||||
data-type="learning-path {{ learning_path_types }}"
|
||||
data-id="{{ learning_path.id }}">
|
||||
{% include "cards_learning_path_vertical" with learning_path %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="col-xs-12 col-md-4 spacing-clear">
|
||||
{% include "certificates_verification" %}
|
||||
{% include "certificates_metadata" %}
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div class="np-card spacing-clear">
|
||||
<div class="np-card-container padding-spacing-8">
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .learner %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{certificate.learner_name}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
{% if certificate.issuer_name_enabled? %}
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title">
|
||||
{% t .issued_by %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issuer_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .issued_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issue_date }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .expires_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.expiration_date_translation }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<script type="text/javascript">
|
||||
const resizeIframe = () => {
|
||||
const combinedPadding = 16;
|
||||
const previewIframe = document.getElementById("previewIframe");
|
||||
const previewIFrameCard = document.getElementById("previewIFrameCard");
|
||||
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
|
||||
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
|
||||
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
|
||||
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
|
||||
|
||||
templateInPreviewContainer.style.margin = 0;
|
||||
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
|
||||
|
||||
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
|
||||
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
|
||||
const scale = scaledIframeHeight / previewIframeContentHeight;
|
||||
|
||||
previewIframe.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
window.onresize = resizeIframe;
|
||||
</script>
|
||||
|
||||
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
|
||||
<div class="np-card spacing-clear">
|
||||
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
|
||||
<iframe
|
||||
id="previewIframe"
|
||||
onload="resizeIframe()"
|
||||
class="np-certificate-iframe-preview"
|
||||
srcdoc="{{ certificate.certificate_template_html }}"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="top-bar np-certificate-top-bar-spacing">
|
||||
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
|
||||
<div class="top-bar__col">
|
||||
<h2 class="np-certificate-title" >
|
||||
{{certificate.certificate_name}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="button-container np-certificate-button-container">
|
||||
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
|
||||
<a
|
||||
class="np-button np-certificate-button np-certificate-button-secondary"
|
||||
href="{{certificate.linkedin_share_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fab fa-linkedin np-certificate-share-icon"></i>
|
||||
{% t .share %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button
|
||||
id="print"
|
||||
type="button"
|
||||
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
|
||||
>
|
||||
{% t .print %}
|
||||
</button>
|
||||
{% if certificate.generating_pdf %}
|
||||
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
|
||||
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ certificate.download_url }}"
|
||||
aria-label="{% t .download %}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
download
|
||||
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
|
||||
>
|
||||
{% t .download %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-card spacing-clear np-certificate-verification-card">
|
||||
<div class="np-card-container np-certificate-verification-container">
|
||||
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
|
||||
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
|
||||
</div>
|
||||
<div class="np-certificate-verification-info-container">
|
||||
<h2 class="np-certificate-verification-info-status spacing-clear">
|
||||
{{certificate.verification_title}}
|
||||
</h2>
|
||||
<p class="np-certificate-verification-info-description spacing-clear">
|
||||
{{certificate.verification_description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,15 @@
|
||||
{% if course.enrolled? %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
{% else%}
|
||||
<span class="{{ class }}">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,41 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
{% include "product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,31 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "product_outline" %}
|
||||
</div>
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
{% if catalog.any? %}
|
||||
<div class="np-catalog-courses row">
|
||||
{% for item in catalog.items %}
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content filterable-card">
|
||||
{% include "cards_catalog_item" with item %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,16 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,148 @@
|
||||
<div class="custom-page-section np-max-width">
|
||||
<div class="row" style="justify-content:center;align-items:center;">
|
||||
<div class="col-xs-12 col-md-6 col-lg-8">
|
||||
<div class="certificate-details-box" id="level1">
|
||||
<div class="certificate-details-box-scrollable-content">
|
||||
<div class="course-desc">
|
||||
<h3>Gainsight Associate Admin Certificate: Level 1</h3>
|
||||
<p>Are you interested in becoming a Gainsight Admin? We want to recognize your Gainsight training accomplishments with a tangible benefit: a Gainsight Associate Admin Certificate!</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Why Get Certified?</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Demonstrate your commitment to the Gainsight Admin learning journey</li>
|
||||
<li>Increase your professional opportunities with a recognized and respected Gainsight certificate</li>
|
||||
<li>Show the world your accomplishment by displaying the Gainsight certificate logo on your LinkedIn profile; we'll post it on your Gainsight Community profile as well</li>
|
||||
</ul>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Qualifications</strong>
|
||||
</p>
|
||||
<p>The Gainsight Associate Admin Certificate is for new Admins who are just starting their Gainsight Administration journey. It's also open to non-customers who are serious about learning Gainsight Administration and are ready to take the first step. The exam is designed to assess whether you have completed the introductory training and understood the basic concepts behind Gainsight CS application functionality.</p>
|
||||
<p>Candidates should successfully complete the self-paced Gainsight Admin courses for NXT or possess the equivalent experience and knowledge prior to taking the exam. If you fail the exam, we recommend you review the course content.</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Preparation</strong>
|
||||
</p>
|
||||
<p>We strongly recommend completing the following courses before taking the exam. We also recommend hands-on practice with Gainsight. If you don't already have access to a sandbox or production instance of Gainsight, and you're serious about learning Gainsight administration, you may request access to a training environment
|
||||
<a
|
||||
href="https://forms.gle/7EoNrC14UXsn3DQZ9"
|
||||
target="_blank"
|
||||
rel="noopener">here.</a>
|
||||
</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Core Requirements</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/foundations-of-gainsight-scorm-version">Admin - Foundations of Gainsight</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/data-management-in-gainsight">Admin - Data Management - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-rules-engine-nxt">Admin - Rules Engine - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-user-management-nxt">Admin - User Management - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-reports-and-dashboards-horizon-analytics-nxt">Admin Reports and Dashboards (Horizon Analytics)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-cockpit-playbooks-nxt">Admin - Cockpit & Playbooks - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-scorecards-nxt">Admin - Scorecards - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-360-nxt">Admin - 360 - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-timeline-nxt">Admin - Timeline - NXT</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://education.gainsight.com/admin-journey-orchestrator-nxt/390112/scorm/2nwjdlboa6w2l">Admin - Journey Orchestrator - NXT</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<a href="https://education.gainsight.com/page/self-paced-learning">Click here</a>
|
||||
for the full list of Gainsight Admin courses.</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Exam Format</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Content: 36 multiple-choice/multiple-select questions</li>
|
||||
<li>Time allotted to complete the exam: 45 minutes</li>
|
||||
<li>Prerequisites: Web-based training courses listed above</li>
|
||||
<li>Passing score: 85%</li>
|
||||
<li>Registration fee: USD $70, plus applicable taxes as required per local law</li>
|
||||
<li>Retake fee: Up to two free retakes are included with your initial purchase. We encourage you to review the course materials before using a second or third attempt.</li>
|
||||
<li>Delivery method:</li>
|
||||
<ul>
|
||||
<li>Unproctored exam delivered in an online environment.</li>
|
||||
<li>Advance scheduling is not required; you can take the exam at any time.</li>
|
||||
<li>The exam is currently available in English only.</li>
|
||||
</ul>
|
||||
<li>Certificate Validity Period: this certificate is valid for 2 years. To renew your certificate, you must meet our
|
||||
<a
|
||||
href="https://education.gainsight.com/level-1-gainsight-nxt-associate-admin-continuing-ed-2023"
|
||||
target="_blank"
|
||||
rel="noopener">continuing education requirement</a>. The Study Guide for the continuing education exam is available
|
||||
<a
|
||||
href="https://docs.google.com/document/d/1v3_kxfNsEvX1ukMSd9doEfPxF4mLwyhYq_X3GUMfcSY/edit?usp=sharing"
|
||||
target="_blank"
|
||||
rel="noopener">here</a>.</li>
|
||||
</ul>
|
||||
<p class="gs-light-blue">
|
||||
<strong>How to Take the Exam</strong>
|
||||
</p>
|
||||
<p>
|
||||
<span style="font-weight: 400;">The Level 1 exam is available to take at your convenience on Gainsight University. Click
|
||||
<a
|
||||
href="https://education.gainsight.com/gainsight-associate-admin-certificate-level-1-1"
|
||||
target="_blank"
|
||||
rel="noopener">here</a>
|
||||
to purchase and access the exam.</span>
|
||||
</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Retake Policy</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Each exam purchase includes 2 free retakes.</li>
|
||||
<li>Total number of attempts allowed: 3</li>
|
||||
</ul>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Certificate Renewal</strong>
|
||||
</p>
|
||||
<p>Your original certificate is valid for 2 years. To renew your certificate, you must meet our
|
||||
<a
|
||||
href="https://education.gainsight.com/level-1-gainsight-nxt-associate-admin-continuing-ed-2023"
|
||||
target="_blank"
|
||||
rel="noopener">continuing education requirement
|
||||
</a>once a year. Please review the
|
||||
<a
|
||||
href="https://docs.google.com/document/d/1v3_kxfNsEvX1ukMSd9doEfPxF4mLwyhYq_X3GUMfcSY/edit?usp=sharing"
|
||||
target="_blank"
|
||||
rel="noopener">Study Guide</a>
|
||||
to prepare.</p>
|
||||
<p class="gs-light-blue">
|
||||
<strong>Need Help?</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>E-mail:
|
||||
<a href="mailto:training@gainsight.com">training@gainsight.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6 col-lg-4">
|
||||
<div class="certificate-call-to-action">
|
||||
<div class="certificate-badge-img">
|
||||
<img src="" />
|
||||
<a class="np-button">Get Certified</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,144 @@
|
||||
<div class="custom-page-section np-max-width">
|
||||
<h2 class="section-title">Administrator Credentials Path</h2>
|
||||
<div class="row" style="justify-content:center;">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<h3 class="certificate-level color-yellow">LEVEL 1</h3>
|
||||
<h4 class="certificate-title">Gainsight NXT Associate Admin Certificate</h4>
|
||||
<ul class="certificate-info yellow">
|
||||
<li>Exam fee: $70 USD*</li>
|
||||
<li>Complete Admin self-paced training on Gainsight University</li>
|
||||
<li>Complete a 36 question, multiple choice examination with a passing score of 85%</li>
|
||||
<li>On passing the exam, receive an Associate Admin certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
<div
|
||||
class="expandable-info"
|
||||
id="panel1"
|
||||
aria-labelledby="buttonForPanel"
|
||||
aria-hidden="true">
|
||||
<div class="example-collapsible-panel-content">
|
||||
<a href="#level1" class="learn-more-link color-yellow">Click here to learn more.</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="show-more-link"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-target-parent="#panel1"
|
||||
data-toggle-escape
|
||||
aria-controls="panel"
|
||||
aria-expanded="false">Show more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<h3 class="certificate-level color-red">LEVEL 2</h3>
|
||||
<h4 class="certificate-title">Topic-Specific Certificates</h4>
|
||||
<ul class="certificate-info red">
|
||||
<li>Exam fee: $125 USD*</li>
|
||||
<li>Complete a practical exam in the Gainsight environment with a passing score of 85%.</li>
|
||||
<li>On passing, receive a Gainsight certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
<strong class="color-red">Topics</strong>
|
||||
|
||||
<div
|
||||
class="expandable-info"
|
||||
id="panel2"
|
||||
aria-labelledby="buttonForPanel"
|
||||
aria-hidden="true">
|
||||
<div class="example-collapsible-panel-content">
|
||||
<ul class="certificate-info red">
|
||||
<li>Reporting & Dashboards (Horizon Analytics)</li>
|
||||
<li>Journey Orchestrator & Surveys</li>
|
||||
</ul>
|
||||
<a href="#level1" class="learn-more-link color-red">Click here to learn more.</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="show-more-link"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-target-parent="#panel2"
|
||||
data-toggle-escape
|
||||
aria-controls="panel"
|
||||
aria-expanded="false">Show more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<h3 class="certificate-level color-green">LEVEL 3</h3>
|
||||
<h4 class="certificate-title">Gainsight NXT Admin Certificate</h4>
|
||||
<ul class="certificate-info green">
|
||||
<li>Exam fee: $300 USD*</li>
|
||||
<li>Complete the Level 1 and Level 2 Certificates (recommended)</li>
|
||||
<li>Complete additional self-paced training</li>
|
||||
<li>Complete Admin Hands-on Training courses (recommended)</li>
|
||||
<li>Complete 60 question, proctored examination with a passing score of 70%</li>
|
||||
</ul>
|
||||
<div
|
||||
class="expandable-info"
|
||||
id="panel3"
|
||||
aria-labelledby="buttonForPanel"
|
||||
aria-hidden="true">
|
||||
<div class="example-collapsible-panel-content">
|
||||
<ul class="certificate-info green">
|
||||
<li>On passing, receive a Gainsight Certified Admin certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
<a href="#level1" class="learn-more-link color-green">Click here to learn more.</a>
|
||||
<a
|
||||
href="https://www.credly.com/organizations/gainsight/directory"
|
||||
target="_blank"
|
||||
class="color-green"
|
||||
style="display: block;margin-top:12px;">Certified Gainsight Admin Directory.</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="show-more-link"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-target-parent="#panel3"
|
||||
data-toggle-escape
|
||||
aria-controls="panel"
|
||||
aria-expanded="false">Show more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="disclaimer">*Exam fees do not include local taxes and fees.</div>
|
||||
</div>
|
||||
|
||||
<div class="custom-page-section">
|
||||
<h2 class="section-title">Other Gainsight Credentials</h2>
|
||||
<div class="row" style="justify-content:center;">
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<h4 class="certificate-title">Gainsight End User Certificate</h4>
|
||||
<ul class="certificate-info yellow">
|
||||
<li>Exam fee: $99 USD*</li>
|
||||
<li>Complete End User self-paced training on Gainsight University</li>
|
||||
<li>Complete a 32 question, multiple choice examination with a passing score of 80%</li>
|
||||
<li>On passing the exam, receive a Gainsight End User certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
<div class="show-more-link" href="#">Show more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
<div class="certificate-card">
|
||||
<div class="certificate-card-container">
|
||||
<h4 class="certificate-title">Gainsight PX Level 1 Certificate</h4>
|
||||
<ul class="certificate-info yellow">
|
||||
<li>Exam fee: $70 USD</li>
|
||||
<li>Complete PX self-paced training on Gainsight University</li>
|
||||
<li>Complete a 32 question, multiple choice examination with a passing score of 80%</li>
|
||||
<li>On passing the exam, receive a Gainsight PX Level 1 certificate and digital badge you can display on LinkedIn and other social media platforms</li>
|
||||
</ul>
|
||||
<div class="show-more-link" href="#">Show more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="custom-page-section credly-section">
|
||||
<div class="np-max-width">
|
||||
<h2 class="np-custom-page-headline gs-light-blue">
|
||||
Digital Credentials from Credly
|
||||
</h2>
|
||||
<div class="custom-page-copy">
|
||||
{{ custom_page_content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,122 @@
|
||||
<div class="np-custom-page-hero">
|
||||
<div class="np-max-width hero-wrapper">
|
||||
<div class="custom-page-hero-content">
|
||||
<h2 class="np-custom-page-headline">
|
||||
{{ custom_page.headline }}
|
||||
</h2>
|
||||
<div class="np-custom-page-subheadline">
|
||||
{{ custom_page.subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-graphic">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/gainsight-university/certifications-hero-image.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-custom-page-hero {
|
||||
color: #153D5E;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.custom-page-hero-content {
|
||||
text-align: center;
|
||||
padding: 50px 16px 24px;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-headline {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 32px;
|
||||
letter-spacing: -0.25px;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-subheadline {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.25px;
|
||||
opacity: 1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
bottom: -4px;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.custom-page-hero-content {
|
||||
width: 50%;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-headline {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-subheadline {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
right: unset;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.custom-page-hero-content,
|
||||
.hero-graphic {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-headline {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.np-custom-page-hero .np-custom-page-subheadline {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hero-wrapper {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="custom-page-section" id="cs-credentials">
|
||||
<div class="np-max-width">
|
||||
<h2 class="section-title">Administrator Credentials Path</h2>
|
||||
<div class="row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.cs_administrator_certificate_for_purchase == true %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
{% include "cards_credential" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
{% include "cards_external_credential"
|
||||
, name: "Topic-Specific Certificates"
|
||||
, image: "https://s3.amazonaws.com/static.northpass.com/gainsight-university/gs-admin-certificate-level2-badge.svg"
|
||||
, price: "125"
|
||||
, link: "https://gainsight-university.northpass.com/app/topic-specific-certificates"
|
||||
%}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
{% include "cards_external_credential"
|
||||
, name: "Gainsight NXT Admin Certificate"
|
||||
, image: "https://s3.amazonaws.com/static.northpass.com/gainsight-university/gs-admin-certificate-level3-badge.svg"
|
||||
, price: "300"
|
||||
, link: "https://gainsight-university.northpass.com/app/gainsight-nxt-admin-certificate"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="section-title">Other Available Gainsight Credentials</h2>
|
||||
<div class="row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.other_certificate_for_purchase == true %}
|
||||
<div class="col-xs-12 col-sm-6 col-md-4 card-column">
|
||||
{% include "cards_credential" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,47 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ image }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ image }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ name }}"
|
||||
/>
|
||||
<h3 class="np-card-heading">
|
||||
About the Course
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ full_description }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
href="{{ link }}"
|
||||
>
|
||||
REGISTER
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,36 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ image }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
href="{{ link }}"
|
||||
>
|
||||
REGISTER
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
<h3 class="np-card-heading">
|
||||
About the Course
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ full_description }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<details class="col-xs-12 faq-item">
|
||||
<summary class="question">
|
||||
<div class="question-text">
|
||||
<span>{{ question }}</span>
|
||||
<i class="fal fa-plus"></i>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="answer">
|
||||
<div class="answer-text">
|
||||
{{ answer }}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
@ -0,0 +1,10 @@
|
||||
<input
|
||||
id={{value}}
|
||||
name={{ name }}
|
||||
value={{ value }}
|
||||
type="checkbox"
|
||||
{% if selected %} checked="checked" {% endif %}
|
||||
/>
|
||||
<label for={{value}}>
|
||||
{{label}}
|
||||
</label>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,136 @@
|
||||
<footer class="np-footer">
|
||||
<div class="footer-container np-max-width">
|
||||
<div class="footer-left">
|
||||
<img src="https://www.gainsight.com/wp-content/themes/unicon-child/framework/images/G_Logo_ReversedWhite.png" />
|
||||
<h2>Win in business while being human-first.</h2>
|
||||
<a
|
||||
class="demo-btn np-button"
|
||||
href="https://info.gainsight.com/demo"
|
||||
target="_blank">
|
||||
Schedule a Demo
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<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"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank"
|
||||
title="{{ social_media_link.name }}">
|
||||
{% if social_media_link.name == "twitter" %}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="14"
|
||||
width="14"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" /></svg>
|
||||
{% elsif social_media_link.name == "linkedin" %}
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
{% else %}
|
||||
<i class="np-footer-social-links-icon fab fa-{{ social_media_link.name }}"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<p>© 2024 Gainsight, The Customer Success Company. All rights reserved. <br>
|
||||
350 Bay Street, Suite 100, San Francisco, CA 94133 <br>
|
||||
+1 (888) 623-8562</p>
|
||||
<p>
|
||||
<a
|
||||
class="terms-link"
|
||||
href="https://www.gainsight.com/policy"
|
||||
target="_blank">Terms and Privacy</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
background-color: #2E3338;
|
||||
padding: 50px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-footer .footer-container {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.footer-left img {
|
||||
max-width: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.footer-left h2 {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
font-weight: 400;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.footer-left .np-footer-social-links-list {
|
||||
padding: 30px 0 0;
|
||||
}
|
||||
|
||||
.np-footer-social-links-link {
|
||||
width: 32px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.np-footer-social-links-link svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.np-footer-social-links-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
margin-top: 64px;
|
||||
max-width: 600px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-right .terms-link {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-footer .footer-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.np-footer-social-links-list {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.np-footer-social-links-item {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,26 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/easy-toggle-state/1.16.0/easy-toggle-state.min.js"
|
||||
integrity="sha512-hG7MyW8uOh26+C0KutsTVCJm8waH4iA9vSa8gOsosTHdIh6JjOE/MRn8vmcFg2rLGTnpVWmSKcDJF48cB89/3w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
|
||||
<!-- Gainsight PX Tag-->
|
||||
<script type="text/javascript">
|
||||
(function(n,t,a,e,co){var i="aptrinsic";n[i]=n[i]||function(){
|
||||
(n[i].q=n[i].q||[]).push(arguments)},n[i].p=e;n[i].c=co;
|
||||
var r=t.createElement("script");r.async=!0,r.src=a+"?a="+e;
|
||||
var c=t.getElementsByTagName("script")[0];c.parentNode.insertBefore(r,c)
|
||||
})(window,document,"https://web-sdk.aptrinsic.com/api/aptrinsic.js","AP-EAAJ4I85MQVG-2");
|
||||
</script>
|
||||
<!-- Gainsight PX Tag-->
|
||||
@ -0,0 +1,759 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-top np-hidden-mobile">
|
||||
<ul class="np-header-top-nav">
|
||||
<li class="np-header-top-nav-item">
|
||||
<a href="/app/faq" class="np-header-top-nav-link np-header-font-color">
|
||||
FAQs
|
||||
</a>
|
||||
</li>
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class="np-header-top-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-top-nav-link np-header-font-color"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="np-header-content">
|
||||
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
</button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer">
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}" />
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<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">
|
||||
<li class="np-header-desktop-nav-item dropdown-desktop-link">
|
||||
<a
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-test="open-dropdown-menu"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
data-toggle-target=".desktop-link-dropdown"
|
||||
data-toggle-outside>
|
||||
Training Directory
|
||||
<i class="far fa-chevron-down"></i>
|
||||
</a>
|
||||
<div class="desktop-link-dropdown np-hidden">
|
||||
<div class="desktop-link-dropdown-content">
|
||||
<div class="dropdown-content-column cs-dropdown-content-column">
|
||||
<div class="dropdown-content-column-header gs-light-blue">
|
||||
<a href="/app/customer-success">Customer Success</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section">Admin</summary>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/553ba982f97a639f5f620828ec7cf0b6ea7e36dd">Getting Started: Admin Level 1 Certification Prep</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/982b1ea4462144e5ece92868448ccc42076eb630">Core Components</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/edbc2fd62f5b7c85ec2dcf56da88913b1b5bd70a">Analytics & Insights</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/03da72a1577b130f8ceb55eecb0f81dcc227d176">Customer Outreach</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/682b382102e86babdc47898ef67778a2acbc1aaf">Configuring CSM Tools</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section">End User</summary>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/adf314f18680d01ea0951ff7019ec422bdf0078a">Getting Started with Gainsight</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/44820815993c74e243ff104b2d7928c25a1801e8">Advanced Customer Success Management</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section">Japanese Training</summary>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/84e44487f3e52f24b748c1e9f55f879db9f5abb1">管理者トレーニング (Japanese Admin Training)</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/c3ed0f337b423320f05634ab744064de0b89d71a">エンドユーザートレーニング (Japanese End User Training)</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<div class="cs-nav-section">
|
||||
<a href="/app/quick-tips-videos">
|
||||
Quick Tip Videos
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="cs-nav-section">
|
||||
<a href="/app/catalog">Instructor-Led Training</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-content-column px-dropdown-content-column">
|
||||
<div class="dropdown-content-column-header gs-yellow">
|
||||
<a href="/app/product-experience">Product Experience</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/9524bbec2b5d8470fa473b169b6193d0c4a3b7e0">Getting Started: PX Certification Prep</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/710103a510448a2f8f210e09473a054e60a59e1d">CS & PX Better Together</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-content-column cc-dropdown-content-column">
|
||||
<div class="dropdown-content-column-header gs-pink">
|
||||
<a href="/app/customer-communities">Customer Communities</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/490a664e8fe0b235b3b5fcc6b72915fc523df8a2">Community Setup and Administration</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/60c1d7dfe33746e628a51f259a640acebc0d179d">Community Management and Moderation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-content-column cx-dropdown-content-column">
|
||||
<div class="dropdown-content-column-header gs-green">
|
||||
<a href="/app/customer-education">Customer Education</a>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/cf4c8fbed48f70451e1b1b45b75b73cc94a6d53c">Academy Setup and Customization</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/64819bbf07e761fc46029d1ad1f10ad996b46302">Course Building</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/952cb1244e37f41d2913a8b363cb2387b86f347c">Learner Management and Engagement</a></li>
|
||||
<li><a href="https://gainsight-university.northpass.com/p/20de5e0b52f9255cafa4b1f112847d3ba0e65c4e">Certification and Analytics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Learning Paths" or link.label == "Catalog" or link.label == "Home" %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="{{ link.url }}" class="np-header-desktop-nav-link np-header-font-color">
|
||||
{% if link.label == "Dashboard" %}
|
||||
My Learning
|
||||
{% elsif link.label == "Events" %}
|
||||
Live Training
|
||||
{% else %}
|
||||
{{ link.label }}
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<li class="np-header-desktop-nav-item">
|
||||
<a href="/app/certification-programs" class="np-header-desktop-nav-link np-header-font-color">Certifications</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-hidden-mobile np-header-button shopping-cart" href="{% route cart %}">
|
||||
<i class="np-header-button-icon far fa-shopping-cart"></i>
|
||||
{% t .cart %}
|
||||
</a>
|
||||
<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 gs-bg-gray"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search by keyword..." />
|
||||
<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>
|
||||
<i class="fas fa-user-circle gs-navy" style="font-size:40px;"></i>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="{% route transcript %}">
|
||||
{% t.transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route order_history %}"
|
||||
>
|
||||
{% t .order_history %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="np-header-avatar-tooltip-navigation-link gs-light-blue" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link gs-light-blue"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}">
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop np-mobile-menu">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<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>
|
||||
{% endif %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% unless website_navigation.name == "Learning Paths" or website_navigation.name == "Catalog" %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %}
|
||||
target="_blank"
|
||||
{% endif %}>
|
||||
{% if website_navigation.name == "Dashboard" %}
|
||||
My Learning
|
||||
{% elsif website_navigation.name == "Events" %}
|
||||
Live Training
|
||||
{% else %}
|
||||
{{ website_navigation.name }}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a href="/app/certification-programs" class="np-header-mobile-menu-content-button">
|
||||
Certifications
|
||||
</a>
|
||||
<a href="/app/faq" class="np-header-mobile-menu-content-button">
|
||||
FAQs
|
||||
</a>
|
||||
<details class="cs-nav-mobile">
|
||||
<summary class="np-header-mobile-menu-content-button">
|
||||
Training Directory
|
||||
</summary>
|
||||
<details>
|
||||
<summary class="np-header-mobile-menu-content-button">
|
||||
Customer Success
|
||||
</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section np-header-mobile-menu-content-button">Admin</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/553ba982f97a639f5f620828ec7cf0b6ea7e36dd">Getting Started: Admin Level 1 Certification Prep</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/982b1ea4462144e5ece92868448ccc42076eb630">Core Components</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/edbc2fd62f5b7c85ec2dcf56da88913b1b5bd70a">Analytics & Insights</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/03da72a1577b130f8ceb55eecb0f81dcc227d176">Customer Outreach</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/682b382102e86babdc47898ef67778a2acbc1aaf">Configuring CSM Tools</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section np-header-mobile-menu-content-button">End User</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/adf314f18680d01ea0951ff7019ec422bdf0078a">Getting Started with Gainsight</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/44820815993c74e243ff104b2d7928c25a1801e8">Advanced Customer Success Management</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="cs-nav-section np-header-mobile-menu-content-button">Japanese Training</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/84e44487f3e52f24b748c1e9f55f879db9f5abb1">管理者トレーニング (Japanese Admin Training)</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/c3ed0f337b423320f05634ab744064de0b89d71a">エンドユーザートレーニング (Japanese End User Training)</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<div class="cs-nav-section np-header-mobile-menu-content-button">
|
||||
<a href="/app/quick-tips-videos">
|
||||
Quick Tip Videos
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="cs-nav-section np-header-mobile-menu-content-button">
|
||||
<a href="/app/catalog">Instructor-Led Training</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="np-header-mobile-menu-content-button">Product Experience</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/9524bbec2b5d8470fa473b169b6193d0c4a3b7e0">Getting Started: PX Certification Prep</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/710103a510448a2f8f210e09473a054e60a59e1d">CS & PX Better Together</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="np-header-mobile-menu-content-button">Customer Communities</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/490a664e8fe0b235b3b5fcc6b72915fc523df8a2">Community Setup and Administration</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/60c1d7dfe33746e628a51f259a640acebc0d179d">Community Management and Moderation</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary class="np-header-mobile-menu-content-button">Customer Education</summary>
|
||||
<ul>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/cf4c8fbed48f70451e1b1b45b75b73cc94a6d53c">Academy Setup and Customization</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/64819bbf07e761fc46029d1ad1f10ad996b46302">Course Building</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/952cb1244e37f41d2913a8b363cb2387b86f347c">Learner Management and Engagement</a></li>
|
||||
<li class="np-header-mobile-menu-content-button"><a href="https://gainsight-university.northpass.com/p/20de5e0b52f9255cafa4b1f112847d3ba0e65c4e">Certification and Analytics</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
</details>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route account %}">
|
||||
{% t.profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a class="np-header-mobile-menu-content-button" href="{% route transcript %}">
|
||||
{% t.transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route order_history %}"
|
||||
>
|
||||
{% t .order_history %}
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route cart %}"
|
||||
>
|
||||
<i class="np-header-mobile-menu-content-button-icon far fa-shopping-cart"></i>
|
||||
{% t .cart %}
|
||||
</a>
|
||||
<a class="np-header-mobile-menu-content-button np-danger" href="{% route logout %}">
|
||||
{% t.sign_out %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/app" class="np-header-mobile-menu-content-button">Home</a>
|
||||
<a href="/app/certification-programs" class="np-header-mobile-menu-content-button">Certifications</a>
|
||||
<a href="/app/faq" class="np-header-mobile-menu-content-button">FAQs</a>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
target="_blank">
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.shopping-cart {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.np-homepage > *:first-child,
|
||||
.custom-page,
|
||||
.np-certificate-top-bar-spacing,
|
||||
.np-dashboard,
|
||||
.np-catalog,
|
||||
.np-learning-paths,
|
||||
.np-training-events,
|
||||
.np-commerce-order-history-page,
|
||||
.faq {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav-button {
|
||||
color: #48b2eb;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.gs-light-blue {
|
||||
border: none;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button.np-danger {
|
||||
border: 2px solid #48b2eb;
|
||||
color: #48b2eb;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button {
|
||||
box-shadow: none;
|
||||
color: #153d5e;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
border: 1px solid #dce2e7;
|
||||
color: #153d5e;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color: #153d5e;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-line {
|
||||
border: 1px solid #153d5e;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-list {
|
||||
padding-right: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link:not(.gs-light-blue) {
|
||||
color: #153d5e;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link:hover {
|
||||
background: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-learner {
|
||||
border-bottom: 2px solid #E1E1E1;
|
||||
}
|
||||
|
||||
.dropdown-desktop-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.desktop-link-dropdown {
|
||||
position: absolute;
|
||||
padding: 14px 20px;
|
||||
background-color: #fff;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.desktop-link-dropdown-content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dropdown-content-column {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.dropdown-content-column-header {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-content-column ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-content-column ul a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.cs-nav-section {
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cs-dropdown-content-column a:hover {
|
||||
color: #48B2EB;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.px-dropdown-content-column a:hover {
|
||||
color: #F9A825;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cc-dropdown-content-column a:hover {
|
||||
color: #F06292;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cx-dropdown-content-column a:hover {
|
||||
color: #4CAF50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cs-nav-section:hover {
|
||||
color: #48B2EB;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cs-nav-mobile ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cs-nav-mobile summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.cs-nav-mobile li {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-content-column-header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.np-header-sign-in {
|
||||
right: 64px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: auto;
|
||||
max-width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-header {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.np-homepage > *:first-child,
|
||||
.custom-page,
|
||||
.np-certificate-top-bar-spacing,
|
||||
.np-dashboard,
|
||||
.np-commerce-order-history-page,
|
||||
.np-catalog,
|
||||
.np-learning-paths,
|
||||
.np-training-events,
|
||||
.faq {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.np-header-top {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.np-header-top-nav {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.np-header-top-nav-link {
|
||||
padding: 12px 14px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: #5b5b5b;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.np-header-logo,
|
||||
.np-header-desktop-nav-list {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main.np-main.np-max-width.np-page-container:not(.np-certificate) {
|
||||
margin-top: 124px;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
border: 1px solid #5B6D86;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
right: 13px;
|
||||
top: 11px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1024px) {
|
||||
.np-header .np-hidden-desktop,
|
||||
.np-mobile-menu {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.np-header .np-hidden-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.np-header .np-header-content {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.np-header {
|
||||
height: 90px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.np-homepage > *:first-child,
|
||||
.custom-page,
|
||||
.np-certificate-top-bar-spacing,
|
||||
.np-dashboard,
|
||||
.np-commerce-order-history-page,
|
||||
.np-catalog,
|
||||
.np-learning-paths,
|
||||
.np-training-events,
|
||||
.faq {
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
flex-grow: unset;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
border: 1px solid #bac4ca;
|
||||
font-size: 14px;
|
||||
padding: 0 44px 0 16px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1366px) {
|
||||
.np-header {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-list {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 6px 14px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.desktop-link-dropdown {
|
||||
top: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header np-header-color">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,26 @@
|
||||
<div class="np-homepage-featured-courses row" style="margin-top:32px;">
|
||||
<div class="col-xs-12 col-md-10" style="margin:auto">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
|
||||
{% if courses.featured.any? %}
|
||||
<div class="row" style="margin-top:16px;">
|
||||
{% for course in courses.featured %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
There are currently no featured courses available.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,154 @@
|
||||
<div class="np-homepage-hero gs-bg-navy">
|
||||
<div class="np-max-width hero-wrapper">
|
||||
<div class="homepage-hero-content">
|
||||
<div class="hero-logo">
|
||||
<img alt="{{ current_school.name }}" src="https://s3.amazonaws.com/static.northpass.com/gainsight-university/gs-logo-light.svg" />
|
||||
</div>
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
{% comment %} <div class="hero-video-wrapper">
|
||||
<div class="hero-video-text">Don't know where to start? Watch the overview</div>
|
||||
<div class="hero-video-button" onclick="showVideoPopup()">Watch the Video</div>
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="hero-graphic">
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/gainsight-university/gs-university-hero-img.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showVideoPopup() {
|
||||
console.log("show popup")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-homepage-hero {
|
||||
color: #fff;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.homepage-hero-content {
|
||||
text-align: center;
|
||||
padding: 50px 16px 24px;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
max-width: 350px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
.hero-logo img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.np-homepage-hero .np-homepage-subheadline {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.25px;
|
||||
opacity: 1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-video-wrapper {
|
||||
background: #184B72;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hero-video-text {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.hero-video-button {
|
||||
padding: 12px;
|
||||
background: #28628E;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
bottom: -4px;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hero-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.homepage-hero-content {
|
||||
width: 60%;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
margin: 0 0 32px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.hero-video-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-video-text,
|
||||
.hero-video-button {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
max-width: unset;
|
||||
right: unset;
|
||||
left: 0;
|
||||
bottom: unset;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.homepage-hero-content,
|
||||
.hero-graphic {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hero-wrapper {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.homepage-hero-content {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.hero-graphic {
|
||||
width: 60%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.hero-graphic img {
|
||||
right: 0;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<div class="np-homepage-featured-courses row">
|
||||
<div class="col-xs-12 col-md-10" style="margin:auto">
|
||||
<div class="quick-links-wrapper">
|
||||
{% if current_person.signed_in? %}
|
||||
<a href="/app/catalog" class="quick-link-box gs-bg-light-blue">
|
||||
<div class="quick-link-content">
|
||||
<h3 class="quick-link-title">
|
||||
Instructor-Led Training
|
||||
</h3>
|
||||
<div class="quick-link-desc">
|
||||
Customers can register for live interactive training and go deeper into technical topics.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="quick-link-box gs-bg-light-blue">
|
||||
<div class="quick-link-content">
|
||||
<h3 class="quick-link-title">
|
||||
Instructor-Led Training
|
||||
</h3>
|
||||
<div class="quick-link-desc">
|
||||
Sign in to register for live interactive training and go deeper into technical topics.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<a href="/app/certification-programs" class="quick-link-box gs-bg-green">
|
||||
<div class="quick-link-content">
|
||||
<h3 class="quick-link-title">
|
||||
Certifications
|
||||
</h3>
|
||||
<div class="quick-link-desc">
|
||||
Explore certifications for different roles and Gainsight products to enhance your career.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.quick-links-wrapper {
|
||||
display: flex;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.quick-link-box {
|
||||
color: #fff;
|
||||
padding: 24px 32px;
|
||||
flex: 1;
|
||||
margin: 12px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.quick-link-title {
|
||||
margin-top: 0;
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.quick-link-desc {
|
||||
line-height: 1.3;
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
<div class="np-homepage-featured-courses row" style="margin-top:32px;">
|
||||
<div class="col-xs-12 col-md-10" style="margin:auto">
|
||||
<div class="np-homepage-headline">
|
||||
Explore eLearning courses by product
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-10" style="margin:auto">
|
||||
<div class="products-quick-links-wrapper">
|
||||
<a href="/app/customer-success" class="products-quick-link-box cs-box">
|
||||
<div class="products-quick-link-content">
|
||||
<div class="products-quick-link-icon">
|
||||
<i class="fal fa-rocket-launch"></i>
|
||||
</div>
|
||||
|
||||
<h3 class="products-quick-link-title gs-light-blue">
|
||||
Customer Success
|
||||
</h3>
|
||||
<div class="products-quick-link-desc">
|
||||
eLearning for all of the modules and features in Gainsight Customer Success solution.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/app/product-experience" class="products-quick-link-box px-box">
|
||||
<div class="products-quick-link-content">
|
||||
<div class="products-quick-link-icon">
|
||||
<i class="far fa-chart-pie-alt"></i>
|
||||
</div>
|
||||
<h3 class="products-quick-link-title gs-yellow">
|
||||
Product Experience
|
||||
</h3>
|
||||
<div class="products-quick-link-desc">
|
||||
eLearning path supports users in Product Experience installation, configuration, analytics and more
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/app/customer-communities" class="products-quick-link-box cc-box">
|
||||
<div class="products-quick-link-content">
|
||||
<div class="products-quick-link-icon">
|
||||
<i class="fal fa-thumbs-up"></i>
|
||||
</div>
|
||||
<h3 class="products-quick-link-title gs-pink">
|
||||
Customer Communities
|
||||
</h3>
|
||||
<div class="products-quick-link-desc">
|
||||
eLearning for the Community application
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/app/customer-education" class="products-quick-link-box ce-box">
|
||||
<div class="products-quick-link-content">
|
||||
<div class="products-quick-link-icon">
|
||||
<i class="far fa-user-graduate"></i>
|
||||
</div>
|
||||
<h3 class="products-quick-link-title gs-green">
|
||||
Customer Education
|
||||
</h3>
|
||||
<div class="products-quick-link-desc">
|
||||
eLearning for the Customer Education platform
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.products-quick-links-wrapper {
|
||||
display: flex;
|
||||
margin-right: -12px;
|
||||
margin-left: -12px;
|
||||
flex-wrap: wrap;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.products-quick-link-box {
|
||||
background-color: #fff;
|
||||
color: #5B6670;
|
||||
padding: 24px 32px;
|
||||
margin: 12px 16px;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.products-quick-link-box.cs-box:hover {
|
||||
background-color: #48B2EB;
|
||||
}
|
||||
|
||||
.products-quick-link-box.px-box:hover {
|
||||
background-color: #FCC642;
|
||||
}
|
||||
|
||||
.products-quick-link-box.cc-box:hover {
|
||||
background-color: #E1266D;
|
||||
}
|
||||
|
||||
.products-quick-link-box.ce-box:hover {
|
||||
background-color: #8ac147;
|
||||
}
|
||||
|
||||
.products-quick-link-box:hover .products-quick-link-title,
|
||||
.products-quick-link-box:hover .products-quick-link-icon,
|
||||
.products-quick-link-box:hover .products-quick-link-desc {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.products-quick-link-icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.products-quick-link-title {
|
||||
font-size: 20px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.products-quick-link-desc {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.products-quick-link-box {
|
||||
flex: unset;
|
||||
width: calc(50% - 32px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
{% if learning_path.new_content_available? %}
|
||||
{% include "learning_path_new_content_banner" %}
|
||||
{% else %}
|
||||
{% include "learning_path_completed_banner" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
{% if learning_path.has_certificate? %}
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-certificate-link"
|
||||
href="{{ learning_path.certificate_link }}"
|
||||
>
|
||||
<div class="np-learning-path-certificate">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-learning-path-certificate-content">
|
||||
<div class="np-learning-path-certificate-avatar" role="img">
|
||||
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
|
||||
<h5 class="np-learning-path-certificate-avatar-title">
|
||||
{% t .avatar_title %}
|
||||
</h5>
|
||||
</div>
|
||||
<h4 class="np-learning-path-certificate-name">
|
||||
{{ learning_path.certificate_name }}
|
||||
</h4>
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<time
|
||||
class="np-learning-path-certificate-issue-date"
|
||||
datetime="{{ learning_path.certificate_issue_date }}"
|
||||
>
|
||||
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-learning-path-completed-banner np-learning-path-banner">
|
||||
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
|
||||
{% endif %}
|
||||
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,56 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,26 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="np-resource-header np-card-padding-vertical">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-new-content-banner np-learning-path-banner">
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "learning_path_certificate" %}
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% include "learning_path_desktop_header", learning_path: product %}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description", learning_path: product %}
|
||||
{% include "learning_path_instructors", learning_path: product %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta"%}
|
||||
</div>
|
||||
{% include "learning_path_product_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon np-hidden-mobile"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ product.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ product.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ product.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "product_price_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description", learning_path: product %}
|
||||
</div>
|
||||
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_product_outline" %}
|
||||
</div>
|
||||
|
||||
{% if product.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors", learning_path: product %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
<h3 class="np-product-outline-title">{% t .title %}</h3>
|
||||
{% for item in product.learning_path_items %}
|
||||
{% if item.course? %}
|
||||
{% include "product_outline_course", id: forloop.index %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "product_outline_event", id: forloop.index %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for learning_path in items %}
|
||||
<div class="col-xs-12 col-sm-6 np-stretch-content">
|
||||
{% include "cards_learning_path_vertical" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t.empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,25 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header.course %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% include "course_activity_locked" %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,82 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-base-container">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ item.name }}"
|
||||
class="np-product-outline-course-image"
|
||||
>
|
||||
<div class="np-product-outline-content">
|
||||
<div class="np-product-outline-name np-top-title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<p class="np-product-outline-caption">
|
||||
{% if item.instructors.any? %}
|
||||
{{ item.instructor_names }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="np-product-outline-base-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far fa-graduation-cap np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.course %}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
<p class="np-product-outline-section-content">{{ item.full_description }}</p>
|
||||
</div>
|
||||
{% if item.categories.any? %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t .categories %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in item.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if item.instructors.any? %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in item.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,49 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-content">
|
||||
{% if item.available? %}
|
||||
{% if item.location %}
|
||||
<span class="np-product-location">{{ item.location }} |</span>
|
||||
{% endif %}
|
||||
<span class="np-product-date">{{ item.time }} {{ item.time_zone }}, {{ item.date }}</span>
|
||||
<a class="np-product-outline-name np-top-title" href="{{ item.preview_path }}">{{ item.name }}</a>
|
||||
{% else %}
|
||||
<span class="np-product-outline-name np-top-title">{{ item.name }}</span>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-caption">{{ item.caption }}</div>
|
||||
<div class="np-product-outline-base-bottom np-product-ilt-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far {{ item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ item.formatted_type }}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
<p class="np-product-outline-section-content">{{ item.description }}</p>
|
||||
</div>
|
||||
{% if item.instructors %}
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ item.instructors }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,65 @@
|
||||
<div class="np-card-container np-card-padding np-product-outline-container">
|
||||
<div class="np-product-outline-base-container">
|
||||
<img
|
||||
src="{{ item.image_url }}"
|
||||
alt="{{ item.name }}"
|
||||
class="np-product-outline-course-image"
|
||||
>
|
||||
<div class="np-product-outline-content">
|
||||
<div class="np-product-outline-name np-top-title">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
||||
<p class="np-product-outline-caption">
|
||||
{% if item.instructor_names %}
|
||||
{{ item.instructor_names }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="np-product-outline-base-bottom">
|
||||
<div class="np-product-badge np-product-badge-catalog np-product-badge-outline">
|
||||
<i class="far fa-road np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{% t shared.product_types.learning_path %}</h3>
|
||||
</div>
|
||||
<button
|
||||
class="np-button np-product-outline-details-button"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-expand-{{ id }}"
|
||||
data-toggle-outside
|
||||
>
|
||||
<span class="np-expand-{{ id }}">{% t shared.buttons.expand %}<i class="far fa-chevron-down np-expand-{{ id }}"></i></span>
|
||||
<span class="np-expand-{{ id }} np-hidden">{% t shared.buttons.collapse %} <i class="far fa-chevron-up np-hidden np-expand-{{ id }}"></i></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-expand-{{ id }} np-hidden">
|
||||
<div class="np-card-content-divider np-product-outline-spacer">
|
||||
<h3 class="np-product-outline-section-headline">{% t .about %}</h3>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<h3 class="np-product-outline-section-headline">{% t .content %}</h3>
|
||||
{% for learning_path_item in item.learning_path_items %}
|
||||
<div class="np-product-outline-lp-product-container">
|
||||
<div class="np-product-outline-lp-product-info">
|
||||
{% if learning_path_item.course? %}
|
||||
<h3 class="np-product-outline-name np-top-title">{{learning_path_item.name}}</h3>
|
||||
<p class="np-product-outline-caption">{{learning_path_item.instructor_names}}</p>
|
||||
{% elsif learning_path_item.training_event? %}
|
||||
{% if learning_path_item.available? %}
|
||||
<a class="np-product-outline-name np-top-title" href="{{ learning_path_item.preview_path }}">{{learning_path_item.name}}</a>
|
||||
<span class="np-product-date">{{ learning_path_item.time }} {{ learning_path_item.time_zone }}, {{ learning_path_item.date }}</span>
|
||||
{% else %}
|
||||
<span class="np-product-outline-name np-top-title">{{learning_path_item.name}}</span>
|
||||
<span class="np-product-date">{{ learning_path_item.caption }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-product-badge np-product-badge-catalog">
|
||||
<i class="far {{ learning_path_item.icon }} np-product-badge-icon np-product-badge-catalog-icon"></i>
|
||||
<h3 class="np-product-badge-name np-product-badge-catalog-name">{{ learning_path_item.formatted_type }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-top-cta-price-content">
|
||||
<div>
|
||||
<span class="np-catalog-card-price np-commerce-outline-description-price">{{ product.formatted_price }}</span>
|
||||
<span class="np-commerce-outline-description-access">
|
||||
{{ product.formatted_access_period}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{% commerce_add_to_cart product %}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
{% comment %} <nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav> {% endcomment %}
|
||||
@ -0,0 +1,42 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row np-training-session-row">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-padding-large">
|
||||
<div>
|
||||
{% include "training_session_status" %}
|
||||
{% include "training_session_date" %}
|
||||
</div>
|
||||
<div class="np-training-session-details">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-divider"></div>
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4 np-grid-spacing">
|
||||
<div class="np-training-session-container">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,42 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row np-training-session-row">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-padding-large">
|
||||
<div>
|
||||
{% include "training_session_status" %}
|
||||
{% include "training_session_date" %}
|
||||
</div>
|
||||
<div class="np-training-session-details">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-divider"></div>
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4 np-grid-spacing">
|
||||
<div class="np-training-session-container">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 0 %}
|
||||
{% include "training_event_preview_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t themes.default._training_event_desktop_view.empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t themes.default._training_event_desktop_view.empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user