Move search filters above input so not hidden behind autocomplete.

WordPress · Jun 10, 2022 · 186c975 · 186c975
1 parent 6197ea3
commit 186c975
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
@@ -2922,7 +2922,7 @@ button.code-tab.is-active {
 	}
 
 	&.search-wrap-embedded .search-post-type {
-		margin-top: 2rem;
+		margin-bottom: 2rem;
 		justify-content: space-between;
 		color: $color-white;
 		max-width: 450px;

diff --git a/source/wp-content/themes/wporg-developer/searchform.php b/source/wp-content/themes/wporg-developer/searchform.php
@@ -30,17 +30,11 @@
 ?>
 <div class="search-wrap <?php echo esc_attr( $classes ); ?>">
 	<form role="search" method="get" class="searchform <?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-		<div class="search-field">
-			<input type="search" id="search-field" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-			<button class="button-search" aria-label="<?php esc_html_e( 'Search', 'wporg' ); ?>">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>	
-			</button>
-		</div>
-	<?php if ( $show_filters ) : ?>
 
-		<div class="search-post-type">
-			<span><?php _e( 'Filter by type:', 'wporg' ); ?></span>
-			<?php
+		<?php if ( $show_filters ) : ?>
+			<div class="search-post-type">
+				<span><?php _e( 'Filter by type:', 'wporg' ); ?></span>
+				<?php
 				$search_post_types = array(
 					'wp-parser-function' => __( 'Functions', 'wporg' ),
 					'wp-parser-hook'     => __( 'Hooks', 'wporg' ),
@@ -61,13 +55,18 @@
 					?>
 					<div>
 						<input id="<?php echo esc_attr( $post_type ); ?>" type="checkbox" name="post_type[]" value="<?php echo esc_attr( $post_type ); ?>" <?php echo $checked; ?> />
-						<label for="<?php echo esc_attr( $post_type ); ?>"><?php echo $label; ?></label>	
+						<label for="<?php echo esc_attr( $post_type ); ?>"><?php echo $label; ?></label>
 					</div>
-						
-			<?php } ?>
-		</div>
+				<?php } ?>
+			</div>
+		<?php endif; ?>
 
-	<?php endif; ?>
+		<div class="search-field">
+			<input type="search" id="search-field" placeholder="<?php echo esc_attr( $placeholder ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+			<button class="button-search" aria-label="<?php esc_html_e( 'Search', 'wporg' ); ?>">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path></svg>
+			</button>
+		</div>
 
 	</form>
 </div>
diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css