diff --git a/assets/css/ajax-filter-posts.css b/assets/css/ajax-filter-posts.css index d36a858..d03f53d 100755 --- a/assets/css/ajax-filter-posts.css +++ b/assets/css/ajax-filter-posts.css @@ -143,9 +143,14 @@ FILTERS \*------------------------------------*/ +.ajax-posts__filterlist { + margin-bottom: 1rem; +} + .ajax-posts__filters ul { list-style-type: none; padding: 0; + margin-bottom: 0; } .ajax-posts__filter { @@ -169,6 +174,44 @@ background: none; } +.ajax-posts__filterlist li:nth-child(n+6) { + max-height: 0; + overflow-y: hidden; + transition: max-height 0.2s ease; +} + +.ajax-posts__filter-toggle { + padding: 5px; +} + +.ajax-posts__filter-toggle a:after { + margin-left: 5px; + content: "\25BE"; + display: inline-block; +} + +.ajax-posts__filter-toggle-hide { + display: none; +} + +.ajax-posts__filter-toggle-hide:after { + transform: rotate(180deg); + position: relative; + top: 1px; +} + +.ajax-posts__filterlist.is-collapsed li:nth-child(n+6) { + max-height: 35px; +} + +.is-collapsed .ajax-posts__filter-toggle-hide { + display: block; +} + +.is-collapsed .ajax-posts__filter-toggle-show { + display: none; +} + /*------------------------------------*\ POSTS \*------------------------------------*/ @@ -181,6 +224,10 @@ overflow: hidden; } +.ajax-posts__post > a { + display: block; +} + .ajax-posts__post img { width: 100%; } @@ -197,7 +244,7 @@ } @media screen and (min-width: 35rem) and (max-width: 61rem) { - .is-expanded-filters .ajax-posts__post:nth-child(n+1) { + .is-expanded-filters .ajax-posts__post:nth-child(n+6) { margin-right: 50%; /* fake a second element to break the flow */ } } diff --git a/assets/js/ajax-filter-posts.js b/assets/js/ajax-filter-posts.js index 5b3f6a2..457f238 100755 --- a/assets/js/ajax-filter-posts.js +++ b/assets/js/ajax-filter-posts.js @@ -26,8 +26,8 @@ return true; }); - on(container, 'click', '.js-load-more', function(event) { - handleLoadMoreEvent(event.target); + on(container, 'click', '.js-collapse-filterlist', function(event) { + toggleFilterListCollapse(event); event.preventDefault(); return true; }); @@ -38,6 +38,12 @@ return true; }); + on(container, 'click', '.js-load-more', function(event) { + handleLoadMoreEvent(event.target); + event.preventDefault(); + return true; + }); + // Add event listner on all filter toggle buttons [].slice.call(filterTogglers).forEach(function(button){ button.addEventListener('click', toggleFilters) @@ -114,6 +120,10 @@ container.classList.toggle('is-expanded-filters'); } + function toggleFilterListCollapse(event) { + event.target.parentNode.parentNode.classList.toggle('is-collapsed'); + } + /** * Update te query parameters based on the filter change * diff --git a/class-ajax-filter-posts.php b/class-ajax-filter-posts.php index 9cea7cb..2692cbc 100755 --- a/class-ajax-filter-posts.php +++ b/class-ajax-filter-posts.php @@ -51,7 +51,7 @@ class Ajax_Filter_Posts { public function __construct() { $this->plugin_name = 'ajax-filter-posts'; - $this->version = '0.2.1'; + $this->version = '0.3.0'; add_action( 'plugins_loaded', [$this, 'load_textdomain'] ); add_action( 'wp_enqueue_scripts', [$this,'add_scripts'] ); diff --git a/templates/partials/filters.php b/templates/partials/filters.php index 7c34036..7df410c 100644 --- a/templates/partials/filters.php +++ b/templates/partials/filters.php @@ -1,12 +1,20 @@ -