Changed Luminates name to Scintilla (changing on 5th Feb). Downloaded the sandbox with all of Raj's changes.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,66 @@
|
||||
<div class="np-hidden-mobile">
|
||||
<p>{% t .description %}</p>
|
||||
<p>{% t .requirements %}</p>
|
||||
</div>
|
||||
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.gravatar_url }}?s=200"
|
||||
id="{{version}}_gravatar_img"
|
||||
{% unless form.use_gravatar? %}style="display: none"{% endunless %}
|
||||
/>
|
||||
<img
|
||||
alt=""
|
||||
class="np-account-avatar-image"
|
||||
src="{{ form.secure_custom_avatar_url }}"
|
||||
id="{{version}}_custom_avatar_img"
|
||||
{% if form.use_gravatar? %}style="display: none"{% endif %}
|
||||
/>
|
||||
|
||||
<div class="np-account-avatar-choice">
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_true"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="true"
|
||||
{% if form.use_gravatar? %}checked{% endif %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .use_gravatar %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field">
|
||||
<label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
|
||||
<span class="radio__input">
|
||||
<input
|
||||
id="{{version}}_learner_use_gravatar_false"
|
||||
name="learner[use_gravatar]"
|
||||
type="radio"
|
||||
value="false"
|
||||
{% unless form.use_gravatar? %}checked{% endunless %}
|
||||
/>
|
||||
<span class="np-button-color radio__control"></span>
|
||||
</span>
|
||||
<span class="radio__label">
|
||||
{% t .upload_custom_photo %}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
id="{{version}}_upload_avatar"
|
||||
type="button"
|
||||
class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
|
||||
>
|
||||
{% t .upload %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,19 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card">
|
||||
<div class="np-card-container np-card-padding">
|
||||
<div class="row">
|
||||
<div class="col-sm-7 np-account-form">
|
||||
{% render "account_form", form: form, version: "desktop" %}
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-sm-5 np-account-avatar">
|
||||
{% include "account_avatar", version: "desktop" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@ -0,0 +1,139 @@
|
||||
<div class="np-resource-title">
|
||||
{% t .header %}
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
|
||||
<input
|
||||
{% if form.options.invite? %} disabled {% endif %}
|
||||
autofocus="autofocus"
|
||||
class="np-input"
|
||||
id="{{version}}_learner_email"
|
||||
name="learner[email]"
|
||||
type="email"
|
||||
value="{{ form.email }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_first_name">
|
||||
{% t shared.first_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_first_name"
|
||||
name="learner[first_name]"
|
||||
value="{{ form.first_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_last_name">
|
||||
{% t shared.last_name %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_last_name"
|
||||
name="learner[last_name]"
|
||||
value="{{ form.last_name }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_display_name">
|
||||
{% t .display_name %}
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_display_name"
|
||||
name="learner[display_name]"
|
||||
value="{{ form.display_name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% unless form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_current_password">
|
||||
{% t .current_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_current_password"
|
||||
name="learner[current_password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t .new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password_confirmation">
|
||||
{% t .confirm_new_password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password_confirmation"
|
||||
name="learner[password_confirmation]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
{% endunless %}
|
||||
|
||||
{% if form.options.invite? %}
|
||||
<div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
|
||||
<label class="np-input-label" for="{{version}}_learner_password">
|
||||
{% t shared.password %} *
|
||||
</label>
|
||||
<input
|
||||
class="np-input"
|
||||
id="{{version}}_learner_password"
|
||||
name="learner[password]"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{% if form.terms_of_service_required? %}
|
||||
<div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
|
||||
<input
|
||||
id="{{version}}_learner_terms_of_service"
|
||||
name="learner[terms_of_service_accepted]"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div class="label">
|
||||
{% t .terms_of_service %}
|
||||
<a
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-margin-top">
|
||||
<span class="np-form-terms ">
|
||||
{% t .terms %}
|
||||
<a
|
||||
class="np-form-link np-button-color"
|
||||
target="_blank"
|
||||
href={{ form.terms_of_service_url }}
|
||||
>
|
||||
{% t .terms_link %}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<input
|
||||
id="{{version}}_invite_token"
|
||||
name="learner[token]"
|
||||
value="{{ form.invite_token }}"
|
||||
type="hidden"
|
||||
/>
|
||||
{% endif %}
|
||||
@ -0,0 +1,17 @@
|
||||
<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
|
||||
<input type="hidden" name="_method" value="{{ form.options.http_method }}">
|
||||
{% form_authenticity_token %}
|
||||
<div class="np-card np-account-form">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% render "account_form", form: form, version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card np-account-avatar">
|
||||
<div class="np-card-container np-card-padding">
|
||||
{% include "account_avatar", version: "mobile" %}
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
|
||||
{% t shared.account.save %}
|
||||
</button>
|
||||
</form>
|
||||
@ -0,0 +1,325 @@
|
||||
<script>
|
||||
const training_eventsArr=[];
|
||||
</script>
|
||||
{% for training_event in training_events.available %}
|
||||
{% for session in training_event.sessions %}
|
||||
<script>
|
||||
training_eventsArr.push("{{ session.day }}{{ session.month }}{{ session.year }}");
|
||||
//console.log("{{ training_event.title }} {{ session.day }} {{ session.month }} {{ session.year }}" )
|
||||
</script>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
<div class="calFrame">
|
||||
<div class="container">
|
||||
<div class="calendar">
|
||||
<header>
|
||||
<pre class="left">â—€</pre>
|
||||
|
||||
<div class="header-display">
|
||||
<p class="display">""</p>
|
||||
</div>
|
||||
|
||||
<pre class="right">â–¶</pre>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="week">
|
||||
<div>Su</div>
|
||||
<div>Mo</div>
|
||||
<div>Tu</div>
|
||||
<div>We</div>
|
||||
<div>Th</div>
|
||||
<div>Fr</div>
|
||||
<div>Sa</div>
|
||||
</div>
|
||||
<div class="days"></div>
|
||||
</div>
|
||||
<div class="divToday">Today</div>
|
||||
<!--<div class="display-selected">
|
||||
<p class="selected"></p>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*variables*/
|
||||
:root {
|
||||
--white: #ffff;
|
||||
--main: #3C228A;
|
||||
--accent: #211D44;
|
||||
--accent-2: #ebedf0;
|
||||
}
|
||||
|
||||
/*styles*/
|
||||
.divToday:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.divToday {
|
||||
background-color: var(--accent);
|
||||
color: var(--white);
|
||||
font-weight: 700;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.calFrame {
|
||||
background-color: var(--white);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.days {
|
||||
height: 144px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: var(--white);
|
||||
border-radius: 35px;
|
||||
border: 1px solid;
|
||||
padding: 1em;
|
||||
height: 265px;
|
||||
width: 280px;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* padding: 4px; */
|
||||
width: 230px;
|
||||
}
|
||||
.header-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-display p {
|
||||
color: var(--accent);
|
||||
margin: 5px;
|
||||
font-size: 1.2rem;
|
||||
word-spacing: 0.5rem;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
cursor: unset;
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.right {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.days, .week {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
margin: auto;
|
||||
/* padding: 0px 20px; */
|
||||
justify-content: space-between;
|
||||
width: 210px;
|
||||
}
|
||||
.week div, .days div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.days div:hover {
|
||||
background: var(--accent-2);
|
||||
color: rgb(25, 25, 201);
|
||||
cursor: pointer;
|
||||
}
|
||||
.week div {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.current-date {
|
||||
background-color: var(--accent);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.has-event {
|
||||
background-color: red;
|
||||
color: var(--white);
|
||||
}
|
||||
.display-selected {
|
||||
margin-bottom: 10px;
|
||||
padding: 20px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"];
|
||||
let display = document.querySelector(".display");
|
||||
let days = document.querySelector(".days");
|
||||
let previous = document.querySelector(".left");
|
||||
let next = document.querySelector(".right");
|
||||
let selected = document.querySelector(".selected");
|
||||
let today = document.querySelector(".divToday");
|
||||
|
||||
let date = new Date();
|
||||
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth();
|
||||
|
||||
// Main function to render Calendar
|
||||
function displayCalendar() {
|
||||
const firstDay = new Date(year, month, 1);
|
||||
|
||||
const lastDay = new Date(year, month + 1, 0);
|
||||
|
||||
const firstDayIndex = firstDay.getDay(); //4
|
||||
|
||||
const numberOfDays = lastDay.getDate(); //31
|
||||
|
||||
|
||||
let formattedDate = montharr[firstDay.getMonth()]+" " +firstDay.getFullYear().toString();
|
||||
|
||||
display.innerHTML = `${formattedDate}`;
|
||||
|
||||
for (let x = 1; x <= firstDayIndex; x++) {
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML += "";
|
||||
|
||||
days.appendChild(div);
|
||||
}
|
||||
//console.log("In Display " + month + " Year " + year);
|
||||
for (let i = 1; i <= numberOfDays; i++) {
|
||||
let div = document.createElement("div");
|
||||
let currentDate = new Date(year, month, i);
|
||||
|
||||
div.dataset.date = currentDate.getDate().toString()+montharr[currentDate.getMonth()]+currentDate.getFullYear().toString();
|
||||
|
||||
|
||||
div.innerHTML += i;
|
||||
days.appendChild(div);
|
||||
if (
|
||||
currentDate.getFullYear() === new Date().getFullYear() &&
|
||||
currentDate.getMonth() === new Date().getMonth() &&
|
||||
currentDate.getDate() === new Date().getDate()
|
||||
)
|
||||
{
|
||||
div.classList.add("current-date");
|
||||
}
|
||||
if (training_eventsArr.includes(div.dataset.date))
|
||||
{
|
||||
div.classList.add("has-event");
|
||||
|
||||
div.outerHTML="<a href='app/training_events' style='text-decoration: none;' target='_blank'>"+div.outerHTML+"</a>";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function to display the calendar
|
||||
displayCalendar();
|
||||
|
||||
//Today Event Listener
|
||||
today.addEventListener("click", () => {
|
||||
days.innerHTML = "";
|
||||
date = new Date();
|
||||
year = date.getFullYear();
|
||||
month = date.getMonth();
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
displayCalendar();
|
||||
|
||||
});
|
||||
|
||||
|
||||
//Previous Event Listener
|
||||
previous.addEventListener("click", () => {
|
||||
|
||||
if ( year === new Date().getFullYear() && month === new Date().getMonth() )
|
||||
{
|
||||
|
||||
return; //Skip the Previous if it is Current Month as thie is for Upcoming Events
|
||||
}
|
||||
days.innerHTML = "";
|
||||
//selected.innerHTML = "";
|
||||
//console.log("Before Pre set " + month + " Year " + year);
|
||||
if (month < 0) {
|
||||
month = 11;
|
||||
year = year - 1;
|
||||
}
|
||||
|
||||
month = month - 1;
|
||||
date.setMonth(month);
|
||||
displayCalendar();
|
||||
//console.log("after Pre set " + month + " Year " + year);
|
||||
|
||||
//Disable Previous if the current Display Month is same as today Month as thie is for Upcoming Events
|
||||
if (year === new Date().getFullYear() && month === new Date().getMonth() )
|
||||
{
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
|
||||
}
|
||||
//displaySelected();
|
||||
});
|
||||
|
||||
//Next Button event listener
|
||||
next.addEventListener("click", () => {
|
||||
days.innerHTML = "";
|
||||
//selected.innerHTML = "";
|
||||
//console.log("Before Next set " + month + " Year " + year);
|
||||
if (month >= 11) {
|
||||
month = -1;
|
||||
year = year + 1;
|
||||
}
|
||||
|
||||
month = month + 1;
|
||||
date.setMonth(month);
|
||||
|
||||
displayCalendar();
|
||||
//console.log("After Next set " + month + " Year " + year);
|
||||
|
||||
if ( year === new Date().getFullYear() && month+1 === new Date().getMonth()+1 )
|
||||
{
|
||||
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="0.5";
|
||||
document.querySelector(".left").style.cursor="unset";
|
||||
|
||||
}
|
||||
else { //Enable Previous Buttom if the current display month is not currnet month
|
||||
document.querySelector(".left").style.color = "var(--accent)";
|
||||
document.querySelector(".left").style.opacity="100";
|
||||
document.querySelector(".left").style.cursor="pointer";
|
||||
|
||||
}
|
||||
// displaySelected();
|
||||
});
|
||||
|
||||
//Currently not in Use
|
||||
function displaySelected() {
|
||||
const dayElements = document.querySelectorAll(".days div");
|
||||
dayElements.forEach((day) => {
|
||||
day.addEventListener("click", (e) => {
|
||||
const selectedDate = e.target.dataset.date;
|
||||
selected.innerHTML = `Selected Date : ${selectedDate}`;
|
||||
});
|
||||
});
|
||||
}
|
||||
displaySelected();
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="np-card np-card-article">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.progress == 100 %}
|
||||
Viewed
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,61 @@
|
||||
<div class="np-card">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
{% comment %} {% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
{% if course.short_description != "" %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
{% if course.properties.course_length %}
|
||||
<div class="course-length">{{course.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div></div>
|
||||
{% endif %}
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% if course.enrolled? == false and course.properties.course_cost > 0 %}
|
||||
Course for Purchase
|
||||
{% else %}
|
||||
{% t shared.progress, count: course.progress %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
<a class="np-button np-button-wide" href="{{ course_path }}">
|
||||
{% if course.enrolled? == false and course.properties.course_cost > 0 %}
|
||||
${{ course.properties.course_cost }}
|
||||
{% elsif course.progress > 0 and course.progress < 100 %}
|
||||
Continue
|
||||
{% elsif course.progress == 100 %}
|
||||
Retake
|
||||
{% else %}
|
||||
View
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a href="{{course_path}}" class="np-card np-card-ongoing">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.course-img-content {
|
||||
padding: 16px 0px 0px 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,37 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<a href="{{course_path}}" class="np-card np-card-ongoing">
|
||||
<div class="np-card-container">
|
||||
<div class="np-image-wrapper">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<img
|
||||
class="np-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
</div>
|
||||
<div class="course-img-content">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="np-card-content np-card-content-vertical np-card-padding">
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ course.short_description }}
|
||||
</div>
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-progress-bar-container">
|
||||
<div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,74 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path">
|
||||
<div class="lp-image-wrapper">
|
||||
<img
|
||||
alt="{{ learning_path.name }}"
|
||||
class="np-card-image np-learning-path-image"
|
||||
src="{{ learning_path.image_url }}"
|
||||
/>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-hidden-desktop np-card-header">
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<div class="np-hidden-desktop np-card-header-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-card-header">
|
||||
<div class="np-card-header-type">{% t shared.learning_path.title %}</div>
|
||||
<i class="np-card-header-icon far fa-road"></i>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ learning_path.name }}
|
||||
</h3>
|
||||
|
||||
{% if learning_path.instructor_names %}
|
||||
<div class="np-card-content-subtitle">
|
||||
{{ learning_path.instructor_names }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-description">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
|
||||
<div class="np-hidden-mobile np-card-progress-bar-container">
|
||||
<div
|
||||
style="width: {{ learning_path.progress }}%"
|
||||
class="np-button-background-color np-card-progress-bar">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer">
|
||||
<div class="np-hidden-desktop np-card-content-progress
|
||||
np-button-color">
|
||||
{% t shared.progress, count: learning_path.progress %}
|
||||
</div>
|
||||
<a class="np-button" href="{% route learning_path, id: learning_path.id %}">
|
||||
{% t shared.view %}
|
||||
</a>
|
||||
<span class="np-hidden-mobile np-learning-path-items">
|
||||
<i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
|
||||
<span class="np-learning-path-items-count">
|
||||
{{ learning_path.items.count }} {% t .items %}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-stack">
|
||||
<div class="np-card-stack-level-1"></div>
|
||||
<div class="np-card-stack-level-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,55 @@
|
||||
<a href="{% route learning_path, id: learning_path.id %}" class="np-card np-card-learning-path-progress">
|
||||
<div class="np-card-container lp-progress-card-wrapper">
|
||||
<div class="learning-path-title np-hidden-desktop">{{ learning_path.name }}</div>
|
||||
<div class="lp-progress-circle-wrapper">
|
||||
<svg
|
||||
class="progress-ring"
|
||||
width="130"
|
||||
height="130"
|
||||
data-total="{{learning_path.items.count}}"
|
||||
>
|
||||
<circle
|
||||
class="progress-ring__circle circle-bg"
|
||||
stroke="#E0E4EB"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<circle
|
||||
class="progress-ring__circle circle-progress"
|
||||
stroke="#3C228A"
|
||||
stroke-width="9"
|
||||
fill="transparent"
|
||||
r="57"
|
||||
cx="65"
|
||||
cy="65"/>
|
||||
<text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#333" dy=".3em">{{learning_path.progress}}%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="lp-content">
|
||||
<div class="learning-path-title np-hidden-mobile">{{ learning_path.name }}</div>
|
||||
<div class="lp-total-courses">
|
||||
Total Courses: <span>{{ learning_path.items.count }} Courses</span>
|
||||
</div>
|
||||
<div class="lp-completed-items">
|
||||
{% assign completed_count = 0 %}
|
||||
|
||||
{% for item in learning_path.items %}
|
||||
{% if item.completed? %}
|
||||
{% assign completed_count = completed_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
Completed:
|
||||
{% if completed_count > 1 or completed_count == 0 %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Courses</span>
|
||||
{% else %}
|
||||
<span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Course</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<div class="np-card np-card-training-event">
|
||||
<div class="np-card-container">
|
||||
<div class="np-card-content-training-event">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ training_event.title }}
|
||||
</h3>
|
||||
<div class="np-card-content-subtitle">
|
||||
{% 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,203 @@
|
||||
<div class="categorie_section np-homepage-feature np-max-width" data-categories="{{categorie_name | remove:" " }}">
|
||||
<div class="np-homepage-feature-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{categorie_name }}
|
||||
</div>
|
||||
<div class="controls_{{categorie_name | remove:" " }} feature-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.size > 0 %}
|
||||
{% assign courseids = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name contains categorie_name %}
|
||||
{% assign courseids = courseids | append: course.id | append: ":" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% assign tempArr = courseids | split: ":" %}
|
||||
{% assign idArr = tempArr | uniq %}
|
||||
|
||||
<script>
|
||||
console.log("name {{categorie_name }} ")
|
||||
console.log("ids {{courseids}}")
|
||||
console.log("size {{idArr.size}}")
|
||||
</script>
|
||||
{% assign courses_count = 0 %}
|
||||
<div class="feature-courses-wrapper">
|
||||
<div class="slider_{{categorie_name | remove:" " }} feature-courses-slider">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for id in idArr %}
|
||||
{% if course.id == id %}
|
||||
{% assign courses_count = courses_count | plus: 1 %}
|
||||
<div class="slide_{{course.id | remove:"-" }} showCourse feature-course-slide">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses_count > 0 %}
|
||||
{% comment %} <div class="feature-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div> {% endcomment %}
|
||||
{% else %}
|
||||
<script>console.log("{{courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
You don't have any {{categorie_name}} training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Yikes! You don't have any feature training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
You don't have any {{categorie_name}} training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Yikes! You don't have any feature training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var featureSlider = tns({
|
||||
container: '.slider_{{categorie_name | remove:" " }}',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls: false,
|
||||
navPosition: "bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.controls_{{categorie_name | remove:" " }}'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
gutter: 16,
|
||||
controls: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.feature-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-feature {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text {
|
||||
padding: 0 0 32px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.feature-carousel-controls {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.feature-courses-slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper a {
|
||||
color: #3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-feature-text {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
<div class="col-xs-12 col-md-4 spacing-clear">
|
||||
{% include "certificates_verification" %}
|
||||
{% include "certificates_metadata" %}
|
||||
</div>
|
||||
@ -0,0 +1,59 @@
|
||||
<div class="np-card spacing-clear">
|
||||
<div class="np-card-container padding-spacing-8">
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .learner %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{certificate.learner_name}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
|
||||
{% if certificate.issuer_name_enabled? %}
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title">
|
||||
{% t .issued_by %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issuer_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .issued_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.issue_date }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="row np-certificate-metadata-row">
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-title" >
|
||||
{% t .expires_on %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-6">
|
||||
<p class="np-certificate-metadata-value">
|
||||
{{ certificate.expiration_date_translation }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<script type="text/javascript">
|
||||
const resizeIframe = () => {
|
||||
const combinedPadding = 16;
|
||||
const previewIframe = document.getElementById("previewIframe");
|
||||
const previewIFrameCard = document.getElementById("previewIFrameCard");
|
||||
const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
|
||||
const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
|
||||
const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
|
||||
const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
|
||||
|
||||
templateInPreviewContainer.style.margin = 0;
|
||||
previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
|
||||
|
||||
const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
|
||||
const scaledIframeHeight = scaledIframeWidth * certificateRatio;
|
||||
const scale = scaledIframeHeight / previewIframeContentHeight;
|
||||
|
||||
previewIframe.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
window.onresize = resizeIframe;
|
||||
</script>
|
||||
|
||||
<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
|
||||
<div class="np-card spacing-clear">
|
||||
<div id="previewIFrameCard" class="np-card-container np-certificate-card">
|
||||
<iframe
|
||||
id="previewIframe"
|
||||
onload="resizeIframe()"
|
||||
class="np-certificate-iframe-preview"
|
||||
srcdoc="{{ certificate.certificate_template_html }}"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="top-bar np-certificate-top-bar-spacing">
|
||||
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
|
||||
<div class="top-bar__col">
|
||||
<h2 class="np-certificate-title" >
|
||||
{{certificate.certificate_name}}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="button-container np-certificate-button-container">
|
||||
{% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
|
||||
<a
|
||||
class="np-button np-certificate-button np-certificate-button-secondary"
|
||||
href="{{certificate.linkedin_share_url}}"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="fab fa-linkedin np-certificate-share-icon"></i>
|
||||
{% t .share %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<button
|
||||
id="print"
|
||||
type="button"
|
||||
class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
|
||||
>
|
||||
{% t .print %}
|
||||
</button>
|
||||
{% if certificate.generating_pdf %}
|
||||
<div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
|
||||
<i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
href="{{ certificate.download_url }}"
|
||||
aria-label="{% t .download %}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
download
|
||||
class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
|
||||
>
|
||||
{% t .download %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-card spacing-clear np-certificate-verification-card">
|
||||
<div class="np-card-container np-certificate-verification-container">
|
||||
<div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
|
||||
<i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
|
||||
</div>
|
||||
<div class="np-certificate-verification-info-container">
|
||||
<h2 class="np-certificate-verification-info-status spacing-clear">
|
||||
{{certificate.verification_title}}
|
||||
</h2>
|
||||
<p class="np-certificate-verification-info-description spacing-clear">
|
||||
{{certificate.verification_description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,54 @@
|
||||
{% assign categories = current_school.filterable_categories %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
{% for learning_path in learning_paths.available %}
|
||||
{% if learning_path.has_certificate? %}
|
||||
<a href="app/learning_paths/{{learning_path.id}}" style="text-decoration: unset;">
|
||||
<div class="content-catds">
|
||||
<div class="content-catds-text">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
<div class="content-arrow"><i class="far fa-duotone fa-solid fa-greater-than"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.content-catds {
|
||||
border: 2px solid #bac4ca;
|
||||
border-radius: 10px;
|
||||
/* padding: 5px; */
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* align-content: stretch; */
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.content-catds:hover {
|
||||
background-color: lightgray;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-catds-text {
|
||||
color: #333;
|
||||
padding-left: 20px;
|
||||
font-size: 17px;
|
||||
/* margin-bottom: 24px; */
|
||||
height: 30px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.content-arrow {
|
||||
padding-top: 5px;
|
||||
background-color: bisque;
|
||||
height: 30px;
|
||||
width: 50px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,4 @@
|
||||
<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
|
||||
<span class="np-course-outline-content-activity-title">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
@ -0,0 +1,15 @@
|
||||
{% if course.enrolled? %}
|
||||
<a
|
||||
href="{% route activity_viewer,
|
||||
id: activity.id,
|
||||
course_id: params.course_id,
|
||||
learning_path_id: params.learning_path_id
|
||||
%}" class="{{ class }}"
|
||||
>
|
||||
{{ activity.title }}
|
||||
</a>
|
||||
{% else%}
|
||||
<span class="{{ class }}">
|
||||
{{ activity.title }}
|
||||
</span>
|
||||
{% endif %}
|
||||
@ -0,0 +1,10 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for category in course.categories %}
|
||||
<div class="np-content-categories-content-item">
|
||||
{{ category.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
@ -0,0 +1,45 @@
|
||||
<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 col-md-5">
|
||||
<div class="course-image-wrapper">
|
||||
<div class="course-title">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-top-image-spacing"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
{% 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 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
<div class="np-alert" id="fiveserv-alert" style="background-color: red; color: white; display:none; font-weight: 500;">
|
||||
</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,35 @@
|
||||
<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="javascript:goBack();" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{% comment %} {{ course.name }} {% endcomment %}
|
||||
</div>
|
||||
<div class="course-image-wrapper np-hidden-desktop">
|
||||
<div class="course-title ">{{course.name}}</div>
|
||||
<img
|
||||
src="{{ course.image_url }}"
|
||||
class="np-top-image np-hidden-desktop"
|
||||
alt="{{ course.name }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function goBack() {
|
||||
console.log("go back function")
|
||||
const fallbackUrl = '/app';
|
||||
var prevPage = window.location.href;
|
||||
|
||||
window.history.go(-1);
|
||||
|
||||
setTimeout(function(){
|
||||
if (window.location.href == prevPage) {
|
||||
window.location.href = fallbackUrl;
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,22 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-flex">
|
||||
{% for instructor in course.instructors %}
|
||||
<div class="np-content-instructors-content-item">
|
||||
<img
|
||||
src="{{ instructor.avatar_url }}"
|
||||
class="np-content-instructors-content-image"
|
||||
alt="{{ instructor.name }}"
|
||||
/>
|
||||
<div class="np-content-instructors-content-description">
|
||||
<div class="np-content-instructors-content-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="np-content-instructors-content-info np-text-light">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-card-container np-card-padding-large">
|
||||
{% include "course_header" %}
|
||||
<div class="np-top-cta">
|
||||
{% include "course_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.progress == 0 %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_outline" %}
|
||||
</div>
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_description" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.categories.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_categories" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.instructors.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_instructors" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if course.events.any? %}
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "course_events" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-course-outline">
|
||||
<div class="np-text-title np-course-outline-title">
|
||||
{% t .header, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-course-outline-content">
|
||||
<ol class="np-course-outline-content-section">
|
||||
{% for section in course.sections %}
|
||||
<li class="np-course-outline-content-section-list">
|
||||
<div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
|
||||
{{ section.name }}
|
||||
</div>
|
||||
<ol class="np-course-outline-content-activity">
|
||||
{% for activity in section.activities %}
|
||||
|
||||
<li class="np-course-outline-content-activity-list">
|
||||
{% if activity.completed? %}
|
||||
<i class="fas fa-circle np-course-outline-content-activity-icon np-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,130 @@
|
||||
<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>
|
||||
|
||||
{% if course.enrolled? == false and course.properties.course_cost != 0 %}
|
||||
<div class="np-top-cta-progress-text np-button-color" style="font-size: 25px;">
|
||||
$ {{ course.properties.course_cost }}
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
<input id="snappayhppform_response" name="snappayhppform_response" />
|
||||
<button type="button" value="Submit" onclick="myclick()" class="button" style="color: white; border:none; background:transparent;">
|
||||
<strong>Purchase</strong>
|
||||
<div id='mylink'></div>
|
||||
</button>
|
||||
<input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
|
||||
<div class="np-top-cta-progress-text
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if course.learner_can_retake? %}
|
||||
<form action="{% route course_retake, id: course.id %}" method="POST">
|
||||
{% form_authenticity_token %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .retake, key: current_school.course_vocabulary %}
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.course.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %}
|
||||
<div id="dvsnappay_hppform">
|
||||
</div>
|
||||
<div id="dvsnappay_hppform">
|
||||
<!-- HTML is dynamically placed here -->
|
||||
</div>
|
||||
{% endcomment %}
|
||||
<script type="text/javascript">
|
||||
function myclick() {
|
||||
sessionStorage.clear()
|
||||
var mylink = document.getElementById('mylink');
|
||||
mylink.onclick = function () {
|
||||
var t = document.createElement("script");
|
||||
t.setAttribute("id", "snappay_hppform");
|
||||
t.setAttribute("src", "https://stage.snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
|
||||
t.setAttribute("data-target", "#snappayhppform_response");
|
||||
t.setAttribute("data-callback", "submit_external_ecommerce");
|
||||
t.setAttribute("data-accountid", "1003003518");
|
||||
t.setAttribute("data-merchantid", "822200009000");
|
||||
t.setAttribute("data-customerid", "100");
|
||||
t.setAttribute("data-paymentmode", "CC");
|
||||
t.setAttribute("data-transactionamount", '{{ course.properties.course_cost }}');
|
||||
t.setAttribute("data-currencycode", "USD");
|
||||
t.setAttribute("data-firstname", "{{ current_person.first_name }}");
|
||||
t.setAttribute("data-lastname", "{{ current_person.last_name }}");
|
||||
t.setAttribute("data-email", "{{ current_person.email }}");
|
||||
t.setAttribute("data-redirectionurl", "https://scintillasandbox.northpass.com/app/courses/{{ course.id }}"); //url they are currently on
|
||||
t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage");
|
||||
document.getElementsByTagName("head")[0].appendChild(t);
|
||||
return false;
|
||||
}
|
||||
document.getElementById('mylink').click();
|
||||
}
|
||||
|
||||
var response = document.getElementById('snappayhppform_response');
|
||||
function submit_external_ecommerce() {
|
||||
var result = $("#snappayhppform_response").val();
|
||||
sessionStorage.setItem("snappayhpp_response", result);
|
||||
sessionStorage.setItem("caller", "js");
|
||||
var obj = JSON.parse(result);
|
||||
var response = obj['response']
|
||||
var inside = JSON.parse(obj['response'])
|
||||
var stringside = JSON.stringify(inside)
|
||||
sessionStorage.setItem("stringside", stringside)
|
||||
}
|
||||
|
||||
|
||||
var error_code = JSON.parse(sessionStorage.getItem('stringside')).pgreturncode
|
||||
var error_desc = JSON.parse(sessionStorage.getItem('stringside')).pgreturndescription
|
||||
if(error_code != 000 ) {
|
||||
var alert = document.getElementById("fiveserv-alert")
|
||||
document.getElementById("fiveserv-alert").style.display = 'grid';
|
||||
var error_text = document.createTextNode(error_desc + ". Please try again.");
|
||||
alert.appendChild(error_text)
|
||||
sessionStorage.clear()
|
||||
} else {
|
||||
window.location.replace('https://scintillasandbox.northpass.com/c/{{ course.enrollment_code }}')
|
||||
sessionStorage.clear()
|
||||
}
|
||||
// Set course prop as whole number, if 0, don't do anything
|
||||
// If user is not enrolled in course, run functions - check error message
|
||||
// With redirect they will land back on page, with error message from sessionstorage
|
||||
// If no error, auto-redirect/click to enrollment link. window.replace(/c/aklwjdalkjd)
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,34 @@
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
{% if course.id == "6cc26c57-34db-4b8e-a38b-ad321ce18add" or course.id == "ac4fbf2e-ed8f-404d-b995-f0ef73481466" %}
|
||||
{% if current_person.properties.hide_api_certification_exam_course == false %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
|
||||
{% unless course.progress == 100 %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,35 @@
|
||||
{% if courses.enrolled.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for course in courses.enrolled %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
{% if course.id == "6cc26c57-34db-4b8e-a38b-ad321ce18add" or course.id == "ac4fbf2e-ed8f-404d-b995-f0ef73481466" %}
|
||||
{% if current_person.properties.hide_api_certification_exam_course == false %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
|
||||
{% unless course.progress == 100 %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% else %}
|
||||
<div class="{{ class }}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.index,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ message }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="{{ message }}" />
|
||||
</div>
|
||||
@ -0,0 +1,194 @@
|
||||
<div class="np-homepage-ongoing np-max-width">
|
||||
<div class="np-homepage-ongoing-text">
|
||||
<div class="np-homepage-headline">
|
||||
Ongoing Training
|
||||
</div>
|
||||
<div class="ongoing-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign ongoing_courses_count = 0 %}
|
||||
<div class="ongoing-courses-wrapper">
|
||||
<div class="ongoing-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course == false %}
|
||||
{% if course.progress > 0 and course.progress < 100 %}
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_banner" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if ongoing_courses_count > 0 %}
|
||||
<div class="ongoing-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{ongoing_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry, you don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry, you don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var ongoingSlider = tns({
|
||||
container: '.ongoing-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.ongoing-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
controls:true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.ongoing-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.ongoing-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-ongoing-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,108 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="copyright">© 2025 Walmart Inc.</div>
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
{{ website_footer.school_customer_service_email }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.np-footer {
|
||||
max-width:1380px;
|
||||
margin:auto;
|
||||
border-top: 1px solid #DADCE0;
|
||||
padding: 24px 16px 48px;
|
||||
}
|
||||
|
||||
.np-footer-top {
|
||||
justify-content:center;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.np-footer-navigation-list {
|
||||
flex-direction:row;
|
||||
flex-wrap:wrap;
|
||||
margin:0;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
.np-footer-navigation {
|
||||
min-height:auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
font-size:16px;
|
||||
line-height:30px;
|
||||
margin: 0 12px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width:1381px) {
|
||||
.np-footer {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.np-footer-navigation-link {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
@ -0,0 +1,391 @@
|
||||
<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 mobile-menu-open np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<i class="fal fa-times"></i>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</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=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="Learn Scintilla"
|
||||
class="np-header-logo-image"
|
||||
src="http://i5.walmartimages.com/dfw/63925b23-d1f5/k2-_a36e7b0e-4797-4a93-aebb-cc2248fb80dc.v1.png"
|
||||
/>
|
||||
</a>
|
||||
<div class="header-dropdown-container np-hidden-mobile">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.scintilla.com/apps">Scintilla</a>
|
||||
<a href="https://www.scintilla.com/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.scintilla.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.scintilla.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.scintilla.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-dropdown-container np-hidden-desktop">
|
||||
<div class="dropdown-arrow"></div>
|
||||
<div class="header-dropdown">
|
||||
<a href="https://www.scintilla.com/apps">Scintilla</a>
|
||||
<a href="https://www.scintilla/shopperbehavior/dh.clientportal.web/web/#/">Shopper Behavior</a>
|
||||
<a href="https://www.scintilla.com/customerperception">Customer Perception</a>
|
||||
<a href="https://www.scintilla.com/reportbuilder">Report Builder</a>
|
||||
<a href="https://www.scintilla.com/channelperformance/selectcategories">Insights</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-text np-hidden-desktop">Learn</div>
|
||||
<div class="header-text np-hidden-mobile">Scintilla Learn</div>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon 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
|
||||
>
|
||||
<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
|
||||
</svg>
|
||||
<div class="user-profile">
|
||||
{% if current_person.first_name %}
|
||||
{{current_person.first_name | slice: 0}}
|
||||
{% endif %}
|
||||
</div>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/profile">Profile</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintillae.com/admin">Admin</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/resources">Resources</a>
|
||||
<a class="np-header-avatar-tooltip-navigation-link" href="https://www.scintilla.com/support">Support</a>
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
aria-label="{% t shared.sign_in %}"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
<div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
|
||||
<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.sub_navigation %}
|
||||
{% unless website_navigation.label == "Events" %}
|
||||
<a
|
||||
href="{{ website_navigation.url }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
{{ website_navigation.label }}
|
||||
</a>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<a
|
||||
href="/app/articles"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Articles
|
||||
</a>
|
||||
<a
|
||||
href="/app/certificates"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
>
|
||||
Certificates
|
||||
</a>
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.np-header-content {
|
||||
max-width:1920px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.np-header-logo {
|
||||
justify-content: flex-start;
|
||||
margin: 0 auto 0 0;
|
||||
flex-grow:unset;
|
||||
position:relative;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.np-header-logo-image {
|
||||
height:50px;
|
||||
}
|
||||
|
||||
.dropdown-arrow {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0 22px;
|
||||
height: 64px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.dropdown-arrow:after {
|
||||
content: "\f078";
|
||||
font-family: "Font Awesome 5 Pro";
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
transition: transform 0.2s;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
|
||||
.header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
|
||||
transform: rotate(180deg) translateY(5px);
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
display:none;
|
||||
position:absolute;
|
||||
background-color:#fff;
|
||||
z-index:10;
|
||||
left:32px;
|
||||
top: 56px;
|
||||
padding: 8px 0;
|
||||
font-size:16px;
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
min-width:220px;
|
||||
}
|
||||
|
||||
.header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
|
||||
.header-dropdown-container.np-hidden-desktop.open .header-dropdown {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.header-dropdown a {
|
||||
display:block;
|
||||
padding: 16px;
|
||||
color:#282828;
|
||||
text-decoration:none;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.header-dropdown a:hover {
|
||||
background-color:#F2F2F2;
|
||||
}
|
||||
|
||||
.np-header-logo .header-text {
|
||||
font-size:24px;
|
||||
font-weight:400;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
background-color: #3C228A;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height:26px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
margin-left:14px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content .user-profile {
|
||||
margin-top: 24px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link {
|
||||
font-weight: 400;
|
||||
font-size:16px;
|
||||
color:#333;
|
||||
padding:22px 16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip-navigation-link:hover {
|
||||
background: #F2F2F2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.np-header-search-input {
|
||||
background-color:#F2F2F2;
|
||||
opacity: 0.15;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.np-header-search-icon {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
.np-header-avatar-button,
|
||||
.np-header-mobile-menu-nav-button {
|
||||
border: 1px solid #DADCE0;
|
||||
padding: 4px 4px 4px 10px;
|
||||
border-radius: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width:auto;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
.np-header-avatar-tooltip {
|
||||
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-nav {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.np-header-mobile-menu-content-button {
|
||||
color:#333;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-header {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.np-header-search-input:focus {
|
||||
background:#F2F2F2;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height:30px;
|
||||
}
|
||||
|
||||
.header-dropdown {
|
||||
top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.np-header-desktop-nav-list {
|
||||
margin-right:48px;
|
||||
}
|
||||
|
||||
.np-header-desktop-nav-item {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,17 @@
|
||||
<header class="np-box-header np-header-color">
|
||||
<a class="np-box-header-link" href="{% route home %}">
|
||||
{% if current_school.logo_url %}
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
class="np-box-header-logo"
|
||||
/>
|
||||
{% else %}
|
||||
<span class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
{% include "messages" %}
|
||||
@ -0,0 +1,287 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{ homepage.featured_courses_headline }}
|
||||
</div>
|
||||
<div id="dvsnappay_hppform">
|
||||
<!-- HTML is dynamically placed here -->
|
||||
</div>
|
||||
<input id="snappayhppform_response" name="snappayhppform_response" />
|
||||
|
||||
|
||||
<button type="button" value="Submit" onclick="myclick()" class="button" style="border:none; background:transparent;">
|
||||
Purchase access to a course!
|
||||
<div id='mylink'></div>
|
||||
</button>
|
||||
|
||||
|
||||
<div id="dvsnappay_hppform">
|
||||
</div>
|
||||
<input src="https://stage.snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
|
||||
<script type="text/javascript">
|
||||
function myclick() {
|
||||
var mylink = document.getElementById('mylink');
|
||||
mylink.onclick = function () {
|
||||
var t = document.createElement("script");
|
||||
t.setAttribute("id", "snappay_hppform");
|
||||
t.setAttribute("src", "https://stage.snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
|
||||
t.setAttribute("data-target", "#snappayhppform_response");
|
||||
t.setAttribute("data-callback", "submit_external_ecommerce");
|
||||
t.setAttribute("data-accountid", "1003003518");
|
||||
t.setAttribute("data-merchantid", "822200009000");
|
||||
t.setAttribute("data-customerid", "100");
|
||||
t.setAttribute("data-paymentmode", "CC");
|
||||
t.setAttribute("data-transactionamount", "100");
|
||||
t.setAttribute("data-currencycode", "USD");
|
||||
t.setAttribute("data-firstname", "No one");
|
||||
t.setAttribute("data-lastname", "Noooo One");
|
||||
t.setAttribute("data-email", "Noone@none.com");
|
||||
t.setAttribute("data-redirectionurl", "https://scintillasandbox.northpass.com/app");
|
||||
t.setAttribute("data-snappayurl", "https://stage.snappayglobal.com/Interop/HostedPaymentPage");
|
||||
document.getElementsByTagName("head")[0].appendChild(t);
|
||||
return false;
|
||||
}
|
||||
document.getElementById('mylink').click();
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
var response = document.getElementById('snappayhppform_response');
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
function submit_external_ecommerce() {
|
||||
var result = $("#snappayhppform_response").val();
|
||||
sessionStorage.setItem("snappayhpp_response", result);
|
||||
sessionStorage.setItem("caller", "js");
|
||||
|
||||
var obj = JSON.parse(result);
|
||||
var response = obj['response']
|
||||
// var pgreturncode = response['pgreturncode']
|
||||
// sessionStorage.setItem("returncode", pgreturncode)
|
||||
var inside = JSON.parse(obj['response'])
|
||||
console.log(inside)
|
||||
sessionStorage.setItem("insidevals", inside)
|
||||
var stringside = JSON.stringify(inside)
|
||||
sessionStorage.setItem("stringside", stringside)
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<div class="featured-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign featured_courses_count = 0 %}
|
||||
<div class="featured-courses-wrapper">
|
||||
<div class="featured-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.properties.is_article_course %}
|
||||
{% assign is_featured = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "featured" %}
|
||||
{% assign is_featured = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if featured_courses_count > 0 %}
|
||||
<div class="featured-see-more-wrapper">
|
||||
<a href="/app/articles">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! There is no Featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry! There is no Featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! There is no Featured content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry! There is no Featured content at the moment. Be sure to check back here later."
|
||||
/>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".featured-courses-slider .featured-course-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".featured-courses-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initFeaturedCoursesCarousel() {
|
||||
var featuredSlider = tns({
|
||||
container: '.featured-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:true,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.featured-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.featured-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.featured-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.featured-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.featured-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.featured-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.featured-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-featured-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
<div class="np-homepage-feature np-max-width">
|
||||
<div class="np-homepage-feature-text">
|
||||
<div class="np-homepage-headline">
|
||||
Featured Content
|
||||
</div>
|
||||
<div class="feature-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign feature_courses_count = 0 %}
|
||||
<div class="feature-courses-wrapper">
|
||||
<div class="feature-courses-slider">
|
||||
{% for course in items %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Featured" %}
|
||||
{% assign feature_courses_count = feature_courses_count | plus: 1 %}
|
||||
<div class="feature-course-slide">
|
||||
{% include "cards_course_banner" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if feature_courses_count > 0 %}
|
||||
<div class="feature-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{feature_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any Featured content at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry, you don't have any Featured content at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any Featured content at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry, you don't have any Featured content at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var featureSlider = tns({
|
||||
container: '.feature-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls: false,
|
||||
navPosition: "bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.feature-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
gutter: 16,
|
||||
controls: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.feature-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-feature {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text {
|
||||
padding: 0 0 32px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.feature-carousel-controls {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.feature-courses-slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper a {
|
||||
color: #3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-feature-text {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,192 @@
|
||||
<div class="np-homepage-ongoing np-max-width">
|
||||
<div class="np-homepage-ongoing-text">
|
||||
<div class="np-homepage-headline">
|
||||
Featured Content
|
||||
</div>
|
||||
<div class="ongoing-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign ongoing_courses_count = 0 %}
|
||||
<div class="ongoing-courses-wrapper">
|
||||
<div class="ongoing-courses-slider">
|
||||
{% for course in items %}
|
||||
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if ongoing_courses_count > 0 %}
|
||||
<div class="ongoing-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{ongoing_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Sorry! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var ongoingSlider = tns({
|
||||
container: '.ongoing-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.ongoing-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
controls:true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
.ongoing-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing {
|
||||
padding: 0 16px;
|
||||
margin-bottom:56px;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text {
|
||||
padding: 0 0 32px;
|
||||
text-align:left;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color:#333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls {
|
||||
align-self:flex-end;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition:opacity 0.2s;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor:default;
|
||||
}
|
||||
|
||||
.ongoing-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
.ongoing-courses-slider {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.ongoing-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card {
|
||||
margin:0 auto;
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.ongoing-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper a {
|
||||
color:#3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px){
|
||||
.np-homepage-ongoing-text {
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.np-homepage-ongoing-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ongoing-see-more-wrapper {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,209 @@
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Quick Learn
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign quick_learn_courses_count = 0 %}
|
||||
<div class="quick-learn-wrapper">
|
||||
<div class="quick-learn-slider">
|
||||
{% assign quick_learn_items_alphabetical = items | sort: "name" %}
|
||||
{% for course in quick_learn_items_alphabetical %}
|
||||
{% if quick_learn_courses_count < 3 %}
|
||||
{% unless course.properties.is_article_course %}
|
||||
{% assign is_quick_learn = false %}
|
||||
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | downcase %}
|
||||
{% if cat_name == "quick learn" %}
|
||||
{% assign is_quick_learn = true %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if is_quick_learn %}
|
||||
{% assign quick_learn_courses_count = quick_learn_courses_count | plus: 1 %}
|
||||
|
||||
<div class="quick-learn-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if quick_learn_courses_count > 0 %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! There is no quick learning content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry! There is no Featured content at the moment. Be sure to check back here later." />
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! There is no quick learning content at the moment. Be sure to check back here later.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry! There is no Featured content at the moment. Be sure to check back here later." />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("load", (event) => {
|
||||
var indexes = document.querySelectorAll(".quick-learn-slider .quick-learn-slide");
|
||||
var indexesArray = Array.from(indexes);
|
||||
|
||||
const sortByPosition = arr => {
|
||||
const positionSorter = (a, b) => {
|
||||
return a.dataset.position - b.dataset.position;
|
||||
}
|
||||
arr.sort(positionSorter);
|
||||
};
|
||||
|
||||
sortByPosition(indexesArray);
|
||||
|
||||
document.querySelector(".quick-learn-slider").innerHTML = ""
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".quick-learn-slider").appendChild(e));
|
||||
|
||||
|
||||
initQuickLearnCoursesCarousel()
|
||||
|
||||
});
|
||||
|
||||
function initQuickLearnCoursesCarousel() {
|
||||
var quickLearnSlider = tns({
|
||||
container: '.quick-learn-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls:false,
|
||||
navPosition:"bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items:3,
|
||||
gutter: 16,
|
||||
nav: false,
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.quick-learn-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-featured {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text {
|
||||
padding: 0 0 32px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.quick-learn-carousel-controls {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quick-learn-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.quick-learn-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.quick-learn-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.quick-learn-slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quick-learn-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.quick-learn-slide .np-card {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.quick-learn-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper a {
|
||||
color: #3C228A;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.np-homepage-featured-text {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-homepage-featured-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.featured-see-more-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,187 @@
|
||||
<div class="np-homepage-quicklearn np-max-width">
|
||||
<div class="np-homepage-quicklearn-text">
|
||||
<div class="np-homepage-headline">
|
||||
Quick Learn
|
||||
</div>
|
||||
<div class="quicklearn-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.size > 0 %}
|
||||
{% assign quicklearn_courses_count = 0 %}
|
||||
<div class="quicklearn-courses-wrapper">
|
||||
<div class="quicklearn-courses-slider">
|
||||
{% for course in items %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name == "Quick Learn" %}
|
||||
{% assign quicklearn_courses_count = quicklearn_courses_count | plus: 1 %}
|
||||
<div class="feature-course-slide">
|
||||
{% include "cards_course_banner" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if quicklearn_courses_count > 0 %}
|
||||
<div class="quicklearn-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{quicklearn_courses_count}}")</script>
|
||||
<div class="np-homepage-quicklearnd-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! You don't have any quick learn training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry! You don't have any quick learn training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-quicklearnd-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry! You don't have any quick learn training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Sorry! You don't have any quick learn training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/catalog" class="np-button">Explore Catalog</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var quicklearnSlider = tns({
|
||||
container: '.quicklearn-courses-slider',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls: false,
|
||||
navPosition: "bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.quicklearn-carousel-controls'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
gutter: 16,
|
||||
controls: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.quicklearn-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-quicklearn {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.np-homepage-quicklearn-text {
|
||||
padding: 0 0 32px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-homepage-quicklearn-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.quicklearn-carousel-controls {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quicklearn-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.quicklearn-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.quicklearn-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.quicklearn-courses-slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quicklearn-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.quicklearn-course-slide .np-card {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.quicklearn-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.quicklearn-see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.quicklearn-see-more-wrapper a {
|
||||
color: #3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-quicklearn-text {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-homepage-quicklearn-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.quicklearn-see-more-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,149 @@
|
||||
<section class="homepage-topics np-max-width np-subpage-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-section-header">Explore Courses by Category</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="category-cards">
|
||||
{% for category in categories.in_catalog %}
|
||||
{% assign category_name = category.name | downcase %}
|
||||
{% if category_name != "featured" and category_name != "articles" %}
|
||||
{% assign cat_image = "" %}
|
||||
|
||||
{% if category_name == "customer perception" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-customer-perception.png" %}
|
||||
{% elsif category_name == "shopper behavior" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-shopper-behavior.png" %}
|
||||
{% elsif category_name == "insights dashboard" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-insights-dashboard.png" %}
|
||||
{% elsif category_name == "report builder" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-report-builder.png" %}
|
||||
{% elsif category_name == "apis" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-apis.png" %}
|
||||
{% elsif category_name == "know your store" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourstore.png" %}
|
||||
{% elsif category_name == "metrics" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-metrics.png" %}
|
||||
{% elsif category_name == "channel performance" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-channel-performance.png" %}
|
||||
{% elsif category_name == "know your customer" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-knowyourcustomer.png" %}
|
||||
{% elsif category_name == "advanced" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-advanced.png" %}
|
||||
{% elsif category_name == "beginner" %}
|
||||
{% assign cat_image = "https://s3.amazonaws.com/static.northpass.com/walmart-luminate/category-image-beginner.png" %}
|
||||
{% endif %}
|
||||
|
||||
<a href="/app/catalog?filter%5Bcategory_uuid%5D%5Bin%5D%5B%5D={{category.id}}" class="category-card">
|
||||
{% comment %} {% if cat_image %}
|
||||
<img class="category-card-image" src="{{cat_image}}" />
|
||||
{% endif %} {% endcomment %}
|
||||
{% comment %} <div class="category-card-content">
|
||||
{{category.name}}
|
||||
</div> {% endcomment %}
|
||||
{{category.name}}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.homepage-topics {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.category-cards {
|
||||
display:flex;
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
border-radius:30px;
|
||||
border:2px solid #3c228a;
|
||||
background-color: #3c228a;
|
||||
color: #fff;
|
||||
width:100%;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
text-align:center;
|
||||
margin-bottom:16px;
|
||||
padding:16px;
|
||||
font-weight:700;
|
||||
transition:all 0.2s;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
background-color: #13014a;
|
||||
}
|
||||
|
||||
.category-card-image {
|
||||
max-width:80px;
|
||||
}
|
||||
|
||||
.category-card-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (min-width:500px) {
|
||||
.category-card {
|
||||
width:calc(50% - 16px);
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(odd) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(even) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.category-card {
|
||||
width:calc(33.33% - 22px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(even),
|
||||
.category-card:nth-child(odd) {
|
||||
margin:0 16px 32px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.category-card {
|
||||
width:calc(25% - 24px);
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+3) {
|
||||
margin-right:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(3n+1) {
|
||||
margin-left:16px;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+1) {
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
.category-card:nth-child(4n+4) {
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
}
|
||||
</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,75 @@
|
||||
{% assign full_course_obj = "" %}
|
||||
{% for course_obj in courses.in_catalog %}
|
||||
{% if course_obj.id == course.id %}
|
||||
{% assign full_course_obj = course_obj %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% 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-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
<div class="np-learning-path-outline-progress
|
||||
{% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
|
||||
">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<img
|
||||
src="{{ item.image }}"
|
||||
alt="{{ course.name }}"
|
||||
class="np-learning-path-outline-course-image"
|
||||
>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="np-learning-path-outline-description">
|
||||
{{ full_course_obj.short_description }}
|
||||
</div>
|
||||
{% if full_course_obj.properties.course_length %}
|
||||
<div class="course-length">{{full_course_obj.properties.course_length}}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if course.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .about %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ learning_path.description }}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<div class="np-card-container">
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
<div class="np-card-padding-dynamic">
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 np-grid-spacing">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.learning_path.title %}
|
||||
<i class="far fa-road np-button-color np-learning-path-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-icon-back"></i>
|
||||
</a>
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,35 @@
|
||||
<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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-6 col-md-5">
|
||||
<div class="lp-info">
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
{% include "learning_path_description" %}
|
||||
{% include "learning_path_instructors" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-7">
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
{% include "learning_path_outline" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -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,41 @@
|
||||
<div class="np-resource-header 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">
|
||||
{{ learning_path.name }}
|
||||
</div>
|
||||
{% comment %} <div class="lp-cover-image-wrapper">
|
||||
<div class="lp-title">{{learning_path.name}}</div>
|
||||
<img
|
||||
src="{{ learning_path.image_url }}"
|
||||
class="np-top-image"
|
||||
alt="{{ learning_path.name }}"
|
||||
/>
|
||||
</div> {% endcomment %}
|
||||
|
||||
<div class="np-top-cta">
|
||||
{% include "learning_path_progress_and_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if learning_path.in_progress? %}
|
||||
{% include "learning_path_outline" %}
|
||||
<div class="card-description">
|
||||
{% include "learning_path_description" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-description">
|
||||
{% 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,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,43 @@
|
||||
{% 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 %}
|
||||
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button np-button-big"
|
||||
{% if learning_path.enrolled? %}
|
||||
{% if learning_path.current_item.course? %}
|
||||
|
||||
href="{% route learning_path_course, id: learning_path.current_item.id, learning_path_id: learning_path.id %}"
|
||||
{% elsif learning_path.current_item.training_event? %}
|
||||
href="{% route training_session, id: learning_path.current_item.id %}"
|
||||
{% endif %}
|
||||
{% else %}
|
||||
href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
|
||||
{% endif %}
|
||||
>
|
||||
|
||||
{% if learning_path.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif learning_path.started? == false %}
|
||||
{% t shared.learning_path.start %}
|
||||
{% elsif learning_path.completed? %}
|
||||
{% t shared.learning_path.view %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
@ -0,0 +1,3 @@
|
||||
{% include "learning_path_desktop_header" %}
|
||||
{% include "learning_path_banners" %}
|
||||
{% include "learning_path_desktop_content" %}
|
||||
@ -0,0 +1,5 @@
|
||||
<div class="np-card-padding">
|
||||
{% include "learning_path_banners" %}
|
||||
</div>
|
||||
{% include "learning_path_mobile_header" %}
|
||||
{% include "learning_path_mobile_content" %}
|
||||
@ -0,0 +1,53 @@
|
||||
{% if learning_path.enrolled? and training_session.unlocked? %}
|
||||
<div class="np-learning-path-outline-bar np-hidden-mobile"></div>
|
||||
<a
|
||||
class="np-learning-path-outline-item np-card-container"
|
||||
href="{% route training_session, id: training_session.id %}"
|
||||
>
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
|
||||
<div class="np-events-content-time np-learning-path-outline-time np-button-color">
|
||||
{{ training_session.time }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
|
||||
<div class="np-card-content np-card-padding">
|
||||
<div class="np-events-content-date np-button-background-color">
|
||||
<div class="np-events-content-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-events-content-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-learning-path-outline-content">
|
||||
<div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
|
||||
<div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
|
||||
</div>
|
||||
{% if training_session.optional? %}
|
||||
<div class="np-optional-ribbon">
|
||||
{% t shared.optional %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-learning-paths-resources">
|
||||
{% if items.any? %}
|
||||
{% for learning_path in items %}
|
||||
{% include "cards_learning_path" with learning_path %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,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,37 @@
|
||||
{% if result.type == "course" %}
|
||||
{% unless result.course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" or result.course.id == "b3225a47-448d-4988-962a-18d37d6616d0" %}
|
||||
<div class="np-card np-search-result" data-id="{{result.course.id}}">
|
||||
<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.course.short_description}}</div>
|
||||
|
||||
</div>
|
||||
<div class="category-pills">
|
||||
{% for course in catalog_courses %}
|
||||
{% if course.id == result.course.id %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | upcase %}
|
||||
{% unless cat_name == "FEATURED" or cat_name == "ARTICLES" %}
|
||||
<div class="cat-item">{{cat.name}}</div>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endunless %}
|
||||
{% 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,49 @@
|
||||
<nav class="np-sub-navigation np-hidden-mobile">
|
||||
<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 class="np-sub-navigation-content-item articles-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/articles">
|
||||
<i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Articles
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
<div class="np-sub-navigation-content-item certifications-link">
|
||||
<a class="np-sub-navigation-content-item-link" href="/app/certifications">
|
||||
<i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
|
||||
Certifications
|
||||
</a>
|
||||
<div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app/articles") {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
|
||||
if (window.location.pathname == "/app/certifications") {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
|
||||
} else {
|
||||
document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.np-sub-navigation-content-item-link,
|
||||
.np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
|
||||
color:#333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,200 @@
|
||||
{% assign nameArr = categorie_fullname | remove: '[' | split: "]" %}
|
||||
{% assign categorie_name = nameArr[1] %}
|
||||
|
||||
<div class="categorie_section np-homepage-feature np-max-width" data-categories="{{categorie_name | remove:" " }}">
|
||||
<div class="np-homepage-feature-text">
|
||||
<div class="np-homepage-headline">
|
||||
{{categorie_name }}
|
||||
</div>
|
||||
<div class="controls_{{categorie_name | remove:" " }} feature-carousel-controls np-hidden-mobile">
|
||||
<div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
|
||||
<div class="next-arrow carousel-control"><i class="far fa-chevron-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.size > 0 %}
|
||||
{% assign courseids = "" %}
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for cat in course.categories %}
|
||||
{% if cat.name contains categorie_fullname %}
|
||||
{% assign courseids = courseids | append: course.id | append: ":" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% assign tempArr = courseids | split: ":" %}
|
||||
{% assign idArr = tempArr | uniq %}
|
||||
{% assign courses_count = 0 %}
|
||||
<div class="feature-courses-wrapper">
|
||||
<div class="slider_{{categorie_name | remove:" " }} feature-courses-slider">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% for id in idArr %}
|
||||
{% if course.id == id %}
|
||||
{% assign courses_count = courses_count | plus: 1 %}
|
||||
<div class="slide_{{course.id | remove:"-" }} showCourse feature-course-slide">
|
||||
{% include "cards_course" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if courses_count > 0 %}
|
||||
{% comment %} <div class="feature-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div> {% endcomment %}
|
||||
{% else %}
|
||||
<script>console.log("{{courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
You don't have any {{categorie_name}} training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Yikes! You don't have any feature training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
You don't have any {{categorie_name}} training at this moment.
|
||||
</div>
|
||||
<img class="np-zero-state-courses" alt="Yikes! You don't have any feature training at this moment." />
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
{% comment %} <a href="/app/catalog" class="np-button">Explore Catalog</a> {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("DOMContentLoaded", (event) => {
|
||||
|
||||
var featureSlider = tns({
|
||||
container: '.slider_{{categorie_name | remove:" " }}',
|
||||
items: 1,
|
||||
slideBy: 'page',
|
||||
autoplay: false,
|
||||
gutter: 8,
|
||||
controls: false,
|
||||
navPosition: "bottom",
|
||||
loop: false,
|
||||
mouseDrag: true,
|
||||
speed: 500,
|
||||
controlsContainer: document.querySelector('.controls_{{categorie_name | remove:" " }}'),
|
||||
responsive: {
|
||||
600: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
gutter: 16,
|
||||
controls: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style>
|
||||
.feature-courses-wrapper {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.np-homepage-feature {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text {
|
||||
padding: 0 0 32px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.feature-carousel-controls {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control {
|
||||
margin: 0 8px;
|
||||
background-color: #ebe8f3;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3c228a;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control[aria-disabled='true'] {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.feature-carousel-controls .carousel-control.next-arrow {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.feature-courses-slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feature-course-slide {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-course-slide .np-card-container {
|
||||
height: 100%;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper a {
|
||||
color: #3C228A;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.np-homepage-feature-text {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.np-homepage-feature-text .np-homepage-headline {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.feature-see-more-wrapper {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,61 @@
|
||||
{% assign categories = current_school.filterable_categories %}
|
||||
|
||||
{% assign categoryname = "" %}
|
||||
{% for category in categories %}
|
||||
{% assign categoryfullname = category.name %}
|
||||
{% assign nameArr = categoryfullname | remove: '[' | split: "]" %}
|
||||
{% assign categoryname = categoryname | append: nameArr[0] | append: ',' %}
|
||||
{% endfor %}
|
||||
{% assign tempArr = categoryname | split: "," %}
|
||||
{% assign catArr = tempArr | uniq %}
|
||||
|
||||
<div class="np-dashboard-resources">
|
||||
{% for catname in catArr %}
|
||||
<a href="app/filtred-catalog?catname={{catname | url_encode }}" style="text-decoration: unset;">
|
||||
<div class="content-catds">
|
||||
<div class="content-catds-text">
|
||||
{{ catname }}
|
||||
</div>
|
||||
<div class="content-arrow"><i class="far fa-duotone fa-solid fa-greater-than"></i></div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.content-catds {
|
||||
border: 2px solid #bac4ca;
|
||||
border-radius: 10px;
|
||||
/* padding: 5px; */
|
||||
text-align: center;
|
||||
margin: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* align-content: stretch; */
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
.content-catds:hover {
|
||||
background-color: lightgray;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-catds-text {
|
||||
color: #333;
|
||||
padding-left: 20px;
|
||||
font-size: 17px;
|
||||
/* margin-bottom: 24px; */
|
||||
height: 30px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.content-arrow {
|
||||
padding-top: 5px;
|
||||
background-color: bisque;
|
||||
height: 30px;
|
||||
width: 50px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.enrolled.any? %}
|
||||
{% for training_event in training_events.enrolled %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
<div class="np-filter">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="np-button dropdown-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t shared.filters.filter %}
|
||||
</button>
|
||||
|
||||
<div class="dropdown-menu" data-test="modal">
|
||||
<form method="get">
|
||||
<span class="dropdown-label">
|
||||
{% t shared.filters.by_event_type %}
|
||||
</span>
|
||||
<ul class="dropdown-checkboxes">
|
||||
{% for event_type in training_events.filters.event_types %}
|
||||
{% capture label %}
|
||||
{% t shared.event_types, key: event_type.value %}
|
||||
{% endcapture %}
|
||||
<li>
|
||||
{% include "filter_checkbox",
|
||||
label: label,
|
||||
name: event_type.name,
|
||||
value: event_type.value
|
||||
selected: event_type.selected?
|
||||
%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% capture label %}{% t shared.filters.by_course %}{% endcapture %}
|
||||
{%
|
||||
include "filter_select",
|
||||
filters: training_events.filters.courses,
|
||||
key: "courses_uuid",
|
||||
label: label
|
||||
%}
|
||||
|
||||
<button
|
||||
class="np-button dropdown-button-apply"
|
||||
data-toggle-trigger-off
|
||||
type="submit"
|
||||
>
|
||||
{% t shared.filters.apply %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,13 @@
|
||||
<div class="np-dashboard-resources">
|
||||
{% if training_events.available.any? %}
|
||||
<div class="row row-with-thumbnails">
|
||||
{% for training_event in training_events.available %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_training_event" with training_event %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,9 @@
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-training-events"
|
||||
alt="{% t .empty %}"
|
||||
/>
|
||||
</div>
|
||||
@ -0,0 +1,52 @@
|
||||
<div class="dropdown dropdown-calendar">
|
||||
<button
|
||||
class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
|
||||
data-toggle-class="is-open"
|
||||
data-toggle-escape
|
||||
data-toggle-outside
|
||||
data-toggle-target-next
|
||||
type="button"
|
||||
>
|
||||
{% t .add_to_calendar %}
|
||||
<i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-calendar-menu">
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.google_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .google_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .outlook_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.outlook_office_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .office_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
<li class="dropdown-calendar-item">
|
||||
<a
|
||||
class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
|
||||
href="{{ training_session.ical_calendar_url }}"
|
||||
target="_blank"
|
||||
>
|
||||
{% t .ical_calendar %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,53 @@
|
||||
{% if training_session.approved? %}
|
||||
<div class="np-training-session-cta-note">
|
||||
<i class="far fa-check np-training-session-icon"></i>
|
||||
{% t .registered %}
|
||||
</div>
|
||||
{% elsif training_session.pending? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .pending %}
|
||||
</div>
|
||||
{% elsif training_session.denied? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .denied %}
|
||||
</div>
|
||||
{% elsif training_session.too_late? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .too_late %}
|
||||
</div>
|
||||
{% elsif training_session.no_seats? %}
|
||||
<div class="np-training-session-cta-note np-training-session-cta-note-error">
|
||||
{% t .no_seats %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-training-session-cta">
|
||||
<div class="np-training-session-cta-buttons">
|
||||
<form
|
||||
action="{% route training_session_registration, id: training_session.id %}"
|
||||
method="post"
|
||||
>
|
||||
{% form_authenticity_token %}
|
||||
|
||||
{% if training_session.internal? and training_session.approved? %}
|
||||
{% if features.training_events_google_calendar? %}
|
||||
{% include "training_session_calendars" %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big np-button-secondary">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
|
||||
{% t .unregister %}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<input type="hidden" name="_method" value="delete" />
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.not_registered? %}
|
||||
<button type="submit" class="np-top-button np-button np-button-big">
|
||||
{% t .register %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<div class="np-card-training-session-date">
|
||||
<div class="np-button-background-color np-card-training-session-date-bar"></div>
|
||||
<div class="np-card-training-session-date-day">
|
||||
{{ training_session.day }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="np-card-training-session-date-month">
|
||||
{{ training_session.month }}
|
||||
</div>
|
||||
<div class="np-card-training-session-date-year">
|
||||
{{ training_session.year }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
<h3 class="np-card-heading">
|
||||
{% t .header %}
|
||||
</h3>
|
||||
<div class="np-card-text">
|
||||
{{ training_event.description }}
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
<div class="np-resource-header np-resource-header-card np-card-padding-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
<div class="np-card-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-5">
|
||||
{% include "training_session_details" %}
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-padding-large">
|
||||
<div class="np-card-content-divider">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-5 np-grid-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
{% include "training_session_more_sessions" %}
|
||||
{% else %}
|
||||
<div class="np-training-session-zero-state">
|
||||
<img
|
||||
alt="{% t .empty %}"
|
||||
class="np-zero-state-training-sessions"
|
||||
/>
|
||||
<div class="np-training-session-zero-state-text">
|
||||
{% t .empty %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_date" %}
|
||||
|
||||
<div class="np-training-session-time">
|
||||
<i class="fal fa-clock np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.time_period }} {{ training_session.time_zone }}
|
||||
</div>
|
||||
|
||||
{% if training_session.location %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
{{ training_session.location }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if training_session.session_url %}
|
||||
<div class="np-training-session-location">
|
||||
<i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
|
||||
<a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
|
||||
{{ training_session.session_url }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@ -0,0 +1,10 @@
|
||||
<div class="np-top-vocabulary np-text-title">
|
||||
{% t shared.event_types, key: training_event.event_type %}
|
||||
<i class="fal fa-users-class np-button-color np-training-session-icon"></i>
|
||||
</div>
|
||||
<div class="np-top-title">
|
||||
<a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
|
||||
<i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
|
||||
</a>
|
||||
{{ training_event.title }}
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
<div class="np-card-container-training-session">
|
||||
<div class="np-card-spacing-large">
|
||||
{% include "training_session_header" %}
|
||||
</div>
|
||||
{% include "training_session_details" %}
|
||||
<div class="np-card-padding-large">
|
||||
{% include "training_session_cta" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="np-card-container np-card-padding np-card-spacing">
|
||||
{% include "training_session_description" %}
|
||||
</div>
|
||||
|
||||
{% if training_event.sessions.size > 1 %}
|
||||
<div class="np-card-spacing">
|
||||
<div class="np-training-session-sessions-title">
|
||||
{% t shared.more_sessions %}
|
||||
</div>
|
||||
{% include "training_session_more_sessions" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% for session in training_event.sessions %}
|
||||
{% include "training_session_tile", current_session: training_session %}
|
||||
{% endfor %}
|
||||
@ -0,0 +1,17 @@
|
||||
{% if current_session.id != session.id %}
|
||||
<a
|
||||
class="np-training-session-tile"
|
||||
href="{% route training_session, id: session.id %}"
|
||||
>
|
||||
<i class="far fa-calendar-star np-training-session-tile-icon"></i>
|
||||
<div>
|
||||
<div class="np-training-session-tile-date">
|
||||
{{ session.month }} {{ session.day }}, {{ session.year }}
|
||||
</div>
|
||||
<div class="np-training-session-tile-time">
|
||||
{{ session.time_period }} {{ session.time_zone }}
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right np-training-session-tile-chevron"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
@ -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,29 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-catalog-courses row row-with-thumbnails">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.is_article_course %}
|
||||
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% capture message %}
|
||||
{% t shared.zero_state.courses.catalog,
|
||||
key: current_school.course_vocabulary
|
||||
%}
|
||||
{% endcapture %}
|
||||
{% include "courses_zero_state", message: message %}
|
||||
{% endif %}
|
||||
</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,193 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ catalog.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-wrapper">
|
||||
<div class="searchtext">
|
||||
<input id="searchboxInput" placeholder="Search:" class="searchbox np-input" type="text">
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<select
|
||||
class="category-filter-dropdown np-input"
|
||||
type="text"
|
||||
|
||||
name="category-filter-dropdown"
|
||||
id="category-filter-dropdown"
|
||||
onchange="filterByCategory()">
|
||||
|
||||
{% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
|
||||
<option class="category-filter-entry" value="All" selected>All Categories</option>
|
||||
{% comment %} Need to iterate over all filterable categories, target all searched cards, check if cat exists, render if found {% endcomment %}
|
||||
|
||||
{% comment %} Need to generate category entires dynamically? Might not be possible because liquid is server side. Would need to pull all cats before load but all Searched Results after render {% endcomment %}
|
||||
|
||||
{% assign categoryname = "" %}
|
||||
{% for category in sorted_categories %}
|
||||
{% assign categoryfullname = category.name %}
|
||||
{% assign nameArr = categoryfullname | remove: '[' | split: "]" %}
|
||||
{% assign categoryname = categoryname | append: nameArr[0] | append: ',' %}
|
||||
{% endfor %}
|
||||
<script>
|
||||
console.log("{{categoryname}}")
|
||||
</script>
|
||||
{% assign tempArr = categoryname | split: "," %}
|
||||
{% assign catArr = tempArr | uniq %}
|
||||
{% for catname in catArr %}
|
||||
<option class="category-filter-entry" value="{{ catname | remove: ' ' }}">{{ catname }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for catname in catArr %}
|
||||
{% include "categorie_courses" categorie_name: catname %}
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.category-filter-dropdown {
|
||||
background-color: #fefefe;
|
||||
border-radius: 4px;
|
||||
color: #363636;
|
||||
font-size: 1em;
|
||||
font-weight: 700;
|
||||
height: 60px;
|
||||
line-height: 1;
|
||||
padding: 5px 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.searchtext {
|
||||
width: 100%
|
||||
}
|
||||
.filter-wrapper {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 20px 0px;
|
||||
}
|
||||
.searchbox {
|
||||
height: 60px;
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.showCourse {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.hideCourse {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.filtered{
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script>
|
||||
|
||||
|
||||
function filterByCategory()
|
||||
{
|
||||
|
||||
let allCatSections = document.querySelectorAll('.categorie_section');
|
||||
|
||||
for(let i = 0; i < allCatSections.length; i++){
|
||||
if(event.target.value == 'All'){
|
||||
allCatSections[i].classList.remove('hidden-by-product');
|
||||
if(!allCatSections[i].classList.contains('filtered')){
|
||||
allCatSections[i].style.display = 'block';
|
||||
}
|
||||
} else {
|
||||
|
||||
if(allCatSections[i].dataset.categories != event.target.value){
|
||||
allCatSections[i].style.display = 'none';
|
||||
allCatSections[i].classList.add('hidden-by-product');
|
||||
} else {
|
||||
allCatSections[i].classList.remove('hidden-by-product');
|
||||
if(!allCatSections[i].classList.contains('filtered')){
|
||||
allCatSections[i].style.display = 'block';
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function performSearch(searchTerm) {
|
||||
// var searchTerm = $('#searchboxInput').val().trim().toLowerCase();
|
||||
let allCourses = document.querySelectorAll('.np-card-content-title')
|
||||
console.log("searchTerm " + searchTerm)
|
||||
for(let i = 0; i < allCourses.length; i++)
|
||||
{
|
||||
if ( allCourses[i].textContent.trim().toLowerCase().includes(searchTerm.toLowerCase()))
|
||||
{
|
||||
// console.log("found")
|
||||
// console.log(allCourses[i].className)
|
||||
let parent = allCourses[i].parentElement;
|
||||
|
||||
while (!parent.classList.contains('feature-course-slide'))
|
||||
parent = parent.parentElement;
|
||||
|
||||
|
||||
parent.classList.add("showCourse")
|
||||
parent.classList.remove("hideCourse")
|
||||
//parent.style.display="block"
|
||||
// allCourses[i].parents(".feature-course-slide").style.display="block"
|
||||
}
|
||||
else
|
||||
{
|
||||
let parent = allCourses[i].parentElement;
|
||||
|
||||
while (!parent.classList.contains('feature-course-slide'))
|
||||
parent = parent.parentElement;
|
||||
|
||||
parent.classList.add("hideCourse")
|
||||
parent.classList.remove("showCourse")
|
||||
//parent.style.display="none"
|
||||
}
|
||||
}
|
||||
|
||||
// Hide header if no courses are foud by search and only when All is selected as option
|
||||
if ($("#category-filter-dropdown").find(":selected").val() == "All")
|
||||
hideHeader();
|
||||
|
||||
}
|
||||
|
||||
function hideHeader() {
|
||||
|
||||
let allCatSections = document.querySelectorAll('.categorie_section');
|
||||
|
||||
for(let i = 0; i < allCatSections.length; i++){
|
||||
|
||||
let visiblelCoursesList = allCatSections[i].querySelectorAll(".showCourse")
|
||||
// console.log("visiblelCoursesList " + visiblelCoursesList.length)
|
||||
|
||||
if (visiblelCoursesList.length == 0 )
|
||||
allCatSections[i].style.display = 'none';
|
||||
else
|
||||
allCatSections[i].style.display = 'block';
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('#searchboxInput').keyup(function(event) {
|
||||
//console.log("pressed backspace")
|
||||
const key = event.key;
|
||||
var searchTerm = $('#searchboxInput').val().trim().toLowerCase();
|
||||
performSearch(searchTerm);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,21 @@
|
||||
{% include "header" %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-certifications np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="np-catalog-header">
|
||||
<div class="np-resource-title">{{ custom_page.headline }}</div>
|
||||
<div class="np-resource-subtitle">{{ custom_page.subheadline }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="np-dashboard-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
{{ custom_page.content }}
|
||||
</div>
|
||||
<img class="np-zero-state-courses" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,63 @@
|
||||
{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
|
||||
{% if course.enrolled? %}
|
||||
<script>window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")</script>
|
||||
{% else %}
|
||||
<script>window.location.replace("{% route course_enrollment, code: course.enrollment_code %}")</script>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% include "header" %}
|
||||
<main class="np-main np-max-width np-page-container">
|
||||
<div class="np-hidden-mobile" id="course-desktop">
|
||||
{% include "course_desktop_view" %}
|
||||
</div>
|
||||
<div class="np-hidden-desktop" id="course-mobile">
|
||||
{% include "course_mobile_view" %}
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
{% endif %}
|
||||
|
||||
<style>
|
||||
.np-header {
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.np-flex {
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
.np-content-categories-content-item {
|
||||
margin-bottom:12px;
|
||||
}
|
||||
|
||||
.course-image-wrapper {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
top:16px;
|
||||
left:16px;
|
||||
padding-right:16px;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||||
font-size:24px;
|
||||
line-height:32px;
|
||||
}
|
||||
|
||||
@media (min-width:768px) {
|
||||
.course-title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.course-title {
|
||||
font-size: 40px;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-courses np-subpage-container np-max-width">
|
||||
<div class="np-resource-title">
|
||||
{% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
|
||||
</div>
|
||||
<div class="np-resource-subtitle">{% t .headline, key: current_school.course_vocabulary %}</div>
|
||||
{% include "courses_index", class: "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,65 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% include "dashboard_ongoing_training" items: catalog_courses %}
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
|
||||
<div class="np-section-header">Progress Tracker</div>
|
||||
<div class="learning-path-progress-container">
|
||||
<div class="row">
|
||||
{% assign lps_in_progress = 0 %}
|
||||
{% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
|
||||
{% for learning_path in enrolled_learning_paths %}
|
||||
{% if learning_path.progress > 0 %}
|
||||
{% assign lps_in_progress = lps_in_progress | plus: 1 %}
|
||||
|
||||
{% if lps_in_progress < 4 %}
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{% include "cards_learning_path_progress" %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if lps_in_progress > 0 %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/dashboard" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if lps_in_progress == 0 %}
|
||||
<div class="col-xs-12">
|
||||
<div class="np-learning-paths-resources-container">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any learning Paths in progress.
|
||||
</div>
|
||||
<img class="np-zero-state-learning-paths" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% if features.training_events? %}
|
||||
<div class="np-grid-spacing col-xs-12 col-sm-4">
|
||||
<div class="np-dashboard-resources-title">
|
||||
{% t .upcoming_events %}
|
||||
</div>
|
||||
{% include "training_events_dashboard" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</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