Changeset 4551

Timestamp:

12/16/2016 08:04:12 PM (9 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Improve appearance and responsiveness of search bar.

• Mirror appearance of search field rolling out in other w.org sites.
• ...which is largely a switch from input[type="submit"] to button with search dashicon.
• Add padding to ensure space around search field at smaller page widths.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• scss/main.scss (modified) (5 diffs)
• searchform.php (modified) (1 diff)
• stylesheets/main.css (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -134 +134 @@
             width: 2.2rem;
         }
-    }
-
-    main {
-        font-size: 1.5rem;
     }
 
@@ -672 +668 @@
     }
 
-    .section.search-section {
-        padding-bottom: 0;
-    }
-
     .reference-landing .section.search-section {
         padding-top: 0;
@@ -734 +726 @@
         overflow: hidden;
         height: auto;
-        margin-bottom: 1em;
-        input[type="text"], input[type="submit"] {
-            height: 50px;
-            height: 5rem;
-            margin-bottom: 1em;
+        position: relative;
+        input[type="text"] {
+            border-radius: 0;
+            margin: 0 auto;
+            padding: 0.5em;
             width: 100%;
         }
-        input[type="submit"] {
-            width: 85px;
-            width: 8.5rem;
-            float: left;
+        .button-search {
+            background: transparent;
+            border: none;
+            border-radius: 0;
+            box-shadow: none;
+            color: #32373c;
+            display: block;
+            height: 40px;
+            padding: 0.5rem 1rem;
+            position: absolute;
+            right: 0;
+            top: 0;
+            text-shadow: none;
         }
         label {
@@ -761 +762 @@
         }
         .search-post-type {
+            margin-top: 1em;
+
             label {
                 border-right: 1px solid #ccc;
@@ -788 +791 @@
         max-width: 70rem;
         margin: 0 auto;
-        padding: 1.5em 0;
+        padding: 1.5em 1em;
     }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/searchform.php

@@ -46 +46 @@
 
     <form role="search" method="get" class="searchform<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-        <div>
-        <label>
-            <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 &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-        </label>
-        <input type="submit" class="shiny-blue search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'wporg' ); ?>">
-        </div>
-
+        <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 &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>
     <?php if ( $filters ) : ?>
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -444 +444 @@
 }
 
-.devhub-wrap main {
-  font-size: 1.5rem;
-}
-
 .devhub-wrap a.button,
 .devhub-wrap button,
@@ -1018 +1014 @@
 }
 
-.devhub-wrap .section.search-section {
-  padding-bottom: 0;
-}
-
 .devhub-wrap .reference-landing .section.search-section {
   padding-top: 0;
@@ -1084 +1076 @@
   overflow: hidden;
   height: auto;
-  margin-bottom: 1em;
-}
-
-.devhub-wrap .searchform input[type="text"], .devhub-wrap .searchform input[type="submit"] {
-  height: 50px;
-  height: 5rem;
-  margin-bottom: 1em;
+  position: relative;
+}
+
+.devhub-wrap .searchform input[type="text"] {
+  border-radius: 0;
+  margin: 0 auto;
+  padding: 0.5em;
   width: 100%;
 }
 
-.devhub-wrap .searchform input[type="submit"] {
-  width: 85px;
-  width: 8.5rem;
-  float: left;
+.devhub-wrap .searchform .button-search {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  color: #32373c;
+  display: block;
+  height: 40px;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  right: 0;
+  top: 0;
+  text-shadow: none;
 }
 
@@ -1115 +1116 @@
 .devhub-wrap .searchform div {
   overflow: auto;
+}
+
+.devhub-wrap .searchform .search-post-type {
+  margin-top: 1em;
 }
 
@@ -1144 +1149 @@
   max-width: 70rem;
   margin: 0 auto;
-  padding: 1.5em 0;
+  padding: 1.5em 1em;
 }