Move search filters above input so not hidden behind autocomplete.

WordPress · Jun 10, 2022 · fb53f43 · fb53f43
1 parent d279399
commit fb53f43
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
@@ -840,7 +840,7 @@
 		}
 
 		.search-post-type {
-			margin-top: 1em;
+			margin-bottom: 1em;
 
 			label {
 				border-right: 1px solid #ccc;

diff --git a/source/wp-content/themes/wporg-developer/searchform.php b/source/wp-content/themes/wporg-developer/searchform.php
@@ -19,16 +19,10 @@
 	?>
 
 	<form role="search" method="get" class="searchform<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-		<div class="search-bar">
-			<label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
-			<input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search in Code Reference &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-			<button class="button button-primary button-search"><i class="dashicons dashicons-search"></i><span class="screen-reader-text"><?php _e( 'Search plugins', 'wporg' ); ?></span></button>
-		</div>
-	<?php if ( $filters ) : ?>
-
-		<div class="search-post-type">
-			<span><?php _e( 'Filter by type:', 'wporg' ); ?></span>
-			<?php
+		<?php if ( $filters ) : ?>
+			<div class="search-post-type">
+				<span><?php esc_html_e( 'Filter by type:', 'wporg' ); ?></span>
+				<?php
 				$search_post_types = array(
 					'wp-parser-function' => __( 'Functions', 'wporg' ),
 					'wp-parser-hook'     => __( 'Hooks',     'wporg' ),
@@ -46,14 +40,18 @@
 
 				foreach ( $search_post_types as $post_type => $label ) {
 					$checked = checked( in_array( $post_type, $qv_post_type ), true, false );
-				?>
-						<label><input type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>"
-						<?php echo $checked; ?> /> <?php echo $label; ?></label>
-			<?php } ?>
-		</div>
-
-	<?php endif; ?>
+					?>
+					<label><input type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>"
+							<?php echo $checked; ?> /> <?php echo esc_html( $label ); ?></label>
+				<?php } ?>
+			</div>
+		<?php endif; ?>
 
+		<div class="search-bar">
+			<label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
+			<input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search in Code Reference &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+			<button class="button button-primary button-search"><i class="dashicons dashicons-search"></i><span class="screen-reader-text"><?php _e( 'Search plugins', 'wporg' ); ?></span></button>
+		</div>
 	</form>
 
 </div><!-- /search-guide -->
@@ -82,4 +80,4 @@
 }
 ?></div>
 
-<?php } ?>
+<?php } ?>
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css b/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css
@@ -44,6 +44,7 @@ div.awesomplete li[aria-selected="true"] mark {
 }
 
 .devhub-wrap .searchform,
+.devhub-wrap .searchform .search-bar,
 .devhub-wrap .searchform div:first-child,
 .devhub-wrap div.awesomplete {
 

diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css