SPS' V3 templates. Updated Harri's templates too to update the workato endpoints.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p class="avatar-description">{% t .description %}</p>
|
||||
<p class="avatar-requirements">{% 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 gravatar">
|
||||
{% 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 custom">
|
||||
{% 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,93 @@
|
||||
<div class="np-resource-title my-profile">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label email" 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 first-name" 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 last-name" 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 display-name" 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>
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label password" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label password-confirmation" for="{{version}}_learner_password_confirmation">
|
||||
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 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 %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,23 @@
|
||||
{% capture settings_path %}{% route account %}{% endcapture %}
|
||||
{% capture transcript_path %}{% route transcript %}{% endcapture %}
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<nav class="np-tabs np-account-tabs">
|
||||
<div class="np-tabs-content">
|
||||
<div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ settings_path}}">
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
|
||||
<a class="np-tab-link" href="{{ transcript_path }}">
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
<div class="np-tab-indicator np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,468 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.np-button-color.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big,
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "إعدادات الملف الشخصي";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "خروج";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "استخدم Gravatar ™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "تحميل صورة مخصصة";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "حمل الصورة";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "تضيف إضافة صورة لمسة شخصية إلى ملفك الشخصي. تُستخدم صورة ملفك الشخصي كرمز لحسابك لتمثيلك. يتم عرضها أيضًا في أماكن أخرى مختلفة بجوار اسمك.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "للحصول على أفضل النتائج ، يجب أن يكون حجم صورة ملفك الشخصي 400 × 400 بكسل على الأقل ، وبحد أقصى 2 ميجا بايت. يجب أن يكون تنسيق الملف هو PNG أو JPG أو GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "احفظ الملف";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "ملفي";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "بريد الالكتروني *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "اسم *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "الكنية *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "اسم العرض";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "كلمه السر *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "تأكيد كلمة المرور *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "مسارات التعلم";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الوحدات";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الأحداث";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الصفحة الرئيسية";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الأحداث";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الوحدات";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "مسارات التعلم";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "رأي";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "المشكله! لم يتم تعيين أي مسارات تعلم لك.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "استكشف مجموعات الدورات المنسقة للحصول على تجربة تعليمية مخصصة";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "مسارات التعلم";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "لم يبدأ";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "حول مسار التعلم هذا";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "رأي";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "لم يبدأ";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "تقدم مسار التعلم";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "مكتمل";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "ليس لديك أحداث قادمة. التحقق مرة أخرى في وقت لاحق للحصول على التحديثات";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "أحداث التدريب";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "اكتشف الأحداث الشخصية وعبر الإنترنت لتحقيق أقصى قدر من التعلم";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "منقي";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "تحتاج مساعدة؟";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الصفحة الرئيسية";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الأحداث";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "مسارات التعلم";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "الوحدات";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "وحدات رائعة من راحة منزلك أو مكتبك.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "وحدة";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "تقدم الدورة";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "يكمل";
|
||||
}
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "مخطط الوحدة";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "حول الوحدة";
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
<div id="banner" class="banner np-hidden-mobile">
|
||||
<span class="banner-message">Please note that the academy will undergo an update <strong>Thursday, August 1st from 2:00 PM to 4:00PM Eastern Time</strong>. You will still be able to access the academy during this time.</span>
|
||||
<button class="close-btn" onclick="closeBanner()">X</button>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
background-color: #f2d7d9;
|
||||
color: #333;
|
||||
padding: 30px 20px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.banner-message {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function closeBanner() {
|
||||
document.getElementById('banner').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.started? %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{{ course.progress }}% <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
<div class="np-card np-card-horizontal">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-card-image-wrapper">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description}}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% comment %} <div class="np-card-content-progress np-button-color">
|
||||
{{ course.progress }}
|
||||
</div> {% endcomment %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
{% if course.properties.course_time != "none" %}
|
||||
<div class="course-time">{{course.properties.course_time}} min</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,47 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-card card-vertical np-card-new-styles" href="{{course_path}}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.started? %}
|
||||
<div class="np-card-content-progress">
|
||||
<span style="margin-bottom:-30px">{{ course.progress }}%</span> <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
{% if course.properties.course_time != "none" %}
|
||||
<div class="course-time">{{course.properties.course_time}} min</div>
|
||||
{% endif %}
|
||||
{% comment %} <a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,27 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a class="np-card card-vertical np-card-new-styles video-card" href="{{course_path}}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="img-wrapper">
|
||||
<img class="np-card-image" alt="{{ course.name }}" src="{{ course.image_url }}">
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-short-description">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if course.properties.course_length != "none" %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,108 @@
|
||||
{%comment%}{% if learning_path.progress == 0%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar red-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color red-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color red-text"%}
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar yellow-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% else %}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color green-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color green-text"%}
|
||||
{% endif %}{%endcomment%}
|
||||
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
{% if lp_progress > 0 %}
|
||||
<div class="np-card-content-progress np-button-color np-hidden-mobile">
|
||||
{{ lp_progress }}% <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color notstarted np-hidden-mobile">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{lp_progress}}%;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color notstarted">
|
||||
{% t shared.progress, count: lp_progress %}
|
||||
</div>
|
||||
<a class="np-button lp" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} <div class="learning-path-items-definition" style="display: inline-flex;">{% t .items %}</div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,112 @@
|
||||
{%comment%}{% if learning_path.progress == 0%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar red-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color red-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color red-text"%}
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar yellow-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% else %}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar"%}
|
||||
{% assign wrapperClassText = "np-card-content-progress np-button-color green-text"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color green-text"%}
|
||||
{% endif %}{%endcomment%}
|
||||
|
||||
{% comment %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
<div class="np-card np-no-horizontal-padding learning-path-new-styles">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
{% comment %} {% if lp_progress > 0 %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
<p style="margin-bottom:-25px">{{ lp_progress }}%</p>
|
||||
<p class="course-completion" style="margin-left:25px"><span>Complete</span></p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
{% comment %} <div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{lp_progress}}%;"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
{% comment %} <div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: lp_progress %}
|
||||
</div> {% endcomment %}
|
||||
<a class="np-button lp" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
{% comment %} <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i> {% endcomment %}
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} Items
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,33 @@
|
||||
<a class="np-card card-vertical np-card-new-styles" href="{% route learning_path, id: learning_path.id %}">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
src="{{ learning_path.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
{% if learning_path.started? %}
|
||||
<div class="np-card-content-progress">
|
||||
<span style="margin-bottom:-30px">{{ learning_path.progress }}%</span> <span class="course-completion">Complete</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-content-progress notstarted">
|
||||
Not started
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-length"> {{ learning_path.items.count }} Courses</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</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 | remove: "[FEATURED]" }}
|
||||
</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,41 @@
|
||||
{% assign session_id = training_event.sessions.first.id %}
|
||||
{% assign session_month = training_event.sessions.first.abbreviated_month %}
|
||||
{% assign session_day = training_event.sessions.first.day %}
|
||||
{% for session in training_event.sessions %}
|
||||
{% if session.registered? %}
|
||||
{% assign session_id = session.id %}
|
||||
{% assign session_month = session.abbreviated_month %}
|
||||
{% assign session_day = session.day %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="np-card card-training-event-horizontal">
|
||||
<div class="np-card-container">
|
||||
<div class="upcoming-date">
|
||||
{% comment %} <i class="fal fa-calendar"></i> {% endcomment %}
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ session_month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ session_day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title | remove: "[FEATURED]" }}
|
||||
</h3>
|
||||
<div class="np-card-content-time">
|
||||
{{ training_event.sessions.first.starts }} {{ training_event.sessions.first.time_zone }}
|
||||
</div>
|
||||
<div class="flex-content card-footer">
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: session_id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
{{ training_event.sessions.size }} Session{% if training_event.sessions.size > 1 %}s{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,182 @@
|
||||
{% assign role_filters = "GENERAL MANAGER, INVENTORY/GUEST SERVICES MANAGER, SCHEDULING MANAGER, SHIFT MANAGER, MANAGER TRAINEE, SUPERVISOR, ORG ADMIN/BACK OFFICE ADMIN, OWNER OPERATOR, CREW TRAINER" %}
|
||||
{% assign topic_filters = "WORKFORCE MANAGEMENT, MANAGING THE SCHEDULE, AUTO-GENERATED SCHEDULES, SCHEDULING BASICS, FAIR WORKWEEK SCHEDULING, PUBLISHING SCHEDULES, TIMECLOCKS & TIMEKEEPING, TEAM REQUESTS, LOCATING EMPLOYEES, EMPLOYEE RECORDS, PERFORMANCE REVIEWS, PROJECTING, PAYROLL & REPORTING" %}
|
||||
|
||||
<div class="catalog-filters">
|
||||
<div class="filter-wrapper">
|
||||
<i class="fa fa-chevron-left close-tray np-hidden-desktop"></i>
|
||||
<div id="clearAll">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Role</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if role_filters contains category_name_upcase %}
|
||||
<label class="checkbox-container">{{category.name}}
|
||||
<input type="checkbox" name="{{category_name_upcase}}">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Topic</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if topic_filters contains category_name_upcase %}
|
||||
<label class="checkbox-container">{{category.name}}
|
||||
<input type="checkbox" name="{{category_name_upcase}}">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Content Type</div>
|
||||
<label class="checkbox-container">Learning Gems
|
||||
<input type="checkbox" name="LEARNING GEMS">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">New Content
|
||||
<input type="checkbox" name="NEW">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Updated Content
|
||||
<input type="checkbox" name="UPDATED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Completed Content
|
||||
<input type="checkbox" name="COMPLETED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Learning Paths
|
||||
<input type="checkbox" name="LEARNING-PATH">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.catalog-filters {
|
||||
box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
|
||||
padding: 24px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 300;
|
||||
background: #fff;
|
||||
border-top-left-radius: 30px;
|
||||
border-top-right-radius: 30px;
|
||||
transform: translateX(-1000px);
|
||||
transition: all 0.3s;
|
||||
height: 60vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.catalog-filters.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.close-tray {
|
||||
color:#0088dd;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
#clearAll {
|
||||
color:#0088DD;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-group .filter-group-name {
|
||||
margin: 22px 0 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 3px solid #00E79A;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #00E79A;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.catalog-filters {
|
||||
margin-right:32px;
|
||||
padding: 20px;
|
||||
position: static;
|
||||
width: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
transform: translateX(0);
|
||||
height: auto;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,46 @@
|
||||
<div class="contact-us-block">
|
||||
<div class="contact-us-block-content">
|
||||
<div class="contact-us-block-title">Need More Help?</div>
|
||||
<div class="contact-us-block-subtitle">Contact ATOS at:
|
||||
1-800-515-3636</div>
|
||||
{% comment %}<a class="np-button contact-us-block-cta" href="tel:18005153636" target="_blank">Contact Us</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.contact-us-block {
|
||||
background-color:#f8fbff;
|
||||
padding:64px 24px;
|
||||
}
|
||||
|
||||
.contact-us-block-content {
|
||||
box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
|
||||
padding:32px 16px;
|
||||
max-width: 700px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.contact-us-block-title {
|
||||
font-weight:900;
|
||||
font-size: 18px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.contact-us-block-cta {
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.contact-us-block {
|
||||
padding:80px 24px;
|
||||
|
||||
}
|
||||
|
||||
.contact-us-block-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,11 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
{% assign activity_title = activity.title | split: ' ~ ' %}
|
||||
{% if activity_title.size > 1 %}
|
||||
<div class="activity-time">
|
||||
{{ activity_title[1] | strip }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity_title[0] | strip }}
|
||||
</span>
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
{% assign activity_title = activity.title | split: '~' %}
|
||||
{% if activity_title.size > 1 %}
|
||||
<div class="activity-time">
|
||||
{{ activity_title[1] | strip }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity_title[0] | strip }}
|
||||
</a>
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,166 @@
|
||||
{% assign outline_class = "" %}
|
||||
{% if course.name == "Getting Started with Workforce Management" or course.name == "Getting Started with Talent Acquisition" %}
|
||||
{% assign outline_class = "np-hidden" %}
|
||||
{% endif %}
|
||||
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
<div class="np-course-outline {{outline_class}}">
|
||||
<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 %}
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<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" style="color: green; font-weight: 900"></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-course-outline-content-activity-list-bar" style="background: green"></div>
|
||||
{%comment%}<div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>{%endcomment%}
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></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" style="background: red"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-faq {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.np-accordion {
|
||||
margin: 0 22px 32px;
|
||||
}
|
||||
|
||||
.accordion-btn {
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-height: 76px;
|
||||
padding: 0 18px 0 92px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fa-plus,
|
||||
.fa-minus {
|
||||
color: #000000;
|
||||
font-size: 2.5rem;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.accordion-title,
|
||||
.accordion-panel-content {
|
||||
line-height: 1.375rem;
|
||||
position: relative;
|
||||
}
|
||||
.accordion-panel-content {
|
||||
padding: 18px;
|
||||
}
|
||||
.accordion-panel-content p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.accordion-panel-content:before {
|
||||
content: "";
|
||||
width: 75px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.accordion-panel {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease-out;
|
||||
margin-left: 76px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-faqs {
|
||||
margin: 0 4.0625rem;
|
||||
}
|
||||
.np-accordion {
|
||||
margin: 0 8px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.activity-time {
|
||||
background: darkgrey;
|
||||
padding: 4px 8px;
|
||||
border-radius: 1px;
|
||||
margin-right: 10px;
|
||||
color: #1b1b1b;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.np-course-outline-content-activity-link {
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
{%comment%}{% if course.progress == 0%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar red-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color red-text"%}
|
||||
{% else if course.progress > 0 and course.progress < 100%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar yellow-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% else %}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color green-text"%}
|
||||
{% endif %}{%endcomment%}
|
||||
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
{% if courses.include_courses_to_restart? %}
|
||||
<div role="alert" class="np-alert np-alert-global np-alert-info">
|
||||
<div class="np-alert-container uk-container uk-container-center">
|
||||
{% t .content %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-course-version-outdated-popup np-popup">
|
||||
<div class="np-popup-positioner">
|
||||
<i
|
||||
class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
|
||||
data-toggle-class-on-target="np-popup-tooltip--visible"
|
||||
data-toggle-target-parent=".np-popup-tooltip"
|
||||
data-toggle-outside
|
||||
></i>
|
||||
<div
|
||||
class="np-popup-tooltip"
|
||||
role="tooltip"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<header class="np-popup-header">
|
||||
<i class="np-popup-header-icon fas fa-exclamation-circle"></i>
|
||||
<h3 class="np-popup-header-title">
|
||||
{% t .title %}
|
||||
</h3>
|
||||
</header>
|
||||
<div class="np-popup-body">
|
||||
<h4>{% t .body.header %}</h4>
|
||||
<p>{% t .body.content %}</p>
|
||||
<a
|
||||
class="np-popup-body-button"
|
||||
href="{{ path }}"
|
||||
>
|
||||
{% t .body.button %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-popup-tail"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% if courses.in_catalog.any? %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_categories = "" %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign course_categories = course_categories | append: " " | append: cat.name %}
|
||||
{% endfor %}
|
||||
{% assign progress = "NOT-STARTED" %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign progress = "IN-PROGRESS" %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign progress = "COMPLETED" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign ribbon = "" %}
|
||||
{% assign course_ribbon = course.ribbon | upcase %}
|
||||
|
||||
{% if course_ribbon contains "UPDATED" %}
|
||||
{% assign ribbon = "UPDATED" %}
|
||||
{% elsif course_ribbon contains "NEW" %}
|
||||
{% assign ribbon = "NEW" %}
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content catalog-item"
|
||||
data-filters="{{course_categories | upcase | strip}} {{progress}} {{ribbon}}"
|
||||
>
|
||||
{% include "cards_course_new_styles" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% assign lp_categories = "" %}
|
||||
{% for cat in learning_path.categories %}
|
||||
{% assign lp_categories = lp_categories | append: " " | append: cat.name %}
|
||||
{% endfor %}
|
||||
{% assign lp_progress = "NOT-STARTED" %}
|
||||
{% if learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
{% assign lp_progress = "IN-PROGRESS" %}
|
||||
{% elsif learning_path.progress == 100 %}
|
||||
{% assign lp_progress = "COMPLETED" %}
|
||||
{% endif %}
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content catalog-item"
|
||||
data-filters="LEARNING-PATH {{lp_categories | upcase | strip}}"
|
||||
>
|
||||
{% include "cards_learning_path_vertical" with learning_path %}
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -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,111 @@
|
||||
<div class="courses-wrapper filterable-section active" data-type='courses'>
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row courses-in-progress show">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">In Progress</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading progress-heading" id="courses-in-progress-header-2">My Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_in_progress_courses = 0 %}
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress < 100 %}
|
||||
<div class="row dashboard-courses-row" data-status="in-progress" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_in_progress_courses = num_of_in_progress_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_in_progress_courses > 6 %}
|
||||
<div id="showMoreInProgressCourses" class="show-more-button">View All Courses</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_in_progress_courses == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You don't have any courses currently in progress
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %} COMPLETED COURSES {% endcomment %}
|
||||
<div class="row courses-completed">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">Completed</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="courses-in-progress-header-2">Completion status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_completed_courses = 0 %}
|
||||
{% for course in enrolled_courses %}
|
||||
{% if course.progress == 100 %}
|
||||
<div class="row dashboard-courses-row" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_completed_courses = num_of_completed_courses | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_completed_courses > 6 %}
|
||||
<div class="show-more-button" id="showMoreCompletedCourses">View All Completed Courses</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_completed_courses == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You haven't completed any courses yet
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,178 @@
|
||||
{% if features.learning_paths? %}
|
||||
<div class="learning-paths-wrapper filterable-section" data-type="learning-paths">
|
||||
<div class="row lps-in-progress show">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">In Progress</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="courses-in-progress-header-2">My Progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_in_progress_lps = 0 %}
|
||||
{% for learning_path in items %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_progress < 100 %}
|
||||
<div class="row dashboard-learning-paths-row active" data-status="in-progress" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_learning_path_new_styles" with learning_path %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: lp_progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_in_progress_lps = num_of_in_progress_lps | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_in_progress_lps > 6 %}
|
||||
<div id="showMoreInProgressLps" class="show-more-button">View All Learning Paths</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_in_progress_lps == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You don't have any learning paths currently in progress.
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row lps-completed">
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-7 small-heading" id="lps-completed-header">Completed</div>
|
||||
<div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="lps-completed-header-2">Completion Status</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12">
|
||||
{% assign num_of_completed_lps = 0 %}
|
||||
{% for learning_path in items %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if lp_progress == 100 %}
|
||||
<div class="row dashboard-learning-paths-row" data-status="completed" style="display:none">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_learning_path_new_styles" with learning_path %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: lp_progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#02AB73",
|
||||
stroke_color_bg: "rgba(255, 255, 255)"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign num_of_completed_lps = num_of_completed_lps | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if num_of_completed_lps > 6 %}
|
||||
<div id="showMoreCompletedLps" class="show-more-button">View All Completed Learning Paths</div>
|
||||
{% endif %}
|
||||
|
||||
{% if num_of_completed_lps == 0 %}
|
||||
<div class="col-xs-12 dashboard-zero-state">
|
||||
{% capture message %}
|
||||
You haven't completed any learning paths
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% comment %} <script>
|
||||
console.log("working")
|
||||
console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
|
||||
window.onload = function () {
|
||||
console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
|
||||
progress_lps_size_li = $(".lps-in-progress .dashboard-learning-paths-row").length;
|
||||
completed_lps_size_li = $(".lps-completed .dashboard-learning-paths-row").length;
|
||||
j=3;
|
||||
|
||||
console.log(progress_lps_size_li)
|
||||
|
||||
$(`.lps-in-progress .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');
|
||||
$('#showMoreInProgressLps').click(function () {
|
||||
j = progress_lps_size_li
|
||||
$(`.lps-in-progress .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
|
||||
if(x == progress_lps_size_li){
|
||||
$('#showMoreInProgressLps').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$(`.lps-completed .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');
|
||||
$('#showMoreCompletedLps').click(function () {
|
||||
j = progress_lps_size_li
|
||||
$(`.lps-completed .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
|
||||
if(j == progress_lps_size_li){
|
||||
$('#showMoreCompletedLps').hide();
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
</script> {% endcomment %}
|
||||
@ -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,99 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.name !="Events" and website_navigation.name !="Learning Paths" %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="{{ website_navigation.name }} np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
Call ATOS
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="tel:18005153636"
|
||||
>
|
||||
+1 800 515 3636
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
{% if current_person.properties.language == "es" %}
|
||||
{% include "spanish_lang" %}
|
||||
{% elsif current_person.properties.language == "fr" %}
|
||||
{% include "french_lang" %}
|
||||
{% elsif current_person.properties.language == "ru" %}
|
||||
{% include "russian_lang" %}
|
||||
{% elsif current_person.properties.language == "ar" %}
|
||||
{% include "arabic_lang" %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
|
||||
.np-powered-by.show {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,498 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.np-button-color.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big,
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Paramètres de profil";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Se déconnecter";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link:after {
|
||||
/* My Dashboard */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "My Dashboard";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link:after {
|
||||
/* Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Course Catalog";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link:after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Training Events";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Utiliser Gravatar™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Télécharger une Photo Personnalisée";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Envoyer la Photo";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "L'ajout d'une photo ajoute une touche personnelle à votre profil. Votre photo de profil est utilisée comme icône de votre compte pour vous représenter. Il est également affiché à divers autres endroits à côté de votre nom.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Pour de meilleurs résultats, la taille de votre photo de profil doit être d'au moins 400 x 400 pixels et une taille maximale de 2 Mo. Le format de fichier doit être PNG, JPG ou GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Enregistrer le Profil";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mon Profil";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "E-mail *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nom de Famille *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Afficher un Nom";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mot de Passe *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Confirmation Mot de Passe *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Dommage! Aucun parcours d'apprentissage ne vous est attribué.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Explorez des ensembles de cours organisés pour une expérience d'apprentissage sur mesure";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Pas commencé";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "À propos de ce parcours d'apprentissage";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Vue";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "No empezado";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Progression du parcours d'apprentissage";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Compléter";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Vous n'avez aucun événement à venir. Vérifiez plus tard pour avoir les mises à jour.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements de formation";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Découvrez des événements en personne et en ligne pour maximiser votre apprentissage";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Filtre";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "Besoin d'aide?";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Page d'accueil";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Événements";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Parcours d'apprentissage";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Modules";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Grands modules dans le confort de votre maison ou de votre bureau.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Module";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Progression du cours";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Continuer";
|
||||
}
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Aperçu du module";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "À propos du module";
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css" integrity="sha512-eMxdaSf5XW3ZW1wZCrWItO2jZ7A9FhuZfjVdztr7ZsKNOmt6TUMTQgfpNoVRyfPE5S9BC0A4suXzsGSrAOWcoQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js" integrity="sha512-j+F4W//4Pu39at5I8HC8q2l1BNz4OF3ju39HyWeqKQagW6ww3ZF9gFcu8rzUbyTDY7gEo/vqqzGte0UPpo65QQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
|
||||
@ -0,0 +1,430 @@
|
||||
|
||||
<script>
|
||||
document.querySelector("body").classList.add("new-styles")
|
||||
</script>
|
||||
|
||||
<header class="np-header np-header-color new-header-styles">
|
||||
<div class="np-header-content np-max-width">
|
||||
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
|
||||
<li class= "np-header-desktop-nav-item videos-link">
|
||||
<a
|
||||
href="/app/dashboard"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
My Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class= "np-header-desktop-nav-item videos-link">
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
>
|
||||
Course Catalog
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% assign current_language = "English" %}
|
||||
{% if current_person.properties.language == "en" %}
|
||||
{% assign current_language = "English" %}
|
||||
{% assign current_language = "EN" %}
|
||||
{% elsif current_person.properties.language == "es" %}
|
||||
{% assign current_language = "Español" %}
|
||||
{% assign current_language = "ES" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="dropdown">
|
||||
<button onclick="myFunction()" class="dropbtn">{{current_language | upcase}}
|
||||
</button>
|
||||
<div id="myDropdown" class="dropdown-content">
|
||||
<a onclick="setLang('es')">Español</a>
|
||||
<hr class="divider">
|
||||
<a onclick="setLang('en')">English</a>
|
||||
<hr class="divider">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<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"
|
||||
>
|
||||
<i class="far fa-bars"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
{% comment %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon fa fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
|
||||
<i class="fal fa-user-circle"></i>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<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"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop new-header-styles">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<a
|
||||
href="/app/dashboard"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
My Dashboard
|
||||
</a>
|
||||
<a
|
||||
href="/app/catalog"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Catalog
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button profile-settings-link"
|
||||
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" %}
|
||||
{% if current_person.signed_in? %}
|
||||
{% assign lang = current_person.properties.language %}
|
||||
|
||||
{% case lang %}
|
||||
{% when "Spanish" %}
|
||||
{% include "spanish_lang" %}
|
||||
{% endcase %}
|
||||
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script>
|
||||
function setLang(lang) {
|
||||
var data = {
|
||||
uuid : '{{current_person.id}}',
|
||||
language : lang
|
||||
};
|
||||
$.ajax({
|
||||
type : 'POST',
|
||||
url : 'https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/language-change',
|
||||
data: JSON.stringify(data),
|
||||
success:function (data) {
|
||||
console.log(data);
|
||||
setTimeout(location.reload.bind(location), 700);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.log(error)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* When the user clicks on the button,
|
||||
toggle between hiding and showing the dropdown content */
|
||||
function myFunction() {
|
||||
document.getElementById("myDropdown").classList.toggle("show");
|
||||
}
|
||||
|
||||
// Close the dropdown if the user clicks outside of it
|
||||
window.onclick = function(event) {
|
||||
if (!event.target.matches('.dropbtn')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show')) {
|
||||
openDropdown.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/app/videos") {
|
||||
document.querySelector(".videos-link .np-header-desktop-nav-link").classList.add("np-sub-navigation-content-item-active")
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endif %}
|
||||
<style>
|
||||
|
||||
.new-header-styles.np-header {
|
||||
box-shadow: 0px 4px 4px rgb(0 0 0 / 25%), 0px 4px 4px rgb(0 0 0 / 25%);
|
||||
position:relative;
|
||||
position:fixed;
|
||||
top:0;
|
||||
z-index: 2817948196;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav {
|
||||
position:relative;
|
||||
margin-right:12px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-nav .np-header-mobile-menu-nav-button {
|
||||
color:#ffd700;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-end;
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.hr.divider {
|
||||
border-top: 4px solid black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #ffd700;
|
||||
color: black;
|
||||
padding: 13px;
|
||||
font-size: 16px;
|
||||
line-height:16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
border-radius: 7px;
|
||||
max-height: 44px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
text-align: center;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 160px;
|
||||
overflow: auto;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1000;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown a:hover {
|
||||
color: #ffd700;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {display: block;}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content {
|
||||
background:#fff;
|
||||
z-index:49;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-nav {
|
||||
padding: 12px 0 0;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button {
|
||||
border-bottom: 1px solid #000;
|
||||
box-shadow: none;
|
||||
justify-content: flex-start;
|
||||
padding: 16px;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #000F23;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button.profile-settings-link {
|
||||
border-bottom: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-mobile-menu-content-button.np-danger {
|
||||
margin: 0 0 32px;
|
||||
border: none;
|
||||
color: #48e3a0;
|
||||
font-weight: 500;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.new-styles .fa-user-circle {
|
||||
font-size:45px;
|
||||
color: #ffd700;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.new-styles .fa-user-circle {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
.np-header-logo {
|
||||
justify-content: unset;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height: 60px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
@media (max-width:1200px) {
|
||||
.np-header-logo-image {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.np-header-desktop-nav-list {
|
||||
padding-inline-start: 10px;
|
||||
}
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link:hover,
|
||||
.np-header-desktop-nav-link.np-sub-navigation-content-item-active {
|
||||
text-decoration:underline;
|
||||
color:#ffd700;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-search-input,
|
||||
.new-header-styles .np-header-search-input:focus {
|
||||
border-radius:0;
|
||||
opacity:1;
|
||||
background:#fff;
|
||||
padding: 0 40px 0 16px;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.new-header-styles .np-header-search-input:focus {
|
||||
border: 1px solid #ffd700;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#2ee3a0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-link {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</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,109 @@
|
||||
<div class="homepage-featured-section">
|
||||
<div class="row sp-between">
|
||||
<div class="col-xs-12 col-sm-5-half">
|
||||
<div class="small-heading featured-courses-heading homepage-subtitles">{{ homepage.featured_courses_headline }}</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5-half">
|
||||
<div class="small-heading featured-courses-heading homepage-subtitles np-hidden-mobile">My Achievements</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row sp-between">
|
||||
<div class="featured-courses-block col-xs-12 col-sm-5-half">
|
||||
{% assign featured_courses_count = 0 %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% if cat_name == "GOLD STAR" %}
|
||||
<div class="featured-course-col">
|
||||
{% include "cards_course_new_styles" with course %}
|
||||
</div>
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% if featured_courses_count == 0 %}
|
||||
We're sorry! There are no featured courses at this time.
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="featured-courses-block col-xs-12 col-sm-5-half np-hidden-mobile">
|
||||
{% include "homepage_featured_my_points" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.homepage-featured-section {
|
||||
margin-top: 55px;
|
||||
}
|
||||
.my-points-heading {
|
||||
margin-top:40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pop-heading {
|
||||
margin-bottom:32px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.view-all-events-heading {
|
||||
color:#0088dd;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.featured-courses-block {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
@media (min-width:768px) {
|
||||
.my-points-heading {
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.my-points-heading {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.view-all-events-heading {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.sp-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
.col-sm-5-half {
|
||||
flex-basis: 45%;
|
||||
max-width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.small-text {
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
right: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.np-card-content-footer .np-card {
|
||||
min-width: auto !important;
|
||||
}
|
||||
.np-card-content-footer {
|
||||
align-items: center;
|
||||
}
|
||||
.np-card-content-footer .np-course-version-outdated-popup {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,98 @@
|
||||
<div class="my-points-and-gems-container">
|
||||
<div class="my-points-block">
|
||||
<div class="points-container">
|
||||
|
||||
{% assign current_points = current_person.properties.points %}
|
||||
{% if current_points >= 500 and current_points < 1000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152515_McNP_Point-Systems_2.png"></img>
|
||||
{% elsif current_points >= 1000 and current_points < 1500 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152521_McNP_Point-Systems_3.png"></img>
|
||||
{% elsif current_points >= 1500 and current_points < 2000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152533_McNP_Point-Systems_4.png"></img>
|
||||
{% elsif current_points >= 2000 %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152540_McNP_Point-Systems_5.png"></img>
|
||||
{% endif %}
|
||||
<h2>{{ current_person.properties.points }}</h2>
|
||||
</div>
|
||||
<div class="small-text">
|
||||
<p>points</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-gems-block">
|
||||
{% assign topaz_count = 0 %}
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.name contains "Harri Learning Gem" %}
|
||||
{% if course.progress == 100 %}
|
||||
{% assign topaz_count = topaz_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="gem-grid-container">
|
||||
<div class="gem-container">
|
||||
{% for i in (1..topaz_count) %}
|
||||
<img class="gem-image" src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/91327518-e518-422e-9454-3aa2b1fe061a/20240820152507_McNP_Point-Systems_1.png"></img>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if topaz_count == 0 and current_points < 500 %}
|
||||
<h5>
|
||||
<a href="/app/dashboard">Get started>></a>
|
||||
</h5>
|
||||
{% endif %}
|
||||
|
||||
<div class="small-text">
|
||||
<p>gems</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.my-points-and-gems-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.my-points-block,
|
||||
.my-gems-block {
|
||||
background-color: #F8FBFF;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 36pt;
|
||||
}
|
||||
|
||||
.points-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.gem-grid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gem-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.gem-image {
|
||||
max-width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,253 @@
|
||||
{% assign num_of_getting_started_courses = 0 %}
|
||||
<div class="homepage-getting-started-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="getting-started-heading homepage-subtitles">Learning Gems 💎</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="getting-started-heading progress-heading homepage-subtitles hidden-tab">My progress</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Org Admin" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: CoreHR" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Forecasting" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Scheduling" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Timeclocks" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Payroll" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress < 100 %}
|
||||
{% if course.name contains "Harri Learning Gem: Harri Mobile" %}
|
||||
<div class="row getting-started-course-row">
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% for course in courses.enrolled %}
|
||||
{% if course.progress == 100 %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% if cat_name == "LEARNING GEMS" %}
|
||||
{% assign num_of_getting_started_courses = num_of_getting_started_courses | plus: 1 %}
|
||||
<div class="row getting-started-course-row">
|
||||
|
||||
<div class="col-xs-12 col-md-7">
|
||||
{% include "cards_course_horizontal" with course %}
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
|
||||
<div class="course-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: course.id,
|
||||
count: course.progress ,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.getting-started-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 24px;
|
||||
font-weight:500;
|
||||
margin-top:32px;
|
||||
}
|
||||
|
||||
.getting-started-course-row {
|
||||
margin-bottom:35px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.getting-started-heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 32px;
|
||||
margin-top:64px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.progress-heading, .course-progress-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% comment %}
|
||||
<script>
|
||||
console.log("num of learning gems {{num_of_getting_started_courses}}")
|
||||
if (Number("{{num_of_getting_started_courses}}") == 0) {
|
||||
document.querySelector(".homepage-getting-started-section").style.display = "none"
|
||||
}
|
||||
</script>
|
||||
{% endcomment %}
|
||||
@ -0,0 +1,191 @@
|
||||
<div class="homepage-getting-started-section">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 lp-title">
|
||||
<div class="getting-started-heading homepage-subtitles">My Learning Paths</div>
|
||||
<div class="language-toggle-container">
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="languageToggle" onclick="toggleLanguage()">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<span id="toggleLabel">English</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row lp-prog-paths" id="englishPaths">
|
||||
{% assign english_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% unless learning_path.name contains "Spanish" %}
|
||||
{% if learning_path.progress < 100 and english_count < 3 %}
|
||||
{% capture learning_path_url %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<a href="{{ learning_path_url }}" class="learning-gem-block">
|
||||
<div class="learning-gem-content">
|
||||
<h3>{{ learning_path.name }}</h3>
|
||||
<div class="lp-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: learning_path.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% assign english_count = english_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="row lp-prog-paths" id="spanishPaths" style="display: none;">
|
||||
{% assign spanish_count = 0 %}
|
||||
{% for learning_path in learning_paths.enrolled %}
|
||||
{% if learning_path.name contains "Spanish" %}
|
||||
{% if learning_path.progress < 100 and spanish_count < 3 %}
|
||||
{% capture learning_path_url %}{% route learning_path, id: learning_path.id %}{% endcapture %}
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<a href="{{ learning_path_url }}" class="learning-gem-block">
|
||||
<div class="learning-gem-content">
|
||||
<h3>{{ learning_path.name }}</h3>
|
||||
<div class="lp-progress-wrapper">
|
||||
{%
|
||||
include "progress_circle",
|
||||
name: learning_path.id,
|
||||
count: learning_path.progress,
|
||||
total: 100,
|
||||
size: "120",
|
||||
stroke_color: "#de352a",
|
||||
stroke_color_bg: "#fff"
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% assign spanish_count = spanish_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleLanguage() {
|
||||
var englishPaths = document.getElementById('englishPaths');
|
||||
var spanishPaths = document.getElementById('spanishPaths');
|
||||
var toggleLabel = document.getElementById('toggleLabel');
|
||||
var languageToggle = document.getElementById('languageToggle');
|
||||
|
||||
if (languageToggle.checked) {
|
||||
englishPaths.style.display = 'none';
|
||||
spanishPaths.style.display = 'flex';
|
||||
toggleLabel.textContent = 'Español';
|
||||
} else {
|
||||
englishPaths.style.display = 'flex';
|
||||
spanishPaths.style.display = 'none';
|
||||
toggleLabel.textContent = 'English';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.lp-progress-wrapper {
|
||||
background: #F8FBFF;
|
||||
padding:16px;
|
||||
height:100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color:#de352a;
|
||||
}
|
||||
|
||||
.lp-prog-paths {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.language-toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#toggleLabel {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #de352a;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: #ececec;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.learning-gem-content h3, .learning-gem-content a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.lp-title {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.learning-gem-block,
|
||||
.learning-gem-block:link,
|
||||
.learning-gem-block:visited,
|
||||
.learning-gem-block:hover,
|
||||
.learning-gem-block:active {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.learning-gem-block h3,
|
||||
.learning-gem-block:link h3,
|
||||
.learning-gem-block:visited h3,
|
||||
.learning-gem-block:hover h3,
|
||||
.learning-gem-block:active h3 {
|
||||
text-decoration: none !important;
|
||||
color: black !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,57 @@
|
||||
{% 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.progress > 0 %} np-color-success {% else %} np-button-color {% endif %}
|
||||
" style="margin-top: 10px;">
|
||||
{{ course.progress }}% Complete
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% comment %} {% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
|
||||
</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 lp">
|
||||
{% 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,49 @@
|
||||
{%comment%}{% if learning_path.progress == 0%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar red-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color red-text"%}
|
||||
{% else if learning_path.progress > 0 and learning_path.progress < 100%}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar yellow-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color yellow-text"%}
|
||||
{% else %}
|
||||
{% assign wrapperClassBar = "np-button-background-color np-card-progress-bar green-bar"%}
|
||||
{% assign wrapperClassStatus = "np-card-content-progress np-button-color green-text"%}
|
||||
{% endif %}{%endcomment%}
|
||||
|
||||
{% if learning_path.enrolled? %}
|
||||
{% assign lp_courses_count = 0 | times: 1 %}
|
||||
{% assign sum_of_progress = 0.0 | times: 1 %}
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% assign lp_courses_count = lp_courses_count | plus: 1 %}
|
||||
{% assign sum_of_progress = sum_of_progress | plus: item.progress %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if lp_courses_count == 0 %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% else %}
|
||||
{% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% assign lp_progress = 0 %}
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title lp">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ lp_progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content-progress
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: lp_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,55 @@
|
||||
{% assign swapped_groups = '1fafc89f-fbbe-4fc9-b112-00645fb5708b, fa5b681e-cad9-4987-8801-a915b7c35855, 4a11c2c7-653e-4feb-865c-f8d300868324, 607235c7-cf3d-4997-977d-a1d4f0b4dcd6,f66bf675-5074-45bd-9ea7-62c928ec545e, 345c7c5f-f904-4ea1-ae7f-e8398b2a69f6, d1fa758c-eb92-45ed-8d01-d7f6fbf4a4ec, a4339f11-c69a-4880-8dee-204b1fd97359, 45a6eaa4-f3d5-4cd8-b054-eba2bb135b6a'%}
|
||||
{% assign is_in_group = false %}
|
||||
|
||||
{% for group in current_person.groups %}
|
||||
{% if swapped_groups contains group.id %}
|
||||
{% assign is_in_group = true %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_in_group%}
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.name contains "Workforce"%}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for learning_path in items %}
|
||||
{% if learning_path.name contains "CoreHR"%}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for learning_path in items %}
|
||||
{% unless learning_path.name contains "CoreHR"%}
|
||||
{% unless learning_path.name contains "Workforce"%}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endunless%}
|
||||
{% endunless %}
|
||||
{% 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>
|
||||
{%else%}
|
||||
<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>
|
||||
{% endif %}
|
||||
@ -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 @@
|
||||
<SCRIPT TYPE="text/javascript"> function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); return false; } </SCRIPT>
|
||||
@ -0,0 +1,80 @@
|
||||
<div class="np-progress-ring-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="{{ size }}"
|
||||
height="{{ size }}">
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="{{ stroke_color_bg }}"
|
||||
stroke-width="15"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-{{name}}"
|
||||
stroke="{{ stroke_color }}"
|
||||
stroke-width="15"
|
||||
fill="transparent"
|
||||
r="52"
|
||||
cx="60"
|
||||
cy="60"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#35404E" dy=".3em">{{count}}%</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var circle = document.getElementsByClassName("circle-{{name}}")[0];
|
||||
var radius = circle.r.baseVal.value;
|
||||
var circumference = radius * 2 * Math.PI;
|
||||
|
||||
circle.style.strokeDasharray = `${circumference} ${circumference}`;
|
||||
circle.style.strokeDashoffset = `${circumference}`;
|
||||
|
||||
function setProgress(count, total) {
|
||||
var percent = parseInt(count) / parseInt(total)
|
||||
// console.log(percent)
|
||||
const offset = circumference - percent * circumference;
|
||||
//console.log(offset)
|
||||
circle.style.strokeDashoffset = offset;
|
||||
}
|
||||
|
||||
setProgress('{{count}}', '{{total}}')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-progress-ring-wrapper {
|
||||
flex: 0;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-ring circle { stroke-linecap: round; }
|
||||
.progress-ring text { font-size:2rem; }
|
||||
.progress-ring__circle {
|
||||
transition: stroke-dashoffset 0.35s;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.np-progress-circle-label {
|
||||
text-transform: uppercase;
|
||||
font-size:0.875rem;
|
||||
margin-top:1rem;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.progress-ring text { font-size:2rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.progress-circle-container {
|
||||
background: #F8FBFF;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,468 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.np-button-color.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big,
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Настройки профиля";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Выход";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Используйте Gravatar™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Загрузить собственное фото";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Загрузить фото";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Добавление фотографии добавляет индивидуальности вашему профилю. Изображение вашего профиля используется в качестве значка вашей учетной записи, чтобы представлять вас. Он также отображается в различных других местах рядом с вашим именем.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Для достижения наилучших результатов размер изображения вашего профиля должен быть не менее 400x400 пикселей, а максимальный - 2 МБ. Формат файла должен быть PNG, JPG или GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Сохранить профиль";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Мой профайл";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Эл. адрес *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Имя *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Фамилия *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Отображаемое имя";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Пароль *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Подтверждение пароля *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Пути обучения";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Модули";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "События";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Дом";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "События";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Модули";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Пути обучения";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Вид";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "Облом! Вам не назначены пути обучения.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Изучите специально подобранные наборы курсов для индивидуального обучения";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Пути обучения";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Не начался";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Об этом пути обучения";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Вид";
|
||||
}
|
||||
|
||||
.np-card-content-progress.np-button-color.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Не начался";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Прогресс по пути обучения";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Полный";
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "У вас нет предстоящих событий. Проверяйте обновления позже.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Тренировочные мероприятия";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Откройте для себя личные и онлайн-мероприятия, чтобы максимизировать свое обучение";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Фильтр";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "Нужна помощь?";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "События";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "События";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Пути обучения";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Модули";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Отличные модули, не выходя из дома или офиса.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Модуль";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Прогресс курса";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Продолжать";
|
||||
}
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Схема модуля";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "О модуле";
|
||||
}
|
||||
</style>
|
||||
@ -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,873 @@
|
||||
<style>
|
||||
|
||||
.np-dashboard-resources-title.lp,
|
||||
.np-dashboard-resources-title.modules,
|
||||
.np-dashboard-resources-title.events,
|
||||
.np-zero-state-text,
|
||||
.np-button.np-button-wide,
|
||||
.np-footer-support-item.np-footer-support-help,
|
||||
.np-card-content-progress.notstarted,
|
||||
.np-zero-state-text.training-events,
|
||||
.np-button.lp,
|
||||
.sub-navigation-label:nth-child(1),
|
||||
.np-resource-title.modules,
|
||||
.np-resource-subtitle.modules,
|
||||
.np-resource-title.lp,
|
||||
.np-resource-subtitle.lp,
|
||||
.np-card-header-type,
|
||||
.np-resource-title.events,
|
||||
.np-resource-subtitle.events,
|
||||
.np-button.dropdown-button,
|
||||
.np-top-vocabulary.np-text-title.np-text-muted,
|
||||
.np-top-cta-progress-title.np-text-title,
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big,
|
||||
.np-text-title.np-course-outline-title,
|
||||
.np-card-heading,
|
||||
.np-top-cta-progress-text.np-button-color,
|
||||
.np-card-heading.lp,
|
||||
.np-top-cta-progress-title.np-text-title.lp,
|
||||
.np-top-vocabulary.np-text-title,
|
||||
.Home.sub-navigation-label,
|
||||
.Modules.sub-navigation-label,
|
||||
.Events.sub-navigation-label,
|
||||
.Learning.Paths.sub-navigation-label,
|
||||
.Home.np-footer-navigation-link.np-button-color,
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color,
|
||||
.Events.np-footer-navigation-link.np-button-color,
|
||||
.course-completion,
|
||||
.np-header-avatar-tooltip-navigation-link,
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger,
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action,
|
||||
.np-resource-title.my-profile,
|
||||
.np-input-label.email,
|
||||
.np-input-label.first-name,
|
||||
.np-input-label.last-name,
|
||||
.np-input-label.display-name,
|
||||
.np-input-label.password,
|
||||
.np-input-label.password-confirmation,
|
||||
.avatar-description,
|
||||
.avatar-requirements,
|
||||
.radio__label.gravatar,
|
||||
.radio__label.custom,
|
||||
#desktop_upload_avatar,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link,
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link,
|
||||
.np-header-mobile-menu-content-button,
|
||||
.homepage-hero-section .np-homepage-headline,
|
||||
.homepage-hero-section .np-homepage-subheadline,
|
||||
.homepage-hero-section .np-homepage-hero-cta,
|
||||
.homepage-getting-started-section .getting-started-heading,
|
||||
.homepage-getting-started-section .progress-heading,
|
||||
.homepage-featured-section .featured-courses-heading,
|
||||
.homepage-featured-section .featured-events-heading,
|
||||
.homepage-featured-section .view-all-events-heading,
|
||||
.contact-us-block .contact-us-block-title,
|
||||
.contact-us-block .contact-us-block-subtitle,
|
||||
.contact-us-block .contact-us-block-cta,
|
||||
.training-events-header,
|
||||
.training-events-subheader,
|
||||
.training-events-headers .request-button,
|
||||
.dashboard-title,
|
||||
.type-filter[data-filter='courses'],
|
||||
.type-filter[data-filter='learning-paths'],
|
||||
.learning-path-items-definition,
|
||||
.np-card-training-sessions-label,
|
||||
.stats-container[data-item='in-progress'] .stats-label,
|
||||
.stats-container[data-item='completed'] .stats-label,
|
||||
.stats-container.events .stats-label,
|
||||
#courses-in-progress-header,
|
||||
#courses-in-progress-header-2,
|
||||
#my-registered-events-heading,
|
||||
.events-container #upcoming-trainings span,
|
||||
.events-container #new-user-journey span,
|
||||
.events-container #training-webinar-catalog span,
|
||||
.events-container #development-training span,
|
||||
.overlay-content .all-filter,
|
||||
.overlay-content .filter-category:nth-of-type(1),
|
||||
.overlay-content .filter-category:nth-of-type(2),
|
||||
.overlay-content .apply-button,
|
||||
#clearAll,
|
||||
.np-catalog-title
|
||||
{
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
|
||||
.course-completion,
|
||||
.events-container #upcoming-trainings span,
|
||||
.events-container #new-user-journey span,
|
||||
.events-container #training-webinar-catalog span,
|
||||
.events-container #development-training span {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link::after {
|
||||
/* Profile Settings */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Configuración de Perfil";
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link.np-danger::after {
|
||||
/* Sign Out */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Desconectar";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(1) .np-header-desktop-nav-link:after {
|
||||
/* My Dashboard */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Mi Tablero";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(2) .np-header-desktop-nav-link:after {
|
||||
/* Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Catálogo de Cursos";
|
||||
}
|
||||
|
||||
.np-header-desktop-nav .np-header-desktop-nav-item:nth-child(3) .np-header-desktop-nav-link:after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
margin-bottom:18px;
|
||||
display: block;
|
||||
content: "Eventos de formación";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(1):after {
|
||||
/* My Dashboard - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi Tablero";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(2):after {
|
||||
/* Course Catalog - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Catálogo de Cursos";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(3):after {
|
||||
/* Training Events - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Eventos de formación";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(4):after {
|
||||
/* Profile Settings - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Configuración de Perfil";
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button:nth-child(5):after {
|
||||
/* Sign out - mobile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Desconectar";
|
||||
}
|
||||
|
||||
/* ACCOUNT */
|
||||
|
||||
.radio__label.gravatar::after {
|
||||
/* Use Gravatar™ */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Utilice Gravatar™";
|
||||
}
|
||||
|
||||
.radio__label.custom::after{
|
||||
/* Upload Custom Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Subir Foto Personalizada";
|
||||
}
|
||||
|
||||
#desktop_upload_avatar::after {
|
||||
/* Upload Photo */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Subir Foto";
|
||||
}
|
||||
|
||||
.avatar-description::after {
|
||||
/* Adding a photo adds a personal touch to your profile. Your profile picture is used as the icon for your account to represent you. It is also displayed in various other places next to your name. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Agregar una foto agrega un toque personal a su perfil. Su foto de perfil se utiliza como icono de su cuenta para representarlo. También se muestra en varios otros lugares junto a su nombre.";
|
||||
}
|
||||
|
||||
.avatar-requirements::after {
|
||||
/* For the best results, your profile picture size should be at least 400x400 pixels, and a max size of 2MB. The file format should be PNG, JPG or GIF. */
|
||||
text-indent: 0;
|
||||
line-height: auto;
|
||||
display: block;
|
||||
content: "Para obtener los mejores resultados, el tamaño de la imagen de su perfil debe ser de al menos 400x400 píxeles y un tamaño máximo de 2 MB. El formato de archivo debe ser PNG, JPG o GIF.";
|
||||
}
|
||||
|
||||
.np-button.np-button-big.np-button-large-font.np-form-action::after {
|
||||
/* Save Profile */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Guardar Perfil";
|
||||
}
|
||||
|
||||
.np-resource-title.my-profile::after {
|
||||
/* My Profile */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Mi Perfil";
|
||||
margin-bottom: 24px;
|
||||
margin-top: -24px;
|
||||
}
|
||||
|
||||
.np-input-label.email::after {
|
||||
/* Email */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Email *";
|
||||
}
|
||||
|
||||
.np-input-label.first-name::after {
|
||||
/* First Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nombre *";
|
||||
}
|
||||
|
||||
.np-input-label.last-name::after {
|
||||
/* Last Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Apellido *";
|
||||
}
|
||||
|
||||
.np-input-label.display-name::after {
|
||||
/* Display Name */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Nombre para mostrar";
|
||||
}
|
||||
|
||||
.np-input-label.password::after {
|
||||
/* Password */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Contraseña *";
|
||||
}
|
||||
|
||||
.np-input-label.password-confirmation::after {
|
||||
/* Password Confirmation */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Confirmación de Contraseña *";
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
|
||||
.np-dashboard-resources-title.lp::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis rutas";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
}
|
||||
|
||||
.np-dashboard-resources-title.events::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Próximos Eventos";
|
||||
}
|
||||
|
||||
/* SUB-NAVIGATION */
|
||||
|
||||
.Home.sub-navigation-label::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Página de Inicio";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.sub-navigation-label::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Próximos Eventos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Modules.sub-navigation-label::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.sub-navigation-label::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis Rutas";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* LEARNING PATHS */
|
||||
|
||||
.np-button.lp::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Ver";
|
||||
}
|
||||
|
||||
.np-zero-state-text::after {
|
||||
/* Bummer! You're not assigned any Learning Paths. */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "¡Gorrón! No se le asignó ninguna ruta de aprendizaje.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-subtitle.lp::after {
|
||||
/* Explore curated sets of courses for a tailored learning experience */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Explore conjuntos de cursos seleccionados para una experiencia de aprendizaje personalizada";
|
||||
}
|
||||
|
||||
.np-card-header-type::after,
|
||||
.np-resource-title.lp::after,
|
||||
.np-top-vocabulary.np-text-title::after
|
||||
{
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis rutas";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-text.np-button-color::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "No empezado";
|
||||
}
|
||||
|
||||
.np-card-heading.lp::after {
|
||||
/* About This Learning Path */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Acerca de esta ruta de aprendizaje";
|
||||
}
|
||||
|
||||
/* COURSE CARDS */
|
||||
|
||||
.np-button.np-button-wide::after {
|
||||
/* View */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Ver";
|
||||
}
|
||||
|
||||
.np-card-content-progress.notstarted::after {
|
||||
/* Not started */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "No empezado";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title.lp::after {
|
||||
/* Learning Path Progress */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Progreso de la ruta de aprendizaje";
|
||||
}
|
||||
|
||||
.course-completion::after {
|
||||
/* Complete */
|
||||
text-indent: 0;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
content: "Completo";
|
||||
}
|
||||
|
||||
/* EVENTS */
|
||||
|
||||
.np-zero-state-text.training-events::after {
|
||||
/* You have no upcoming Events. Check back later for updates */
|
||||
text-indent: 0;
|
||||
line-height: inherit;
|
||||
display: block;
|
||||
content: "No tienes eventos próximos. Vuelve más tarde para ver las actualizaciones.";
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.np-resource-title.events::after {
|
||||
/* Training Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Eventos de formación";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.events::after {
|
||||
/* Discover in-person and online events to maximize your learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Descubra eventos en persona y en línea para maximizar su aprendizaje";
|
||||
}
|
||||
|
||||
.np-button.dropdown-button::after {
|
||||
/* Filter */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Filtrar";
|
||||
}
|
||||
|
||||
.events-container #upcoming-trainings span:after {
|
||||
/* View All */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Ver todo";
|
||||
}
|
||||
|
||||
.events-container #new-user-journey span:after {
|
||||
/* New User Journey */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Viaje del nuevo usuario";
|
||||
}
|
||||
|
||||
.events-container #training-webinar-catalog span:after {
|
||||
/* Training Webinar Catalog */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Catálogo de seminarios web de capacitación";
|
||||
}
|
||||
|
||||
.events-container #development-training span:after {
|
||||
/* Development Training */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Capacitación para el desarrollo";
|
||||
}
|
||||
|
||||
.overlay-content .all-filter:after {
|
||||
/* Clear All */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Limpiar Todo";
|
||||
}
|
||||
|
||||
.overlay-content .filter-category:nth-of-type(1):after {
|
||||
/* Region */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Región";
|
||||
}
|
||||
|
||||
.overlay-content .filter-category:nth-of-type(2):after {
|
||||
/* Product */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Producto";
|
||||
}
|
||||
|
||||
.overlay-content .apply-button:after {
|
||||
/* Apply */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Aplicar";
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
|
||||
.np-footer-support-item.np-footer-support-help::after {
|
||||
/* Need help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
float: right;
|
||||
content: "¿Necesitas ayuda?";
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.Home.np-footer-navigation-link.np-button-color::after {
|
||||
/* Home */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Página de Inicio";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Events.np-footer-navigation-link.np-button-color::after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Próximos Eventos";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
.Learning.Paths.np-footer-navigation-link.np-button-color::after {
|
||||
/* Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis Rutas";
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
/* MODULES */
|
||||
|
||||
.np-resource-title.modules::after {
|
||||
/* Modules */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulos";
|
||||
}
|
||||
|
||||
.np-resource-subtitle.modules::after {
|
||||
/* Great Modules from the comfort of your home or office. */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Grandes módulos desde la comodidad de su hogar u oficina.";
|
||||
}
|
||||
|
||||
.np-top-vocabulary.np-text-title.np-text-muted::after {
|
||||
/* Module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Módulo";
|
||||
}
|
||||
|
||||
.np-top-cta-progress-title.np-text-title::after {
|
||||
/* Course Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Progreso del curso";
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.np-top-button.np-button-font-color.np-button.np-button-big::after {
|
||||
/* Continue */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Continuar";
|
||||
}
|
||||
|
||||
.np-text-title.np-course-outline-title::after {
|
||||
/* Module outline */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Esquema del módulo";
|
||||
}
|
||||
|
||||
.np-card-heading::after {
|
||||
/* About the module */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Sobre el modulo";
|
||||
}
|
||||
|
||||
/* HOMEPAGE CONTENT */
|
||||
|
||||
.homepage-hero-section .np-homepage-headline:after {
|
||||
/* Welcome to Harri Academy! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Bienvenidos a la Academia Harri!";
|
||||
}
|
||||
|
||||
.homepage-hero-section .np-homepage-subheadline:after {
|
||||
/* Grow your skillset and take your Harri knowledge to the next level right here. To get started, browse our course catalog below or take a quick survey to view courses tailored to you. */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Haga crecer su conjunto de habilidades y lleve su conocimiento de Harri al siguiente nivel aquí mismo. Para comenzar, explore nuestro catálogo de cursos a continuación o complete una encuesta rápida para ver los cursos adaptados a usted.";
|
||||
}
|
||||
|
||||
.homepage-hero-section .np-homepage-hero-cta:after {
|
||||
/* Take Survey */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Tomar encuesta";
|
||||
}
|
||||
|
||||
.homepage-getting-started-section .getting-started-heading:after {
|
||||
/* My Assigned Learning */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi aprendizaje";
|
||||
}
|
||||
|
||||
.homepage-getting-started-section .progress-heading:after {
|
||||
/* My Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi progreso";
|
||||
}
|
||||
|
||||
.homepage-featured-section .featured-courses-heading:after {
|
||||
/* Featured Content */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Contenido destacado";
|
||||
}
|
||||
|
||||
.homepage-featured-section .featured-events-heading:after {
|
||||
/* Featured Training Events */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Eventos de capacitación destacados";
|
||||
}
|
||||
|
||||
.homepage-featured-section .view-all-events-heading:after {
|
||||
/* View all Events */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Ver todos los eventos";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-title:after {
|
||||
/* Need More Help? */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "¿Necesitas más ayuda?";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-subtitle:after {
|
||||
/* Get in touch with our support team */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Póngase en contacto con nuestro equipo de soporte";
|
||||
}
|
||||
|
||||
.contact-us-block .contact-us-block-cta:after {
|
||||
/* Contact Us */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Contacta con nosotros";
|
||||
}
|
||||
|
||||
/* EVENTS PAGE CONTENT */
|
||||
|
||||
.training-events-header:after {
|
||||
/* Sign Up For Live Private Training! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Regístrese para la capacitación privada en vivo!";
|
||||
}
|
||||
|
||||
.training-events-subheader:after {
|
||||
/* Grow your Harri skill set with one of our Education Consultants during a private training customized just for you! */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "¡Haz crecer tu conjunto de habilidades de Harri con uno de nuestros consultores de educación durante una capacitación privada personalizada solo para ti!";
|
||||
}
|
||||
|
||||
.training-events-headers .request-button:after {
|
||||
/* Request Here */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Solicite aquí";
|
||||
}
|
||||
|
||||
/* DASHBOARD CONTENT */
|
||||
.dashboard-title:after {
|
||||
/* Overview */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Descripción general";
|
||||
}
|
||||
|
||||
.type-filter[data-filter="courses"]:after {
|
||||
/* Filter - Courses */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Cursos";
|
||||
}
|
||||
|
||||
.type-filter[data-filter="learning-paths"]:after {
|
||||
/* Filter - Learning Paths */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis rutas";
|
||||
}
|
||||
|
||||
.stats-container[data-item='in-progress'] .stats-label:after {
|
||||
/* In Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "En curso";
|
||||
}
|
||||
|
||||
.stats-container[data-item='completed'] .stats-label:after {
|
||||
/* Completed */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Completo";
|
||||
}
|
||||
|
||||
.stats-container.events .stats-label:after {
|
||||
/* Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Eventos";
|
||||
}
|
||||
|
||||
#courses-in-progress-header:after {
|
||||
/* In Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "En curso";
|
||||
}
|
||||
|
||||
#courses-in-progress-header-2:after {
|
||||
/* My Progress */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mi progreso";
|
||||
}
|
||||
|
||||
#my-registered-events-heading:after {
|
||||
/* My Registered Events */
|
||||
text-indent: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
content: "Mis eventos registrados";
|
||||
}
|
||||
|
||||
|
||||
/* CARDS CONTENT */
|
||||
.learning-path-items-definition:after {
|
||||
/* Learning path Cards - Items */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Elementos";
|
||||
}
|
||||
|
||||
.np-card-training-sessions-label:after {
|
||||
/* Events Cards - Session */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
margin-top: -20px;
|
||||
content: "Sesión";
|
||||
}
|
||||
|
||||
/* CATALOG */
|
||||
|
||||
#clearAll:after {
|
||||
/* Clear all */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Limpiar todo";
|
||||
}
|
||||
|
||||
.np-catalog-title:After {
|
||||
/* Browse The Harri Academy Course Catalog */
|
||||
text-indent: 0;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
content: "Explorar el catálogo de cursos de la Academia Harri";
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
{% unless link.label == "Dashboard" or link.label == "Catalog" or link.label == "Events" %}
|
||||
<div class="np-sub-navigation-content-item {{ link.label }} {{ 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>
|
||||
<p class="{{ link.label }} sub-navigation-label" style="margin-top:0px;"> {{ link.label }} </p>
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% 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,55 @@
|
||||
<div class="np-filter training-event-filter">
|
||||
<div class="dropdown training-event-dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button training-event-dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
onclick="openNav()"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div id="myNav" class="overlay">
|
||||
<!-- Button to close the overlay navigation -->
|
||||
|
||||
|
||||
<!-- Overlay content -->
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-items-container">
|
||||
<div class="overlay-items-headers">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
|
||||
<i style="color: #0088DD;" class="far fa-angle-left"></i>
|
||||
</a>
|
||||
<p class="filter-title">Filter</p>
|
||||
<div class="all-filter" id="all">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
<p class="filter-category">Region</p>
|
||||
<div class="circle-container region-circle" id="us">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">US</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="uk">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">UK</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="global">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Global</p>
|
||||
</div>
|
||||
<p class="filter-category">Product</p>
|
||||
<div class="circle-container product-circle" id="talent-acquisition">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Talent Acquisition</p>
|
||||
</div>
|
||||
<div class="circle-container product-circle" id="workforce-management">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Workforce Management</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="" class="apply-button-container">
|
||||
<div class="apply-button np-button" id="apply-button">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 @@
|
||||
{% comment %} <div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text training-events">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
@ -0,0 +1,58 @@
|
||||
<div class="np-filter training-event-filter">
|
||||
<div class="dropdown training-event-dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button training-event-dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
onclick="openNav()"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div id="myNav" class="overlay">
|
||||
<!-- Button to close the overlay navigation -->
|
||||
|
||||
|
||||
<!-- Overlay content -->
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-items-container">
|
||||
<div class="overlay-items-headers">
|
||||
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
|
||||
<i style="color: #0088DD;" class="far fa-angle-down"></i>
|
||||
</a>
|
||||
<p class="filter-title">Filter</p>
|
||||
<div class="all-filter" id="all">Clear All</div>
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
|
||||
<p class="filter-category">Region</p>
|
||||
<div class="circle-container region-circle" id="us">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">US</p>
|
||||
</div>
|
||||
<div class="circle-container region-circle" id="uk">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">UK</p>
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="circle-container region-circle" id="global">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Global</p>
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<p class="filter-category">Product</p>
|
||||
<div class="circle-container product-circle" id="talent-acquisition">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Talent Acquisition</p>
|
||||
</div>
|
||||
<div class="circle-container product-circle" id="workforce-management">
|
||||
<span class="green-circle"><span class="white-circle"></span></span><p class="filter-item">Workforce Management</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="" class="apply-button-container">
|
||||
<div class="apply-button np-button" id="apply-button">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,58 @@
|
||||
|
||||
<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"
|
||||
id="googleCal"
|
||||
>
|
||||
{% 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"
|
||||
id="outlookCal"
|
||||
>
|
||||
{% 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"
|
||||
id="officeCal"
|
||||
>
|
||||
{% 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"
|
||||
id="icalCal"
|
||||
>
|
||||
{% 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,33 @@
|
||||
|
||||
<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 }}<br><br>
|
||||
<div class="gmt-time" style="display:none">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
<span class="europe-converted-time"></span> BST
|
||||
</div>
|
||||
|
||||
</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 %}
|
||||
{% if training_session.registered? %}
|
||||
<div class="np-training-session-location" id="sessionLocation" style="display:none;">
|
||||
<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 %}
|
||||
{% 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="/app/training_events" 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,6 @@
|
||||
<div class="np-training-session-cta-note np-training-session-tile-badge np-training-session-tile-badge-{{ training_session.status.type }}">
|
||||
{% if training_session.approved? %}
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% endif %}
|
||||
{{ training_session.status.label }}
|
||||
</div>
|
||||
@ -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,165 @@
|
||||
{% assign topic_filters = "TALENT ACQUISITION, WORKFORCE MANAGEMENT, CORE HR, HARRI IQ & REPORTING, EMPLOYEE ENGAGEMENT, TALENT DEVELOPMENT, ROLES & PERMISSIONS, ADMIN & BRAND SETTINGS" %}
|
||||
|
||||
<div class="catalog-filters">
|
||||
<div class="filter-wrapper">
|
||||
<i class="fa fa-chevron-left close-tray np-hidden-desktop"></i>
|
||||
<div id="clearAll">Clear All</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<div class="filter-group-name">Topic</div>
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if topic_filters contains category_name_upcase %}
|
||||
<label class="checkbox-container">{{category.name}}
|
||||
<input type="checkbox" name="{{category_name_upcase}}">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% comment %} <div class="filter-group">
|
||||
<div class="filter-group-name">Content Type</div>
|
||||
<label class="checkbox-container">New Content
|
||||
<input type="checkbox" name="NEW">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Updated Content
|
||||
<input type="checkbox" name="UPDATED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Completed Content
|
||||
<input type="checkbox" name="COMPLETED">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="checkbox-container">Learning Paths
|
||||
<input type="checkbox" name="LEARNING-PATH">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
|
||||
</div> {% endcomment %}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalog-filters {
|
||||
box-shadow: 0 10px 25px 0 rgb(14 27 46 / 18%);
|
||||
padding: 24px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 300;
|
||||
background: #fff;
|
||||
border-top-left-radius: 30px;
|
||||
border-top-right-radius: 30px;
|
||||
transform: translateX(-1000px);
|
||||
transition: all 0.3s;
|
||||
height: 60vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.catalog-filters.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.close-tray {
|
||||
color:#0088dd;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
#clearAll {
|
||||
color:#0088DD;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-group .filter-group-name {
|
||||
margin: 22px 0 16px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.checkbox-container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
border: 3px solid #00E79A;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark {
|
||||
background-color: #00E79A;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox-container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-container .checkmark:after {
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.catalog-filters {
|
||||
margin-right:32px;
|
||||
padding: 20px;
|
||||
position: static;
|
||||
width: auto;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
transform: translateX(0);
|
||||
height: auto;
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
.filter-wrapper {
|
||||
justify-content:flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% if courses.in_catalog.any? %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% assign course_categories = "" %}
|
||||
{% if course.properties.bite_size_video == true %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign course_categories = course_categories | append: " " | append: cat.name %}
|
||||
{% endfor %}
|
||||
{% assign progress = "NOT-STARTED" %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign progress = "IN-PROGRESS" %}
|
||||
{% elsif course.progress == 100 %}
|
||||
{% assign progress = "COMPLETED" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign ribbon = "" %}
|
||||
{% assign course_ribbon = course.ribbon | upcase %}
|
||||
|
||||
{% if course_ribbon contains "UPDATED" %}
|
||||
{% assign ribbon = "UPDATED" %}
|
||||
{% elsif course_ribbon contains "NEW" %}
|
||||
{% assign ribbon = "NEW" %}
|
||||
{% endif %}
|
||||
|
||||
<div
|
||||
class="col-xs-12 col-md-6 col-lg-4 np-stretch-content catalog-item"
|
||||
data-filters="{{course_categories | upcase | strip}} {{progress}} {{ribbon}}"
|
||||
>
|
||||
{% include "cards_course_videos" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -0,0 +1,89 @@
|
||||
{% assign sub_cat_talent_acquisition = "JOB POSTING, APPLICANT MANAGEMENT, DOCUMENT MANAGEMENT, SETTINGS, TEMPLATES, REPORTS" %}
|
||||
{% assign sub_cat_workforce_management = "SETTINGS, REQUESTS, NOTIFICATIONS, COMMSHUB, LOGBOOK, SCHEDULE, FORECASTING, TEAMHUB, REPORTS, TIMESHEETS, ENGAGE" %}
|
||||
{% assign sub_cat_harri_iq = "SOURCE & HIRE REPORTS, TEAMLIVE REPORTS, HARRI IQ, UK PAYROLL REPORTS" %}
|
||||
{% assign sub_cat_employee_engagement = "CARRI, COMMSHUB" %}
|
||||
|
||||
<div class="video-sub-filters">
|
||||
|
||||
<div class="sub-filter-group" data-parent="TALENT ACQUISITION">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if sub_cat_talent_acquisition contains category_name_upcase %}
|
||||
<div class="sub-filter">{{category.name}}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="sub-filter-group" data-parent="WORKFORCE MANAGEMENT">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if sub_cat_workforce_management contains category_name_upcase %}
|
||||
<div class="sub-filter">{{category.name}}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="sub-filter-group" data-parent="HARRI IQ & REPORTING">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if sub_cat_harri_iq contains category_name_upcase %}
|
||||
<div class="sub-filter">{{category.name}}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="sub-filter-group" data-parent="EMPLOYEE ENGAGEMENT">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name_upcase = category.name | upcase %}
|
||||
{% if sub_cat_employee_engagement contains category_name_upcase %}
|
||||
<div class="sub-filter">{{category.name}}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.video-sub-filters {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.sub-filter-group {
|
||||
display: none;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-wrap:wrap;
|
||||
margin-top:16px;
|
||||
}
|
||||
|
||||
.sub-filter-group.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sub-filter {
|
||||
font-size:18px;
|
||||
padding: 0 16px 32px;
|
||||
width: auto;
|
||||
cursor:pointer;
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.sub-filter:hover {
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
.sub-filter.active {
|
||||
text-decoration:underline;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.sub-filter {
|
||||
font-size:20px;
|
||||
padding: 0 24px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user