dressing up search, clearing by default

This commit is contained in:
Dave Gandy 2015-01-15 16:54:32 -05:00
parent 57b4ce9433
commit 7845615cd6
8 changed files with 57 additions and 39 deletions

View File

@ -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> <a href="#" id="filter-clear" class="fa fa-times"></a>
</div> </div>
<script> <script>
@ -11,14 +11,8 @@
window.filterSet = []; window.filterSet = [];
} }
</script> </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"> <div class="row fontawesome-icon-list">
{% for icon in icons %} {% for icon in icons %}
@ -29,8 +23,8 @@
{% endfor %} {% endfor %}
</div> </div>
<div id="no-search-results"> <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> </div>
</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}> </section>

View File

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

View File

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

View File

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

View File

@ -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;
}
}
}

View File

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

View File

@ -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;
}
}
}

View File

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