115 lines
2.9 KiB
Plaintext
115 lines
2.9 KiB
Plaintext
{% 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="row">
|
|
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-9">
|
|
<div class="np-resource-title">
|
|
My Courses
|
|
</div>
|
|
{% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content" %}
|
|
|
|
<div class="np-resource-title">
|
|
Available Courses
|
|
</div>
|
|
{% if courses.in_catalog.any? %}
|
|
<div class="np-catalog-courses row row-with-thumbnails">
|
|
{% for course in courses.in_catalog %}
|
|
{% unless course.enrolled? %}
|
|
<div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% 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 %}
|
|
</div>
|
|
|
|
{% if features.training_events? %}
|
|
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
|
|
<div class="dashboard-events">
|
|
<div class="np-dashboard-resources-title">
|
|
{% t .upcoming_events %}
|
|
</div>
|
|
{% include "training_events_dashboard" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</main>
|
|
{% include "section_datasnipper_expert" %}
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.np-resource-title {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.np-dashboard-resources-title {
|
|
color: #fff;
|
|
text-transform: capitalize;
|
|
margin-bottom: 40px;
|
|
font-size: 36px;
|
|
line-height: 40px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.np-zero-state-text {
|
|
color:#fff;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
.row .np-card.course-card {
|
|
padding: 0 10px 48px;
|
|
}
|
|
|
|
.row-with-thumbnails {
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
}
|
|
|
|
.dashboard-events .np-card.training-event-card {
|
|
padding-left:0;
|
|
padding-right:0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{% comment %} <script>
|
|
const categoryFilters = document.querySelectorAll(".category-filter")
|
|
const courseColumns = document.querySelectorAll(".course-columns")
|
|
|
|
categoryFilters.forEach((filter) => {
|
|
filter.addEventListener("click", function(e) {
|
|
setActiveFilter(e.target)
|
|
filterCourses(e.target.getAttribute("data-cat"))
|
|
})
|
|
})
|
|
|
|
function setActiveFilter(selectedFilter) {
|
|
categoryFilters.forEach((filter) => {
|
|
filter.classList.remove("active")
|
|
})
|
|
|
|
selectedFilter.classList.add("active")
|
|
}
|
|
|
|
function filterCourses(filter) {
|
|
courseColumns.forEach((col) => {
|
|
col.style.display = "none"
|
|
})
|
|
|
|
courseColumns.forEach((col) => {
|
|
if (col.getAttribute("data-categories").includes(filter)) {
|
|
col.style.display = "flex"
|
|
}
|
|
})
|
|
}
|
|
</script> {% endcomment %} |