Chubb sandbox backup. Still working on Supplier grouping script. Completed the Buildertrend templates work.
This commit is contained in:
Norm Rasmussen
@ -151,7 +151,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
}
|
||||
.np-header-font-background-color {
|
||||
background: #ffffff;
|
||||
|
||||
|
||||
}
|
||||
.fa-search:before {
|
||||
content: "\f002";
|
||||
@ -160,4 +160,4 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
.np-header-avatar-button {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
{{ homepage.subheadline }}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="quizz" data-toggle-outside data-toggle-outside-event="click" data-toggle-class-on-target data-backdrop="static" data-toggle-target="#divModelPage1" data-toggle-escape data-toggle-modal>
|
||||
Take a quiz to help guide your education <i class="far fa-regular fa-arrow-right"></i>
|
||||
Take a quiz to help guide your education <i class="far fa-regular fa-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-masthead-hero-image" style="padding: 20px 20px; max-width: 400px;">
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% else %}
|
||||
<div class="np-allpage-hero" style="background-color: #001a43;">
|
||||
<div class="np-container">
|
||||
<div class="np-homepage-headline np-header-font-color" style="font-size: 3rem; color:white;">
|
||||
@ -40,7 +40,7 @@
|
||||
<style>
|
||||
.quizz {
|
||||
font-family: 'GT Walsheim', sans-serif;
|
||||
|
||||
|
||||
color: #00d8d9;
|
||||
font-size: 20px !important;
|
||||
line-height: 24px;
|
||||
@ -141,4 +141,4 @@
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -30,12 +30,12 @@
|
||||
<p id="errorPage1" class="errorText" style="display:none" ><i class="far fa-exclamation-triangle"></i> Select at least 1 answer !! <i class="far fa-exclamation-triangle"></i></p>
|
||||
</div>
|
||||
<div class="question" >1. How do you typically interact with Buildertrend?</div>
|
||||
<div class="form-container">
|
||||
<div class="form-container">
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp1" value="1a" id="interact_desktopview" />
|
||||
<label for="interact_desktopview"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">In the office using the desktop version</span>
|
||||
</div>
|
||||
@ -43,7 +43,7 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp1" value="1b" id="interact_mobileapp" />
|
||||
<label for="interact_mobileapp"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">In the field using the mobile app</span>
|
||||
</div>
|
||||
@ -51,23 +51,23 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp1" value="1c" id="interact_webbrowser" />
|
||||
<label for="interact_webbrowser"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">In the field using the web browser (.net)</span>
|
||||
</div>
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp1" value="1d" id="interact_mobileappanddesktop" />
|
||||
<label for="interact_mobileappanddesktop"></label>
|
||||
<label for="interact_mobileappanddesktop"></label>
|
||||
</div>
|
||||
<span class="chkLbl">I use a combination of mobile app and desktop</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonwrapper">
|
||||
<button type="button" onclick="validate('#errorPage1','.requiredgrp1')" class="submit-btn" data-toggle-trigger-off="#divModelPage1"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage2"
|
||||
<button type="button" onclick="validate('#errorPage1','.requiredgrp1')" class="submit-btn" data-toggle-trigger-off="#divModelPage1"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage2"
|
||||
data-toggle-escape data-toggle-modal>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -85,12 +85,12 @@
|
||||
<p id="errorPage2" class="errorText" style="display:none" ><i class="far fa-exclamation-triangle"></i> Select at least 1 answer !! <i class="far fa-exclamation-triangle"></i></p>
|
||||
</div>
|
||||
<div class="question" >2. How do you typically engage with your company's financials?</div>
|
||||
<div class="form-container">
|
||||
<div class="form-container">
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp2" value="2a" id="engagefinancials_integrationandbookkeeping" />
|
||||
<label for="engagefinancials_integrationandbookkeeping"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I handle accounting integration and bookkeeping</span>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp2" value="2b" id="engagefinancials_createestimatesandmanageproject" />
|
||||
<label for="engagefinancials_createestimatesandmanageproject"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I create estimates and manage the project budget</span>
|
||||
</div>
|
||||
@ -106,24 +106,24 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp2" value="2c" id="engagefinancials_overseeprojectexpenses" />
|
||||
<label for="engagefinancials_overseeprojectexpenses"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I oversee project expenses</span>
|
||||
</div>
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp2" value="2d" id="engagefinancials_donotintractwithfinacials" />
|
||||
<label for="engagefinancials_donotintractwithfinacials"></label>
|
||||
<label for="engagefinancials_donotintractwithfinacials"></label>
|
||||
</div>
|
||||
<span class="chkLbl">I do not interact with the financials</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonwrapper">
|
||||
<button type="button" class="submit-btn" data-toggle-trigger-off="#divModelPage2"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage1"
|
||||
<button type="button" class="submit-btn" data-toggle-trigger-off="#divModelPage2"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage1"
|
||||
data-toggle-escape data-toggle-modal>Back</button>
|
||||
<button type="button" onclick="validate('#errorPage2','.requiredgrp2')" class="submit-btn" data-toggle-trigger-off="#divModelPage2"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage3"
|
||||
<button type="button" onclick="validate('#errorPage2','.requiredgrp2')" class="submit-btn" data-toggle-trigger-off="#divModelPage2"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage3"
|
||||
data-toggle-escape data-toggle-modal>Next</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,12 +142,12 @@
|
||||
<p id="errorPage3" class="errorText" style="display:none" ><i class="far fa-exclamation-triangle"></i> Select at least 1 answer !! <i class="far fa-exclamation-triangle"></i></p>
|
||||
</div>
|
||||
<div class="question" >3. How do you typically engage with project management?</div>
|
||||
<div class="form-container">
|
||||
<div class="form-container">
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp3" value="3a" id="engageprojectmanagment_buildandmanagescheduleandoverseeoperations" />
|
||||
<label for="engageprojectmanagment_buildandmanagescheduleandoverseeoperations"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I build and manage project schedule and oversee operations</span>
|
||||
</div>
|
||||
@ -155,7 +155,7 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp3" value="3b" id="engageprojectmanagment_collaboratehomeownersondesignandcommunication" />
|
||||
<label for="engageprojectmanagment_collaboratehomeownersondesignandcommunication"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I collaborate with homeowners on project design and communication</span>
|
||||
</div>
|
||||
@ -163,29 +163,29 @@
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp3" value="3c" id="engageprojectmanagment_workinfield" />
|
||||
<label for="engageprojectmanagment_workinfield"></label>
|
||||
|
||||
|
||||
</div>
|
||||
<span class="chkLbl">I work in the field and manage my own time and tasks</span>
|
||||
</div>
|
||||
<div class="checkbox-wrapper">
|
||||
<div class="round">
|
||||
<input type="checkbox" class="requiredgrp3" value="3d" id="engageprojectmanagment_donotengage" />
|
||||
<label for="engageprojectmanagment_donotengage"></label>
|
||||
<label for="engageprojectmanagment_donotengage"></label>
|
||||
</div>
|
||||
<span class="chkLbl">I do not engage with project management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonwrapper">
|
||||
<button type="button" class="submit-btn" data-toggle-trigger-off="#divModelPage3"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage2"
|
||||
<button type="button" class="submit-btn" data-toggle-trigger-off="#divModelPage3"
|
||||
data-toggle-class-on-target data-toggle-target="#divModelPage2"
|
||||
data-toggle-escape data-toggle-modal>Back</button>
|
||||
<button type="button" onclick="validate('#errorPage3','.requiredgrp3')" id="submitButton" data-toggle-target="#divModelPage3"
|
||||
<button type="button" onclick="validate('#errorPage3','.requiredgrp3')" id="submitButton" data-toggle-target="#divModelPage3"
|
||||
class="submit-btn" style="width: auto;">Submit Answers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.6.3.min.js"
|
||||
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
|
||||
@ -193,7 +193,7 @@
|
||||
|
||||
$(document).ready(function(){
|
||||
//blinker();
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -215,7 +215,7 @@ $(document).ready(function(){
|
||||
{
|
||||
console.log(errorElement)
|
||||
$(errorElement).show()
|
||||
|
||||
|
||||
event.stopImmediatePropagation();
|
||||
return;
|
||||
}
|
||||
@ -262,7 +262,7 @@ function submitAnswers() {
|
||||
|
||||
let userData = {
|
||||
"uuid": '{{current_person.id}}',
|
||||
"answers": strSelectedAnswers
|
||||
"answers": strSelectedAnswers
|
||||
|
||||
}
|
||||
|
||||
@ -291,14 +291,10 @@ function submitAnswers() {
|
||||
method: 'POST',
|
||||
success: function (res) {
|
||||
console.log(res)
|
||||
setTimeout(function () {
|
||||
document.querySelector(".info-form-trigger").click()
|
||||
}, 1000)
|
||||
window.location.reload();
|
||||
$("body").removeClass("body_overlay");
|
||||
$("#myloading").remove();
|
||||
//hitEscapeKey();
|
||||
|
||||
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
console.error("Error posting to workato!");
|
||||
@ -306,9 +302,12 @@ function submitAnswers() {
|
||||
if (secondaryInfoStored == "true") {
|
||||
console.log("secondary information completed and stored in local storage")
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
setTimeout( function() {window.location.reload();}, 1000)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -400,7 +399,7 @@ font-size:14px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Form Syyles */
|
||||
.close {
|
||||
@ -415,11 +414,11 @@ font-size:14px;
|
||||
}
|
||||
.errorText {
|
||||
font-size: 18px;
|
||||
font-family: "GT Walsheim", sans-serif;
|
||||
font-family: "GT Walsheim", sans-serif;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
.buttonwrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -435,14 +434,14 @@ font-size:14px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
|
||||
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
|
||||
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -482,7 +481,7 @@ font-size:14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* Popup Styles */
|
||||
@ -569,4 +568,4 @@ font-size:14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -4,3 +4,30 @@
|
||||
{% endif %}
|
||||
{{ training_session.status.label }}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const btn = document.querySelector('.event-status');
|
||||
|
||||
if (btn) {
|
||||
const eventId = btn.getAttribute('data-event-id');
|
||||
const statusKey = `eventStatus-${eventId}`;
|
||||
const maxAttempts = 15;
|
||||
let attempts = parseInt(sessionStorage.getItem(statusKey)) || 0;
|
||||
|
||||
|
||||
if (btn.innerText.trim() === 'PENDING - WAITING APPROVAL' && attempts < maxAttempts) {
|
||||
setTimeout(() => {
|
||||
attempts++;
|
||||
sessionStorage.setItem(statusKey, attempts);
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
if (btn.innerText.trim() !== 'PENDING - WAITING APPROVAL') {
|
||||
sessionStorage.removeItem(statusKey);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<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 profile-form">
|
||||
<div class="row">
|
||||
<div class="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>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.profile-form {
|
||||
width: 50vw;
|
||||
}
|
||||
.account-form {
|
||||
width: 100%;
|
||||
}
|
||||
.np-account .np-card {
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
<div class="np-resource-title chubb">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} * (minimum of 8 characters long; must include at least one uppercase letter, one number and one special character)
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} * (minimum of 8 characters long; must include at least one uppercase letter, one number and one special character)
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
<a
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,12 @@
|
||||
<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>
|
||||
<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,45 @@
|
||||
<div class="card" type='course' categories="{%for category in course.categories%}{{category.name}},{%endfor%}" duration="{{course.properties.course_duration}}">
|
||||
<div class="card-image-container">
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="card-content-container">
|
||||
<h3 class="card-content-title chubb">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="card-category-wrapper">
|
||||
{% for category in course.categories %}
|
||||
{% unless category.name == 'Recommended' or category.name == 'Onboarding'%}
|
||||
<span class="card-category lato">{{category.name }}</span>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-time">
|
||||
{% unless course.properties.course_duration == 0 %}
|
||||
{{course.properties.course_duration}} MINUTES
|
||||
{% endunless %}
|
||||
</div>
|
||||
<div class="card-description lato">{{course.short_description}}</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="card-course-btn-wrapper">
|
||||
<a class="np-button np-button-wide lato" href="{{ course_path }}">
|
||||
{% if course.enrolled? == false %}
|
||||
Enroll
|
||||
{% elsif course.enrolled? == true %}
|
||||
Launch
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Resume
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,42 @@
|
||||
|
||||
|
||||
<div class="card" type='learning_path' categories="{%for category in learning_path.categories%}{{category.name}},{%endfor%}">
|
||||
<div class="card-image-container">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image "
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-content-container">
|
||||
<h3 class="card-content-title chubb">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
<div class="card-category-wrapper">
|
||||
{% for category in learning_path.categories %}
|
||||
{% unless category.name == 'Recommended' or category.name == 'Onboarding'%}
|
||||
<span class="card-category lato">{{category.name }}</span>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-time">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
<div class="card-description lato">{{ learning_path.description }}</div>
|
||||
<div class="card-course-btn-wrapper">
|
||||
<a class="np-button np-button-wide" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% if learning_path.progress == 0 %}
|
||||
Launch
|
||||
{% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
|
||||
Resume
|
||||
{% else %}
|
||||
{% t shared.view %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
</div>
|
||||
<div class="np-card-training-session">
|
||||
<span class="np-card-content-label">
|
||||
{% t .next_session %}
|
||||
</span>
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_event.sessions.first.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_event.sessions.first.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_event.sessions.first.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-training-sessions">
|
||||
<i class="np-card-training-sessions-icon far fa-calendar-star"></i>
|
||||
<span class="np-card-training-sessions-label">
|
||||
{% t .sessions, count: training_event.sessions.size %}
|
||||
</span>
|
||||
<a
|
||||
class="np-button np-button-wide"
|
||||
href="{% route training_session, id: training_event.sessions.first.id %}"
|
||||
>
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,471 @@
|
||||
{% assign coverages_categories = "Auto,Accident & Health,Builders Risk,Business Income/Extra Expense,Business Owners Policy (BOP),Chubb Services,Claims,Commercial Lines Products,Construction,Crime,Cyber Security,Directors & Officers Liability,Employment Practices Liability,Equipment Breakdown,Errors & Omissions,Family Office,Farm,Fiduciary,Financial Fidelity,Flood,Group Personal Excess Liability,Home,Kidnap, Ransom & Extortion,Liability,Liquor Liability,Loss Control,Management Liability,Marine-Inland/Ocean,Medical Liability,Multinational,Natural Disasters,Package,$Personal Lines Products,Pollution Liability,Product Recall,Professional Liability,Property,Rec. Marine,Risk Management,Services,Surety,Transactional Risk,Travel,Umbrella & Excess Liability,Valuable Articles,Worker’s Compensation,Workplace Violence" | split: "," %}
|
||||
{% assign categories = "$Commercial Lines,$Gen. Ins. & Risk Mgmt.,$Leadership & Prof. Dev.,Onboarding,$Personal Lines,$Sales & Service" | split: ","%}
|
||||
{% assign competencies_categories = "Agency Operations,Business Etiquette,Business Financials,Centers of Influence,Change Management,$Chubb Systems,Coaching,Communication Styles,Conflict Management,Cross Selling,Customer Service,DiSC,Diversity - DEI&B,Effective Listening,Emotional Intelligence,Employee Onboarding,Executive Development,Goal Setting,Influencing,Innovation,Leadership,Managing People,Marketing / Branding,Mergers & Acquisition,Negotiation,Networking,Overcoming Objections,Perpetuation Planning,Pipeline Management,Presentation Skills,Professional Presence,Referrals,Sales Management,Sales Skills,Storytelling,Team Building,Technology Training,Time Management,Writing Skills" | split: "," %}
|
||||
{% assign industry_practices_categories = "Agriculture,Aviation,Broadcasters,Clean Tech,Construction,Cultural Institutions,Educational Institutions,Energy,Entertainment,Federal Gov. Contractors,Financial Institutions,Food,Healthcare,Hospitality,Life Sciences,Manufacturing,Private Equity,Professional Service Firms,Public Entities,Real Estate,Retail,Technology,Transportation,Wholesale,Wineries" | split: "," %}
|
||||
{% assign level_categories = "Elements (L1),Enhance (L2),Elevate (L3)" | split: "," %}
|
||||
|
||||
|
||||
<div class="filter-courses-container">
|
||||
<div class="filter-heading border-bottom">Filters</div>
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-1')" >Type <i class="fal fa-plus plus-icon"></i></button>
|
||||
<div class="categories-container" id="categories-container-1">
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="learning_path" class="type-filter">Learning Path
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="webinar" class="type-filter">Webinar
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="resource" class="type-filter">Resource
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="course" class="type-filter">Course
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-2')" >Categories <i class="fal fa-plus plus-icon"></i></button>
|
||||
<div class="categories-container" id="categories-container-2">
|
||||
{% assign unique_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if categories contains category.name%}
|
||||
{% unless unique_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_categories = unique_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if categories contains category.name%}
|
||||
{% unless unique_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_categories = unique_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-3')">
|
||||
Coverages <i class="fal fa-plus plus-icon"></i>
|
||||
</button>
|
||||
<div class="categories-container" id="categories-container-3">
|
||||
{% assign unique_coverages_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if coverages_categories contains category.name %}
|
||||
{% unless unique_coverages_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_coverages_categories = unique_coverages_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if coverages_categories contains category.name%}
|
||||
{% unless unique_coverages_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_coverages_categories = unique_coverages_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-4')">
|
||||
Competencies <i class="fal fa-plus plus-icon"></i>
|
||||
|
||||
</button>
|
||||
<div class="categories-container" id="categories-container-4">
|
||||
{% assign unique_competencies_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if competencies_categories contains category.name %}
|
||||
{% unless unique_competencies_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_competencies_categories = unique_competencies_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if competencies_categories contains category.name%}
|
||||
{% unless unique_competencies_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_competencies_categories = unique_competencies_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-5')">
|
||||
Industry Practices <i class="fal fa-plus plus-icon"></i>
|
||||
</button>
|
||||
<div class="categories-container" id="categories-container-5">
|
||||
{% assign unique_industry_practices_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if industry_practices_categories contains category.name %}
|
||||
{% unless unique_industry_practices_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_industry_practices_categories = unique_industry_practices_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if industry_practices_categories contains category.name%}
|
||||
{% unless unique_industry_practices_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_industry_practices_categories = unique_industry_practices_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-6')">
|
||||
Level <i class="fal fa-plus plus-icon"></i>
|
||||
</button>
|
||||
<div class="categories-container" id="categories-container-6">
|
||||
{% assign unique_level_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if level_categories contains category.name %}
|
||||
{% unless unique_level_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_level_categories = unique_level_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if level_categories contains category.name%}
|
||||
{% unless unique_level_categories contains category.name %}
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="{{ category.name }}" class="category-filter">{{ category.name }}
|
||||
</div>
|
||||
{% assign unique_level_categories = unique_level_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-option-container">
|
||||
<button class="filter-option" onclick="toggleFilter('categories-container-7')">
|
||||
Duration (Course Only) <i class="fal fa-plus plus-icon"></i>
|
||||
</button>
|
||||
<div class="categories-container" id="categories-container-7">
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="duration-<10" class="duration-filter"> < 10 mins
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="duration-10-30" class="duration-filter">10-30 mins
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="duration-30-60" class="duration-filter">30-60 mins
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="duration-60-120" class="duration-filter">1-2 hours
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="checkbox" id="duration->120" class="duration-filter">> 2 hours
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-button-container">
|
||||
<button class="filter-clear-button" onclick="clearFilters()">Clear Filters</button>
|
||||
</div>
|
||||
<style>
|
||||
.filter-heading {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid rgba(0, 0, 0 ,0.5);
|
||||
}
|
||||
.catalog-search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0 0.5rem 2rem;
|
||||
}
|
||||
.catalog-search-icon {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
color: #000;
|
||||
opacity: 0.5;
|
||||
font-size: 1rem;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.catalog-form {
|
||||
position: relative;
|
||||
}
|
||||
.filter-courses-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.filter-option {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0 ,0.5);
|
||||
color: #000;
|
||||
width: 100%;
|
||||
background: none;
|
||||
text-align: inherit;
|
||||
}
|
||||
.category-filter, .type-filter, .duration-filter {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.category-filter-container {
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
padding: 5px 0;
|
||||
color: #000;
|
||||
}
|
||||
.input-container {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
color: #000;
|
||||
}
|
||||
.categories-container {
|
||||
display: none;
|
||||
}
|
||||
.filter-button-container {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.filter-clear-button {
|
||||
background: #000;
|
||||
border: 1px solid #000;
|
||||
border-radius: 4px;
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
font-size: .875rem;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var openFilters = {};
|
||||
var selectedCategories = [];
|
||||
var selectedTypes = [];
|
||||
var selectedDuration = [];
|
||||
console.log(selectedDuration)
|
||||
|
||||
function toggleFilter(containerId) {
|
||||
var container = document.getElementById(containerId);
|
||||
var icon = container.previousElementSibling.children[0];
|
||||
openFilters[containerId] = !openFilters[containerId];
|
||||
|
||||
if (openFilters[containerId]) {
|
||||
container.style.display = 'block';
|
||||
icon.classList.remove("fa-plus")
|
||||
icon.classList.add("fa-minus")
|
||||
} else {
|
||||
container.style.display = 'none';
|
||||
icon.classList.add("fa-plus")
|
||||
icon.classList.remove("fa-minus")
|
||||
}
|
||||
}
|
||||
|
||||
function updateCourses() {
|
||||
var allCourses = document.querySelectorAll('.card');
|
||||
|
||||
allCourses.forEach(function (course) {
|
||||
var courseCategories = course.getAttribute('categories').split(',');
|
||||
var courseType = course.getAttribute('type');
|
||||
var courseDuration = parseInt(course.getAttribute('duration'));
|
||||
|
||||
if (!courseType) {
|
||||
courseType = "";
|
||||
}
|
||||
|
||||
var categoryFilter = selectedCategories.length === 0 || selectedCategories.some(function (category) {
|
||||
return courseCategories.includes(category);
|
||||
});
|
||||
|
||||
|
||||
var typeFilter = selectedTypes.length === 0 || selectedTypes.includes(courseType);
|
||||
|
||||
var durationFilter = true;
|
||||
if (selectedDuration.length > 0) {
|
||||
var durationFilterValue = selectedDuration[0];
|
||||
switch (durationFilterValue) {
|
||||
case 'duration-<10':
|
||||
durationFilter = courseDuration < 10;
|
||||
break;
|
||||
case 'duration-10-30':
|
||||
durationFilter = courseDuration >= 10 && courseDuration <= 30;
|
||||
break;
|
||||
case 'duration-30-60':
|
||||
durationFilter = courseDuration >= 30 && courseDuration <= 60;
|
||||
break;
|
||||
case 'duration-60-120':
|
||||
durationFilter = courseDuration >= 60 && courseDuration <= 120;
|
||||
break;
|
||||
case 'duration->120':
|
||||
durationFilter = courseDuration > 120;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var shouldShow = categoryFilter && typeFilter && durationFilter;
|
||||
|
||||
if (shouldShow) {
|
||||
course.parentElement.style.display = 'flex';
|
||||
} else {
|
||||
course.parentElement.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('change', function(event) {
|
||||
if (event.target.classList.contains('category-filter')) {
|
||||
var category = event.target.id;
|
||||
|
||||
if (event.target.checked) {
|
||||
selectedCategories.push(category);
|
||||
} else {
|
||||
selectedCategories = selectedCategories.filter(function(cat) {
|
||||
return cat !== category;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.classList.contains('type-filter')) {
|
||||
var type = event.target.id;
|
||||
|
||||
if (event.target.checked) {
|
||||
selectedTypes.push(type);
|
||||
} else {
|
||||
selectedTypes = selectedTypes.filter(function(t) {
|
||||
return t !== type;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.classList.contains('duration-filter')) {
|
||||
var duration = event.target.id;
|
||||
|
||||
if (event.target.checked) {
|
||||
selectedDuration.push(duration);
|
||||
} else {
|
||||
selectedDuration = selectedDuration.filter(function(d){
|
||||
return d !== duration
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateCourses();
|
||||
});
|
||||
function setInitialFilterState() {
|
||||
var urlParams = new URLSearchParams(window.location.search);
|
||||
var typeParam = urlParams.get('type');
|
||||
var categoryParam = urlParams.get('category');
|
||||
|
||||
if (typeParam === 'learning_path' || typeParam === 'course') {
|
||||
|
||||
toggleFilter('categories-container-1');
|
||||
|
||||
var typeCheckbox = document.getElementById(typeParam);
|
||||
if (typeCheckbox) {
|
||||
typeCheckbox.click();
|
||||
}
|
||||
}
|
||||
|
||||
if (categoryParam) {
|
||||
toggleFilter('categories-container-2');
|
||||
var typeCheckbox = document.getElementById(categoryParam);
|
||||
if (typeCheckbox) {
|
||||
typeCheckbox.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
var checkboxes = document.querySelectorAll('.category-filter, .type-filter, .duration-filter');
|
||||
checkboxes.forEach(function (checkbox) {
|
||||
checkbox.checked = false;
|
||||
});
|
||||
|
||||
selectedCategories = [];
|
||||
selectedTypes = [];
|
||||
selectedDuration = [];
|
||||
|
||||
updateCourses();
|
||||
}
|
||||
|
||||
function hideUnusedTypes() {
|
||||
var allTypeCheckboxes = document.querySelectorAll('.type-filter');
|
||||
var allCourses = document.querySelectorAll('.card');
|
||||
|
||||
var availableTypes = [];
|
||||
|
||||
allCourses.forEach(function (course) {
|
||||
var courseType = course.getAttribute('type');
|
||||
if (courseType && !availableTypes.includes(courseType)) {
|
||||
availableTypes.push(courseType);
|
||||
}
|
||||
});
|
||||
|
||||
allTypeCheckboxes.forEach(function (checkbox) {
|
||||
var type = checkbox.id;
|
||||
var isAvailable = availableTypes.includes(type);
|
||||
checkbox.parentNode.style.display = isAvailable ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setInitialFilterState();
|
||||
hideUnusedTypes();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="col-xs-12 col-md-4 spacing-clear">
|
||||
{% include "certificates_verification" %}
|
||||
{% include "certificates_metadata" %}
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div class="np-card spacing-clear">
|
||||
<div class="np-card-container padding-spacing-8">
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .learner %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{certificate.learner_name}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
{% if certificate.issuer_name_enabled? %}
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title">
|
||||
{% t .issued_by %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issuer_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .issued_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issue_date }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .expires_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.expiration_date_translation }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<script type="text/javascript">
|
||||
const resizeIframe = () => {
|
||||
const combinedPadding = 16;
|
||||
const previewIframe = document.getElementById("previewIframe");
|
||||
const previewIFrameCard = document.getElementById("previewIFrameCard");
|
||||
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
|
||||
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
|
||||
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
|
||||
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
|
||||
|
||||
templateInPreviewContainer.style.margin = 0;
|
||||
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
|
||||
|
||||
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
|
||||
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
|
||||
const scale = scaledIframeHeight / previewIframeContentHeight;
|
||||
|
||||
previewIframe.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
window.onresize = resizeIframe;
|
||||
</script>
|
||||
|
||||
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
|
||||
<div class="np-card spacing-clear">
|
||||
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
|
||||
<iframe
|
||||
id="previewIframe"
|
||||
onload="resizeIframe()"
|
||||
class="np-certificate-iframe-preview"
|
||||
srcdoc="{{ certificate.certificate_template_html }}"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="top-bar np-certificate-top-bar-spacing">
|
||||
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
|
||||
<div class="top-bar__col">
|
||||
<h2 class="np-certificate-title" >
|
||||
{{certificate.certificate_name}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="button-container np-certificate-button-container">
|
||||
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
|
||||
<a
|
||||
class="np-button np-certificate-button np-certificate-button-secondary"
|
||||
href="{{certificate.linkedin_share_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fab fa-linkedin np-certificate-share-icon"></i>
|
||||
{% t .share %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button
|
||||
id="print"
|
||||
type="button"
|
||||
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
|
||||
>
|
||||
{% t .print %}
|
||||
</button>
|
||||
{% if certificate.generating_pdf %}
|
||||
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
|
||||
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ certificate.download_url }}"
|
||||
aria-label="{% t .download %}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
download
|
||||
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
|
||||
>
|
||||
{% t .download %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-card spacing-clear np-certificate-verification-card">
|
||||
<div class="np-card-container np-certificate-verification-container">
|
||||
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
|
||||
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
|
||||
</div>
|
||||
<div class="np-certificate-verification-info-container">
|
||||
<h2 class="np-certificate-verification-info-status spacing-clear">
|
||||
{{certificate.verification_title}}
|
||||
</h2>
|
||||
<p class="np-certificate-verification-info-description spacing-clear">
|
||||
{{certificate.verification_description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,15 @@
|
||||
{% if course.enrolled? %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
{% else%}
|
||||
<span class="{{ class }}">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex course-categories-container">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container">
|
||||
<div class="np-resource-header np-course-header np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
</div>
|
||||
<div class="np-divider"></div>
|
||||
<div class="row np-course-content np-card-padding-dynamic">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
{% include "course_description" %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-6">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex-column">
|
||||
{% for event in course.events %}
|
||||
<div class="np-course-events-content-item">
|
||||
<div class="np-course-events-content-date np-button-background-color">
|
||||
<div class="np-course-events-content-month">
|
||||
{{ event.sessions.first.abbreviated_month }}
|
||||
</div>
|
||||
<div class="np-course-events-content-day">
|
||||
{{ event.sessions.first.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-course-events-content-details">
|
||||
<div class="np-course-events-content-name">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="np-course-events-content-type np-text-light">
|
||||
{% t shared.event_types, key: event.event_type %}
|
||||
</div>
|
||||
<div class="np-course-events-content-time np-button-color">
|
||||
{{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,16 @@
|
||||
<div class="np-top-vocabulary np-text-title np-text-muted">
|
||||
{{ current_school.course_vocabulary }}
|
||||
<i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
|
||||
</i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
|
||||
{% endif %}
|
||||
<div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
|
||||
{% else %}
|
||||
<i class="far fa-circle np-course-outline-content-activity-icon"></i>
|
||||
{% if activity.locked? %}
|
||||
{% include "course_activity_locked" %}
|
||||
{% else %}
|
||||
{% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
|
||||
{% endif %}
|
||||
<div class="np-course-outline-content-activity-list-bar"></div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,46 @@
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ course.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
Launch Course
|
||||
{% 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,14 @@
|
||||
|
||||
<div class="np-catalog-courses row ">
|
||||
{% for course in courses.in_catalog %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.name contains 'Feedback'%}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% 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,55 @@
|
||||
<div class="carousel-wrapper">
|
||||
<div class="carousel">
|
||||
{% include 'featured_cards_course' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
var slider = tns({
|
||||
container: '.carousel',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
navPosition: 'bottom',
|
||||
controls: false,
|
||||
autoplay: true,
|
||||
speed: 700,
|
||||
autoplayButtonOutput: false,
|
||||
autoplayTimeout: 7000
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
var navContainer = document.querySelector('.tns-nav');
|
||||
|
||||
var navButtons = navContainer.querySelectorAll('button');
|
||||
|
||||
navButtons.forEach(function (button, index) {
|
||||
button.addEventListener('click', function () {
|
||||
slider.goTo(index + 1);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.carousel-wrapper {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.tns-nav {
|
||||
text-align: center;
|
||||
}
|
||||
.tns-nav-active {
|
||||
background: #000 !important;
|
||||
}
|
||||
.tns-nav button {
|
||||
background: white;
|
||||
border: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
<div class="feature-card-wrapper">
|
||||
<div class="feature-card-container">
|
||||
<div class="feature-card-content feature-content">
|
||||
<div class="short-message">CONVENIENT, CONNECTED LEARNING</div>
|
||||
<h3 class="feature-card-content-title chubb">
|
||||
Welcome
|
||||
</h3>
|
||||
<div class="feature-card-description lato">
|
||||
Our Online Learning Center offers a variety of
|
||||
interactive, on-demand programs across multiple categories to help you expand your knowledge
|
||||
and increase your revenue.
|
||||
</div>
|
||||
<div class="feature-card-btn-container">
|
||||
<a class="feature-course-btn purple lato" href="/app/catalog">
|
||||
Explore the Catalog
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-image feature-content">
|
||||
<img
|
||||
class="feature-card-image"
|
||||
alt="woman"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/businesswoman.jpg"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-wrapper">
|
||||
<div class="feature-card-container">
|
||||
<div class="feature-card-content feature-content">
|
||||
<div class="short-message">GETTING STARTED WITH CHUBB</div>
|
||||
<h3 class="feature-card-content-title chubb">
|
||||
Agent Onboarding
|
||||
</h3>
|
||||
<div class="feature-card-description lato">
|
||||
Our onboarding learning paths provide an introduction to Chubb’s coverages, services, and available resources, so you can give your clients the protection they deserve — and help your business succeed.
|
||||
<div class="note-desc">
|
||||
<br><span class="bold-text">Note:</span> These learning paths are designed for agents onboarding to Chubb; however, all agents can access the included courses. Specific quoting workflows and access may vary by appointment, please confirm with your Chubb representative.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-btn-container">
|
||||
<a class="feature-course-btn yellow lato" href="/app/learning_paths/f7211693-fa8a-478f-8707-bb90f08202ae">
|
||||
Launch Personal
|
||||
</a>
|
||||
<a class="feature-course-btn yellow lato" href="/app/learning_paths/2a7c70ba-fa0b-4a5c-a900-2b31daf87cdc">
|
||||
Launch Commercial
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-image feature-content">
|
||||
<img
|
||||
class="feature-card-image"
|
||||
alt="rocket"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/launch-rocket-become-an-agent-01.jpg"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-wrapper">
|
||||
<div class="feature-card-container">
|
||||
<div class="feature-card-content feature-content">
|
||||
<div class="short-message">NEW Elective Course TEST</div>
|
||||
<h3 class="feature-card-content-title chubb">
|
||||
Continue Your Journey
|
||||
</h3>
|
||||
<div class="feature-card-description lato">
|
||||
Here's a cute message about how awesome our new courses are. check them out and continue your onboarding journey.
|
||||
<div class="note-desc">
|
||||
<br><span class="bold-text">this is how you bold text</span> important message using words that create a sentence.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-btn-container">
|
||||
<a class="feature-course-btn yellow lato" href="p/ffc306bb02f175c2a13ea67276efa8930d4bfdff">
|
||||
Test LP
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card-image feature-content">
|
||||
<img
|
||||
class="feature-card-image"
|
||||
alt="rocket"
|
||||
src="https://chubbeducation.com/wp-content/uploads/2024/06/Test-OLC-Carousel-Image.jpg"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<input
|
||||
id={{value}}
|
||||
name={{ name }}
|
||||
value={{ value }}
|
||||
type="checkbox"
|
||||
{% if selected %} checked="checked" {% endif %}
|
||||
/>
|
||||
<label for={{value}}>
|
||||
{{label}}
|
||||
</label>
|
||||
@ -0,0 +1,33 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: filters,
|
||||
key: key,
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% if params.q %}
|
||||
<input type="hidden" name="q" value="{{ params.q }}">
|
||||
{% endif %}
|
||||
|
||||
<label class="dropdown-label" for="filter[category_uuid][in][]">
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<select
|
||||
class="np-filter-select"
|
||||
multiple
|
||||
name="filter[{{ key }}][in][]"
|
||||
>
|
||||
{% for filter in filters %}
|
||||
<option
|
||||
value="{{ filter.value }}"
|
||||
{% if filter.selected? %} selected="selected" {% endif %}
|
||||
>
|
||||
{{ filter.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
@ -0,0 +1,63 @@
|
||||
<footer class="footer">
|
||||
<div class="footer-wrapper">
|
||||
<div class="footer-logo">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="footer-logo-image"
|
||||
src="https://chubbeducation.com/wp-content/uploads/2017/02/Chubb-Agency-Education-Logo-color-no-tagline.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="footer-content">
|
||||
<div class="footer-description lato">
|
||||
We are committed to providing innovative, high quality educational opportunities and professional development
|
||||
programs that support the profitable growth of Chubb’s agents and brokers and Chubb’s strategic goals.
|
||||
</div>
|
||||
<div class="footer-visit-us lato">
|
||||
Visit us on <a href="https://chubbeducation.com/">chubbeducation.com</a>
|
||||
</div>
|
||||
<div class="footer-links lato">
|
||||
<a href="https://www.chubb.com/us-en/terms-of-use.html">Terms of Use</a>
|
||||
<hr class="horizontal-line"/>
|
||||
<a href="https://www.chubb.com/us-en/online-privacy-policy.html">Privacy Policy</a>
|
||||
<hr class="horizontal-line"/>
|
||||
<a href="https://www.chubb.com/us-en/online-privacy-policy.html#CCPA-section">California Resident Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
background: #e7e6e6;
|
||||
padding: 6%;
|
||||
}
|
||||
.footer-logo-image {
|
||||
max-width: 300px;
|
||||
}
|
||||
.footer-content {
|
||||
color: #000;
|
||||
}
|
||||
.footer-wrapper {
|
||||
display: flex;
|
||||
gap: 5%;
|
||||
}
|
||||
.footer-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
.footer-links {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.horizontal-line {
|
||||
height: 15px;
|
||||
overflow: visible;
|
||||
width: 1px;
|
||||
margin: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,114 @@
|
||||
{% 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=Hedvig+Letters+Serif:opsz@12..24&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
|
||||
<!-- Slick -->
|
||||
<script src=
|
||||
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
|
||||
<!-- Add the slick-theme.css if you want default styling -->
|
||||
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
|
||||
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
function limitCardDescriptionCharacters() {
|
||||
var elements = document.querySelectorAll('.card-description');
|
||||
|
||||
elements.forEach(function (element) {
|
||||
var text = element.innerText;
|
||||
var truncatedText = text.length > 250 ? text.slice(0, 250) + '...' : text;
|
||||
element.innerText = truncatedText;
|
||||
});
|
||||
}
|
||||
|
||||
function limitCardCategories() {
|
||||
var cards = document.querySelectorAll('.card');
|
||||
|
||||
cards.forEach(function(card, index) {
|
||||
var cardCategories = card.querySelectorAll('.card-category');
|
||||
var dollarSignCount = 0;
|
||||
var missingCategories = [];
|
||||
|
||||
cardCategories.forEach(function(category, categoryIndex) {
|
||||
if (category.textContent.trim().startsWith('$')) {
|
||||
if (dollarSignCount < 5) {
|
||||
category.style.display = 'block';
|
||||
dollarSignCount++;
|
||||
} else {
|
||||
category.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
missingCategories.push(category);
|
||||
}
|
||||
});
|
||||
|
||||
missingCategories.forEach(function(missingCategory, missingIndex) {
|
||||
if (dollarSignCount < 5) {
|
||||
missingCategory.style.display = 'block';
|
||||
dollarSignCount++;
|
||||
} else {
|
||||
missingCategory.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
function removeDollarSign() {
|
||||
var cardCategories = document.querySelectorAll('.card-category');
|
||||
var courseCategoriesCoverPage = document.querySelectorAll('.np-content-categories-content-item')
|
||||
var categoryFilters = document.getElementsByClassName('category-filter');
|
||||
|
||||
cardCategories.forEach(function(category, index) {
|
||||
category.textContent = category.textContent.replace('$', '');
|
||||
});
|
||||
|
||||
courseCategoriesCoverPage.forEach(function(category, index) {
|
||||
category.textContent = category.textContent.replace('$', '');
|
||||
});
|
||||
|
||||
for (var i = 0; i < categoryFilters.length; i++) {
|
||||
var textWithoutDollarSign = categoryFilters[i].nextSibling.nodeValue.replace(/\$/g, '');
|
||||
categoryFilters[i].nextSibling.nodeValue = textWithoutDollarSign;
|
||||
}
|
||||
|
||||
if (window.location.pathname == '/app') {
|
||||
var categoryFiltersArray = Array.from(document.getElementsByClassName('category-filter'));
|
||||
categoryFiltersArray.forEach(function(category, index) {
|
||||
category.textContent = category.textContent.replace('$', '');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function resultCounter() {
|
||||
if (window.location.pathname.includes('search')) {
|
||||
var searchCardsLenght = document.querySelectorAll('.np-search-result').length;
|
||||
var searchNumber = document.getElementById('search-number').innerText = searchCardsLenght;
|
||||
}
|
||||
}
|
||||
|
||||
function removeCertifacteeVerificationCard() {
|
||||
if (window.location.pathname.includes('certificate')) {
|
||||
var certificateCard = document.getElementsByClassName('np-certificate-verification-card')
|
||||
certificateCard[0].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
limitCardDescriptionCharacters();
|
||||
limitCardCategories();
|
||||
removeDollarSign();
|
||||
resultCounter();
|
||||
removeCertifacteeVerificationCard();
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,277 @@
|
||||
<header class="np-header np-header-color">
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="header-text chubb np-hidden-mobile">Online Learning Center</div>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<i class="fal fa-user-circle header-avatar-image"></i>
|
||||
</button>
|
||||
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% if current_person.signed_in? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route transcript %}"
|
||||
>
|
||||
{% t .transcript %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="hamburger-menu">
|
||||
<i class="fal fa-bars" id="menu-icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="menu-container">
|
||||
<div class="close-btn"><i class="fal fa-times"></i></div>
|
||||
<ul class="menu">
|
||||
<li><a href="/app">Home</a></li>
|
||||
<li><a href="/app/dashboard">Dashboard</a></li>
|
||||
<li><a href="/app/catalog">Catalog</a></li>
|
||||
<li><a href="https://chubbeducation.com/olc-info">FAQ / User Guides</a></li>
|
||||
<li><a href="https://secure.chubb.com/">Chubb Agent Portal</a></li>
|
||||
<li><a href="https://chubbeducation.com/">chubbeducation.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.menu-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index:11;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style: none;
|
||||
padding: 30px 5%;
|
||||
margin: 0;
|
||||
background-color: #fff;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: last baseline;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: #6e27c5;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #6e27c5;
|
||||
}
|
||||
.np-header-mobile-menu-nav {
|
||||
position: initial !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const hamburgerMenu = document.querySelector('.hamburger-menu');
|
||||
const menuContainer = document.querySelector('.menu-container');
|
||||
const closeBtn = document.querySelector('.close-btn');
|
||||
|
||||
hamburgerMenu.addEventListener('click', function () {
|
||||
menuContainer.style.display = menuContainer.style.display === 'block' ? 'none' : 'block';
|
||||
});
|
||||
|
||||
closeBtn.addEventListener('click', function () {
|
||||
menuContainer.style.display = 'none';
|
||||
});
|
||||
|
||||
menuContainer.addEventListener('click', function (e) {
|
||||
if (e.target === menuContainer) {
|
||||
menuContainer.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -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,110 @@
|
||||
{% assign categories = "$Commercial Lines,$Gen. Ins. & Risk Mgmt.,$Leadership & Prof. Dev.,Onboarding,$Personal Lines,$Sales & Service" | split: ","%}
|
||||
|
||||
<div class="filter-container">
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Type <i class="fal fa-chevron-down"></i></button>
|
||||
<div class="dropdown-content">
|
||||
<a href="/app/catalog?type=learning_path">Learning Paths <i class="far fa-external-link-alt"></i></a>
|
||||
<a href="/app/catalog?type=course">Courses <i class="far fa-external-link-alt"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn">Categories <i class="fal fa-chevron-down"></i></button>
|
||||
<div class="dropdown-content">
|
||||
{% assign unique_categories = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if categories contains category.name%}
|
||||
{% unless unique_categories contains category.name %}
|
||||
<a class="category-filter" href="/app/catalog?category={{category.name}}">{{category.name }} <i class="far fa-external-link-alt"></i></a>
|
||||
{% assign unique_categories = unique_categories | append: category.name %}
|
||||
{% endunless %}
|
||||
{%endif%}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown">
|
||||
<a class="dropbtn dropbtn-link" href="/app/catalog">Catalog
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/Folders.svg" alt="folders" class="link-icon">
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<a class="dropbtn dropbtn-link" href="/app/dashboard">Dashboard
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/Chubb/assets/Contact.svg" alt="contact" class="link-icon">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dropbtn-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.dropbtn {
|
||||
background-color: #e7e5e6;
|
||||
color: #000;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-content i {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {background-color: #f1f1f1}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropbtn {
|
||||
background-color: #bcbabe;
|
||||
}
|
||||
.filter-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: 1440px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.link-icon {
|
||||
width: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,91 @@
|
||||
{% assign content_counter = 0 %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if course.enrolled? and course.progress < 100 %}
|
||||
{% assign content_counter = content_counter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<div class="progress-carousel-wrapper">
|
||||
<div class="progress-carousel">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.enrolled? and course.progress < 100 %}
|
||||
<div class="carousel-card-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if content_counter < 3 %}
|
||||
<div class="carousel-card-container">
|
||||
{% include "learning_path_zero_state" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(".progress-carousel").slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
prevArrow: "<span class='prev-btn control-carousel lato'><i class='fas fa-chevron-left left-arrow'></i> Prev</span>",
|
||||
nextArrow: "<span class='next-btn control-carousel lato'>Next <i class='fas fa-chevron-right right-arrow'></i></span>",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1000,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.tns-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 2rem 0;
|
||||
gap: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
[data-controls="next"], [data-controls="prev"] {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.control-carousel {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.left-arrow {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.progress-carousel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.next-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
.prev-btn {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
bottom: 0;
|
||||
z-index:1;
|
||||
}
|
||||
</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,46 @@
|
||||
{% if learning_path.enrolled? and course.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
{% if course.instructors %}
|
||||
<div class="np-learning-path-outline-caption">
|
||||
{{ course.instructors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,26 @@
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-content-divider">
|
||||
<h3 class="np-card-heading">
|
||||
{% t shared.instructors %}
|
||||
</h3>
|
||||
<div class="np-content-instructors-content row">
|
||||
{% for instructor in learning_path.instructors %}
|
||||
<div class="np-content-instructors-content-item col-xs-12 col-lg">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,19 @@
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
<div class="np-card-spacing">
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if learning_path.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<div class="np-resource-header np-card-padding-vertical">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-learning-path-new-content-banner np-learning-path-banner">
|
||||
<div class="np-learning-path-banner-content">
|
||||
<h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
|
||||
<p class="np-learning-path-banner-description">{% t .description %}</p>
|
||||
<div class="np-learning-path-banner-actions">
|
||||
{% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
|
||||
{% if learning_path.certificate_link %}
|
||||
<a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-learning-path-outline">
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.course? %}
|
||||
{% include "learning_path_course", course: item %}
|
||||
{% elsif item.training_event? %}
|
||||
{% include "learning_path_training_session", training_session: item %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% include "learning_path_certificate" %}
|
||||
</div>
|
||||
@ -0,0 +1,20 @@
|
||||
{% if learning_path.enrolled? %}
|
||||
<div class="np-top-cta-progress-content">
|
||||
<div class="np-top-cta-progress-title np-text-title">
|
||||
{% t .progress %}
|
||||
</div>
|
||||
<div class="np-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,43 @@
|
||||
{% 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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
|
||||
<div class="card zero-state-lp" type='learning-path'>
|
||||
<div class="zero-state-message">
|
||||
Nothing here? <br>
|
||||
<a href="/app/catalog" class="text-underline">Keep Exploring!</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
{% assign learning_paths_counter = 0 %}
|
||||
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% assign learning_paths_counter = learning_paths_counter | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if learning_paths_counter < 3 %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "learning_path_zero_state" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="zero-state-wrapper">
|
||||
{% include "learning_path_zero_state" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.zero-state-wrapper {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
{% if messages.alert.size > 0 %}
|
||||
<div class="np-alert np-alert-error">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.alert %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if messages.notice.size > 0 %}
|
||||
<div class="np-alert np-alert-success">
|
||||
<div class="np-alert-wrapper">
|
||||
{% for message in messages.notice %}
|
||||
<div>{{ message }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,77 @@
|
||||
<div class="lp-carousel-wrapper">
|
||||
<div class="lp-onboarding-carousel">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Onboarding' %}
|
||||
<div class="carousel-card-container">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(".lp-onboarding-carousel").slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
prevArrow: "<span class='prev-btn control-carousel lato'><i class='fas fa-chevron-left left-arrow'></i> Prev</span>",
|
||||
nextArrow: "<span class='next-btn control-carousel lato'>Next <i class='fas fa-chevron-right right-arrow'></i></span>",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1000,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tns-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 2rem 0;
|
||||
gap: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
[data-controls="next"], [data-controls="prev"] {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.control-carousel {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.left-arrow {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.recommended-carousel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.next-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
.prev-btn {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
bottom: 0;
|
||||
z-index:1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,103 @@
|
||||
{% assign content_counter = 0 %}
|
||||
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Recommended' %}
|
||||
{% assign content_counter = content_counter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Recommended' %}
|
||||
{% assign content_counter = content_counter | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="recommended-carousel-wrapper">
|
||||
<div class="recommended-carousel">
|
||||
{% for course in courses.in_catalog%}
|
||||
{% for category in course.categories %}
|
||||
{% if category.name == 'Recommended' %}
|
||||
<div class="carousel-card-container">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% for category in learning_path.categories %}
|
||||
{% if category.name == 'Recommended' %}
|
||||
<div class="carousel-card-container">
|
||||
{% include "cards_learning_path" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(".recommended-carousel").slick({
|
||||
infinite: true,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 3,
|
||||
prevArrow: "<span class='prev-btn control-carousel lato'><i class='fas fa-chevron-left left-arrow'></i> Prev</span>",
|
||||
nextArrow: "<span class='next-btn control-carousel lato'>Next <i class='fas fa-chevron-right right-arrow'></i></span>",
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1000,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
slidesToScroll: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tns-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 2rem 0;
|
||||
gap: 25px;
|
||||
margin-right: 25px;
|
||||
}
|
||||
[data-controls="next"], [data-controls="prev"] {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.control-carousel {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.left-arrow {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.right-arrow {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.recommended-carousel-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.next-btn {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 0;
|
||||
}
|
||||
.prev-btn {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
bottom: 0;
|
||||
z-index:1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
{% if result.type == 'course' %}
|
||||
<div class="np-card np-search-result">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content">
|
||||
<img
|
||||
class="np-search-result-image"
|
||||
alt="{{ result.name }}"
|
||||
src="{{ result.image_url }}"
|
||||
/>
|
||||
<div class="np-search-result-content">
|
||||
<div>
|
||||
<a class="np-search-result-title" href="{{ result.path }}">
|
||||
{{ result.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="np-search-result-snippet">{{ result.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-card np-search-zero-state">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content np-card-content-vertical np-search-zero-state-card">
|
||||
<h3 class="np-search-zero-state-title">
|
||||
{% t .nothing_found %}
|
||||
</h3>
|
||||
<div class="np-search-zero-state-subtitle">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<div class="np-search-zero-state-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<nav class="np-sub-navigation">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
<div class="np-sub-navigation-content-item {{ link.active_class }}">
|
||||
<a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
|
||||
<i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
{{ link.label }}
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</nav>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
<span class="dropdown-label">
|
||||
{% t shared.filters.by_event_type %}
|
||||
</span>
|
||||
<ul class="dropdown-checkboxes">
|
||||
{% for event_type in training_events.filters.event_types %}
|
||||
{% capture label %}
|
||||
{% t shared.event_types, key: event_type.value %}
|
||||
{% endcapture %}
|
||||
<li>
|
||||
{% include "filter_checkbox",
|
||||
label: label,
|
||||
name: event_type.name,
|
||||
value: event_type.value
|
||||
selected: event_type.selected?
|
||||
%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: training_events.filters.courses,
|
||||
key: "courses_uuid",
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .google_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .outlook_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_office_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .office_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% t .registered %}
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .pending %}
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .denied %}
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .too_late %}
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .no_seats %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="np-card-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-padding-large">
|
||||
<div class="np-card-content-divider">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 np-grid-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_date" %}
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
|
||||
{% if training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.location }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="np-card-container-training-session">
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
{% include "training_session_details" %}
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
<div class="np-card-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% include "training_session_more_sessions" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% for session in training_event.sessions %}
|
||||
{% include "training_session_tile", current_session: training_session %}
|
||||
{% endfor %}
|
||||
@ -0,0 +1,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,14 @@
|
||||
{% include "header" %}
|
||||
|
||||
<main class="np-main np-subpage-container np-account">
|
||||
<div class="np-hidden-desktop">
|
||||
{% include "account_mobile_view", form: form %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-flex np-flex-center">
|
||||
{% include "account_desktop_view", form: form %}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,59 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-headline">
|
||||
{% t shared.welcome_to_school, school_name: current_school.name %}
|
||||
</div>
|
||||
<div class="np-form-subheadline">
|
||||
{% t .headline, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_employee_id">
|
||||
{% t shared.employee_id %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="employee_id"
|
||||
id="learner_employee_id"
|
||||
value="{{ form.employee_id }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,40 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-form-action">
|
||||
{% t shared.enter %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,74 @@
|
||||
<main class="np-box-container np-open-access">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
|
||||
<div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
|
||||
<div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
autofocus="autofocus"
|
||||
type="email"
|
||||
name="email"
|
||||
id="learner_email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_first_name">
|
||||
{% t shared.first_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="first_name"
|
||||
id="learner_first_name"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_last_name">
|
||||
{% t shared.last_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="last_name"
|
||||
id="learner_last_name"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_phone_number">
|
||||
{% t shared.phone_number_optional %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
type="text"
|
||||
name="phone_number"
|
||||
id="learner_phone_number"
|
||||
value="{{ form.phone_number }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field np-open-access-terms">
|
||||
<input type="hidden" name="terms" value="0" />
|
||||
<input id="terms" type="checkbox" name="terms" value="1" />
|
||||
<label for="terms" class="np-open-access-terms-checkbox">
|
||||
{{ current_school.custom_terms }}
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="submit"
|
||||
name="commit"
|
||||
value="{% t shared.enter %}"
|
||||
class="np-button np-button-big np-form-action"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,54 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="catalog-header-wrapper">
|
||||
<div class="header-catalog chubb">
|
||||
<a class="purple-link home-link" href="/app">Home </a>/ Course Catalog
|
||||
</div>
|
||||
<div class="catalog-description">
|
||||
Search and filter courses, learning paths and other materials using the menu on the left side of the screen.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-catalog">
|
||||
<div class="filter-container">
|
||||
{% include 'catalog_filters' %}
|
||||
</div>
|
||||
<div class="catalog-container">
|
||||
{% include "courses_catalog" %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.home-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.filter-container {
|
||||
width: 20%;
|
||||
padding: 0 30px 0 0;
|
||||
margin-top: 60px
|
||||
}
|
||||
.catalog-container {
|
||||
width: 80%;
|
||||
}
|
||||
.purple-link {
|
||||
color: #6e27c5;
|
||||
}
|
||||
.header-catalog {
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
color: #000;
|
||||
}
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
.catalog-header-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.catalog-description {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="header-catalog chubb mb-20">
|
||||
<a class="purple-link home-link" href="/app">Home </a>/ Course
|
||||
</div>
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace("/app/catalog");
|
||||
</script>
|
||||
@ -0,0 +1,31 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="header-catalog chubb">
|
||||
<a class="purple-link home-link" href="/app">Home </a>/ Dashboard
|
||||
</div>
|
||||
<div class="row np-flex-center">
|
||||
<div class="dashboard-content-wrapper">
|
||||
{% if features.learning_paths? %}
|
||||
<div class="section-headline">
|
||||
{% t shared.learning_paths %}
|
||||
</div>
|
||||
{% include "learning_paths_index", items: learning_paths.enrolled %}
|
||||
{% endif %}
|
||||
<div class="section-headline">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content" %}
|
||||
</div>
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="section-headline">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,25 @@
|
||||
<main class="np-box-container">
|
||||
<div class="np-box">
|
||||
{% include "header_minimal" %}
|
||||
<div class="np-box-content-container">
|
||||
<form class="np-form np-box-content" action="{% route forgot_password_create %}" method="post" novalidate>
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-form-field">
|
||||
<label class="np-input-label" for="learner_email">
|
||||
{% t shared.email_address %}
|
||||
</label>
|
||||
<input
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t .button_label %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -0,0 +1,24 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
{% include 'feature_carousel' %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
{% include 'homepage-filters' %}
|
||||
{% comment %} {% if courses.enrolled.any? %}
|
||||
<div class="section">
|
||||
<div class="section-headline">My Courses</div>
|
||||
{%include 'in_progress_carousel' %}
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
<div class="section">
|
||||
<div class="section-headline">Featured Courses & Learning Paths</div>
|
||||
{%include 'recommended_carousel' %}
|
||||
</div>
|
||||
{% comment %} <div class="section">
|
||||
<div class="section-headline">Onboarding Learning Paths</div>
|
||||
{%include 'onboarding_learning_paths_carousel' %}
|
||||
</div> {% endcomment %}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,13 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="header-catalog chubb mb-20">
|
||||
<a class="purple-link home-link" href="/app">Home </a>/ Learning Path
|
||||
</div>
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,10 @@
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="learning-path-desktop">
|
||||
{% include "learning_path_summary_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="learning-path-mobile">
|
||||
{% include "learning_path_summary_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user