From 7845615cd6d74f92ecaf4964167f76ed1743c2f6 Mon Sep 17 00:00:00 2001
From: Dave Gandy <dave@davegandy.com>
Date: Thu, 15 Jan 2015 16:54:32 -0500
Subject: [PATCH] dressing up search, clearing by default

---
 src/_includes/icons/filter.html               | 22 +++++---------
 src/assets/js/site.js                         |  9 ++++++
 src/assets/less/site.less                     |  1 +
 src/assets/less/site/bootstrap/variables.less |  5 ++++
 .../less/site/fontawesome-icon-list.less      | 25 ----------------
 src/assets/less/site/lazy.less                |  3 ++
 src/assets/less/site/search.less              | 29 +++++++++++++++++++
 src/icons.yml                                 |  2 ++
 8 files changed, 57 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/less/site/search.less

diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html
index bf656f4ad..82a0ad13e 100644
--- a/src/_includes/icons/filter.html
+++ b/src/_includes/icons/filter.html
@@ -1,6 +1,6 @@
-<div class="filter-parent">
-  <label for="filter-by" class="fa fa-search"></label>
-  <input placeholder="Filter icons..." id="filter-by">
+<div class="filter-parent" id="search">
+  <label for="filter-by"><i class="fa fa-search"></i></label>
+  <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">
-  <h2 class="page-header">Filter for <span class="text-muted" 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 %}
+<section id="filter">
+  <h2 class="page-header text-muted">Search for '<span class="text-color-default" id="filter-val"></span>'</h2>
 
   <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-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-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 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>
diff --git a/src/assets/js/site.js b/src/assets/js/site.js
index 3254a0282..cae109b99 100644
--- a/src/assets/js/site.js
+++ b/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
+
 });
diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index 392ee0c69..f6bb69bd7 100644
--- a/src/assets/less/site.less
+++ b/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";
diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less
index 2a9b5b962..da534a919 100644
--- a/src/assets/less/site/bootstrap/variables.less
+++ b/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%);
diff --git a/src/assets/less/site/fontawesome-icon-list.less b/src/assets/less/site/fontawesome-icon-list.less
index b5382572b..981bdd002 100644
--- a/src/assets/less/site/fontawesome-icon-list.less
+++ b/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;
-    }
-  }
-}
diff --git a/src/assets/less/site/lazy.less b/src/assets/less/site/lazy.less
index 02d7ba306..7207aaeea 100644
--- a/src/assets/less/site/lazy.less
+++ b/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 {
diff --git a/src/assets/less/site/search.less b/src/assets/less/site/search.less
new file mode 100644
index 000000000..145201180
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/src/icons.yml b/src/icons.yml
index 662197148..a0a9e2d64 100644
--- a/src/icons.yml
+++ b/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