dressing up search, clearing by default

src/_includes/icons/filter.html

@@ -1,6 +1,6 @@
-<div class="filter-parent">
+<div class="filter-parent" id="search">
-  <label for="filter-by" class="fa fa-search"></label>
+  <label for="filter-by"><i class="fa fa-search"></i></label>
-  <input placeholder="Filter icons..." id="filter-by">
+  <input placeholder="Search" id="filter-by" class="form-control input-lg">
   <a href="#" id="filter-clear" class="fa fa-times"></a>
 </div>
 <script>
@@ -11,14 +11,8 @@
     window.filterSet = [];
   }
 </script>
-<{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="filter">
+<section id="filter">
-  <h2 class="page-header">Filter for <span class="text-muted" id="filter-val"></span></h2>
+  <h2 class="page-header text-muted">Search for '<span class="text-color-default" id="filter-val"></span>'</h2>
-  {% if page.navbar_active != "icons" %}
-    <div class="margin-botom-large">
-      You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
-      Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
-    </div>
-  {% endif %}
 
   <div class="row fontawesome-icon-list">
     {% for icon in icons %}
@@ -29,8 +23,8 @@
     {% endfor %}
   </div>
   <div id="no-search-results">
-    <div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> No icons with the tag <strong>'<span></span>'</strong> were found.</div>
+    <div class="alert alert-warning" role="alert"><i class="fa fa-warning margin-right-sm"></i>No icons matching <strong>'<span></span>'</strong> were found.</div>
-    <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle"></i> Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
+    <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle margin-right-sm"></i>Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
   </div>
 
-</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>
+</section>

src/assets/js/site.js

@@ -72,4 +72,13 @@ $(function() {
     }
     return false;
   }
+
+  $filter_by
+    .val('')
+    .trigger('input')
+    .trigger('keyup')
+    .focus();
+
+  $clear.addClass('gone'); // Hide clear button
+
 });

src/assets/less/site.less

@@ -13,6 +13,7 @@
 @import "site/social-buttons";
 @import "site/jumbotron-carousel";
 @import "site/stripe-ad";
+@import "site/search";
 @import "site/fontawesome-icon-list";
 @import "site/feature-list";
 @import "site/example-rating";

src/assets/less/site/bootstrap/variables.less

@@ -117,3 +117,8 @@
 
 // Code
 @pre-border-color:              #eee;
+
+
+//== Type
+//** Text muted color
+@text-muted:                  mix(@gray-light,@gray-lighter,50%);

src/assets/less/site/fontawesome-icon-list.less

@@ -30,28 +30,3 @@
     }
   }
 }
-
-.filter-parent {
-  display: inline-block;
-  position: relative;
-  border: 1px solid #ccc;
-  padding: 0 10px 0 14px;
-  border-radius: 3px;
-  #filter-by, .hint {
-    padding: 7px 0 7px 12px;
-    border: 0 none;
-    outline: 0 none;
-    width: 300px;
-    z-index: 2;
-  }
-  .hint {
-    color: #aaa;
-  }
-  a {
-    text-decoration: none;
-    &.gone {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}

src/assets/less/site/lazy.less

@@ -74,6 +74,9 @@
   line-height: @line-height-base;
   font-weight: normal;
 }
+.text-color-default {
+  color: @text-color;
+}
 .text-hilite {
   color: @link-color;
   &:hover {

src/assets/less/site/search.less

@@ -0,0 +1,29 @@
+.filter-parent {
+  position: relative;
+  font-size: 18px;
+  padding-top: 20px;
+  margin: 0 auto;
+  label {
+    position: absolute;
+    left: 17px;
+    top: 30px;
+  }
+  #filter-by, .hint {
+    padding-left: 43px;
+    padding-right: 43px;
+    border-radius: 23px;
+  }
+  .hint {
+    color: #aaa;
+  }
+  #filter-clear {
+    text-decoration: none;
+    position: absolute;
+    right: 18px;
+    top: 33px;
+    &.gone {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

src/icons.yml

@@ -8,6 +8,7 @@ icons:
       - drink
       - bar
       - alcohol
+      - liquor
     categories:
       - Web Application Icons
 
@@ -2445,6 +2446,7 @@ icons:
       - drink
       - mug
       - bar
+      - liquor
     categories:
       - Web Application Icons