136 lines
3.4 KiB
Plaintext
136 lines
3.4 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
|
{% include "sub_navigation" %}
|
|
<main class="np-main np-dashboard np-subpage-container np-max-width">
|
|
<div class="row np-flex-center">
|
|
<div class="dashboard-content-container">
|
|
<div class="homepage-content-wrapper">
|
|
<div class="cards-section-container">
|
|
{% include 'lp_homepage' %}
|
|
</div>
|
|
<div class="events-homepage-container">
|
|
<div class="section-text-container">
|
|
<div class="dashboard-resources-title">
|
|
My Webinars
|
|
</div>
|
|
</div>
|
|
{% include "training_events_dashboard" %}
|
|
</div>
|
|
</div>
|
|
{% include 'courses_homepage' %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.homepage-content-wrapper {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
.events-homepage-container {
|
|
width: 25%;
|
|
}
|
|
.cards-section-container {
|
|
width: 75%;
|
|
}
|
|
.filter-container {
|
|
width: 25%;
|
|
background: #fff;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 4px 0 rgba(72,103,118,.5);
|
|
border-radius: 8px;
|
|
}
|
|
.content-container {
|
|
display: flex;
|
|
margin-bottom: 30px;
|
|
gap: 30px;
|
|
}
|
|
.cards-wrapper {
|
|
width: 75%;
|
|
}
|
|
.filter-options-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.filter-option-container {
|
|
border-bottom: 1px solid #0000002e;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.filter-title {
|
|
padding-bottom: 20px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
.input-checkbox {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
.dashboard-content-container {
|
|
width: 100%;
|
|
}
|
|
.dashboard-resources-title {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
}
|
|
.dashboard-resources-subtitle {
|
|
font-weight: 400;
|
|
}
|
|
.section-text-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
margin: 30px 0;
|
|
}
|
|
.input-label {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
function setupFilters(filterClass, cardClass) {
|
|
const filters = document.querySelectorAll(`.${filterClass} .input-checkbox`);
|
|
const allFilter = document.querySelector(`.${filterClass} .input-checkbox[name="all"]`);
|
|
const cards = document.querySelectorAll(`.${cardClass}`);
|
|
|
|
function filterCards() {
|
|
let selectedFilters = Array.from(filters)
|
|
.filter(f => f.checked && f.name !== "all")
|
|
.map(f => f.name.toLowerCase());
|
|
|
|
if (selectedFilters.length === 0) {
|
|
cards.forEach(card => card.style.display = "block");
|
|
return;
|
|
}
|
|
|
|
cards.forEach(card => {
|
|
let cardCategories = card.getAttribute("categories").toLowerCase().split(",");
|
|
let match = selectedFilters.some(filter => cardCategories.includes(filter));
|
|
card.style.display = match ? "block" : "none";
|
|
});
|
|
}
|
|
|
|
filters.forEach(filter => {
|
|
filter.addEventListener("change", function () {
|
|
if (this.name === "all") {
|
|
filters.forEach(f => { if (f !== allFilter) f.checked = false; });
|
|
} else {
|
|
allFilter.checked = false;
|
|
}
|
|
filterCards();
|
|
});
|
|
});
|
|
|
|
filterCards();
|
|
}
|
|
|
|
|
|
setupFilters("lp-filter", "lp-card");
|
|
setupFilters("course-filter", "course-card");
|
|
});
|
|
</script> |