Merge pull request #146 from INN/137-filtering-hs

137 filtering hs

wp-content/themes/currentorg/js/current-ltw-projects.js

@@ -18,14 +18,51 @@ $(document).ready(function(){
         $(".projects-single-layout").hide();
     });
 
-    $(document).on('scroll', function(){   
+    $(document).on('scroll', function(){
         if($('.sticky-nav-holder').hasClass('show')) {
             $('html').addClass('sticky-show');
         } else {
             $('html').removeClass('sticky-show');
         }
     });
 
+    // this keeps track of the array of events
+    var $checkboxes = $('details.project-category input');
+    var checkboxValues = Array();
+    var initialCheckboxValues = Array();
+
+    function maybeToggleDisabledInputs() {
+        if ( checkboxValues.length >= 3 ) {
+            // disable unchecked checkboxes
+            $checkboxes.filter( ':not(:checked)' ).prop( 'disabled', true );
+        } else {
+            $checkboxes.prop( 'disabled', false );
+        }
+    }
+
+    // setup
+    $checkboxes.each( function( index ) {
+        if ( this.checked ) {
+            checkboxValues.push( this.value );
+            initialCheckboxValues.push( this.value );
+        }
+    });
+    maybeToggleDisabledInputs();
+
+    $checkboxes.on('change', function( event ) {
+        if ( event.target.checked ) {
+            // add it to the array and perform cleanup
+            checkboxValues.push( event.target.value );
+            maybeToggleDisabledInputs();
+        } else {
+            // remove it from the array and perform cleanup
+            let index = checkboxValues.indexOf( event.target.value );
+            if ( index > -1 ) {
+                checkboxValues.splice( index, 1 );
+            }
+            maybeToggleDisabledInputs();
+        }
+    });
 });
 
 /**
@@ -70,4 +107,4 @@ function current_ltw_projects_load_param_project_if_exists() {
 
     }
 
-}
+}

wp-content/themes/currentorg/less/current-ltw-projects.less

@@ -49,6 +49,10 @@
 	@media ( max-width: 770px ) {
 		display: flex;
 		flex-direction: column;
+		.left, .right {
+			float: none;
+			clear: both;
+		}
 		.projects-search-form-search {
 			order: 1;
 		}
@@ -63,6 +67,18 @@
 			order: 4;
 		}
 	}
+
+	.left, .right {
+		margin-left: 0;
+		margin-right: 0;
+		display: flex;
+
+		label.projects-search,
+		label.project-org-type,
+		.project-category-holder {
+			flex: 1 1 auto;
+		}
+	}
 }
 
 .projects-search-form-search {
@@ -76,7 +92,7 @@
 	input[type=text], .btn, button, select {
 		padding: 4px;
 	}
-	input[type=text], .btn, button, details, select, label {
+	input[type=text], .btn, button, details, select, label, .project-category-holder {
 		box-sizing: border-box;
 		line-height: 1.5;
 		font-size: 16px;
@@ -86,10 +102,9 @@
 		margin-bottom: 0;
 		display: inline-block;
 		vertical-align: middle;
-		float: left;
 	}
-	label {
-		padding-right: 40px;
+	label, .project-category-holder {
+		margin-right: 10px;
 	}
 	.btn-submit {
 		background-color: @brand;
@@ -135,13 +150,17 @@
 
 	details[open] {
 		border: 1px solid @grey-d;
-		position: absolute;
 		vertical-align: top;
 		max-height: 50vh;
 		overflow: scroll;
 		background: @white;
 		z-index: 10;
-		summary {
+		float: left;
+		position: absolute;
+		left: 50%;
+		right: 0;
+
+		summary.btn {
 			width: 100%;
 		}
 	}
@@ -167,31 +186,32 @@
 		}
 	}
 	@media (max-width: 770px) {
-		label[for=projects-search] {
+		.right,
+		.left {
 			width: 100%;
 			margin-bottom: @common-whitespace * 0.5;
 			padding-right: 0;
-			input {
-				width: 85%;
-			}
+
 			button {
-				width: 15%;
+				flex: 0 0 15%;
 			}
-		}
-		label.project-org-type {
-			width: 47%;
-			padding-right: 0;
-			select {
+
+			select,
+			input[type=text] {
 				width: 100%;
 			}
+			button {
+				width: 15%;
+			}
 		}
 		details.project-category {
-			float: right;
-			width: 47%;
+			width: 100%;
 			&[open] {
 				display: block;
 				right: 0;
-				top: 55%;
+				left: 0;
+				top: 52%;
+				position: absolute;
 			}
 			.btn {
 				width: 100%;

wp-content/themes/currentorg/partials/projects-base.php

@@ -67,4 +67,8 @@
 // so we can pass $query to these
 include( locate_template( 'partials/projects-search-form.php', false, false ) );
 include( locate_template( 'partials/projects-list.php', false, false ) );
-include( locate_template( 'partials/projects-single-holder.php', false, false ) );
+
+// only load the single holder if posts are found
+if ( $query->have_posts() ) {
+    include( locate_template( 'partials/projects-single-holder.php', false, false ) );
+}