New script for getting everyone who is in each group and export to CSV. Skan templates. A few other small things
This commit is contained in:
Norm Rasmussen
@ -58,7 +58,7 @@
|
|||||||
<li><a onclick="setLang('Spanish')">Spanish (Español)</a></li>
|
<li><a onclick="setLang('Spanish')">Spanish (Español)</a></li>
|
||||||
<li class="uk-nav-divider"></li>
|
<li class="uk-nav-divider"></li>
|
||||||
<li><a onclick="setLang('German')">German (Deutsch)</a></li>
|
<li><a onclick="setLang('German')">German (Deutsch)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|||||||
@ -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,140 @@
|
|||||||
|
<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>
|
||||||
|
<label class="np-input-label" for="desktop_learner_password">Password must be a minimum of 8 characters, with at least 1 capital letter, 1 number, and 1 special character.</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,34 @@
|
|||||||
|
<div class="np-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-footer">
|
||||||
|
<div class="np-card-content-progress">
|
||||||
|
{% t shared.progress, count: course.progress %}
|
||||||
|
</div>
|
||||||
|
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||||
|
{% if course.has_to_restart? %}
|
||||||
|
{% include "course_version_outdated_popup", path: course_path %}
|
||||||
|
{% endif %}
|
||||||
|
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||||
|
{% t shared.view %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,190 @@
|
|||||||
|
{% comment %}<div class="np-card col-xs-10" style="margin-bottom: 7.5rem;">
|
||||||
|
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||||
|
<a class="np-card-container col-xs-12 row" href="{{course_path}}">
|
||||||
|
<div class="col-xs-3 np-featured-card-info">
|
||||||
|
{% if course.ribbon %}
|
||||||
|
<div class="np-card-ribbon">
|
||||||
|
{{ course.ribbon }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<img
|
||||||
|
class="np-featured-card-image np-card-image"
|
||||||
|
alt="{{ course.name }}"
|
||||||
|
src="{{ course.image_url }}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-9 np-featured-card-content">
|
||||||
|
<h3 class="np-card-content-title">
|
||||||
|
{{ course.name }}
|
||||||
|
</h3>
|
||||||
|
<div class="np-card-content-subtitle">
|
||||||
|
{{ course.short_description }}
|
||||||
|
</div>
|
||||||
|
<div class="np-card-progress np-button-color">
|
||||||
|
{% t shared.progress, count: course.progress %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>{% endcomment %}
|
||||||
|
|
||||||
|
<div class="np-card np-no-horizontal-padding">
|
||||||
|
<div class="np-card-container">
|
||||||
|
<div class="np-learning-path np-featured-course">
|
||||||
|
<div class="col-xs-4 np-featured-course-img-container">
|
||||||
|
<div class="np-card-image-content-top">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="np-card-image"
|
||||||
|
alt="{{ course.name }}"
|
||||||
|
src="{{ course.image_url }}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-8 np-card-text-wrapper">
|
||||||
|
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||||
|
<h3 class="np-card-content-title">
|
||||||
|
{{ course.name }}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="np-card-content-description" style='color: #ffffff !important; display: contents;'>
|
||||||
|
{{ course.short_description }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
|
||||||
|
<div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
|
||||||
|
<a
|
||||||
|
class="np-top-button np-button-font-color np-button np-featured-course-button" href="{% route course_enrollment, code: course.enrollment_code %}">
|
||||||
|
{% if course.enrolled? == false %}
|
||||||
|
{% t shared.enroll %}
|
||||||
|
{% elsif course.started? == false %}
|
||||||
|
{% t shared.start, key: current_school.course_vocabulary %}
|
||||||
|
{% elsif course.completed? %}
|
||||||
|
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||||
|
{% else %}
|
||||||
|
{% t shared.continue %}
|
||||||
|
{% endif %}
|
||||||
|
</a>
|
||||||
|
<div class="np-card-progress">
|
||||||
|
{% t shared.progress, count: course.progress %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.np-card-container {
|
||||||
|
height: auto;
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
background: #01061D;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-xs-10 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.np-featured-course-img-container,
|
||||||
|
.np-card-text-wrapper{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-image {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-image-content-top {
|
||||||
|
position: absolute;
|
||||||
|
left: 1.5rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-image-content-top {
|
||||||
|
top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content {
|
||||||
|
background: #01061D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content-title,
|
||||||
|
.np-card-content-subtitle{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-featured-course-button{
|
||||||
|
width: 80%;
|
||||||
|
height: 90%;
|
||||||
|
background: #307fe2;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-weight: 800;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 24px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-featured-course-button:hover{
|
||||||
|
background: #59D7C9;
|
||||||
|
color: #211579;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
.np-card-content-title {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content-subtitle{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-image-content-top {
|
||||||
|
left: 1.5rem;
|
||||||
|
right: 1.5rem;
|
||||||
|
top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-course-detail {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-padding{
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content-footer {
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content-footer-left {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-progress{
|
||||||
|
color: #59D7C9;;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 1rem 0 0 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-progress:hover {
|
||||||
|
color: #59D7C9;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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">Certification</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">Certification</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,45 @@
|
|||||||
|
<div class="np-card">
|
||||||
|
<div class="np-card-container">
|
||||||
|
<div class="np-card-content-training-event">
|
||||||
|
<h3 class="np-card-content-title">
|
||||||
|
{{ training_event.title }}
|
||||||
|
</h3>
|
||||||
|
<div class="np-card-content-subtitle">
|
||||||
|
{% t shared.event_types, key: training_event.event_type %}
|
||||||
|
</div>
|
||||||
|
<div class="np-card-training-session">
|
||||||
|
<span class="np-card-content-label">
|
||||||
|
{% t .next_session %}
|
||||||
|
</span>
|
||||||
|
<div class="np-card-training-session-date">
|
||||||
|
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||||
|
<div class="np-card-training-session-date-day">
|
||||||
|
{{ training_event.sessions.first.day }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="np-card-training-session-date-month">
|
||||||
|
{{ training_event.sessions.first.month }}
|
||||||
|
</div>
|
||||||
|
<div class="np-card-training-session-date-year">
|
||||||
|
{{ training_event.sessions.first.year }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||||
|
<div class="np-card-training-sessions">
|
||||||
|
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||||
|
<span class="np-card-training-sessions-label">
|
||||||
|
{% t .sessions, count: training_event.sessions.size %}
|
||||||
|
</span>
|
||||||
|
<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,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,31 @@
|
|||||||
|
{% assign activities_count = 0 %}
|
||||||
|
{% for course_section in course.sections %}
|
||||||
|
{% for course_activity in course_section.activities %}
|
||||||
|
{% assign activities_count = activities_count | plus: 1 %}
|
||||||
|
{% endfor %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<div class="np-course-details">
|
||||||
|
<div class="np-course-detail">
|
||||||
|
<strong class="np-act-count">{{ activities_count }}</strong>
|
||||||
|
<span class="np-details-label">
|
||||||
|
{% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.np-act-count,
|
||||||
|
.np-details-label {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: #fff;
|
||||||
|
flex: 0 1 calc(33.33%);
|
||||||
|
text-shadow: 1px 1px black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.np-act-count{
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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,24 @@
|
|||||||
|
<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 dashboard %}" class="np-back-button" id="course-header-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 }}"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
if(window.location.href.indexOf('/learning_paths') > -1){
|
||||||
|
let reroute = '/app' + window.location.href.slice(window.location.href.indexOf('/learning_paths/'),window.location.href.indexOf('/learning_paths/')+52);
|
||||||
|
|
||||||
|
document.querySelector('#course-header-back-button').setAttribute('href', reroute);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -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-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-completed" %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||||
|
{% else %}
|
||||||
|
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||||
|
{% if activity.locked? %}
|
||||||
|
{% include "course_activity_locked" %}
|
||||||
|
{% else %}
|
||||||
|
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<div class="np-top-cta-progress-content">
|
||||||
|
<div class="np-top-cta-progress-title np-text-title" style="color: #211579">
|
||||||
|
{% 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-card-content-progress {% 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" style="padding-top: 115px;">
|
||||||
|
<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,16 @@
|
|||||||
|
{% if courses.in_catalog.any? %}
|
||||||
|
<div class="np-catalog-courses row row-with-thumbnails">
|
||||||
|
{% for course in courses.in_catalog %}
|
||||||
|
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||||
|
{% include "cards_course" with course %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
{% capture message %}
|
||||||
|
{% t shared.zero_state.courses.catalog,
|
||||||
|
key: current_school.course_vocabulary
|
||||||
|
%}
|
||||||
|
{% endcapture %}
|
||||||
|
{% include "courses_zero_state", message: message %}
|
||||||
|
{% endif %}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
{% if courses.enrolled.any? %}
|
||||||
|
<div class="row row-with-thumbnails">
|
||||||
|
{% for course in courses.enrolled %}
|
||||||
|
<div class="{{ class }}">
|
||||||
|
{% include "cards_course" with course %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
{% capture message %}
|
||||||
|
{% t shared.zero_state.courses.index,
|
||||||
|
key: current_school.course_vocabulary
|
||||||
|
%}
|
||||||
|
{% endcapture %}
|
||||||
|
{% include "courses_zero_state", message: message %}
|
||||||
|
{% endif %}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<div class="np-dashboard-resources-container">
|
||||||
|
<div class="np-zero-state-text">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||||
|
</div>
|
||||||
@ -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,51 @@
|
|||||||
|
<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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.np-button .dropdown-button{
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #307fe2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: Jost,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-button .dropdown-button:hover {
|
||||||
|
background: #59D7C9;
|
||||||
|
transition: color .5s ease, background .5s ease, border .5s;
|
||||||
|
border: 1px solid #59D7C9;
|
||||||
|
color: #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -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>
|
||||||
69
Custom_Templates/customer_templates/Skan/_footer.html.liquid
Normal file
69
Custom_Templates/customer_templates/Skan/_footer.html.liquid
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<footer class="np-footer">
|
||||||
|
<div class="np-powered-by show" style="visibility: hidden">
|
||||||
|
</div>
|
||||||
|
<div class="np-footer-top">
|
||||||
|
{% if website_footer.show_navigation_links? %}
|
||||||
|
<div class="np-footer-navigation" style="opacity: 0;">
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if current_school.logo_url %}
|
||||||
|
<h2 class="np-footer-logo">
|
||||||
|
<a href="{% route home %}">
|
||||||
|
<img
|
||||||
|
alt="{{ current_school.name }}"
|
||||||
|
class="np-footer-logo-image"
|
||||||
|
src="{{ current_school.logo_url }}"
|
||||||
|
width=60px
|
||||||
|
height=90px
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
{% else %}
|
||||||
|
<div class="np-school-name np-header-font-color">
|
||||||
|
{{ current_school.name }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="np-footer-bottom">
|
||||||
|
<nav class="np-footer-social-links">
|
||||||
|
{% if website_footer.show_social_media_links? %}
|
||||||
|
<ul class="np-footer-social-links-list">
|
||||||
|
{% for social_media_link in website_footer.social_media_links %}
|
||||||
|
<li class="np-footer-social-links-item">
|
||||||
|
<a
|
||||||
|
class="np-footer-social-links-link np-button-color"
|
||||||
|
href="{{ social_media_link.link }}"
|
||||||
|
target="_blank" title="{{ social_media_link.name }}"
|
||||||
|
>
|
||||||
|
<i class="np-footer-social-links-icon
|
||||||
|
np-button-color
|
||||||
|
fab fa-{{ social_media_link.name }}"
|
||||||
|
></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{% if website_footer.show_customer_service_email? and
|
||||||
|
website_footer.school_customer_service_email
|
||||||
|
%}
|
||||||
|
<div class="np-footer-support">
|
||||||
|
<div class="np-footer-support-item np-footer-support-help">
|
||||||
|
{% t .need_help %}
|
||||||
|
</div>
|
||||||
|
<div class="np-footer-support-item np-footer-support-email">
|
||||||
|
{% t .email %}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||||
|
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||||
|
>
|
||||||
|
{{ website_footer.school_customer_service_email }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{% styles default %}
|
||||||
|
{% styles colors %}
|
||||||
|
{% styles custom %}
|
||||||
157
Custom_Templates/customer_templates/Skan/_header.html.liquid
Normal file
157
Custom_Templates/customer_templates/Skan/_header.html.liquid
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
{% comment %}--------------------------------------- MOBILE HEADER ---------------------------------------{% endcomment %}
|
||||||
|
<header class="np-header np-header-color">
|
||||||
|
<div class="np-header-content">
|
||||||
|
{% comment %}--------------------------------------- SCHOOL LOGO AND ROUTE ---------------------------------------{% endcomment %}
|
||||||
|
{% 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 %}
|
||||||
|
{% comment %}--------------------------------------- DESKTOP HEADER ITEMS ---------------------------------------{% endcomment %}
|
||||||
|
{% comment %} NAV LINKS {% endcomment %}
|
||||||
|
{% include "sub_navigation" %}
|
||||||
|
{%- comment -%} <div class="np-hidden-mobile np-header-desktop-nav">
|
||||||
|
<ul class="np-header-desktop-nav-list">
|
||||||
|
{% for website_navigation in navigations.header_navigations_external %}
|
||||||
|
<li class= "np-header-desktop-nav-item">
|
||||||
|
<a
|
||||||
|
href="{{ website_navigation.path }}"
|
||||||
|
class="np-header-desktop-nav-link np-header-font-color"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{{ website_navigation.name }}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if current_person.signed_in? %}
|
||||||
|
<a class="np-button np-hidden-mobile header-catalog-button" href="/catalog">
|
||||||
|
COURSE CATALOG
|
||||||
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<a
|
||||||
|
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||||
|
aria-label="{% t shared.sign_in %}"
|
||||||
|
href="{% route login %}"
|
||||||
|
>
|
||||||
|
{% t shared.sign_in %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div> {%- endcomment -%}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% comment %}--------------------------------------- MOBILE HEADER ---------------------------------------{% endcomment %}
|
||||||
|
<div class="np-hidden-desktop">
|
||||||
|
<div class="np-header-mobile-menu-content np-hidden">
|
||||||
|
{% comment %} AVATAR BUTTON {% endcomment %}
|
||||||
|
{% if current_person.signed_in? %}
|
||||||
|
<img
|
||||||
|
alt="{{ current_person.name }}"
|
||||||
|
class="np-header-mobile-menu-content-avatar"
|
||||||
|
src="{{ current_person.avatar_url }}"
|
||||||
|
/>
|
||||||
|
<div class="np-header-mobile-menu-content-name">
|
||||||
|
{{ current_person.name }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% comment %} SEARCH FORM {% endcomment %}
|
||||||
|
<div class="np-header-mobile-menu-content-nav">
|
||||||
|
<form
|
||||||
|
class="np-header-search"
|
||||||
|
data-test="mobile-search"
|
||||||
|
method="get"
|
||||||
|
action="{% route search %}"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-label="{% 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>
|
||||||
|
{% comment %} MOBILE NAV LINKS IN HIDDEN MENU {% endcomment %}
|
||||||
|
{% for website_navigation in navigations.header_navigations %}
|
||||||
|
<a
|
||||||
|
href="{{ website_navigation.path }}"
|
||||||
|
class="np-header-mobile-menu-content-button"
|
||||||
|
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||||
|
>
|
||||||
|
{{ website_navigation.name }}
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
<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 %}
|
||||||
|
<a
|
||||||
|
class="np-header-mobile-menu-content-button np-danger"
|
||||||
|
href="{% route logout %}"
|
||||||
|
>
|
||||||
|
{% t .sign_out %}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="empty-space"></div>
|
||||||
|
{% include "messages" %}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.np-header{
|
||||||
|
background-size: cover;
|
||||||
|
background-position: bottom;
|
||||||
|
position: fixed;
|
||||||
|
max-height: 75px;
|
||||||
|
{%- comment -%} background: #211579; {%- endcomment -%}
|
||||||
|
background: #FFFFFF;
|
||||||
|
transition: background .5s ease, padding .5s ease;
|
||||||
|
top: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-catalog-button{
|
||||||
|
border: 1px solid #307fe2;
|
||||||
|
Background: transparent;
|
||||||
|
Color: #ffffff;
|
||||||
|
width: 250px;
|
||||||
|
height: 35px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: Jost,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-header-logo-image{
|
||||||
|
height: 75px;
|
||||||
|
filter: invert(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.np-sub-navigation-content {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.np-sub-navigation {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.empty-space {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<header class="np-box-header np-header-color">
|
||||||
|
<span 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 %}
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{% include "messages" %}
|
||||||
@ -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,58 @@
|
|||||||
|
{% 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-card-content-progress {% 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" style="background: #FFF;" >
|
||||||
|
|
||||||
|
<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,10 @@
|
|||||||
|
<h3 class="np-card-heading">
|
||||||
|
{% if learning_path.id == '322533f2-4dbc-48ca-857a-43f869ad9b7b' or learning_path.id == 'ccf0084a-4d3f-4239-a2f8-6c6d52bf2480' %}
|
||||||
|
About this Training Program
|
||||||
|
{% else %}
|
||||||
|
About This Certification
|
||||||
|
{% endif %}
|
||||||
|
</h3>
|
||||||
|
<div class="np-card-text">
|
||||||
|
{{ learning_path.description }}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-6">
|
||||||
|
<div class="np-card-container">
|
||||||
|
<img
|
||||||
|
src="{{ learning_path.image_url }}"
|
||||||
|
class="np-top-image"
|
||||||
|
alt="{{ learning_path.name }}"
|
||||||
|
/>
|
||||||
|
<div class="np-card-padding-dynamic">
|
||||||
|
{% include "learning_path_description" %}
|
||||||
|
{% include "learning_path_instructors" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||||
|
<div class="np-top-cta">
|
||||||
|
{% include "learning_path_progress_and_cta" %}
|
||||||
|
</div>
|
||||||
|
{% include "learning_path_outline" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||||
|
<div class="np-top-vocabulary np-text-title">
|
||||||
|
{% t shared.learning_path.title %}
|
||||||
|
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="np-top-title">
|
||||||
|
<a href="/app/dashboard" 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,40 @@
|
|||||||
|
<div class="np-resource-header np-resource-header-card np-card-padding-large" >
|
||||||
|
<div class="np-top-vocabulary np-text-title">
|
||||||
|
Certification
|
||||||
|
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="np-top-title">
|
||||||
|
<a href="{% route dashboard %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||||
|
<i class="far fa-arrow-left np-icon-back"></i>
|
||||||
|
</a>
|
||||||
|
{{ learning_path.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-6">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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,21 @@
|
|||||||
|
{% if learning_path.enrolled? %}
|
||||||
|
|
||||||
|
<div class="np-top-cta-progress-content">
|
||||||
|
<div class="np-top-cta-progress-title np-text-title" style="color: #211579">
|
||||||
|
Certification 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-card-content-progress {% 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,14 @@
|
|||||||
|
<div class="np-learning-paths-resources">
|
||||||
|
{% if items.any? %}
|
||||||
|
{% for learning_path in items %}
|
||||||
|
{% include "cards_learning_path" with learning_path %}
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<div class="np-learning-paths-resources-container">
|
||||||
|
<div class="np-zero-state-text">
|
||||||
|
{% t .empty %}
|
||||||
|
</div>
|
||||||
|
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
{% if messages.alert.size > 0 %}
|
||||||
|
<div class="np-alert np-alert-error">
|
||||||
|
<div class="np-alert-wrapper">
|
||||||
|
{% for message in messages.alert %}
|
||||||
|
{% if message == "You need to log in or sign up before continuing."%}
|
||||||
|
<div>You need to be invited to login at this time.</div>
|
||||||
|
{% else %}
|
||||||
|
<div>{{ message }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% 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,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,102 @@
|
|||||||
|
<nav class="np-sub-navigation">
|
||||||
|
<div class="np-sub-navigation-content">
|
||||||
|
{% for link in navigations.sub_navigation %}
|
||||||
|
{% if link.label == 'Home' %}
|
||||||
|
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
|
||||||
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||||
|
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||||
|
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
|
||||||
|
Certifications
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% for link in navigations.sub_navigation %}
|
||||||
|
{% if link.label == 'Dashboard' %}
|
||||||
|
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
|
||||||
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||||
|
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||||
|
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
|
||||||
|
{{ link.label }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
{% for link in navigations.sub_navigation %}
|
||||||
|
{% if link.label == 'Events' %}
|
||||||
|
<div class="np-sub-navigation-content-item {{ link.active_class }}" >
|
||||||
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||||
|
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||||
|
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
|
||||||
|
{{ link.label }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<div class="np-sub-navigation-content-item" >
|
||||||
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||||
|
<a class="np-sub-navigation-content-item-link" href="https://www.skan.ai/company" target="_blank">
|
||||||
|
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
|
||||||
|
About Us
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="np-sub-navigation-content-item" >
|
||||||
|
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||||
|
<a class="np-sub-navigation-content-item-link" href="mailto:skan_university@skan.ai" target="_blank">
|
||||||
|
{% comment %}<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>{% endcomment %}
|
||||||
|
Contact
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<style>
|
||||||
|
.np-sub-navigation{
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-bar{
|
||||||
|
margin: -1.5rem auto 1.25rem auto;
|
||||||
|
width: 3.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.np-sub-navigation{
|
||||||
|
height: 75px;
|
||||||
|
padding: 28px;
|
||||||
|
width: 92%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-link{
|
||||||
|
font-size: 27px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-link:hover {
|
||||||
|
Color: #3421BA;;
|
||||||
|
transition: color .5s ease, background .5s ease, border .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-bar{
|
||||||
|
margin: -1.75rem auto 1.25rem auto;
|
||||||
|
background: #3421BA;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-active
|
||||||
|
.np-sub-navigation-content-item-link {
|
||||||
|
Color: #3421BA;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-sub-navigation-content-item-link,
|
||||||
|
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<div class="np-dashboard-resources">
|
||||||
|
{% if training_events.enrolled.any? %}
|
||||||
|
{% for training_event in training_events.enrolled %}
|
||||||
|
{% include "cards_training_event" with training_event %}
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
{% include "training_events_zero_state" %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<div class="np-filter">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button
|
||||||
|
class="np-button dropdown-button"
|
||||||
|
data-toggle-class="is-open"
|
||||||
|
data-toggle-escape
|
||||||
|
data-toggle-outside
|
||||||
|
data-toggle-target-next
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{% t shared.filters.filter %}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="dropdown-menu" data-test="modal">
|
||||||
|
<form method="get">
|
||||||
|
<span class="dropdown-label">
|
||||||
|
{% t shared.filters.by_event_type %}
|
||||||
|
</span>
|
||||||
|
<ul class="dropdown-checkboxes">
|
||||||
|
{% for event_type in training_events.filters.event_types %}
|
||||||
|
{% capture label %}
|
||||||
|
{% t shared.event_types, key: event_type.value %}
|
||||||
|
{% endcapture %}
|
||||||
|
<li>
|
||||||
|
{% include "filter_checkbox",
|
||||||
|
label: label,
|
||||||
|
name: event_type.name,
|
||||||
|
value: event_type.value
|
||||||
|
selected: event_type.selected?
|
||||||
|
%}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
|
||||||
|
{%
|
||||||
|
include "filter_select",
|
||||||
|
filters: training_events.filters.courses,
|
||||||
|
key: "courses_uuid",
|
||||||
|
label: label
|
||||||
|
%}
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="np-button dropdown-button-apply"
|
||||||
|
data-toggle-trigger-off
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
{% t shared.filters.apply %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<div class="np-dashboard-resources">
|
||||||
|
{% if training_events.available.any? %}
|
||||||
|
<div class="row row-with-thumbnails">
|
||||||
|
{% for training_event in training_events.available %}
|
||||||
|
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||||
|
{% include "cards_training_event" with training_event %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
{% include "training_events_zero_state" %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<div class="np-dashboard-resources-container">
|
||||||
|
<div class="np-zero-state-text">
|
||||||
|
{% t .empty %}
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="np-zero-state-training-events"
|
||||||
|
alt="{% t .empty %}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<div class="dropdown dropdown-calendar">
|
||||||
|
<button
|
||||||
|
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||||
|
data-toggle-class="is-open"
|
||||||
|
data-toggle-escape
|
||||||
|
data-toggle-outside
|
||||||
|
data-toggle-target-next
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
{% t .add_to_calendar %}
|
||||||
|
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<ul class="dropdown-calendar-menu">
|
||||||
|
<li class="dropdown-calendar-item">
|
||||||
|
<a
|
||||||
|
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||||
|
href="{{ training_session.google_calendar_url }}"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{% t .google_calendar %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown-calendar-item">
|
||||||
|
<a
|
||||||
|
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||||
|
href="{{ training_session.outlook_calendar_url }}"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{% t .outlook_calendar %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown-calendar-item">
|
||||||
|
<a
|
||||||
|
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||||
|
href="{{ training_session.outlook_office_calendar_url }}"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{% t .office_calendar %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="dropdown-calendar-item">
|
||||||
|
<a
|
||||||
|
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||||
|
href="{{ training_session.ical_calendar_url }}"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
{% t .ical_calendar %}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
{% if training_session.approved? %}
|
||||||
|
<div class="np-training-session-cta-note">
|
||||||
|
<i class="far fa-check np-training-session-icon"></i>
|
||||||
|
{% t .registered %}
|
||||||
|
</div>
|
||||||
|
{% elsif training_session.pending? %}
|
||||||
|
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||||
|
{% t .pending %}
|
||||||
|
</div>
|
||||||
|
{% elsif training_session.denied? %}
|
||||||
|
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||||
|
{% t .denied %}
|
||||||
|
</div>
|
||||||
|
{% elsif training_session.too_late? %}
|
||||||
|
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||||
|
{% t .too_late %}
|
||||||
|
</div>
|
||||||
|
{% elsif training_session.no_seats? %}
|
||||||
|
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||||
|
{% t .no_seats %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="np-training-session-cta">
|
||||||
|
<div class="np-training-session-cta-buttons">
|
||||||
|
<form
|
||||||
|
action="{% route training_session_registration, id: training_session.id %}"
|
||||||
|
method="post"
|
||||||
|
>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
|
||||||
|
{% if training_session.internal? and training_session.approved? %}
|
||||||
|
{% if features.training_events_google_calendar? %}
|
||||||
|
{% include "training_session_calendars" %}
|
||||||
|
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||||
|
{% t .unregister %}
|
||||||
|
</button>
|
||||||
|
{% else %}
|
||||||
|
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||||
|
{% t .unregister %}
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<input type="hidden" name="_method" value="delete" />
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if training_session.not_registered? %}
|
||||||
|
<button type="submit" class="np-top-button np-button np-button-big">
|
||||||
|
{% t .register %}
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<div class="np-card-training-session-date">
|
||||||
|
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||||
|
<div class="np-card-training-session-date-day">
|
||||||
|
{{ training_session.day }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="np-card-training-session-date-month">
|
||||||
|
{{ training_session.month }}
|
||||||
|
</div>
|
||||||
|
<div class="np-card-training-session-date-year">
|
||||||
|
{{ training_session.year }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<h3 class="np-card-heading">
|
||||||
|
{% t .header %}
|
||||||
|
</h3>
|
||||||
|
<div class="np-card-text">
|
||||||
|
{{ training_event.description }}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||||
|
{% include "training_session_header" %}
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-7">
|
||||||
|
<div class="np-card-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-5">
|
||||||
|
{% include "training_session_details" %}
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-7">
|
||||||
|
{% include "training_session_cta" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-card-padding-large">
|
||||||
|
<div class="np-card-content-divider">
|
||||||
|
{% include "training_session_description" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-5 np-grid-spacing">
|
||||||
|
<div class="np-training-session-sessions-title">
|
||||||
|
{% t shared.more_sessions %}
|
||||||
|
</div>
|
||||||
|
{% if training_event.sessions.size > 1 %}
|
||||||
|
{% include "training_session_more_sessions" %}
|
||||||
|
{% else %}
|
||||||
|
<div class="np-training-session-zero-state">
|
||||||
|
<img
|
||||||
|
alt="{% t .empty %}"
|
||||||
|
class="np-zero-state-training-sessions"
|
||||||
|
/>
|
||||||
|
<div class="np-training-session-zero-state-text">
|
||||||
|
{% t .empty %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<div class="np-card-spacing-large">
|
||||||
|
{% include "training_session_date" %}
|
||||||
|
|
||||||
|
<div class="np-training-session-time">
|
||||||
|
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||||
|
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if training_session.location %}
|
||||||
|
<div class="np-training-session-location">
|
||||||
|
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||||
|
{{ training_session.location }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if training_session.session_url %}
|
||||||
|
<div class="np-training-session-location">
|
||||||
|
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||||
|
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||||
|
{{ training_session.session_url }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<div class="np-top-vocabulary np-text-title">
|
||||||
|
{% t shared.event_types, key: training_event.event_type %}
|
||||||
|
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
|
||||||
|
</div>
|
||||||
|
<div class="np-top-title">
|
||||||
|
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||||
|
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||||
|
</a>
|
||||||
|
{{ training_event.title }}
|
||||||
|
</div>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<div class="np-card-container-training-session">
|
||||||
|
<div class="np-card-spacing-large">
|
||||||
|
{% include "training_session_header" %}
|
||||||
|
</div>
|
||||||
|
{% include "training_session_details" %}
|
||||||
|
<div class="np-card-padding-large">
|
||||||
|
{% include "training_session_cta" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="np-card-container np-card-padding np-card-spacing">
|
||||||
|
{% include "training_session_description" %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if training_event.sessions.size > 1 %}
|
||||||
|
<div class="np-card-spacing">
|
||||||
|
<div class="np-training-session-sessions-title">
|
||||||
|
{% t shared.more_sessions %}
|
||||||
|
</div>
|
||||||
|
{% include "training_session_more_sessions" %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{% for session in training_event.sessions %}
|
||||||
|
{% include "training_session_tile", current_session: training_session %}
|
||||||
|
{% endfor %}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
{% if current_session.id != session.id %}
|
||||||
|
<a
|
||||||
|
class="np-training-session-tile"
|
||||||
|
href="{% route training_session, id: session.id %}"
|
||||||
|
>
|
||||||
|
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
|
||||||
|
<div>
|
||||||
|
<div class="np-training-session-tile-date">
|
||||||
|
{{ session.month }} {{ session.day }}, {{ session.year }}
|
||||||
|
</div>
|
||||||
|
<div class="np-training-session-tile-time">
|
||||||
|
{{ session.time_period }} {{ session.time_zone }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
14
Custom_Templates/customer_templates/Skan/account.html.liquid
Normal file
14
Custom_Templates/customer_templates/Skan/account.html.liquid
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
|
||||||
|
<main class="np-main np-subpage-container np-account">
|
||||||
|
<div class="np-hidden-desktop">
|
||||||
|
{% include "account_mobile_view", form: form %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="np-hidden-mobile np-flex np-flex-center">
|
||||||
|
{% include "account_desktop_view", form: form %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{% include "footer" %}
|
||||||
|
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<main class="np-box-container np-open-access">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-headline">
|
||||||
|
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||||
|
</div>
|
||||||
|
<div class="np-form-subheadline">
|
||||||
|
{% t .headline, key: current_school.course_vocabulary %}
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_first_name">
|
||||||
|
{% t shared.first_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="text"
|
||||||
|
name="first_name"
|
||||||
|
id="learner_first_name"
|
||||||
|
value="{{ form.first_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_last_name">
|
||||||
|
{% t shared.last_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="last_name"
|
||||||
|
id="learner_last_name"
|
||||||
|
value="{{ form.last_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_email">
|
||||||
|
{% t shared.email_address %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="learner_email"
|
||||||
|
value="{{ form.email }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
name="commit"
|
||||||
|
value="{% t shared.enter %}"
|
||||||
|
class="np-button np-button-big np-form-action"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
<main class="np-box-container np-open-access">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-headline">
|
||||||
|
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||||
|
</div>
|
||||||
|
<div class="np-form-subheadline">
|
||||||
|
{% t .headline, key: current_school.course_vocabulary %}
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_employee_id">
|
||||||
|
{% t shared.employee_id %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="text"
|
||||||
|
name="employee_id"
|
||||||
|
id="learner_employee_id"
|
||||||
|
value="{{ form.employee_id }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_first_name">
|
||||||
|
{% t shared.first_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="first_name"
|
||||||
|
id="learner_first_name"
|
||||||
|
value="{{ form.first_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_last_name">
|
||||||
|
{% t shared.last_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="last_name"
|
||||||
|
id="learner_last_name"
|
||||||
|
value="{{ form.last_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
name="commit"
|
||||||
|
value="{% t shared.enter %}"
|
||||||
|
class="np-button np-button-big np-form-action"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
<main class="np-box-container np-open-access">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||||
|
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||||
|
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_last_name">
|
||||||
|
{% t shared.last_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="text"
|
||||||
|
name="last_name"
|
||||||
|
id="learner_last_name"
|
||||||
|
value="{{ form.last_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_phone_number">
|
||||||
|
{% t shared.phone_number %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="phone_number"
|
||||||
|
id="learner_phone_number"
|
||||||
|
value="{{ form.phone_number }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="np-button np-button-big np-form-action">
|
||||||
|
{% t shared.enter %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<main class="np-box-container np-open-access">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||||
|
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||||
|
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_email">
|
||||||
|
{% t shared.email_address %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="learner_email"
|
||||||
|
value="{{ form.email }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_first_name">
|
||||||
|
{% t shared.first_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="first_name"
|
||||||
|
id="learner_first_name"
|
||||||
|
value="{{ form.first_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_last_name">
|
||||||
|
{% t shared.last_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="last_name"
|
||||||
|
id="learner_last_name"
|
||||||
|
value="{{ form.last_name }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_phone_number">
|
||||||
|
{% t shared.phone_number_optional %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="phone_number"
|
||||||
|
id="learner_phone_number"
|
||||||
|
value="{{ form.phone_number }}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field np-open-access-terms">
|
||||||
|
<input type="hidden" name="terms" value="0" />
|
||||||
|
<input id="terms" type="checkbox" name="terms" value="1" />
|
||||||
|
<label for="terms" class="np-open-access-terms-checkbox">
|
||||||
|
{{ current_school.custom_terms }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
name="commit"
|
||||||
|
value="{% t shared.enter %}"
|
||||||
|
class="np-button np-button-big np-form-action"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
21
Custom_Templates/customer_templates/Skan/catalog.html.liquid
Normal file
21
Custom_Templates/customer_templates/Skan/catalog.html.liquid
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||||
|
<div class="np-catalog-header-wrapper">
|
||||||
|
<div class="np-catalog-header">
|
||||||
|
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||||
|
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||||
|
</div>
|
||||||
|
{% capture label %}{% t shared.filters.by_category %}{% endcapture %}
|
||||||
|
|
||||||
|
{% if courses.in_catalog.any? %}
|
||||||
|
{%
|
||||||
|
include "filter_dropdown",
|
||||||
|
filters: courses.filters,
|
||||||
|
key: "category_uuid",
|
||||||
|
label: label
|
||||||
|
%}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% include "courses_catalog" %}
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
39
Custom_Templates/customer_templates/Skan/course.html.liquid
Normal file
39
Custom_Templates/customer_templates/Skan/course.html.liquid
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-max-width np-page-container">
|
||||||
|
<div class="np-hidden-mobile" id="course-desktop">
|
||||||
|
{% include "course_desktop_view" %}
|
||||||
|
</div>
|
||||||
|
<div class="np-hidden-desktop" id="course-mobile">
|
||||||
|
{% include "course_mobile_view" %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
background: url('https://s3.amazonaws.com/static.northpass.com/skan_ai/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-page-container{
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.np-page-container{
|
||||||
|
margin: calc(8.25rem + 75px) auto 8.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
if (window.location.pathname.includes('/learning_paths')) {
|
||||||
|
addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('h3.np-card-heading').forEach(x => {
|
||||||
|
if (x.innerText.toLowerCase().includes('course')) {
|
||||||
|
x.innerText = x.innerText.replaceAll('course', 'certificate').replaceAll('Course', 'Certificate');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
11
Custom_Templates/customer_templates/Skan/courses.html.liquid
Normal file
11
Custom_Templates/customer_templates/Skan/courses.html.liquid
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||||
|
{% include "sub_navigation" %}
|
||||||
|
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||||
|
<div class="np-resource-title">
|
||||||
|
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||||
|
</div>
|
||||||
|
<div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div>
|
||||||
|
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{%- comment -%} {% include "course_version_outdated_alert", courses: courses.enrolled %} {%- endcomment -%}
|
||||||
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||||
|
<div class="row np-flex-center">
|
||||||
|
<div class="col-xs-12 col-sm-8">
|
||||||
|
{% if features.learning_paths? %}
|
||||||
|
<div class="np-dashboard-resources-title">
|
||||||
|
Certifications
|
||||||
|
</div>
|
||||||
|
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||||
|
{% endif %}
|
||||||
|
<div class="np-dashboard-resources-title">
|
||||||
|
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||||
|
</div>
|
||||||
|
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||||
|
</div>
|
||||||
|
{% if features.training_events? %}
|
||||||
|
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||||
|
<div class="np-dashboard-resources-title">
|
||||||
|
{% t .upcoming_events %}
|
||||||
|
</div>
|
||||||
|
{% include "training_events_dashboard" %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
<main class="np-box-container">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{% route forgot_password_create %}" method="post" novalidate>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_email">
|
||||||
|
{% t shared.email_address %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
autofocus="autofocus"
|
||||||
|
class="np-input"
|
||||||
|
id="learner_email"
|
||||||
|
name="learner[email]"
|
||||||
|
type="email"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||||
|
{% t .button_label %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
108
Custom_Templates/customer_templates/Skan/homepage.html.liquid
Normal file
108
Custom_Templates/customer_templates/Skan/homepage.html.liquid
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{%- comment -%} {% include "course_version_outdated_alert", courses: courses.featured %} {%- endcomment -%}
|
||||||
|
<main class="np-main np-homepage">
|
||||||
|
<div class="np-homepage-hero">
|
||||||
|
<img class="np-homepage-hero-image"
|
||||||
|
src="{{ homepage.artwork_url }}"
|
||||||
|
alt="{{ homepage.headline }}"
|
||||||
|
/>
|
||||||
|
<div class="np-homepage-hero-content col-xs-12 row">
|
||||||
|
<div class="np-homepage-hero-texts col-xs-12 col-md-6">
|
||||||
|
<div class="np-homepage-hero-headline np-homepage-headline np-header-font-color">
|
||||||
|
{{ homepage.headline }}
|
||||||
|
</div>
|
||||||
|
<div class="np-homepage-hero-subheadline np-homepage-subheadline np-header-font-color">
|
||||||
|
{{ homepage.subheadline }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-homepage-hero-collage col-xs-12 col-md-6">
|
||||||
|
<img id="skan_metrics_img" alt="skan_metrics" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Dashboard+Image.png">
|
||||||
|
<img id="skan_three_boxes_img" alt="skan_three_boxes" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Three+Squares.png">
|
||||||
|
<img id="skan_process_map_img" alt="skan_process_map" class="hero-skan-image" src="https://s3.amazonaws.com/static.northpass.com/skan_ai/Process+Map+Image.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-homepage-featured np-max-width">
|
||||||
|
<div class="np-learning-paths-main">
|
||||||
|
<div class="np-resource-title">
|
||||||
|
Certifications
|
||||||
|
</div>
|
||||||
|
<div class="np-resource-subtitle">
|
||||||
|
Explore curated sets of courses for a tailored learning experience
|
||||||
|
</div>
|
||||||
|
{% include "learning_paths_index", items: learning_paths.available %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
|
|
||||||
|
<!-- STYLES REFERRING TO THE HOMEPAGE AS A WHOLE -->
|
||||||
|
<style>
|
||||||
|
.np-homepage{
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-image{
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-content{
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-headline,
|
||||||
|
.np-homepage-hero-subheadline{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-collage{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skan_metrics_img{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
max-height: 185px;
|
||||||
|
bottom: 4rem;
|
||||||
|
right: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skan_three_boxes_img{
|
||||||
|
position: absolute;
|
||||||
|
max-height: 400px;
|
||||||
|
padding-right: 22.5%;
|
||||||
|
z-index: 1;
|
||||||
|
top: -12rem;
|
||||||
|
right: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#skan_process_map_img{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
max-height: 225px;
|
||||||
|
right: 23rem;
|
||||||
|
top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.np-homepage{
|
||||||
|
padding-top: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-image{
|
||||||
|
max-height: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-featured{
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-hero-headline{
|
||||||
|
font-size: 5.5rem !important;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-max-width np-page-container">
|
||||||
|
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||||
|
{% include "learning_path_desktop_view" %}
|
||||||
|
</div>
|
||||||
|
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||||
|
{% include "learning_path_mobile_view" %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
background: url('https://s3.amazonaws.com/static.northpass.com/skan_ai/background.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-page-container{
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.np-page-container{
|
||||||
|
margin: calc(3.75rem + 75px) auto 6.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-max-width np-page-container">
|
||||||
|
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||||
|
{% include "learning_path_summary_desktop_view" %}
|
||||||
|
</div>
|
||||||
|
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||||
|
{% include "learning_path_summary_mobile_view" %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{% include "sub_navigation" %}
|
||||||
|
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||||
|
<div class="np-learning-paths-main">
|
||||||
|
<div class="np-resource-title">
|
||||||
|
{% t shared.learning_paths %}
|
||||||
|
</div>
|
||||||
|
<div class="np-resource-subtitle">
|
||||||
|
{% t .subtitle %}
|
||||||
|
</div>
|
||||||
|
{% include "learning_paths_index", items: learning_paths.available %}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
53
Custom_Templates/customer_templates/Skan/login.html.liquid
Normal file
53
Custom_Templates/customer_templates/Skan/login.html.liquid
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<main class="np-main np-box-container" style="background: #01061D;">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_email">
|
||||||
|
{% t shared.email_address %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="email"
|
||||||
|
name="learner[email]"
|
||||||
|
id="learner_email"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_password">
|
||||||
|
{% t shared.password %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="password"
|
||||||
|
name="learner[password]"
|
||||||
|
id="learner_password"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||||
|
{% t shared.sign_in %}
|
||||||
|
</button>
|
||||||
|
<a class="np-form-link np-button-color" href="{% route forgot_password_new %}">
|
||||||
|
{% t .forgot_password %}
|
||||||
|
</a>
|
||||||
|
{% if features.account_creation? %}
|
||||||
|
<a class="np-form-link np-button-color" href="{% route sign_up %}">
|
||||||
|
{% t shared.sign_up %}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% if features.request_access? %}
|
||||||
|
<a
|
||||||
|
class="np-form-link np-button-color"
|
||||||
|
target="_blank"
|
||||||
|
href="{{ current_school.request_access_link }}"
|
||||||
|
>
|
||||||
|
{{ current_school.request_access_label }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{% body %}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<main class="np-main np-max-width np-subpage-container">
|
||||||
|
<div class="np-homepage-featured-text">
|
||||||
|
<div class="np-homepage-headline">
|
||||||
|
{% t .header %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-homepage-featured-empty">
|
||||||
|
<img src="/images/404.svg">
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{% include "certificates_top_bar" %}
|
||||||
|
<main class="np-main np-certificate np-max-width np-page-container clear-main-spacings">
|
||||||
|
<section class="np-certificate-content-spacing">
|
||||||
|
<div class="row">
|
||||||
|
{% include "certificates_preview" %}
|
||||||
|
{% include "certificates_info_column" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
{% include "certificates_top_bar" %}
|
||||||
|
<main class="np-main np-certificate np-max-width np-page-container clear-main-spacings">
|
||||||
|
<section class="np-certificate-content-spacing">
|
||||||
|
<div class="row">
|
||||||
|
{% include "certificates_preview" %}
|
||||||
|
{% include "certificates_info_column" %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<main class="np-box-container">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" method="post" action="{% route forgot_password_create %}">
|
||||||
|
<input type="hidden" name="_method" value="put">
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
value="{{ reset_password_token }}"
|
||||||
|
name="learner[reset_password_token]"
|
||||||
|
id="learner_reset_password_token"
|
||||||
|
>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_password">
|
||||||
|
{% t .new_password %} * <br> Password must be a minimum of 8 characters, with at least 1 capital letter, 1 number, and 1 special character.
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="password"
|
||||||
|
name="learner[password]"
|
||||||
|
id="learner_password"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_password_confirmation">
|
||||||
|
{% t .confirm_new_password %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="password"
|
||||||
|
name="learner[password_confirmation]"
|
||||||
|
id="learner_password_confirmation"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="np-button np-button-big np-form-action">
|
||||||
|
{% t .change_password %}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
27
Custom_Templates/customer_templates/Skan/search.html.liquid
Normal file
27
Custom_Templates/customer_templates/Skan/search.html.liquid
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-search np-subpage-container np-max-width">
|
||||||
|
<div class="np-resource-title">
|
||||||
|
{% t .title %}
|
||||||
|
</div>
|
||||||
|
<div class="np-search-header">
|
||||||
|
<div class="np-resource-subtitle">
|
||||||
|
{% t .showing %}
|
||||||
|
<span class="np-resource-subtitle-number">{{ results.count }}</span>
|
||||||
|
{% t .results_for %}
|
||||||
|
<span class="np-button-color">"{{ results.term }}"</span>
|
||||||
|
</div>
|
||||||
|
{% capture label %}{% t shared.filters.by_type %}{% endcapture %}
|
||||||
|
{%
|
||||||
|
include "filter_dropdown",
|
||||||
|
filters: results.filters,
|
||||||
|
key: "type",
|
||||||
|
label: label
|
||||||
|
%}
|
||||||
|
</div>
|
||||||
|
{% if results.items.any? %}
|
||||||
|
{% render "search_result" for results.items as result %}
|
||||||
|
{% else %}
|
||||||
|
{% include "search_zero_state" %}
|
||||||
|
{% endif %}
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
72
Custom_Templates/customer_templates/Skan/sign_up.html.liquid
Normal file
72
Custom_Templates/customer_templates/Skan/sign_up.html.liquid
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<main class="np-main np-box-container">
|
||||||
|
<div class="np-box">
|
||||||
|
{% include "header_minimal" %}
|
||||||
|
<div class="np-box-content-container">
|
||||||
|
<form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
|
||||||
|
<div class="np-form-title"> {% t .create_account %} </div>
|
||||||
|
{% form_authenticity_token %}
|
||||||
|
<div class="np-form-flex-desktop">
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_first_name">
|
||||||
|
{% t shared.first_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="text"
|
||||||
|
name="learner[first_name]"
|
||||||
|
id="learner_first_name"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_last_name">
|
||||||
|
{% t shared.last_name %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="text"
|
||||||
|
name="learner[last_name]"
|
||||||
|
id="learner_last_name"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_email">
|
||||||
|
{% t shared.email_address %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
autofocus="autofocus"
|
||||||
|
type="email"
|
||||||
|
name="learner[email]"
|
||||||
|
id="learner_email"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="np-form-field">
|
||||||
|
<label class="np-input-label" for="learner_password">
|
||||||
|
{% t shared.password %}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
class="np-input"
|
||||||
|
type="password"
|
||||||
|
name="learner[password]"
|
||||||
|
id="learner_password"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||||
|
{% t shared.sign_up %}
|
||||||
|
</button>
|
||||||
|
<span class="np-form-terms">
|
||||||
|
{% t .terms %}
|
||||||
|
<a
|
||||||
|
class="np-form-link np-button-color"
|
||||||
|
target="_blank"
|
||||||
|
href="{{ current_school.terms_of_service_url }}"
|
||||||
|
>
|
||||||
|
{% t .terms_link %}
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
230
Custom_Templates/customer_templates/Skan/styles.css.liquid
Normal file
230
Custom_Templates/customer_templates/Skan/styles.css.liquid
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
/*
|
||||||
|
Put your custom overlay styles in here
|
||||||
|
You can use your northpass color palette in this file
|
||||||
|
|
||||||
|
{{ color_palette.button_font_color }}
|
||||||
|
{{ color_palette.button_color }}
|
||||||
|
{{ color_palette.button_hover_color }}
|
||||||
|
{{ color_palette.header_font_color }}
|
||||||
|
{{ color_palette.header_font_hover_color }}
|
||||||
|
{{ color_palette.header_color }}
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
background: url('https://s3.amazonaws.com/static.northpass.com/skan_ai/background.png');
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-main {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.np-sub-navigation {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage-featured .np-homepage-headline {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* LOGIN PAGE */
|
||||||
|
.np-box .np-form-link {
|
||||||
|
color:#211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* FOOTER DETAILS */
|
||||||
|
.np-footer-support-item {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-button-color {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-button-color:hover {
|
||||||
|
color: #59D7C9;
|
||||||
|
transition: color .5s ease, background .5s ease, border .5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* links for Home, Dashboard, etc. */
|
||||||
|
.np-sub-navigation-content{
|
||||||
|
color: #ffffff
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dashboard page all text*/
|
||||||
|
.np-dashboard-resources-title {
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Catalog page all text*/
|
||||||
|
.np-footer-logo-image {
|
||||||
|
filter: none;
|
||||||
|
opacity: 1;
|
||||||
|
height: 50px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-button-background-color {
|
||||||
|
background: #211579;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.np-button {
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: #307fe2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: Jost,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-button:hover {
|
||||||
|
background: #59D7C9;
|
||||||
|
transition: color .5s ease, background .5s ease, border .5s;
|
||||||
|
border: 1px solid #59D7C9;
|
||||||
|
color: #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-button {
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
background: #307fe2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-button:hover {
|
||||||
|
color: #211579 !important;
|
||||||
|
background: #59D7C9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-button-apply {
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
background: #307fe2 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-button-apply:hover {
|
||||||
|
color: #211579 !important;
|
||||||
|
background: #59D7C9 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.np-card-content-progress,
|
||||||
|
.np-course-version-outdated-popup-trigger,
|
||||||
|
.np-card-content-progress .np-button-color{
|
||||||
|
color: #211579;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-content-progress:hover {
|
||||||
|
color: #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.np-popup-body-button,
|
||||||
|
.np-learning-paths, {
|
||||||
|
background-image: linear-gradient(#01061D, #030E43);
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-popup-body-button:hover {
|
||||||
|
background: #59D7C9;
|
||||||
|
color: #211579;
|
||||||
|
transition: color .5s ease, background .5s ease, border .5s;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-resource-header {
|
||||||
|
border: 2px solid #e5e9eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Course progress -course_outline */
|
||||||
|
|
||||||
|
|
||||||
|
/* Newly Updated Styles based on Nitin's Designs */
|
||||||
|
@media (min-width: 768px){
|
||||||
|
.np-alert-global{
|
||||||
|
padding-top: 90px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-box-header-logo{
|
||||||
|
height: 85px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage .np-card{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-catalog{
|
||||||
|
padding-top: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-dashboard,
|
||||||
|
.np-training-events{
|
||||||
|
padding-top: 155px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-dashboard-resources-container{
|
||||||
|
border: 2px solid #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-course-outline-content-activity-icon {
|
||||||
|
color: #59D7C9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-resource-title,
|
||||||
|
.np-resource-subtitle,
|
||||||
|
.np-zero-state-text {
|
||||||
|
color: #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-learning-path .np-learning-path-image{
|
||||||
|
border-radius: 0;
|
||||||
|
border-top-left-radius: 4px;
|
||||||
|
border-bottom-left-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-text-wrapper{
|
||||||
|
border-top-right-radius: 4px;
|
||||||
|
border-bottom-right-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-dashboard-resources-title,
|
||||||
|
.np-card-header-type,
|
||||||
|
.np-card-header-icon,
|
||||||
|
.np-learning-path-items,
|
||||||
|
.np-learning-path-items .np-button-color,
|
||||||
|
.np-learning-path-items .np-learning-path-items-count,
|
||||||
|
.np-card-content-title{
|
||||||
|
color: #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-card-container,
|
||||||
|
.np-card-stack-level-1,
|
||||||
|
.np-card-stack-level-2{
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 2px solid #211579;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-learning-path-outline-item{
|
||||||
|
border: 2px solid #e5e9eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-homepage .np-learning-path .np-card-content{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.np-footer,
|
||||||
|
.np-powered-by {
|
||||||
|
background: #01061D !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
{% include "header" %}
|
||||||
|
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-sm-10">
|
||||||
|
<div class="np-resource-title">
|
||||||
|
{% t .title %}
|
||||||
|
</div>
|
||||||
|
<div class="np-resource-subtitle">
|
||||||
|
{% t .subtitle %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-sm-2">
|
||||||
|
{% include "training_events_filter" %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% include "training_events_index" %}
|
||||||
|
</main>
|
||||||
|
{% include "footer" %}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user