80 lines
1.9 KiB
Plaintext
80 lines
1.9 KiB
Plaintext
{% include "header_absolute" %}
|
|
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
|
<div class="basic-hero has-image">
|
|
<div class="hero-content">
|
|
<div class="np-resource-title">{{ catalog.headline }}</div>
|
|
<div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
|
|
<form
|
|
class="np-header-search hero-search"
|
|
data-test="mobile-search"
|
|
method="get"
|
|
action="{% route search %}"
|
|
>
|
|
<input
|
|
aria-label="Search"
|
|
class="np-header-search-input hero-search-input"
|
|
type="text"
|
|
name="q"
|
|
placeholder="Search"
|
|
/>
|
|
<i class="np-header-search-icon far fa-search"></i>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="category-dropdown-section">
|
|
<div class="np-max-width">
|
|
<div class="category-dropdown">
|
|
<select id="categorySelect">
|
|
<option value="all">Show All</option>
|
|
{% for cat in categories.in_catalog %}
|
|
<option value="{{cat.id}}">{{cat.name}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<main class="np-main np-catalog np-subpage-container np-max-width">
|
|
{% include "courses_catalog" %}
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
|
|
.category-dropdown-section {
|
|
background-color: #fafafa;
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.category-dropdown {
|
|
max-width:400px;
|
|
}
|
|
|
|
.category-dropdown select {
|
|
width: 100%;
|
|
height: 45px;
|
|
border-radius: 6px;
|
|
background: #f3f3f3;
|
|
padding: 6px;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
$('#categorySelect').on('change', function() {
|
|
let selectedValue = this.value
|
|
|
|
if (selectedValue == "all") {
|
|
$(".course-column").show()
|
|
} else {
|
|
$(".course-column").hide()
|
|
$(".course-column").each(function() {
|
|
if ($(this).data("id").includes(selectedValue)) {
|
|
$(this).show()
|
|
}
|
|
})
|
|
}
|
|
});
|
|
</script> |