Pledge List Filters: Update style and add filter on-change functionality

- Style search box & filter dropdown
- Enable sort filter on select change
- Fix some PHP notices

themes/wporg-5ftf/archive-5ftf_pledge.php

@@ -10,6 +10,8 @@ if ( ! have_posts() ) {
 	nocache_headers();
 }
 
+$pledge_order = isset( $_GET['order'] ) ? $_GET['order'] : '';
+
 get_header(); ?>
 
 	<main id="main" class="site-main" role="main">
@@ -28,13 +30,13 @@ get_header(); ?>
 				<form method="get" action="<?php echo esc_url( get_post_type_archive_link( CPT_ID ) ); ?>">
 					<label for="pledge-sort"><?php esc_html_e( 'Sort pledges by', 'wordpressorg' ); ?></label>
 					<select class="custom-select" id="pledge-sort" name="order">
-						<option value="" <?php selected( $_GET['order'], '' ); ?>>
+						<option value="" <?php selected( $pledge_order, '' ); ?>>
 							<?php esc_html_e( 'All Pledges', 'wordpressorg' ); ?>
 						</option>
-						<option value="alphabetical" <?php selected( $_GET['order'], 'alphabetical' ); ?>>
+						<option value="alphabetical" <?php selected( $pledge_order, 'alphabetical' ); ?>>
 							<?php esc_html_e( 'Alphabetical', 'wordpressorg' ); ?>
 						</option>
-						<option value="contributors" <?php selected( $_GET['order'], 'contributors' ); ?>>
+						<option value="contributors" <?php selected( $pledge_order, 'contributors' ); ?>>
 							<?php esc_html_e( 'Total Contributors', 'wordpressorg' ); ?>
 						</option>
 					</select>
@@ -68,5 +70,10 @@ get_header(); ?>
 
 	</main><!-- #main -->
 
+	<script type="text/javascript">
+		jQuery( "#pledge-sort" ).change( function( event ) {
+			jQuery( event.target ).closest( 'form' ).submit();
+		} );
+	</script>
 <?php
 get_footer();

themes/wporg-5ftf/css/base/_select.scss

@@ -3,14 +3,13 @@
 .custom-select {
 	display: inline-block;
 	box-sizing: border-box;
-	margin: -0.5rem 0;
 	padding: 0.5rem 2rem 0.5rem .8rem;
 	width: auto;
 
 	font-size: 1em;
 	line-height: 1.3;
 
-	border: none;
+	border: 1px solid $color__text-lighter;
 	box-shadow: none;
 	border-radius: 0.5em;
 	-moz-appearance: none;

themes/wporg-5ftf/css/components/_components.scss

@@ -26,6 +26,7 @@
 @import "pledge-contributors";
 @import "pledge-list";
 @import "pledge-single";
+@import "search-form";
 @import "site-content";
 @import "site-header";
 @import "site-title";

themes/wporg-5ftf/css/components/_pledge-list.scss

@@ -21,28 +21,23 @@ body.archive.post-type-archive-5ftf_pledge {
 		.page-header-callout {
 			grid-column: 2;
 			grid-row: 1;
+			
+			.button {
+				padding: 0.5em 1.5em;
+				height: auto;
+			}
 		}
 
 		.page-header-controls {
 			grid-column: 1 / span 2;
 			grid-row: 2;
 
-			display: grid;
+			display: flex;
-			grid-template-columns: 1fr 1fr;
+			flex-wrap: wrap;
+			justify-content: space-between;
 			margin-top: ms(2);
 			border-top: 1px solid $color-gray-light-500;
 			padding-top: ms(2);
-
-			form:nth-of-type(2n+1) {
-				grid-column: 1;
-				grid-row: 1;
-			}
-
-			form:nth-of-type(2n) {
-				grid-column: 2;
-				grid-row: 1;
-				text-align: right;
-			}
 		}
 	}
 
@@ -51,6 +46,7 @@ body.archive.post-type-archive-5ftf_pledge {
 
 		label {
 			display: inline-block;
+			margin-right: 6px;
 			font-size: 1em;
 			font-weight: 700;
 		}

themes/wporg-5ftf/css/components/_search-form.scss

@@ -0,0 +1,38 @@
+.search-form {
+
+	.site-main & {
+		display: flex;
+		align-items: stretch;
+		justify-content: flex-end;
+		border: 1px solid $color-gray-light-600;
+		background: $color-gray-light-100;
+
+		.search-field {
+			flex: 0 1 auto;
+			margin: 0;
+			padding: 0.8em 1em;
+			background: transparent;
+			border: none;
+			box-shadow: none;
+
+			&::-moz-placeholder {
+				color: $color-gray-200;
+			}
+		}
+		
+		.button-search {
+			flex: 0 1 auto;
+			height: auto;
+			background: transparent;
+			border: none;
+			border-radius: 0;
+			box-shadow: none;
+			text-shadow: none;
+			color: $color-gray-200;
+			
+			&:focus {
+				outline: 2px solid $color__wporg-blue;
+			}
+		}
+	}
+}