dressing up search, clearing by default

diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html
index bf656f4ad19522b789b128ff0c2ea7023fae2204..82a0ad13ec3d2d31cef35c025ae41d27a61b2427 100644 (file)
--- 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 3254a02823ecdb17c7a2b806286d687f3b0ecf7b..cae109b9901dd6ace3320b8896551f2529863b59 100644 (file)
--- 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 392ee0c69bb4f8edac66bf6eabfd57444c00ef34..f6bb69bd7a59781ee96cf24b9670824dd5abbbc6 100644 (file)
--- 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 2a9b5b962a9520e36b2e56b15d9ab899874c76fa..da534a919b6924cbe10eadaf36f529a2b9773886 100644 (file)
--- 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 b5382572b7399c1459e676495f95345031f55e10..981bdd00212d250a148c6fcb7d5ca21423e8b47b 100644 (file)
--- 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 02d7ba30654fead7d58cf6606a9249923526a245..7207aaeea87cc6b6fdad6615f62718d4d893b354 100644 (file)
--- 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 (file)
index 0000000..1452011
--- /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 662197148c448cd434761e86962865a1e24fcba7..a0a9e2d64e22d37d4a9e5b8b18d97f1e7dc096da 100644 (file)
--- 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