Skip to content

Commit

Permalink
All courses filtering
Browse files Browse the repository at this point in the history 
Signed-off-by: Kipruto <[email protected]>
  • Loading branch information
@kelvinkipruto
kelvinkipruto committed Nov 24, 2023
1 parent f7f05fa commit b13003a
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 90 deletions.
35 changes: 32 additions & 3 deletions wp-content/themes/academyAfrica/assets/css/dist/widgets/all_courses.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion wp-content/themes/academyAfrica/assets/css/dist/widgets/all_courses.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 47 additions & 3 deletions wp-content/themes/academyAfrica/assets/css/src/widgets/all_courses.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
@use "../abstracts/" as *;

.all-courses {

&.d-none {
display: none;
}

.filter-sidebar {
.sidebar {
height: 100%;
Expand Down Expand Up @@ -60,12 +65,11 @@

.label {
color: $color-shades-black;
flex: 1;
}

.select {
flex: 1;
height: 50px;
width: 200px;
border: none;
border-radius: 4px;
background: #FFF;
Expand Down Expand Up @@ -230,6 +234,16 @@
.course-grid {
padding: 40px 55px;

.filter-section {
flex-direction: row;
justify-content: space-between;

.sort {
gap: 20px;
}

}

.course-list {
flex-direction: row;
justify-content: center;
Expand Down Expand Up @@ -291,12 +305,17 @@
}

.filter-modal {
display: none;

&.d-none {
display: none;
}

.filter-options {
padding: 80px 60px;

.mobile-filter {
width: 100% !important;

.filter-title {
color: $color-shades-black;
font-family: Open Sans;
Expand All @@ -309,6 +328,23 @@
}

.filters {
.accordion-parent {
display: flex;
flex-direction: column;
gap: 40px;
box-shadow: none;

.accordion {
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
}

.panel {
&.open {
margin-top: -40px;
}
}
}

.actions {
display: flex;
justify-content: space-between;
Expand All @@ -331,6 +367,12 @@
color: $color-secondary-500;
background: $color-secondary-50;
}

&:focus {
outline: none;
color: $color-secondary-500;
background: $color-secondary-50;
}
}
}
}
Expand Down Expand Up @@ -365,4 +407,6 @@
}
}
}

@include media-breakpoint-up(tablet) {}
}
19 changes: 19 additions & 0 deletions wp-content/themes/academyAfrica/assets/js/widgets/all_courses.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
document.addEventListener("DOMContentLoaded", () => {

const mobileFilterBtn = document.querySelector("#courses-mobile-filter");
const allCourses = document.querySelector("#all-courses");
const filterModal = document.querySelector("#filter-modal");
const closeFilterModal = document.querySelector("#close-filter-modal");

mobileFilterBtn.addEventListener("click", () => {
allCourses.classList.toggle("d-none");
filterModal.classList.toggle("d-none");
window.scrollTo(0, 0);
});

closeFilterModal.addEventListener("click", () => {
allCourses.classList.toggle("d-none");
filterModal.classList.toggle("d-none");
});

});
89 changes: 6 additions & 83 deletions wp-content/themes/academyAfrica/includes/widgets/all_courses.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ public function get_style_depends()

public function get_script_depends()
{
return ['academy-africa-filters', "academy-africa_learndash_course_grid"];
return ['academy-africa-filters', "academy-africa_learndash_course_grid", "academy-africa_all_courses"];
}

public function get_title()
Expand Down Expand Up @@ -199,7 +199,7 @@ protected function render()
$posts = $query->get_posts();
$courses = $posts;
?>
<main class="all-courses">
<main class="all-courses" id="all-courses">
<aside class="filter-sidebar">
<div class="sidebar" id="sidebar">
<p class="filter-by">
Expand Down Expand Up @@ -235,83 +235,6 @@ protected function render()
?>

</div>
<!-- <div id="filters" class="mobile-filter">
<h4 class="filter-title">
Filter By:
</h4>
<div class="filters">
<div class="accordion-parent">
<?
if (!empty($filter_options)) {
foreach ($filter_options as $item) {
?>
<button class="accordion"><? echo $title ?></button>
<?
$title = $item["title"];
$options = $item["options"];
if (!empty($options)) {
?>
<div class="panel">
<ul>
<?
foreach ($options as $option) {
?>
<li>
<label class="mui-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
<? echo $option->name ?>
</label>
</li>
<?
}
?>
</ul>
</div>
<?
}
}
}
?>
</div>
<hr class="divider">
<div class="actions">
<button href="" class="button primary">Apply</button>
<button class="clear-filters">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_11179_27069)">
<path d="M8.0026 14.6693C11.6845 14.6693 14.6693 11.6845 14.6693 8.0026C14.6693 4.32071 11.6845 1.33594 8.0026 1.33594C4.32071 1.33594 1.33594 4.32071 1.33594 8.0026C1.33594 11.6845 4.32071 14.6693 8.0026 14.6693Z" stroke="#B6131E" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 6L6 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6L10 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_11179_27069">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Clear all filters
</button>
</div>
</div>
<div class="close">
<button onclick="closeFilters()" class="buttons">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<g clip-path="url(#clip0_11179_27069)">
<path d="M8.0026 14.6693C11.6845 14.6693 14.6693 11.6845 14.6693 8.0026C14.6693 4.32071 11.6845 1.33594 8.0026 1.33594C4.32071 1.33594 1.33594 4.32071 1.33594 8.0026C1.33594 11.6845 4.32071 14.6693 8.0026 14.6693Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10 6L6 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6L10 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_11179_27069">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
Close
</button>
</div>
</div> -->
</aside>
<div class="courses-main">
<section class="learning-pathways">
Expand Down Expand Up @@ -390,7 +313,7 @@ protected function render()
</select>
</div>
<div class="filter">
<button onclick="openFilters()" class="button primary large filter-btn">
<button id="courses-mobile-filter" class="button primary large filter-btn">
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11905_79908)">
<path d="M15.1693 2H1.83594L7.16927 8.30667V12.6667L9.83594 14V8.30667L15.1693 2Z" stroke="#EFF0FD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
Expand Down Expand Up @@ -507,7 +430,7 @@ protected function render()
</div>
</main>
<!-- Mobile filter modal -->
<div class="filter-modal">
<div class="filter-modal d-none" id="filter-modal">
<div class="filter-options">
<div id="filters" class="mobile-filter">
<h4 class="filter-title">
Expand Down Expand Up @@ -571,7 +494,7 @@ protected function render()
</div>
</div>
<div class="close">
<button onclick="closeFilters()" class="buttons">
<button onclick="closeFilters()" class="buttons" id="close-filter-modal">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_11905_80128)">
<path d="M8.0026 14.6654C11.6845 14.6654 14.6693 11.6806 14.6693 7.9987C14.6693 4.3168 11.6845 1.33203 8.0026 1.33203C4.32071 1.33203 1.33594 4.3168 1.33594 7.9987C1.33594 11.6806 4.32071 14.6654 8.0026 14.6654Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
Expand All @@ -591,6 +514,6 @@ protected function render()
</div>
</div>
</div>
<?
<?
}
}

0 comments on commit b13003a

Please sign in to comment.