All that Walmart work and they can't even launch tomorrow.... finished up the work for the Basic/3P user groups. Was then told these learners need to be able to buy courses, which isn't possible with their current configuration. Backing up the files to git anyway, just in case.
This commit is contained in:
Norm Rasmussen
@ -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: var(--main);
|
||||
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,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,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,55 @@
|
||||
|
||||
|
||||
<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: lightgrey;
|
||||
opacity: .25;
|
||||
height: 40px;
|
||||
width: 50px;
|
||||
border-radius: 0px 10px 10px 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -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,186 @@
|
||||
<div class="np-homepage-feature np-max-width">
|
||||
<div class="np-homepage-feature-text">
|
||||
<div class="np-homepage-headline">
|
||||
Available 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 available_courses_count = 0 %}
|
||||
<div class="feature-courses-wrapper">
|
||||
<div class="feature-courses-slider">
|
||||
{% for course in items %}
|
||||
{% if course.started? == false %}
|
||||
{% assign available_courses_count = available_courses_count | plus: 1 %}
|
||||
|
||||
<div class="feature-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if available_courses_count > 0 %}
|
||||
<div class="feature-see-more-wrapper">
|
||||
<a href="/app/dashboard">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<script>console.log("{{available_courses_count}}")</script>
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any Ongoing 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/dashboard" class="np-button">Explore Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Sorry, you don't have any Available 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/dashboard" class="np-button">Explore Dashboard</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>
|
||||
@ -27,8 +27,8 @@
|
||||
|
||||
{% if is_featured %}
|
||||
{% assign featured_courses_count = featured_courses_count | plus: 1 %}
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
|
||||
<div class="featured-course-slide" data-position="{{course.properties.course_position}}">
|
||||
{% include "cards_article" with course %}
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -87,7 +87,7 @@ window.addEventListener("load", (event) => {
|
||||
|
||||
indexesArray.forEach(e =>
|
||||
document.querySelector(".featured-courses-slider").appendChild(e));
|
||||
|
||||
|
||||
|
||||
initFeaturedCoursesCarousel()
|
||||
|
||||
@ -119,7 +119,7 @@ function initFeaturedCoursesCarousel() {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -219,4 +219,4 @@ function initFeaturedCoursesCarousel() {
|
||||
margin-top:12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -0,0 +1,188 @@
|
||||
<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">
|
||||
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.progress > 0 and course.progress < 100 %}
|
||||
{% assign ongoing_courses_count = ongoing_courses_count | plus: 1 %}
|
||||
<div class="ongoing-course-slide">
|
||||
{% include "cards_course_ongoing" with course %}
|
||||
</div>
|
||||
{% 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">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/dashboard" class="np-button">Explore Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
<div class="np-zero-state-text">
|
||||
Yikes! You don't have any ongoing training at this moment.
|
||||
</div>
|
||||
<img
|
||||
class="np-zero-state-courses"
|
||||
alt="Yikes! You don't have any ongoing training at this moment."
|
||||
/>
|
||||
<div class="zero-state-cta" style="margin-top:32px;">
|
||||
<a href="/app/dashboard" class="np-button">Explore Dashboard</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,41 @@
|
||||
<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>
|
||||
@ -1,3 +1,6 @@
|
||||
{% if basic_3p_user %}
|
||||
{% include "basic_group_sub_navigation" %}
|
||||
{% else %}
|
||||
<nav class="np-sub-navigation np-hidden-mobile">
|
||||
<div class="np-sub-navigation-content">
|
||||
{% for link in navigations.sub_navigation %}
|
||||
@ -25,6 +28,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
if (window.location.pathname == "/app/articles") {
|
||||
|
||||
@ -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/filtered-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,199 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
{% include "sub_navigation" %}
|
||||
{% assign catnamefromurl = params['catname'] %}
|
||||
{% assign catnamefromurl = catnamefromurl | url_decode %}
|
||||
<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">{{ catnamefromurl }}</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 subcategoryname = "" %}
|
||||
{% for category in sorted_categories %}
|
||||
{% if category.name contains catnamefromurl %}
|
||||
{% assign categoryfullname = category.name %}
|
||||
{% assign nameArr = categoryfullname | remove: '[' | split: "]" %}
|
||||
{% assign subcategoryname = subcategoryname | append: nameArr[1] | append: ',' %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<script>
|
||||
console.log("{{subcategoryname}}")
|
||||
</script>
|
||||
{% assign tempArr = subcategoryname | split: "," %}
|
||||
{% assign catArr = tempArr | uniq %}
|
||||
{% for catname in catArr %}
|
||||
<option class="category-filter-entry" value="{{ catname | remove: ' ' }}">{{ catname }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% for category in sorted_categories %}
|
||||
{% if category.name contains catnamefromurl %}
|
||||
{% include "subcategorie_courses" categorie_fullname: category.name %}
|
||||
{% endif %}
|
||||
{% 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;
|
||||
width: auto;
|
||||
}
|
||||
.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>
|
||||
@ -77,9 +77,15 @@
|
||||
{{ homepage.headline }}
|
||||
</div>
|
||||
<div class="hero-search-wrapper">
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
{% if basic_3p_user %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-subheadline">
|
||||
{{ homepage.subheadline }}
|
||||
</div>
|
||||
<form
|
||||
class="np-header-search np-hero-search"
|
||||
data-test="mobile-search"
|
||||
@ -101,86 +107,60 @@
|
||||
alt="{{ homepage.headline }}" />
|
||||
</div>
|
||||
</div>
|
||||
{% if basic_3p_user %}
|
||||
{% include "basic_group_sub_navigation" %}
|
||||
{% include "homepage_featured", items: enrolled_courses %}
|
||||
{% comment %}
|
||||
Homepage featured only looks for courses that have a certain property AND a category. We will need to change that.
|
||||
I think we can use the "ongoing" training section below for the inprogress courses section.
|
||||
{% endcomment %}
|
||||
{% else %}
|
||||
{% include "sub_navigation" %}
|
||||
{% include "homepage_featured", items: catalog_courses %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="np-max-width np-homepage-row-wrapper">
|
||||
<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-4">
|
||||
{% 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 %}
|
||||
{% include "sub_navigation" %}
|
||||
{% endif %}
|
||||
<div class="np-homepage-featured np-max-width">
|
||||
<div class="row np-flex-center">
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
{% if basic_3p_user %}
|
||||
{% include "homepage_basic_notstarted_courses" items: enrolled_courses %}
|
||||
{% include "homepage_inprogress_courses", items: enrolled_courses %}
|
||||
{% else %}
|
||||
{% include "homepage_featured_courses" items: catalog_courses %}
|
||||
{% include "homepage_quicklearn_courses" items: catalog_courses %}
|
||||
{% include "homepage_ongoing_training", items: catalog_courses %}
|
||||
{% endif %}
|
||||
{% include "progress_tracker" %}
|
||||
</div>
|
||||
{% if basic_3p_user %}
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<div id="divGetCertified" class="content-by-product">
|
||||
<div class="left-content-title">
|
||||
Get Certified
|
||||
</div>
|
||||
|
||||
{% include "content_by_certificates" %}
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row-reverse;">
|
||||
<a id="seemorecertificates" >See more..</a>
|
||||
</div>
|
||||
{% comment %} <div id="divContentbyProduct" class="content-by-product">
|
||||
<div class="left-content-title">
|
||||
Content By Topic
|
||||
</div>
|
||||
{% include "topic_maincategory_leftnav" %}
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row-reverse;">
|
||||
<a id="seemore" >See more..</a>
|
||||
</div> {% endcomment %}
|
||||
<div id="divCalender" class="upcomongevents">
|
||||
<div class="left-content-title">
|
||||
Upcoming Events
|
||||
</div>
|
||||
{% include "calendar" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% comment %} {% if features.training_events? %}
|
||||
<div class="col-xs-12 col-sm-5 col-md-4">
|
||||
<div class="homepage-events">
|
||||
<div class="np-section-header">Upcoming Courses</div>
|
||||
<div class="upcoming events">
|
||||
{% if training_events.available.any? %}
|
||||
{% for training_event in training_events.available limit:1 %}
|
||||
{% include "cards_training_event" with training_event %}
|
||||
{% endfor %}
|
||||
<div class="see-more-wrapper">
|
||||
<a href="/app/training_events" style="margin-top:24px;">See more</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{% include "training_events_zero_state" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %} {% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "homepage_ongoing_training", items: catalog_courses %}
|
||||
{% unless basic_3p_user %}
|
||||
{% include "homepage_topics" %}
|
||||
{% endunless %}
|
||||
|
||||
|
||||
|
||||
{% include "homepage_topics" %}
|
||||
{%- comment -%}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="popup-trigger"
|
||||
@ -465,6 +445,26 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.left-content-title {
|
||||
font-size: 25px;
|
||||
font-weight: 900;
|
||||
line-height: 15px;
|
||||
margin: 20px 0;
|
||||
|
||||
}
|
||||
.content-by-product {
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upcomongevents {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
#seemore:hover, #seemorecertificates:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.np-homepage-hero {
|
||||
background-color: #3C228A;
|
||||
padding: 40px 24px 24px;
|
||||
|
||||
BIN
Scripts/API_Tests/__pycache__/Apikeys.cpython-313.pyc
Normal file
BIN
Scripts/API_Tests/__pycache__/Apikeys.cpython-313.pyc
Normal file
Binary file not shown.
@ -4,7 +4,7 @@ from pathlib import Path
|
||||
import Apikeys
|
||||
import os
|
||||
|
||||
basefile = "/Users/normrasmussen/Downloads/mizuno-lp-jan25.csv"
|
||||
basefile = "/Users/normrasmussen/Downloads/mizuno-lp-feb25.csv"
|
||||
api_key = Apikeys.MIZUNO
|
||||
uuid_url = "https://api.northpass.com/v2/people?filter[email][eq]="
|
||||
prop_url = "https://api.northpass.com/v2/properties/people/"
|
||||
@ -51,7 +51,7 @@ def load_file(basefile):
|
||||
completions = completions[completions["userid"] != "0"]
|
||||
# completions = completions.iloc[:, 0:]
|
||||
completions.to_csv(
|
||||
"/Users/normrasmussen/Downloads/Mizuno-LP-Jan25-with-PGAID.csv",
|
||||
"/Users/normrasmussen/Downloads/Mizuno-LP-Feb25-with-PGAID.csv",
|
||||
index=False,
|
||||
)
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import pprint
|
||||
import requests
|
||||
import Apikeys
|
||||
import pandas as pd
|
||||
# import pandas as pd
|
||||
|
||||
APIKEY = Apikeys.SPS
|
||||
APIKEY = Apikeys.ANTHOLOGY
|
||||
URL = "https://api.northpass.com/v1/media"
|
||||
pp = pprint.PrettyPrinter(indent=4)
|
||||
|
||||
@ -19,9 +19,10 @@ def getMedia(APIKEY, URL):
|
||||
response = requests.get(URL, headers=headers)
|
||||
datas = response.json()
|
||||
nextlink = datas["links"]
|
||||
# pp.pprint(datas)
|
||||
pp.pprint(datas)
|
||||
|
||||
for data in datas["data"]:
|
||||
print(data)
|
||||
file_type = data["attributes"]["file_type"]
|
||||
file_name = data["attributes"]["file_name"]
|
||||
created_date = data["attributes"]["created_at"]
|
||||
@ -44,11 +45,11 @@ def getMedia(APIKEY, URL):
|
||||
# print(len(list_data))
|
||||
toCsv(list_data)
|
||||
|
||||
def toCsv(json):
|
||||
js = pd.DataFrame.from_records(json)
|
||||
# js = pd.json_normalize(json, "data", ["data"])
|
||||
# csv = pd.Series(js)
|
||||
js.to_csv("/Users/normrasmussen/Downloads/sps-media-lib.csv")
|
||||
# def toCsv(json):
|
||||
# js = pd.DataFrame.from_records(json)
|
||||
# # js = pd.json_normalize(json, "data", ["data"])
|
||||
# # csv = pd.Series(js)
|
||||
# js.to_csv("/Users/normrasmussen/Downloads/sps-media-lib.csv")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
|
||||
Reference in New Issue
Block a user