Redesign/DRY search box on search pages

openlibrary/templates/search/advancedsearch.html

@@ -40,7 +40,7 @@ <h1>$_('Advanced Search')</h1>
         <input type="text" name="publisher" id="qtop-publisher" placeholder="" size="35">
       </div>
     </fieldset>
-    <button type="submit" class="larger">$_('Search')</button>
+    <button type="submit" class="larger cta-btn cta-btn--small cta-btn--vanilla" style="width: auto; background-color: hsl(48, 29%, 93%);">$_('Search')</button>
     <div class="searchPlus">
       <a href="https://openlibrary.org/search/howto">$_('How to search?')</a>
       <a href="/search/inside">$_('Full Text Search?')</a>

openlibrary/templates/search/authors.html

@@ -18,10 +18,8 @@ <h1>$_("Search Authors")</h1>
 
 <div id="contentBody">
   $:macros.SearchNavigation()
-
   <form class="siteSearch olform" action="">
-    <input type="text" class="larger" name="q" size="100" value="$q"/>
-    <input type="submit"  class="larger" value="$_('Search')"/>
+    $:render_template("search/search_bar")
   </form>
 </div>
 

openlibrary/templates/search/inside.html

@@ -9,8 +9,7 @@ <h1>$_("Search Inside")</h1>
 <div id="contentBody">
   $:macros.SearchNavigation()
   <form class="siteSearch olform" action="/search/inside">
-    <input type="text" class="larger" name="q" size="100" value="$q"/>
-    <input type="submit" class="larger" value="$_('Search')">
+    $:render_template("search/search_bar")
   </form>
     $ num_found = 0
     $if q:

openlibrary/templates/search/lists.html

@@ -9,8 +9,7 @@ <h1>$_("Search Lists")</h1>
 <div id="contentBody">
   $:macros.SearchNavigation()
   <form class="siteSearch olform" action="/search/lists">
-    <input type="text" class="larger" name="q" size="100" value="$q"/>
-    <input type="submit" class="larger" value="$_('Search')">
+    $:render_template("search/search_bar")
   </form>
 
   $if lists:

openlibrary/templates/search/search_bar.html

@@ -0,0 +1 @@
+<input type="text" class="search-input" name="q" size="100" /><input type="submit" class="search-btn" value="$_('Search')"/>

openlibrary/templates/search/subjects.html

@@ -20,8 +20,7 @@ <h1>
   $:macros.SearchNavigation()
     <div class="section">
         <form class="siteSearch olform" action="">
-            <input type="text" class="larger" name="q" size="100" value="$q"/>
-            <input type="submit" class="larger" value="$_('Search')"/>
+            $:render_template("search/search_bar")
         </form>
     </div>
 

openlibrary/templates/work_search.html

@@ -59,8 +59,7 @@ <h1>$_("Search Books")</h1>
 
     <form method="get" action="/search" class="siteSearch olform">
       <label for="q" class="hidden">$_('Keywords')</label>
-      <input type="text" name="q" id="q" value="$q_param" size="100"/>
-      <button type="submit" class="larger" id="searchsubmit">$_("Search")</button>
+      $:render_template("search/search_bar")
       <span class="mode-options">
         <input type="radio" name="mode" value="everything" id="mode-search-everything" class="search-mode">
         <label for="mode-search-everything">$_('Everything')</label>

static/css/components/buttonSearch.less

@@ -0,0 +1,29 @@
+/**
+ * Search button and text input
+ * [TODO: Link to documentation]
+ */
+
+.search-btn {
+  width: auto;
+  display: inline-block;
+  margin: 0;
+  height: 38px;
+  border: 1px solid @dark-beige;
+  border-radius: 6px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  vertical-align: middle;
+  background-color: @light-beige;
+  color: @grey;
+  font-size: 18px !important;
+}
+
+.search-input {
+  margin: 0 !important;
+  height: 38px;
+  display: inline-block;
+  vertical-align: middle;
+  border: 1px solid @dark-beige;
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}

static/css/components/buttonsAndLinks.less

@@ -117,3 +117,4 @@ button {
 @import "components/buttonLink.less";
 @import "components/buttonGhost.less";
 @import "components/buttonBtn.less";
+@import "components/buttonSearch.less";