MATTR templates and tripleseat head file for custom fonts. Todos.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,139 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
<a
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,85 @@
|
||||
{% assign talent_lms_learner = current_person.properties.talent_lms_learner %}
|
||||
{% assign talent_lms_course = course.properties.talent_lms_course %}
|
||||
{% assign course_previously_completed = false %}
|
||||
{% if talent_lms_course and talent_lms_learner %}
|
||||
{% assign course_previously_completed = true %}
|
||||
{% endif %}
|
||||
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% assign progress_status = "not-started" %}
|
||||
{% if course.progress == 0 %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign progress_status = "completed" %}
|
||||
{% else %}
|
||||
{% assign progress_status = "not-started" %}
|
||||
{% endif %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign progress_status = "completed" %}
|
||||
{% else %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign progress_status = "completed" %}
|
||||
{% else %}
|
||||
{% assign progress_status = "in-progress" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-card course-card">
|
||||
<a href="{{ course_path }}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon list-hide">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if course.properties.course_type == "Training" %}
|
||||
<div class="np-card-ribbon list-hide course-type-ribbon">
|
||||
{{ course.properties.course_type }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image list-hide"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<img
|
||||
class="np-card-image list-show"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="list-card-titles">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="experience">
|
||||
{{course.properties.experience}}
|
||||
</div>
|
||||
<div class="np-card-content-progress {{progress_status}}">
|
||||
{% if course.progress == 0 %}
|
||||
{% if course_previously_completed == true %}
|
||||
Completed on TalentLMS
|
||||
{% else %}
|
||||
Not started
|
||||
{% endif %}
|
||||
{% elsif course.progress == 100 %}
|
||||
Completed
|
||||
{% else %}
|
||||
{% if course_previously_completed == true %}
|
||||
Completed on TalentLMS
|
||||
{% else %}
|
||||
In progress
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="course-categories-list" style="display: none;">{{ course.categories | map: "name" }}</div>
|
||||
</div>
|
||||
@ -0,0 +1,71 @@
|
||||
{% assign enrolled_courses = "" %}
|
||||
{% assign lp_items = learning_path.items %}
|
||||
{% assign lp_items_completed_count = 0 %}
|
||||
{% assign course_object = "" %}
|
||||
|
||||
{% for lp_item in lp_items %}
|
||||
{% if lp_item.completed? %}
|
||||
{% assign lp_items_completed_count = lp_items_completed_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign enrolled_courses = courses.enrolled %}
|
||||
{% endif %}
|
||||
|
||||
{% assign lp_name_formatted = learning_path.name | replace: " ", "-" | downcase %}
|
||||
<div class="learning-path-heading" data-lp="{{lp_name_formatted}}">
|
||||
<div class="learning-path-title">{{learning_path.name}} Accreditation</div>
|
||||
<div class="learning-path-count">{{lp_items_completed_count}} / {{ lp_items.count }}</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-path-card">
|
||||
<div class="lp-button-wrapper" style='display:none'>
|
||||
{% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button" %}
|
||||
</div>
|
||||
<div class="lp-card-content-wrapper">
|
||||
{% for lp_item in lp_items %}
|
||||
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.id == lp_item.id %}
|
||||
{% assign course_object = course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if lp_item.course? %}
|
||||
{% assign progress_status = "not-started" %}
|
||||
|
||||
{% if lp_item.progress > 0 and lp_item.progress < 100 %}
|
||||
{% assign progress_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_item.completed? %}
|
||||
{% assign progress_status = "complete" %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_item.unlocked? %}
|
||||
<a class="learning-path-course {{progress_status}}" href="{% route learning_path_course, learning_path_id: learning_path.id, id: lp_item.id %}">
|
||||
<div class="lp-course-img">
|
||||
{% if lp_item.image contains "cdn.northpass.com/assets/defaults/" %}
|
||||
<div class="empty-img"></div>
|
||||
{% else %}
|
||||
<img src="{{lp_item.image}}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="lp-course-title">{{lp_item.name}} ({{course_object.properties.experience}})</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="learning-path-course {{progress_status}}">
|
||||
<div class="lp-course-img">
|
||||
{% if lp_item.image contains "cdn.northpass.com/assets/defaults/" %}
|
||||
<div class="empty-img"></div>
|
||||
{% else %}
|
||||
<img src="{{lp_item.image}}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="lp-course-title">{{lp_item.name}} ({{course_object.properties.experience}})</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
{% assign enrolled_courses = "" %}
|
||||
{% assign lp_items = available_lp.items %}
|
||||
|
||||
{% if courses.enrolled.any? %}
|
||||
{% assign enrolled_courses = courses.enrolled %}
|
||||
{% endif %}
|
||||
|
||||
<div class="learning-path-heading">
|
||||
<div class="learning-path-title">{{available_lp.name}} Accreditation</div>
|
||||
<div class="learning-path-count">0 / {{ lp_items.count }}</div>
|
||||
</div>
|
||||
|
||||
<a class="learning-path-card not-enrolled" href="{% route learning_path_enrollment, code: available_lp.enrollment_code %}">
|
||||
{% for lp_item in lp_items %}
|
||||
{% assign course_object = "" %}
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.id == lp_item.id %}
|
||||
{% assign course_object = course %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if lp_item.course? %}
|
||||
{% if lp_item.unlocked? %}
|
||||
<div class="learning-path-course">
|
||||
|
||||
{% assign progress_status = "not-started" %}
|
||||
|
||||
{% if lp_item.progress > 0 and lp_item.progress < 100 %}
|
||||
{% assign progress_status = "in-progress" %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_item.completed? %}
|
||||
{% assign progress_status = "complete" %}
|
||||
{% endif %}
|
||||
|
||||
{% if course_object.properties.content_type == "Grey MATTR" %}
|
||||
<div class="content-type-img grey-mattr {{progress_status}}"></div>
|
||||
{% elsif course_object.properties.content_type == "Dark MATTR" %}
|
||||
<div class="content-type-img dark-mattr {{progress_status}}"></div>
|
||||
{% elsif course_object.properties.content_type == "Blue MATTR" %}
|
||||
<div class="content-type-img blue-mattr {{progress_status}}"></div>
|
||||
{% endif %}
|
||||
{{lp_item.name}}
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="learning-path-course lp-course-locked">
|
||||
<div class="lock-img"></div>
|
||||
{{lp_item.name}}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="enroll-btn">Enroll in {{available_lp.name}}</div>
|
||||
</a>
|
||||
@ -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">
|
||||
Upon completing this module, you’ll be able to...
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,82 @@
|
||||
{% assign bg_color = "#FAFAFA" %}
|
||||
{% assign txt_color = "#2E29FC" %}
|
||||
{% assign content_type = course.properties.content_type | downcase | replace: " ", "-" %}
|
||||
|
||||
{% if content_type == "blue-mattr" %}
|
||||
{% assign bg_color = "#E2E5FF" %}
|
||||
{% assign txt_color = "#2E29FC" %}
|
||||
{% endif %}
|
||||
|
||||
{% if content_type == "dark-mattr" %}
|
||||
{% assign bg_color = "#333132" %}
|
||||
{% assign txt_color = "#EAD9E3" %}
|
||||
{% endif %}
|
||||
|
||||
{% if content_type == "grey-mattr" %}
|
||||
{% assign bg_color = "#C0BDBF" %}
|
||||
{% assign txt_color = "#333132" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="course-header" style="background-color:{{bg_color}}">
|
||||
<img class="course-header-image np-hidden-mobile" src="{{ course.image_url }}" alt="{{ course.name }}" />
|
||||
<div class="np-max-width course-header-container">
|
||||
<div class="course-title" style="color:{{txt_color}}">
|
||||
{{ course.name }} ({{course.properties.experience}})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.course-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-top:70px;
|
||||
}
|
||||
|
||||
.course-header-image {
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
height:100%;
|
||||
width:auto;
|
||||
}
|
||||
|
||||
.course-header-container {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
max-width: 520px;
|
||||
line-height: 38px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.course-header {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.course-header-container {
|
||||
padding: 48px 24px 32px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.course-header-container {
|
||||
padding: 48px 5% 32px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-size: 48px;
|
||||
line-height: 52px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,90 @@
|
||||
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<div class="course-overview-btn-container">
|
||||
<button type="submit" class="course-button">
|
||||
<div class="button-content-container">
|
||||
<div class="btn-text-container">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<span class="course-button-arrow">
|
||||
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7078_24243)">
|
||||
<path d="M17.3329 11.8773L12.4048 6.94903L13.7039 5.6499L20.8499 12.796L13.7039 19.9421L12.4048 18.643L17.3329 13.7148H6.1499V11.8773H17.3329Z" fill="#4F4C4E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7078_24243">
|
||||
<rect width="25.2" height="25.2" fill="white" transform="translate(0.899902 0.399902)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
<div class="course-overview-btn-container">
|
||||
<a
|
||||
class="course-button"
|
||||
{% 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 %}#reroute"
|
||||
{% endif %}
|
||||
>
|
||||
<div class="button-content-container">
|
||||
<div class="btn-text-container">
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% 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 %}
|
||||
</div>
|
||||
<span class="course-button-arrow">
|
||||
<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7078_24243)">
|
||||
<path d="M17.3329 11.8773L12.4048 6.94903L13.7039 5.6499L20.8499 12.796L13.7039 19.9421L12.4048 18.643L17.3329 13.7148H6.1499V11.8773H17.3329Z" fill="#4F4C4E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7078_24243">
|
||||
<rect width="25.2" height="25.2" fill="white" transform="translate(0.899902 0.399902)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.course-button {
|
||||
padding: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
border:none;
|
||||
background:none;
|
||||
color:#242424;
|
||||
}
|
||||
.button-content-container {
|
||||
display: flex;
|
||||
border: 0.5px solid #242424;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-text-container {
|
||||
padding: 13px;
|
||||
border-right: 0.5px solid #242424;
|
||||
}
|
||||
.course-button-arrow {
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,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,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,34 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
<div class="copyright">© MATTR, 2023</div>
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a class="np-footer-navigation-link" href="{{ website_navigation.path }}" target="_blank">{{ website_navigation.name }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
padding: 48px 0 32px;
|
||||
}
|
||||
.np-footer-top {
|
||||
border-top: 1px solid #EBEAEB;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list { flex-direction: row;}
|
||||
|
||||
.np-footer-navigation-link { margin: 16px; color:#333132;}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-footer-navigation-link { margin-right: 0; padding-right:0;}
|
||||
.np-footer-navigation-list {padding-right:0!important;}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://static.mattr.global" />
|
||||
<link rel="preconnect" href="https://static.mattr.global" crossorigin />
|
||||
<link rel="stylesheet" href="https://static.mattr.global/webfonts/-mattr-all.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<!-- Matomo -->
|
||||
<script>
|
||||
var _paq = window._paq = window._paq || [];
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://mattrglobal.matomo.cloud/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '10']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src='//cdn.matomo.cloud/mattrglobal.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
|
||||
<!-- Maze -->
|
||||
<script>
|
||||
(function (m, a, z, e) {
|
||||
var s, t;
|
||||
try {
|
||||
t = m.sessionStorage.getItem('maze-us');
|
||||
} catch (err) {}
|
||||
|
||||
if (!t) {
|
||||
t = new Date().getTime();
|
||||
try {
|
||||
m.sessionStorage.setItem('maze-us', t);
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
s = a.createElement('script');
|
||||
s.src = z + '?t=' + t + '&apiKey=' + e;
|
||||
s.async = true;
|
||||
a.getElementsByTagName('head')[0].appendChild(s);
|
||||
m.mazeUniversalSnippetApiKey = e;
|
||||
})(window, document, 'https://snippet.maze.co/maze-universal-loader.js', '69b8a657-2081-45f8-a5b3-848fd553893a');
|
||||
</script>
|
||||
<!-- End Maze Code -->
|
||||
@ -0,0 +1,195 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<div class="user-profile">
|
||||
{{current_person.first_name | slice: 0}}{{current_person.last_name | slice: 0}}
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<div class="user-profile">
|
||||
{{current_person.first_name | slice: 0}}{{current_person.last_name | slice: 0}}
|
||||
</div>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
{% 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>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
position:fixed;
|
||||
top:0;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.np-header-content {
|
||||
margin-bottom:2px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background-color: #EAD9E3;
|
||||
width:40px;
|
||||
height:40px;
|
||||
min-width:40px;
|
||||
border-radius:50%;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
color: #333132;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header-logo-image {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.np-header {
|
||||
height: 70px;
|
||||
padding: 0 26px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header np-header-color">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,117 @@
|
||||
<div class="row list-of-catalog-courses" id="accordion-panel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% unless course.enrolled? %}
|
||||
{% assign talent_lms_learner = current_person.properties.talent_lms_learner %}
|
||||
{% assign talent_lms_course = course.properties.talent_lms_course %}
|
||||
{% assign course_previously_completed = false %}
|
||||
{% if talent_lms_course and talent_lms_learner %}
|
||||
{% assign course_previously_completed = true %}
|
||||
{% endif %}
|
||||
|
||||
{% assign status = "not-started" %}
|
||||
{% if course.progress == 0 %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% assign status = "not-started" %}
|
||||
{% endif %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% assign status = "in-progress" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="course-container col-xs-12 col-md-6 col-lg-4 catalog-course-container"
|
||||
style="display: none;"
|
||||
data-status="{{status}}"
|
||||
data-level="{{course.properties.experience}}"
|
||||
data-name="{{ course.name }}"
|
||||
>
|
||||
{% include 'cards_course' with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.list-card .np-card-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list-card .np-card-image {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-vertical {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.list-card .np-card-content {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-subtitle {
|
||||
margin-top: 3px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-footer {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-progress {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.list-card .list-card-titles {
|
||||
width: 60%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-card .list-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-card .list-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.catalog-course-container .np-card-content-progress,
|
||||
.catalog-course-container .np-card-content-progress.completed {
|
||||
text-indent:-9999px;
|
||||
border: 2px solid #EBEAEB;
|
||||
background-color: #EBEAEB;
|
||||
color: #4f4c4e;
|
||||
}
|
||||
|
||||
.catalog-course-container .np-card-content-progress:after {
|
||||
content: "OPTIONAL";
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,201 @@
|
||||
<div class="homepage-categories">
|
||||
<div class="homepage-categories-container">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_formatted = category.name | replace: " ", "-" | downcase %}
|
||||
<div class="homepage-category" data-category="{{category_name_formatted}}">
|
||||
{% assign show_indicator = false %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_categories = course.categories | map: "name" %}
|
||||
|
||||
{% if course_categories contains category.name %}
|
||||
{% if course.enrolled? and course.progress < 100 and course.properties.course_type == "Training" %}
|
||||
{% if course.properties.talent_lms_course == true and current_person.properties.talent_lms_learner == false %}
|
||||
<script>console.log('Show for {{category.name}} Category because of {{course.name}}')</script>
|
||||
{% assign show_indicator = true %}
|
||||
{% elsif course.properties.talent_lms_course == false %}
|
||||
<script>console.log('Show for {{category.name}} Category because of {{course.name}}')</script>
|
||||
{% assign show_indicator = true %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="category-name">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% if show_indicator %}
|
||||
<div class="not-completed-indicator"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% include 'homepage_filter' %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
Array.from(document.querySelectorAll(".homepage-category")).forEach((item, index) => {
|
||||
if (index == 0) {
|
||||
addActiveCategoryClass(item)
|
||||
showCoursesFromCategory(item)
|
||||
}
|
||||
|
||||
item.addEventListener("click", (clickEvent) => {
|
||||
addHashToUrl(item)
|
||||
hideCourses()
|
||||
showCoursesFromCategory(item)
|
||||
removeActiveCategoryClass()
|
||||
addActiveCategoryClass(item)
|
||||
UpdateStatusOfOptionalCourses()
|
||||
})
|
||||
|
||||
if (item.getAttribute("data-category") == window.location.hash.replace("#", "")) {
|
||||
item.click()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function hideCourses() {
|
||||
Array.from(document.querySelectorAll(".course-container")).forEach((course) => {
|
||||
course.style.display = "none";
|
||||
})
|
||||
}
|
||||
|
||||
function showCoursesFromCategory(item) {
|
||||
var selectedCategory = item.querySelector(".category-name").innerHTML.trim()
|
||||
|
||||
Array.from(document.querySelectorAll(".course-container")).forEach((course) => {
|
||||
if (course.querySelector(".course-categories-list").innerHTML.includes(selectedCategory)) {
|
||||
course.style.removeProperty("display")
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function removeActiveCategoryClass() {
|
||||
Array.from(document.querySelectorAll(".homepage-category")).forEach((item) => {
|
||||
item.classList.remove("active-category")
|
||||
})
|
||||
}
|
||||
|
||||
function addActiveCategoryClass(item) {
|
||||
item.classList.add("active-category")
|
||||
}
|
||||
|
||||
function addHashToUrl(item) {
|
||||
const selectedCategory = item.getAttribute("data-category")
|
||||
let url = window.location.href
|
||||
|
||||
if (window.location.hash) {
|
||||
url = new URL(window.location.href.substr(0, window.location.href.indexOf('#')))
|
||||
}
|
||||
|
||||
window.history.replaceState(null, null, `${url}#${selectedCategory}`);
|
||||
}
|
||||
|
||||
function UpdateStatusOfOptionalCourses() {
|
||||
const optionalCoursesAccordion = document.getElementById("catalog-accordion")
|
||||
const optionalCoursesPanel = document.getElementById("accordion-panel")
|
||||
optionalCoursesPanel.style.display = "none"
|
||||
optionalCoursesAccordion.style.display = "none"
|
||||
let optionalCoursesShowingCount = 0
|
||||
|
||||
optionalCoursesPanel.querySelectorAll(".catalog-course-container").forEach((optionalCourse) => {
|
||||
if (optionalCourse.style.display != "none") {
|
||||
optionalCoursesShowingCount++
|
||||
}
|
||||
})
|
||||
|
||||
if (optionalCoursesShowingCount > 0) {
|
||||
optionalCoursesPanel.style.display = "flex"
|
||||
optionalCoursesAccordion.style.display = "flex"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.homepage-categories {
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
margin-bottom: 19px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.active-category .category-name {
|
||||
color: #2E29FC;
|
||||
}
|
||||
|
||||
.not-completed-indicator {
|
||||
background-color: #df2673;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.homepage-categories-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x:scroll;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.homepage-category {
|
||||
padding: 0 4px 15px;
|
||||
margin: 0 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position:relative;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.homepage-category:after {
|
||||
content: "";
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:2px;
|
||||
z-index:2;
|
||||
background-color:#EBEAEB;
|
||||
}
|
||||
|
||||
.homepage-category.active-category:after {
|
||||
background-color:#2E29FC;
|
||||
}
|
||||
|
||||
|
||||
.homepage-category:first-child {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.homepage-categories {
|
||||
margin-top: 0;
|
||||
position:relative;
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
.homepage-categories:after {
|
||||
content: "";
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:2px;
|
||||
background-color:#EBEAEB;
|
||||
}
|
||||
|
||||
.homepage-categories-container {
|
||||
margin-right: 32px;
|
||||
background-color: #fff;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<div class="row list-of-courses">
|
||||
{% for course in courses.enrolled %}
|
||||
{% assign talent_lms_learner = current_person.properties.talent_lms_learner %}
|
||||
{% assign talent_lms_course = course.properties.talent_lms_course %}
|
||||
{% assign course_previously_completed = false %}
|
||||
{% if talent_lms_course and talent_lms_learner %}
|
||||
{% assign course_previously_completed = true %}
|
||||
{% endif %}
|
||||
|
||||
{% assign status = "not-started" %}
|
||||
{% if course.progress == 0 %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% assign status = "not-started" %}
|
||||
{% endif %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% if course_previously_completed == true %}
|
||||
{% assign status = "completed" %}
|
||||
{% else %}
|
||||
{% assign status = "in-progress" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="course-container col-xs-12 col-md-6 col-lg-4"
|
||||
style="display: none;"
|
||||
data-status="{{status}}"
|
||||
data-level="{{course.properties.experience}}"
|
||||
data-name="{{ course.name }}"
|
||||
>
|
||||
{% include 'cards_course' with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.list-card .np-card-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.list-card .np-card-image {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-vertical {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.list-card .np-card-content {
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-subtitle {
|
||||
margin-top: 3px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-footer {
|
||||
width: 40%;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.list-card .np-card-content-progress {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.list-card .list-card-titles {
|
||||
width: 60%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.list-card .list-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-card .list-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-show {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,342 @@
|
||||
<div class="homepage-filter">
|
||||
<div class="homepage-filter-container">
|
||||
<div class="homepage-filter-text">
|
||||
Layout
|
||||
</div>
|
||||
<i class="far fa-angle-down"></i>
|
||||
</div>
|
||||
|
||||
<div class="homepage-dropdown" style="display: none;">
|
||||
<div class="homepage-dropdown-container">
|
||||
<div class="homepage-dropdown-header">
|
||||
SORT
|
||||
</div>
|
||||
<div class="sort-homepage-dropdown-filters-container">
|
||||
<div class="filter-item" id="name-filter">
|
||||
<span class="filter-icons">A-Z</span>
|
||||
Alphabetical
|
||||
<i class="fas fa-check check-filter" style="display: none;"></i>
|
||||
</div>
|
||||
<div class="filter-item" id="level-filter">
|
||||
<i class="fas fa-exchange fa-rotate-90 filter-icons"></i>
|
||||
Course level
|
||||
<i class="fas fa-check check-filter" style="display: none;"></i>
|
||||
</div>
|
||||
<div class="filter-item" id="status-filter">
|
||||
<svg class="filter-icons" width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4528_105311)">
|
||||
<path d="M5.25 5.75V2.75C5.25 2.55109 5.32902 2.36032 5.46967 2.21967C5.61032 2.07902 5.80109 2 6 2H15.75C15.9489 2 16.1397 2.07902 16.2803 2.21967C16.421 2.36032 16.5 2.55109 16.5 2.75V12.5C16.5 12.6989 16.421 12.8897 16.2803 13.0303C16.1397 13.171 15.9489 13.25 15.75 13.25H12.75V16.2448C12.75 16.6617 12.4133 17 11.9948 17H2.25525C2.15604 17.0001 2.05779 16.9806 1.96611 16.9427C1.87444 16.9048 1.79114 16.8492 1.72099 16.779C1.65084 16.7089 1.59521 16.6256 1.55729 16.5339C1.51937 16.4422 1.4999 16.344 1.5 16.2448L1.50225 6.50525C1.50225 6.08825 1.839 5.75 2.2575 5.75H5.25ZM6.75 5.75H11.9948C12.4118 5.75 12.75 6.08675 12.75 6.50525V11.75H15V3.5H6.75V5.75ZM6.37725 14L10.6193 9.75725L9.55875 8.69675L6.37725 11.879L4.785 10.2875L3.7245 11.348L6.37725 14Z" fill="#4F4C4E"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4528_105311">
|
||||
<rect width="18" height="18" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
Status
|
||||
<i class="fas fa-check check-filter" style="display: none;"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-line"></div>
|
||||
<div class="homepage-dropdown-header">
|
||||
VIEW
|
||||
</div>
|
||||
<div class="view-homepage-dropdown-filters-container">
|
||||
<div class="filter-item" id="grid-filter">
|
||||
<i class="fas fa-th-large filter-icons"></i>
|
||||
Grid
|
||||
<i class="fas fa-check check-filter" style="display: none;"></i>
|
||||
</div>
|
||||
<div class="filter-item" id="list-filter">
|
||||
<i class="fas fa-bars filter-icons"></i>
|
||||
List
|
||||
<i class="fas fa-check check-filter" style="display: none;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
document.querySelector(".homepage-filter-container").addEventListener("click", (e) => {
|
||||
if (document.querySelector(".homepage-filter-container").classList.contains("open")) {
|
||||
document.querySelector(".homepage-dropdown").style.display = "none"
|
||||
document.querySelector(".homepage-filter-container").classList.remove("open")
|
||||
} else {
|
||||
document.querySelector(".homepage-dropdown").style.removeProperty("display")
|
||||
document.querySelector(".homepage-filter-container").classList.add("open")
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('click', (clickEvent) => {
|
||||
hideDropdown(clickEvent)
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".sort-homepage-dropdown-filters-container .filter-item")).forEach((item) => {
|
||||
item.addEventListener('click', (clickEvent) => {
|
||||
hideSortChecks()
|
||||
showCheck(item)
|
||||
})
|
||||
})
|
||||
|
||||
Array.from(document.querySelectorAll(".view-homepage-dropdown-filters-container .filter-item")).forEach((item) => {
|
||||
item.addEventListener('click', (clickEvent) => {
|
||||
hideViewChecks()
|
||||
showCheck(item)
|
||||
})
|
||||
})
|
||||
|
||||
document.getElementById("grid-filter").addEventListener("click", (clickEvent) => {
|
||||
changeToGrid()
|
||||
})
|
||||
|
||||
document.getElementById("list-filter").addEventListener("click", (clickEvent) => {
|
||||
changeToList()
|
||||
})
|
||||
|
||||
document.getElementById("status-filter").addEventListener("click", (clickEvent) => {
|
||||
sortCoursesByStatus()
|
||||
})
|
||||
|
||||
document.getElementById("name-filter").addEventListener("click", (clickEvent) => {
|
||||
sortCoursesByName()
|
||||
})
|
||||
|
||||
document.getElementById("level-filter").addEventListener("click", (clickEvent) => {
|
||||
sortCoursesByLevel()
|
||||
})
|
||||
|
||||
sortCoursesByStatus()
|
||||
})
|
||||
|
||||
function changeToList() {
|
||||
Array.from(document.querySelectorAll(".course-container")).forEach((item) => {
|
||||
item.classList.remove("col-md-6")
|
||||
item.classList.remove("col-lg-4")
|
||||
item.classList.add("list-card")
|
||||
document.querySelector(".list-filter-headers").style.removeProperty("display")
|
||||
})
|
||||
}
|
||||
|
||||
function changeToGrid() {
|
||||
Array.from(document.querySelectorAll(".course-container")).forEach((item) => {
|
||||
item.classList.add("col-md-6")
|
||||
item.classList.add("col-lg-4")
|
||||
item.classList.remove("list-card")
|
||||
document.querySelector(".list-filter-headers").style.display = "none";
|
||||
})
|
||||
}
|
||||
|
||||
function hideViewChecks() {
|
||||
Array.from(document.querySelectorAll(".view-homepage-dropdown-filters-container .check-filter")).forEach((item) => {
|
||||
item.style.display = "none"
|
||||
})
|
||||
}
|
||||
|
||||
function hideSortChecks() {
|
||||
Array.from(document.querySelectorAll(".sort-homepage-dropdown-filters-container .check-filter")).forEach((item) => {
|
||||
item.style.display = "none"
|
||||
})
|
||||
}
|
||||
|
||||
function showCheck(item) {
|
||||
item.querySelector(".check-filter").style.removeProperty("display")
|
||||
}
|
||||
|
||||
function hideDropdown(event) {
|
||||
const outsideClick = !document.querySelector(".homepage-filter").contains(event.target);
|
||||
|
||||
if (outsideClick) {
|
||||
document.querySelector(".homepage-dropdown").style.display = "none"
|
||||
document.querySelector(".homepage-filter-container").classList.remove("open")
|
||||
}
|
||||
}
|
||||
|
||||
function statusComparator(a, b) {
|
||||
if (a.dataset.status > b.dataset.status)
|
||||
return -1;
|
||||
if (a.dataset.status < b.dataset.status)
|
||||
return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function sortCoursesByStatus() {
|
||||
var subjects = document.querySelectorAll(".list-of-courses div[data-status]");
|
||||
var subjectsArray = Array.from(subjects);
|
||||
let sorted = subjectsArray.sort(statusComparator);
|
||||
sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));
|
||||
|
||||
var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-status]");
|
||||
var catalogSubjectsArray = Array.from(catalogSubjects);
|
||||
let catalogSorted = catalogSubjectsArray.sort(statusComparator);
|
||||
catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
|
||||
}
|
||||
|
||||
function nameComparator(a, b) {
|
||||
if (a.dataset.name < b.dataset.name)
|
||||
return -1;
|
||||
if (a.dataset.name > b.dataset.name)
|
||||
return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function sortCoursesByName() {
|
||||
var subjects = document.querySelectorAll(".list-of-courses div[data-name]");
|
||||
var subjectsArray = Array.from(subjects);
|
||||
let sorted = subjectsArray.sort(nameComparator);
|
||||
sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));
|
||||
|
||||
var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-name]");
|
||||
var catalogSubjectsArray = Array.from(catalogSubjects);
|
||||
let catalogSorted = catalogSubjectsArray.sort(nameComparator);
|
||||
catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
|
||||
}
|
||||
|
||||
function levelComparator(a, b) {
|
||||
if (a.dataset.level > b.dataset.level)
|
||||
return 1;
|
||||
if (a.dataset.level < b.dataset.level)
|
||||
return -1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
function sortCoursesByLevel() {
|
||||
var subjects = document.querySelectorAll(".list-of-courses div[data-level]");
|
||||
var subjectsArray = Array.from(subjects);
|
||||
let sorted = subjectsArray.sort(levelComparator);
|
||||
sorted.forEach(e => document.querySelector(".list-of-courses").appendChild(e));
|
||||
|
||||
var catalogSubjects = document.querySelectorAll(".list-of-catalog-courses div[data-level]");
|
||||
var catalogSubjectsArray = Array.from(catalogSubjects);
|
||||
let catalogSorted = catalogSubjectsArray.sort(levelComparator);
|
||||
catalogSorted.forEach(e => document.querySelector(".list-of-catalog-courses").appendChild(e));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-line {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #EBEAEB;
|
||||
}
|
||||
|
||||
.check-filter {
|
||||
margin-left: auto;
|
||||
color: #2E29FC;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-icons {
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 10.6364px;
|
||||
line-height: 12px;
|
||||
color: #4F4C4E;
|
||||
margin-right: 8px;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sort-homepage-dropdown-filters-container div {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.view-homepage-dropdown-filters-container div {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.sort-homepage-dropdown-filters-container div,
|
||||
.view-homepage-dropdown-filters-container div {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
color: #333132;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-homepage-dropdown-filters-container div:first-of-type,
|
||||
.view-homepage-dropdown-filters-container div:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.sort-homepage-dropdown-filters-container div:last-of-type,
|
||||
.view-homepage-dropdown-filters-container div:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.sort-homepage-dropdown-filters-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.homepage-dropdown-header {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #A4A1A2;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.filter-line {
|
||||
border: 1px solid #EBEAEB;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.homepage-dropdown-container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.homepage-dropdown {
|
||||
position: absolute;
|
||||
width: 220px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAEB;
|
||||
border-radius: 8px;
|
||||
z-index: 31;
|
||||
right: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.homepage-filter {
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
.homepage-filter-container {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EBEAEB;
|
||||
border-radius: 8px;
|
||||
padding: 12px 18px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.homepage-filter-text {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.homepage-filter {
|
||||
margin-bottom: 8px;
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="list-filter-headers" style="display: none;">
|
||||
<div class="list-filter-headers-container">
|
||||
<div class="list-filter-headers-course-title">Course Title</div>
|
||||
<div class="list-filter-headers-level-status">
|
||||
<div>Course Level</div>
|
||||
<div class="list-filter-headers-status">Status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-line">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.list-filter-headers-status {
|
||||
margin-right: 38px;
|
||||
}
|
||||
|
||||
.list-filter-headers-level-status {
|
||||
width: 40%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list-filter-headers-course-title {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.list-filter-headers-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #888486;
|
||||
}
|
||||
|
||||
.list-filter-headers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
{% comment %}
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% assign total_course_finished = 0 %}
|
||||
{% assign all_learning_paths = learning_paths.enrolled %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% if item.completed? %}
|
||||
{% assign total_course_finished = total_course_finished | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
|
||||
<div class="scoreboard">
|
||||
<div class="scoreboard-content">
|
||||
{% comment %}
|
||||
<div class="total-credentials np-flex">
|
||||
<span>{{total_course_finished}}</span> total credentials Earned
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<div class="complete-learning-paths">
|
||||
<div class="complete-learning-paths-title">You are subject experts in...</div>
|
||||
<div class="scoreboard-lps">
|
||||
{% if learning_paths.available.any? %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% if learning_path.completed? %}
|
||||
<div class="complete-lp-item">
|
||||
<svg class="complete-lp-icon" width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.70508 23.9998V7.4541H17.1159V23.9998L11.4105 18.4845L5.70508 23.9998Z" fill="#18D8AD"/>
|
||||
<g style="mix-blend-mode:multiply">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L11.0311 11.7915L15.1417 7.39648L16.8085 8.9554L11.0312 15.1322L2.28216 5.78004V18.2946H0V0Z" fill="#009C8A"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<a class="lp-name" href="{% route learning_path, id: learning_path.id %}">{{learning_path.name}}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a class="learning-path-redirect-button" href="/app/learning_paths">
|
||||
Learn more about MATTR Badges
|
||||
</a>
|
||||
</div>
|
||||
<div class="progress-overview">
|
||||
<div class="overview-title">Progress overview</div>
|
||||
<div class="scoreboard-lps">
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% unless learning_path.completed? %}
|
||||
{% assign learning_path_item_completed = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% if item.completed? %}
|
||||
{% assign learning_path_item_completed = learning_path_item_completed | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% assign learning_path_size = learning_path.items | size %}
|
||||
{% assign completed_percent = learning_path_item_completed | times: 100 | divided_by: learning_path_size %}
|
||||
|
||||
{% assign lp_name_formatted = learning_path.name | replace: " ", "-" | downcase %}
|
||||
<div class="lp-item">
|
||||
<div class="lp-info">
|
||||
<a class="lp-name" href="/app/learning_paths#{{lp_name_formatted}}">{{learning_path.name}}</a>
|
||||
<div class="lp-courses-count">{{learning_path_item_completed}}/{{learning_path_size}}</div>
|
||||
</div>
|
||||
<div class="lp-progress">
|
||||
<div style="width: {{completed_percent}}%;" class="lp-progress lp-progress-gain"></div>
|
||||
</div>
|
||||
<div class="lp-progress-percent">{{completed_percent}}% completed</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.scoreboard {
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.lp-name {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #333132;
|
||||
}
|
||||
|
||||
.complete-lp-item {
|
||||
display: flex;
|
||||
margin-bottom: 32px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.complete-lp-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.scoreboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.learning-path-redirect-button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 14px 39px;
|
||||
gap: 10px;
|
||||
background: #F5F6FF;
|
||||
border-radius: 32px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: #100796;
|
||||
}
|
||||
|
||||
.lp-item {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.scoreboard {
|
||||
border: 1px solid #EBEAEB;
|
||||
padding: 32px 24px 0;
|
||||
}
|
||||
|
||||
.scoreboard .total-credentials {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
line-height: 19px;
|
||||
align-items:center;
|
||||
color:#333132;
|
||||
}
|
||||
|
||||
.scoreboard .total-credentials > span {
|
||||
font-size: 28px;
|
||||
line-height: 35px;
|
||||
color: #100796;
|
||||
margin-right:10px;
|
||||
padding: 12px;
|
||||
background-color: #fff;;
|
||||
position:relative;
|
||||
border-radius: 50%;
|
||||
min-width: 59px;
|
||||
min-height: 59px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scoreboard .total-credentials > span:after {
|
||||
background: linear-gradient(180deg, #2E29FC 0%, rgba(0, 189, 157, 0.3) 100%),
|
||||
linear-gradient(0deg, #FFFFFF, #FFFFFF);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
height: calc(100% + 4px);
|
||||
left: -2px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: calc(100% + 4px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.scoreboard hr {
|
||||
margin:20px 0;
|
||||
}
|
||||
|
||||
.overview-title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
margin:32px 0;
|
||||
}
|
||||
|
||||
.complete-learning-paths-title {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.scoreboard .lp-info {
|
||||
display:flex;
|
||||
font-weight:600;
|
||||
font-size:14px;
|
||||
justify-content:space-between;
|
||||
margin-bottom:12px;
|
||||
color:#333132;
|
||||
}
|
||||
|
||||
.scoreboard .lp-progress {
|
||||
background-color:#E2E5FF;
|
||||
height:4px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.scoreboard .lp-progress-percent {
|
||||
margin-top:12px;
|
||||
color:#A4A1A2;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lp-progress-gain {
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
background-color: #2D29FC !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,5 @@
|
||||
{% if learning_path.new_content_available? %}
|
||||
{% include "learning_path_new_content_banner" %}
|
||||
{% else %}
|
||||
{% include "learning_path_completed_banner" %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
{% if learning_path.has_certificate? %}
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-certificate-link"
|
||||
href="{{ learning_path.certificate_link }}"
|
||||
>
|
||||
<div class="np-learning-path-certificate">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-certificate np-learning-path-certificate--inactive">
|
||||
{% include "learning_path_certificate_content" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-learning-path-certificate-content">
|
||||
<div class="np-learning-path-certificate-avatar" role="img">
|
||||
<i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
|
||||
<h5 class="np-learning-path-certificate-avatar-title">
|
||||
{% t .avatar_title %}
|
||||
</h5>
|
||||
</div>
|
||||
<h4 class="np-learning-path-certificate-name">
|
||||
{{ learning_path.certificate_name }}
|
||||
</h4>
|
||||
{% if learning_path.certificate_completed? %}
|
||||
<time
|
||||
class="np-learning-path-certificate-issue-date"
|
||||
datetime="{{ learning_path.certificate_issue_date }}"
|
||||
>
|
||||
{{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
|
||||
</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-learning-path-completed-banner np-learning-path-banner">
|
||||
<img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
|
||||
{% endif %}
|
||||
<a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,56 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,26 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="np-resource-header np-card-padding-vertical">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-new-content-banner np-learning-path-banner">
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "learning_path_certificate" %}
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,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,200 @@
|
||||
{% assign completed_lps = 0 %}
|
||||
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.completed? %}
|
||||
{% assign completed_lps = completed_lps | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if completed_lps > 0 %}
|
||||
<div class="subject-mattr-expert-section">
|
||||
<div class="section-header">
|
||||
<div>
|
||||
<div class="heading">Congrats {{current_person.first_name}}! 🎉</div>
|
||||
<div class="subheading">You are MATTR Subject Experts in -</div>
|
||||
</div>
|
||||
<nav class="pagination-container">
|
||||
<div class="pagination-button" id="prev-button" title="Previous page" aria-label="Previous page">
|
||||
<i class="fal fa-arrow-left"></i>
|
||||
</div>
|
||||
<div class="pagination-button" id="next-button" title="Next page" aria-label="Next page">
|
||||
<i class="fal fa-arrow-right"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="lp-badges-section row" id="paginated-list">
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.completed? %}
|
||||
<div class="col-xs-12 col-sm-6 completed-badge-col">
|
||||
<div class="completed-lp-badge">
|
||||
<div class="completed-lp-badge-wrapper">
|
||||
<div class="lp-badge-name">{{learning_path.name}}</div>
|
||||
<div class="lp-badge-description">{{learning_path.description}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const paginatedList = document.getElementById("paginated-list");
|
||||
const listItems = paginatedList.querySelectorAll(".completed-badge-col");
|
||||
const nextButton = document.getElementById("next-button");
|
||||
const prevButton = document.getElementById("prev-button");
|
||||
|
||||
const paginationLimit = 4;
|
||||
const pageCount = Math.ceil(listItems.length / paginationLimit);
|
||||
let currentPage;
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
setCurrentPage(1);
|
||||
|
||||
prevButton.addEventListener("click", () => {
|
||||
setCurrentPage(currentPage - 1);
|
||||
});
|
||||
nextButton.addEventListener("click", () => {
|
||||
setCurrentPage(currentPage + 1);
|
||||
});
|
||||
});
|
||||
|
||||
const setCurrentPage = (pageNum) => {
|
||||
currentPage = pageNum;
|
||||
handlePageButtonsStatus();
|
||||
|
||||
const prevRange = (pageNum - 1) * paginationLimit;
|
||||
const currRange = pageNum * paginationLimit;
|
||||
listItems.forEach((item, index) => {
|
||||
item.classList.add("hidden");
|
||||
if (index >= prevRange && index < currRange) {
|
||||
item.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const disableButton = (button) => {
|
||||
button.classList.add("disabled");
|
||||
button.setAttribute("disabled", true);
|
||||
};
|
||||
|
||||
const enableButton = (button) => {
|
||||
button.classList.remove("disabled");
|
||||
button.removeAttribute("disabled");
|
||||
};
|
||||
|
||||
const handlePageButtonsStatus = () => {
|
||||
if (currentPage === 1) {
|
||||
disableButton(prevButton);
|
||||
} else {
|
||||
enableButton(prevButton);
|
||||
}
|
||||
if (pageCount === currentPage) {
|
||||
disableButton(nextButton);
|
||||
} else {
|
||||
enableButton(nextButton);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.subject-mattr-expert-section { padding: 40px 0 0; }
|
||||
|
||||
.subject-mattr-expert-section .section-header {
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.subject-mattr-expert-section .heading {
|
||||
font-size:26px;
|
||||
line-height:32px;
|
||||
font-weight:700;
|
||||
margin-bottom:8px;
|
||||
}
|
||||
|
||||
.completed-badge-col {
|
||||
margin-bottom:24px;
|
||||
}
|
||||
|
||||
.completed-badge-col.hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.completed-lp-badge {
|
||||
background: linear-gradient(100.62deg, #2E29FC 42.1%, rgba(46, 41, 252, 0) 100%),
|
||||
linear-gradient(0deg, #FFFFFF, #FFFFFF);
|
||||
box-shadow: 0px 6px 30px 0px #100F460D;
|
||||
padding: 2px;
|
||||
min-height:130px;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.completed-lp-badge-wrapper {
|
||||
background-color:#fff;
|
||||
padding:32px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='478' height='190' viewBox='0 0 478 190' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_7146_120216)'%3E%3Cg clip-path='url(%23clip0_7146_120216)'%3E%3Crect x='30' y='24' width='418' height='130' fill='white'/%3E%3Cpath d='M395.414 95.2845L323.906 24V178.922V179H353.203V94.6025L395.414 136.685L437.609 94.6025V179H466.906V178.922V24L395.414 95.2845Z' fill='%23FAFAFA'/%3E%3Cpath d='M408.262 148.464V101.857H440.405V148.464L424.333 132.928L408.262 148.464Z' fill='%2318D8AD'/%3E%3Cg style='mix-blend-mode:multiply'%3E%3Cpath d='M395.406 132.393V132.36V89L423.265 118.78L437.192 103.89' stroke='%23009C8A' stroke-width='6.42857'/%3E%3C/g%3E%3C/g%3E%3Crect x='31' y='25' width='416' height='128' stroke='url(%23paint0_linear_7146_120216)' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
|
||||
background-size: 90% auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: calc(100% + 31px) calc(100% + 34px);
|
||||
flex:2;
|
||||
}
|
||||
|
||||
.lp-badge-name {
|
||||
font-size:20px;
|
||||
line-height:normal;
|
||||
font-weight:600;
|
||||
margin-bottom:8px;
|
||||
max-width:75%;
|
||||
}
|
||||
|
||||
.lp-badge-description {
|
||||
font-size:12px;
|
||||
line-height:14px;
|
||||
font-weight:500;
|
||||
color: #888486;
|
||||
max-width:75%;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination-button{
|
||||
font-size: 16px;
|
||||
background-color: transparent;
|
||||
margin-left:5px;
|
||||
cursor: pointer;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border: 0.5px solid #242424;
|
||||
color:#242424;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-button.disabled {
|
||||
border: 0.5px solid #D9D9D9;
|
||||
color:#d9d9d9;
|
||||
}
|
||||
|
||||
.pagination-button:not(.disabled):hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.subject-mattr-expert-section {
|
||||
padding: 80px 0 0;
|
||||
}
|
||||
|
||||
.subject-mattr-expert-section .section-header {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -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 %}
|
||||
@ -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>
|
||||
@ -0,0 +1,23 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="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" %}
|
||||
@ -0,0 +1,431 @@
|
||||
<script>
|
||||
if (window.location.hash.includes("reroute")) {
|
||||
window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")
|
||||
}
|
||||
</script>
|
||||
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
|
||||
{% include "header" %}
|
||||
{% include "course_header" %}
|
||||
<main class="np-main np-max-width">
|
||||
<div class="course-overview-page" id="course-desktop">
|
||||
<div class="course-card-container">
|
||||
<div class="course-content-container">
|
||||
{% if course.enrolled? %}
|
||||
{% if course.properties.talent_lms_course == true and current_person.properties.talent_lms_learner == true %}
|
||||
<div class="info-box general">
|
||||
<p><strong>You have previously completed this module on TalentLMS</strong><br>Feel free to re-visit this course here on the Knowledge, however any course progression or quiz results from TalentLMS have not and will not be migrated over.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="course-description-container">
|
||||
<div class="card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-divider"></div>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="np-card-content-divider"></div>
|
||||
|
||||
<div class="course-attributes-container">
|
||||
<div class="attribute audience">
|
||||
<div class="text">Course level:</div>
|
||||
<div class="properties">
|
||||
<div class="course-overview-properties">
|
||||
{{course.properties.experience}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute roles">
|
||||
<div class="text">Category:</div>
|
||||
<div class="properties">
|
||||
{% if course.categories.any? %}
|
||||
{% for category in course.categories %}
|
||||
<div class="course-overview-properties">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute content-type">
|
||||
<div class="text">Content type:</div>
|
||||
<div class="properties">
|
||||
<div class="course-overview-properties">
|
||||
{{course.properties.content_type}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="attribute data-classification">
|
||||
<div class="text">Data classification:</div>
|
||||
<div class="properties">
|
||||
<div class="course-overview-properties">
|
||||
{{course.properties.data_classification}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign pre_requisite = course.properties.pre_requisite | upcase %}
|
||||
{% unless pre_requisite == "NONE" %}
|
||||
<div class="info-box course">
|
||||
<div class="intro"><strong>Pre-requisite:</strong> Complete these Knowledge modules before continuing</div>
|
||||
<div class="courses-wrapper">
|
||||
{% for catalog_course in catalog_courses %}
|
||||
{% if course.properties.pre_requisite contains catalog_course.id %}
|
||||
<a href="/app/courses/{{catalog_course.id}}">
|
||||
{% assign img_cropped = catalog_course.image_url | replace: '/resize=width:820,height:500', '/resize=width:140,height:140' %}
|
||||
<img src="{{ img_cropped }}" />
|
||||
<div>
|
||||
<div class="title">{{catalog_course.name}}</div>
|
||||
<div class="subtitle">{{course.short_description}}</div>
|
||||
<div class="level">{{course.properties.experience}}</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
{% unless course.promo_video_embed_url == "" %}
|
||||
<div class="video-wrapper">
|
||||
<div class="course-video-container">
|
||||
{{course.promo_video_embed_url}}
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
<div class="course-desktop-button">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
const defaultPageTitle = document.title
|
||||
const courseName = '{{course.name}}'
|
||||
const courseExperience = '{{course.properties.experience}}'
|
||||
document.title = `${courseName} (${courseExperience}) | ${defaultPageTitle}`
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.course-content-container {
|
||||
border: 1px solid #EBEAEB;
|
||||
border-radius: 4px;
|
||||
padding: 24px 16px;
|
||||
max-width: 830px;
|
||||
margin: 40px 24px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.course-card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
padding-bottom:64px;
|
||||
}
|
||||
.course-overview-btn-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
max-width:780px;
|
||||
width:100%;
|
||||
padding: 0 24px;
|
||||
margin:0 auto 32px;
|
||||
}
|
||||
|
||||
.course-video-container {
|
||||
max-width: 780px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
.course-video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.properties {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.attribute {
|
||||
display: flex;
|
||||
margin: 0 0 24px;
|
||||
align-items: center;
|
||||
}
|
||||
.course-overview-properties {
|
||||
padding: 6px 12px;
|
||||
color: #1B13C9;
|
||||
background: #EFF8FA;
|
||||
border: 1px solid #1B13C9;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
border-radius: 18px;
|
||||
margin: 4px 8px 4px 0;
|
||||
}
|
||||
|
||||
.attribute.roles,
|
||||
.attribute.instructors {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.attribute.roles .text {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.card-heading {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
color: #333132;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card-text {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 160%;
|
||||
color: #333132;
|
||||
}
|
||||
.attribute .text {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #333132;
|
||||
margin-right:8px;
|
||||
}
|
||||
|
||||
.np-content-instructors-content-item {
|
||||
margin-top: 8px;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-content-instructors-content-image {
|
||||
width:70px;
|
||||
height:70px;
|
||||
}
|
||||
|
||||
.np-content-instructors-content-name {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
color: #333132;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.np-content-instructors-content-info {
|
||||
text-transform: uppercase;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
padding: 20px 20px 5px 64px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.info-box:after {
|
||||
content:"";
|
||||
position:absolute;
|
||||
width:24px;
|
||||
height:24px;
|
||||
top:20px;
|
||||
left:20px;
|
||||
background-size:contain;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.info-box.general,
|
||||
.info-box.people,
|
||||
.info-box.glossary,
|
||||
.info-box.alert {
|
||||
background: #f0f0ff;
|
||||
border-left: 4px solid #2d29fc;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.info-box.people {
|
||||
background: #ead9e3;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-box.glossary {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.info-box.alert {
|
||||
background: #fff0f0;
|
||||
border-left: 4px solid #ff2a26;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
.info-box.general:after {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.info-box.people:after {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.info-box.glossary:after {
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.info-box.alert:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.info-box.course {
|
||||
background-color:#F5F6FF;
|
||||
border-left:4px solid #2E29FC;
|
||||
}
|
||||
|
||||
.info-box.course:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.info-box.course .intro {
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.info-box.course a {
|
||||
color:#333132;
|
||||
background-color:#fff;
|
||||
padding: 15px;
|
||||
display:flex;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 150%;
|
||||
margin-bottom:10px;
|
||||
width:100%;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.info-box.course a:after {
|
||||
content: "";
|
||||
position:absolute;
|
||||
width:24px;
|
||||
height:24px;
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
|
||||
background-size:contain;
|
||||
background-position:center;
|
||||
right:15px;
|
||||
bottom:15px;
|
||||
}
|
||||
|
||||
.info-box.course .courses-wrapper {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.info-box.course img {
|
||||
width:140px;
|
||||
margin-right:20px;
|
||||
}
|
||||
|
||||
.info-box.course a > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-box.course .title {
|
||||
color: #242424;
|
||||
font-size: 18px;
|
||||
line-height:normal;
|
||||
font-weight: 600;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.info-box.course .subtitle {
|
||||
color: #6B686A;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.info-box.course .level {
|
||||
color: #2E29FC;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-top:auto;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.course-card-container {
|
||||
margin:0 24px;
|
||||
}
|
||||
|
||||
.course-content-container {
|
||||
padding: 32px 24px;
|
||||
margin: 64px auto 32px;
|
||||
}
|
||||
|
||||
.attribute.roles,
|
||||
.attribute.pre-req,
|
||||
.attribute.instructors {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.attribute.roles .text {
|
||||
margin-bottom:0;
|
||||
}
|
||||
.video-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-box.course .courses-wrapper {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.info-box.course a {
|
||||
margin: 0 10px 20px;
|
||||
width:calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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,32 @@
|
||||
<script>
|
||||
window.location.replace("/app")
|
||||
</script>
|
||||
|
||||
{% comment %} {% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t shared.learning_paths %}
|
||||
</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" %} {% endcomment %}
|
||||
@ -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>
|
||||
@ -0,0 +1,227 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="homepage-header np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search" style="position:relative;" class="homepage-form">
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="np-homepage-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="What do you want to learn?"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="user-intro np-flex">
|
||||
<div class="profile-circle">
|
||||
{{current_person.first_name | slice: 0}}{{current_person.last_name | slice: 0}}
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
Welcome back,<br> <span>{{current_person.first_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-main-content np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-4 col-lg-3">
|
||||
<div class="homepage-section-header">MATTR BADGES</div>
|
||||
{% include "homepage_scoreboard" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 col-lg-9">
|
||||
<div class="homepage-section-header">COURSES</div>
|
||||
{% include 'homepage_categories' %}
|
||||
{% include 'homepage_list_headers' %}
|
||||
{% include 'homepage_courses' %}
|
||||
<div class="accordion-catalog-courses" id="catalog-accordion">
|
||||
<div class="accordion-label">
|
||||
Show Optional Courses
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'homepage_catalog_courses' %}
|
||||
{% include "footer" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var acc = document.getElementById("catalog-accordion");
|
||||
var i;
|
||||
|
||||
|
||||
acc.addEventListener("click", function() {
|
||||
/* Toggle between adding and removing the "active" class,
|
||||
to highlight the button that controls the panel */
|
||||
this.classList.toggle("active");
|
||||
|
||||
/* Toggle between hiding and showing the active panel */
|
||||
var panel = document.getElementById("accordion-panel");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
acc.querySelector(".accordion-label").innerHTML = "Show Optional Courses <i class='fa fa-chevron-down'></i>"
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
acc.querySelector(".accordion-label").innerHTML = "Hide Optional Courses <i class='fa fa-chevron-up'></i>"
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.homepage-section-header {
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #6B686A;
|
||||
margin-bottom: 23px;
|
||||
}
|
||||
|
||||
.homepage-header {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.homepage-form {
|
||||
max-width:317px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-homepage-search-input {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
height: 44px;
|
||||
outline: none;
|
||||
padding: 14px 100px 14px 44px;
|
||||
width: 100%;
|
||||
background-color:#FAFAFA;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#333132;
|
||||
left: 14px;
|
||||
top: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-intro {
|
||||
padding: 32px 0;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.profile-circle {
|
||||
background-color: #EAD9E3;
|
||||
width:64px;
|
||||
height:64px;
|
||||
min-width:64px;
|
||||
border-radius:50%;
|
||||
font-weight: 600;
|
||||
font-size: 25.6px;
|
||||
line-height: 150%;
|
||||
color: #333132;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right:32px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-weight:600;
|
||||
font-size:24px;
|
||||
line-height:28px;
|
||||
}
|
||||
|
||||
.intro-text > span {
|
||||
color: #2D29FC;
|
||||
}
|
||||
|
||||
.homepage-main-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses {
|
||||
color: #333132;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
position:relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin:32px 0;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses:before {
|
||||
content: "";
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:0;
|
||||
transform:translateY(-50%);
|
||||
background: #DCDADB;
|
||||
height:4px;
|
||||
color: #333132;
|
||||
cursor: pointer;
|
||||
width:100%;
|
||||
z-index:-1;
|
||||
}
|
||||
|
||||
.accordion-label {
|
||||
background: #DCDADB;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
transition: 0.2s;
|
||||
padding:6px 12px;
|
||||
border-radius:30px;
|
||||
}
|
||||
|
||||
.accordion-catalog-courses.active .accordion-label {
|
||||
background-color: #6B686A;
|
||||
color:#fff
|
||||
}
|
||||
|
||||
.accordion-catalog-courses.active:before {
|
||||
background-color: #6B686A;
|
||||
}
|
||||
|
||||
#accordion-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
margin-bottom:50px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.homepage-header {
|
||||
padding: 80px 64px;
|
||||
}
|
||||
|
||||
.homepage-header > .row {
|
||||
flex-direction:row-reverse;
|
||||
}
|
||||
|
||||
.homepage-form {
|
||||
margin:0 0 0 auto;
|
||||
}
|
||||
|
||||
.user-intro {
|
||||
padding: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size:40px;
|
||||
line-height:47px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
const lpTitle = '{{learning_path.name | downcase | replace: " ", "-"}}'
|
||||
window.location.replace(`/app/learning_paths#${lpTitle}`)
|
||||
</script>
|
||||
|
||||
{% comment %} {% 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" %} {% endcomment %}
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
const lpTitle = '{{learning_path.name | downcase | replace: " ", "-"}}'
|
||||
window.location.replace(`/app/learning_paths#${lpTitle}`)
|
||||
</script>
|
||||
|
||||
{% comment %} {% 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" %} {% endcomment %}
|
||||
@ -0,0 +1,309 @@
|
||||
{% include "header" %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<main class="np-main np-learning-paths np-subpage-container np-max-width">
|
||||
<div class="lp-hero">
|
||||
<div class="lp-hero-title">Earn <span style="color:#2E29FC;">MATTR Subject Experts</span> badges as you learn</div>
|
||||
<div class="lp-hero-subtitle">Get accredited</div>
|
||||
</div>
|
||||
<div class="np-learning-paths-main">
|
||||
{% if learning_paths.enrolled.any? %}
|
||||
{% include "learning_paths_subject_mattr_experts", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
|
||||
<div class="np-resource-title">
|
||||
Track your progress
|
||||
</div>
|
||||
|
||||
<div class="status-key">
|
||||
<div class="key-title">Course learning status: </div>
|
||||
<div class="key">
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_7715_113257)">
|
||||
<circle cx="26" cy="26" r="10" fill="#00BF9F"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3589 23.6141L24.6605 30.3124L20.957 26.6088L22.1356 25.4303L24.6606 27.9554L30.1804 22.4355L31.3589 23.6141Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_7715_113257" x="0" y="0" width="52" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7715_113257"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7715_113257" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
Completed
|
||||
</div>
|
||||
<div class="key">
|
||||
<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_7870_113735)">
|
||||
<path d="M33.0718 18.9329C29.1664 15.0276 22.8344 15.0276 18.929 18.9329C15.0237 22.8383 15.0237 29.1703 18.929 33.0757C22.8344 36.981 29.1664 36.981 33.0718 33.0757C36.9771 29.1703 36.9771 22.8383 33.0718 18.9329Z" fill="#E26F0F"/>
|
||||
</g>
|
||||
<path d="M24.766 17.8281C23.5396 18.0108 22.3915 18.4631 21.3477 19.1676L22.3306 20.6028C23.1482 20.0461 24.0528 19.6895 25.027 19.5503L24.766 17.8281ZM27.5319 17.8803L27.2101 19.5851C28.1669 19.7678 29.0889 20.1679 29.8717 20.7419L30.9067 19.3416C29.9152 18.6109 28.7497 18.1065 27.5319 17.8803ZM19.3472 21.0898C18.6166 22.0814 18.1034 23.2469 17.8773 24.4646L19.5821 24.7864C19.7647 23.8297 20.1648 22.9077 20.7476 22.1249L19.3472 21.0898ZM32.2027 23.9601C32.3158 24.3081 32.3941 24.6647 32.455 25.0213H32.4723C32.4202 24.6647 32.3332 24.3081 32.2027 23.9601ZM19.5386 26.9783L17.8164 27.2305C17.9991 28.4569 18.4514 29.6138 19.1211 30.5879L19.1559 30.6488L20.591 29.6746C20.0344 28.8483 19.6865 27.9438 19.5386 26.9783Z" fill="white"/>
|
||||
<path d="M34.2815 26.0306C34.2815 28.4573 33.2204 30.858 31.1851 32.4845C29.6716 33.6935 27.8538 34.3023 26.0272 34.3023C24.8704 34.3023 23.7136 34.0588 22.635 33.563C22.5655 33.5282 22.4872 33.4934 22.4176 33.4586C22.261 33.389 22.1045 33.3108 21.9479 33.2151C21.7653 33.1107 21.5826 33.0063 21.4086 32.8846C21.2956 32.815 21.1825 32.7367 21.0781 32.6584L22.1132 31.2581C22.2002 31.3189 22.2871 31.3885 22.3828 31.4407C22.4176 31.4668 22.4611 31.4929 22.5046 31.519C22.6003 31.5886 22.7046 31.6495 22.809 31.7017C22.9917 31.806 23.183 31.9017 23.3744 31.9887C23.3918 31.9974 23.4179 32.0061 23.4353 32.0148C23.5918 32.0757 23.7484 32.1452 23.9049 32.1974C24.0441 32.2496 24.1833 32.2931 24.3311 32.3366C26.2969 32.8672 28.4365 32.4584 30.0978 31.1189C31.994 29.6142 32.8203 27.257 32.4724 25.0217C32.4202 24.6651 32.3332 24.3084 32.2027 23.9605C32.1679 23.8475 32.1244 23.7344 32.081 23.6213C32.0462 23.5082 32.0027 23.4039 31.9418 23.2908C31.8896 23.1777 31.8374 23.0733 31.7852 22.969C31.733 22.8733 31.6808 22.7863 31.6287 22.6993C31.5591 22.5776 31.4808 22.4645 31.4025 22.3427L32.4985 21.5773L32.8464 21.3599C32.8464 21.3599 32.8725 21.3947 32.8812 21.4121C32.9507 21.5164 33.0203 21.6295 33.0899 21.7426C33.1682 21.873 33.2378 22.0035 33.3074 22.134C33.3769 22.2644 33.4465 22.3949 33.5074 22.5341C33.5683 22.6645 33.6292 22.8037 33.6814 22.9429C34.0815 23.9344 34.2815 24.9869 34.2815 26.0306Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_7870_113735" x="0" y="0.00390625" width="52" height="52.001" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7870_113735"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7870_113735" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
In progress
|
||||
</div>
|
||||
<div class="key key-completed">
|
||||
<svg width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_7870_113740)">
|
||||
<path d="M26.0026 36.0047C31.5268 36.0047 36.0051 31.5263 36.0051 26.0021C36.0051 20.4778 31.5268 15.9995 26.0026 15.9995C20.4783 15.9995 16 20.4778 16 26.0021C16 31.5263 20.4783 36.0047 26.0026 36.0047Z" fill="#959093"/>
|
||||
</g>
|
||||
<path d="M27.2131 34.1785L26.9609 32.4563C27.9351 32.3085 28.8483 31.9605 29.6659 31.4039L30.6836 32.8129L30.6401 32.839C29.6051 33.5436 28.4569 33.9872 27.2218 34.1698L27.2131 34.1785ZM24.4472 34.1176C23.2295 33.8828 22.064 33.3783 21.0811 32.639L22.1162 31.2386C22.899 31.8127 23.821 32.2215 24.7777 32.4041L24.4472 34.1089V34.1176ZM32.6667 30.8907L31.2664 29.8644C31.8404 29.0815 32.2405 28.1596 32.4232 27.2028L34.1367 27.5246C33.9105 28.7423 33.406 29.9078 32.6754 30.8994L32.6667 30.8907ZM19.1589 30.6385C18.4631 29.6034 18.0108 28.4466 17.8281 27.2202L19.5503 26.968C19.6982 27.9421 20.0461 28.8467 20.6028 29.6643L19.1676 30.6385H19.1589ZM32.458 25.0109C32.3101 24.0455 31.9535 23.1409 31.4055 22.332L32.8233 21.323L32.8494 21.3665C33.5452 22.3929 33.9975 23.5323 34.1802 24.7587L32.458 25.0196V25.0109ZM19.5851 24.7761L17.8803 24.4543C18.1152 23.2366 18.6196 22.071 19.3503 21.0795L20.7506 22.1145C20.1766 22.8973 19.7678 23.8193 19.5938 24.7761H19.5851ZM29.8747 20.7316C29.0919 20.1575 28.1699 19.7574 27.2131 19.5748L27.535 17.87C28.7527 18.0961 29.9182 18.6093 30.9097 19.3399L29.8747 20.7403V20.7316ZM22.3336 20.5837L21.3508 19.1486C22.3945 18.444 23.5426 17.9917 24.769 17.8091L25.03 19.5313C24.0645 19.6791 23.1599 20.027 22.3423 20.5837H22.3336Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_7870_113740" x="0" y="-0.000488281" width="52.0039" height="52.0054" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="8"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7870_113740"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7870_113740" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
Not yet started
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
|
||||
{% comment %} {% if learning_paths.available.any? %}
|
||||
{% assign available_lps = learning_paths.available %}
|
||||
|
||||
{% assign unenrolled_lp_count = 0 %}
|
||||
{% assign available_learning_paths = learning_paths.available %}
|
||||
|
||||
{% for available_lp in available_learning_paths %}
|
||||
{% unless available_lp.enrolled? %}
|
||||
{% assign unenrolled_lp_count = unenrolled_lp_count | plus: 1 %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
|
||||
{% if unenrolled_lp_count > 0 %}
|
||||
<div class="other-learning-paths" class="example-dialog-trigger" data-toggle-class-on-target data-toggle-target="#unenrolledLps" data-toggle-escape data-toggle-modal>
|
||||
<i class="fal fa-plus"></i>
|
||||
Enroll for more accreditations
|
||||
</div>
|
||||
<div
|
||||
class="example-dialog"
|
||||
id="unenrolledLps"
|
||||
role="dialog"
|
||||
aria-labelledby="dialogTitle"
|
||||
aria-describedby="dialogContent"
|
||||
aria-hidden="true">
|
||||
<section class="example-dialog-container">
|
||||
<i class="fal fa-times" data-toggle-trigger-off></i>
|
||||
<div id="dialogTitle" class="example-dialog-header">
|
||||
Available Accreditations
|
||||
</div>
|
||||
<div id="dialogContent" class="example-dialog-content">
|
||||
{% for available_lp in available_learning_paths %}
|
||||
{% unless available_lp.enrolled? %}
|
||||
{% include "cards_learning_path_unenrolled" with available_lp %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% include "footer" %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
document.querySelectorAll(".lp-card-content-wrapper").forEach((lp) => {
|
||||
var slider = tns({
|
||||
container: lp,
|
||||
items: 2,
|
||||
slideBy: 'page',
|
||||
controls: false,
|
||||
autoplay: false,
|
||||
edgePadding: 40,
|
||||
swipeAngle: false,
|
||||
arrowKeys: false,
|
||||
mouseDrag: true,
|
||||
fixedWidth: 130,
|
||||
gutter: 16,
|
||||
loop:false,
|
||||
responsive: {
|
||||
500: {
|
||||
items: 3,
|
||||
},
|
||||
768: {
|
||||
items: 4
|
||||
},
|
||||
992: {
|
||||
items: 5
|
||||
},
|
||||
1170: {
|
||||
items: 6
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
if (window.location.hash) {
|
||||
const lpHeadings = document.querySelectorAll(".learning-path-heading")
|
||||
|
||||
lpHeadings.forEach((heading) => {
|
||||
if (heading.getAttribute("data-lp") == window.location.hash.replace("#", "")) {
|
||||
window.scrollTo({
|
||||
behavior: 'smooth',
|
||||
top:
|
||||
heading.getBoundingClientRect().top -
|
||||
document.body.getBoundingClientRect().top -
|
||||
100,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelectorAll(".learning-path-card").forEach((lp) => {
|
||||
const lpButton = lp.querySelector(".lp-button")
|
||||
|
||||
if (lpButton.innerText == "Start Path") {
|
||||
lpButton.innerText = "Unlock Path"
|
||||
lp.querySelector('.lp-button-wrapper').style.display = "flex"
|
||||
}
|
||||
|
||||
if (lpButton.innerText == "Start New Content") {
|
||||
lp.querySelector('.lp-button-wrapper').style.display = "flex"
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lp-hero {
|
||||
background-color:#F5F6FF;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.np-learning-paths.np-subpage-container {
|
||||
background-color:#fff;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.lp-hero-title {
|
||||
font-size:40px;
|
||||
font-weight:600;
|
||||
line-height:48px;
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.lp-hero-subtitle {
|
||||
font-size:20px;
|
||||
line-height:28px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.np-learning-paths-main {
|
||||
max-width:992px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-resource-title {
|
||||
font-size: 26px;
|
||||
line-height: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32px;
|
||||
padding-top:40px;
|
||||
text-transform:unset;
|
||||
}
|
||||
|
||||
.status-key {
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #EBEAEB;
|
||||
border-radius: 4px;
|
||||
padding:16px;
|
||||
align-items:center;
|
||||
font-size:14px;
|
||||
line-height:16px;
|
||||
font-weight:600;
|
||||
margin-bottom:32px;
|
||||
}
|
||||
|
||||
.status-key .key-title {
|
||||
margin-right:24px;
|
||||
}
|
||||
|
||||
.status-key .key {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-transform:uppercase;
|
||||
margin-right:24px;
|
||||
font-size:12px;
|
||||
line-height:14px;
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
.other-learning-paths {
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #EBEAEB;
|
||||
border-radius: 4px;
|
||||
padding: 32px 16px;
|
||||
cursor:pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size:20px;
|
||||
line-height:23px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.other-learning-paths .fa-plus {
|
||||
font-size: 40px;
|
||||
color: #B8B8B8;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-learning-paths.np-subpage-container {
|
||||
padding: 64px;
|
||||
}
|
||||
|
||||
.np-resource-title {
|
||||
padding-top:80px;
|
||||
}
|
||||
|
||||
.lp-hero {
|
||||
padding: 80px;
|
||||
}
|
||||
|
||||
.lp-hero-title {
|
||||
font-size:48px;
|
||||
line-height:52px;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.status-key {
|
||||
display:flex;
|
||||
padding:0 16px;
|
||||
}
|
||||
|
||||
.status-key .key {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,53 @@
|
||||
<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 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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user