diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index bb8bb9a19..000000000 Binary files a/.DS_Store and /dev/null differ diff --git a/assets/css/site.css b/assets/css/site.css index 3d8412bfc..687c5798b 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -1355,11 +1355,11 @@ a.text-warning:focus { color: #66512c; } .text-danger { - color: #a94442; + color: #d9534f; } a.text-danger:hover, a.text-danger:focus { - color: #843534; + color: #c9302c; } .bg-primary { color: #fff; @@ -1391,11 +1391,11 @@ a.bg-warning:focus { background-color: #f7ecb5; } .bg-danger { - background-color: #f2dede; + background-color: #fbeeed; } a.bg-danger:hover, a.bg-danger:focus { - background-color: #e4b9b9; + background-color: #f2c5c3; } .page-header { padding-bottom: 9px; @@ -2418,14 +2418,14 @@ table th[class*="col-"] { .table > thead > tr.danger > th, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > th { - background-color: #f2dede; + background-color: #fbeeed; } .table-hover > tbody > tr > td.danger:hover, .table-hover > tbody > tr > th.danger:hover, .table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr:hover > .danger, .table-hover > tbody > tr.danger:hover > th { - background-color: #ebcccc; + background-color: #f7d9d8; } .table-responsive { overflow-x: auto; @@ -2869,25 +2869,25 @@ select[multiple].input-lg { .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label { - color: #a94442; + color: #d9534f; } .has-error .form-control { - border-color: #a94442; + border-color: #d9534f; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .has-error .form-control:focus { - border-color: #843534; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; + border-color: #c9302c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba5a3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eba5a3; } .has-error .input-group-addon { - color: #a94442; - border-color: #a94442; - background-color: #f2dede; + color: #d9534f; + border-color: #d9534f; + background-color: #fbeeed; } .has-error .form-control-feedback { - color: #a94442; + color: #d9534f; } .has-feedback label ~ .form-control-feedback { top: 25px; @@ -5118,15 +5118,15 @@ a.thumbnail.active { color: #66512c; } .alert-danger { - background-color: #f2dede; - border-color: #ebccd1; - color: #a94442; + background-color: #fbeeed; + border-color: #f7d8dd; + color: #d9534f; } .alert-danger hr { - border-top-color: #e4b9c0; + border-top-color: #f2c3ca; } .alert-danger .alert-link { - color: #843534; + color: #c9302c; } @-webkit-keyframes progress-bar-stripes { from { @@ -5431,12 +5431,12 @@ button.list-group-item-warning.active:focus { border-color: #8a6d3b; } .list-group-item-danger { - color: #a94442; - background-color: #f2dede; + color: #d9534f; + background-color: #fbeeed; } a.list-group-item-danger, button.list-group-item-danger { - color: #a94442; + color: #d9534f; } a.list-group-item-danger .list-group-item-heading, button.list-group-item-danger .list-group-item-heading { @@ -5446,8 +5446,8 @@ a.list-group-item-danger:hover, button.list-group-item-danger:hover, a.list-group-item-danger:focus, button.list-group-item-danger:focus { - color: #a94442; - background-color: #ebcccc; + color: #d9534f; + background-color: #f7d9d8; } a.list-group-item-danger.active, button.list-group-item-danger.active, @@ -5456,8 +5456,8 @@ button.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus, button.list-group-item-danger.active:focus { color: #fff; - background-color: #a94442; - border-color: #a94442; + background-color: #d9534f; + border-color: #d9534f; } .list-group-item-heading { margin-top: 0; @@ -5793,22 +5793,22 @@ button.list-group-item-danger.active:focus { border-bottom-color: #faebcc; } .panel-danger { - border-color: #ebccd1; + border-color: #f7d8dd; } .panel-danger > .panel-heading { - color: #a94442; - background-color: #f2dede; - border-color: #ebccd1; + color: #d9534f; + background-color: #fbeeed; + border-color: #f7d8dd; } .panel-danger > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #ebccd1; + border-top-color: #f7d8dd; } .panel-danger > .panel-heading .badge { - color: #f2dede; - background-color: #a94442; + color: #fbeeed; + background-color: #d9534f; } .panel-danger > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #ebccd1; + border-bottom-color: #f7d8dd; } .embed-responsive { position: relative; @@ -6842,7 +6842,7 @@ button.close { margin: 0 0 15px; } .jumbotron p { - font-family: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: proxima-nova-sc, "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 15px; margin-bottom: 15px; font-size: 24px; @@ -6942,7 +6942,10 @@ h1.info-class { margin-bottom: 30px; } .small-caps { - font-family: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: proxima-nova-sc, "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.alert-link { + text-decoration: underline; } @media (min-width: 768px) { .modal-md { @@ -6967,7 +6970,7 @@ section { text-align: center; } label.error { - color: #a94442; + color: #d9534f; margin-top: 5px; } #icon-carousel { @@ -7036,36 +7039,47 @@ label.error { .stripe-ad .lead { padding-top: 5px; } -.filter-parent { +#search { position: relative; font-size: 18px; padding-top: 40px; - margin: -20px auto 50px; + margin: -20px auto 0px; } -.filter-parent label { +#search label { position: absolute; left: 17px; - top: 50px; + top: 51px; } -.filter-parent #filter-by, -.filter-parent .hint { +#search #search-input, +#search .hint { padding-left: 43px; padding-right: 43px; border-radius: 23px; } -.filter-parent .hint { +#search .hint { color: #aaa; } -.filter-parent #filter-clear { +#search #search-clear { text-decoration: none; position: absolute; right: 18px; - top: 53px; + top: 54px; + color: #b3b3b3; +} +#search #search-clear:hover { + color: #8f8f8f; +} +#search-results em { + font-style: normal; + text-decoration: underline; } .fontawesome-icon-list { margin-top: 22px; } .fontawesome-icon-list .fa-hover a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; display: block; color: #222222; line-height: 32px; @@ -7565,6 +7579,20 @@ div.bsap a.adhere:hover { font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left !important; } +.algolia { + margin-top: -20px; + padding-top: 49px; +} +.algolia a { + color: #333333; +} +.algolia a:hover { + color: #198764; +} +.algolia .fas-algolia { + font-size: 32px; + vertical-align: middle; +} @media (min-width: 1200px) { #icon-carousel { font-size: 240px; diff --git a/assets/font-awesome-4.4.0.zip b/assets/font-awesome-4.4.0.zip index 0f236968d..8f3663cb4 100644 Binary files a/assets/font-awesome-4.4.0.zip and b/assets/font-awesome-4.4.0.zip differ diff --git a/assets/img/algolia.png b/assets/img/algolia.png new file mode 100644 index 000000000..f5a89619b Binary files /dev/null and b/assets/img/algolia.png differ diff --git a/assets/js/search.js b/assets/js/search.js new file mode 100644 index 000000000..28767996b --- /dev/null +++ b/assets/js/search.js @@ -0,0 +1,92 @@ +$(function() { + var SearchView = Backbone.View.extend({ + events: { + "keyup #search-input": "search", + "click #search-clear": "clear" + }, + + initialize: function() { + this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c"); + this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome"); + this.template = _.template($("#results-template").html()); + + this.$searchInput = this.$("#search-input"); + this.$searchResultsSection = this.$("#search-results"); + this.$searchInputClear = this.$("#search-clear"); + this.$iconsSection = this.$("#icons"); + + this.algoliaHelper.on("result", _.bind(this.showResults, this)); + }, + + search: function(event) { + var query = this.$searchInput.val(); + + if (query !== "") { + this. algoliaHelper.setQuery(query).search(); + } else { + this.clearResults(); + } + }, + + clear: function(event) { + event.preventDefault(); + + this.clearResults(); + }, + + showResults: function(content, state) { + this.$searchResultsSection.html(""); + this.$searchResultsSection.removeClass("hide"); + this.$searchInputClear.removeClass("hide"); + this.$iconsSection.addClass("hide"); + + var results = []; + + _.each(content.hits, function(result) { + results.push(new SearchResultView({ result: result }).render()) + }); + + this.$searchResultsSection.html(this.template({ content: content, results: results.join("") })); + }, + + clearResults: function() { + this.$searchInput.val("").focus(); + this.$searchResultsSection.addClass("hide"); + this.$searchResultsSection.html(""); + this.$searchInputClear.addClass("hide"); + this.$iconsSection.removeClass("hide"); + } + }); + + var SearchResultView = Backbone.View.extend({ + initialize: function(options) { + this.template = _.template($("#result-template").html()); + this.result = options.result + }, + + render: function() { + var matches = []; + + this.pullMatches(matches, this.result._highlightResult.aliases); + this.pullMatches(matches, this.result._highlightResult.synonyms); + + return this.template({ result: this.result, matches: matches }); + }, + + pullMatches: function(matches, list) { + if (list !== undefined) { + _.each(list, function(highlight) { + if (highlight.matchLevel !== "none") { + matches.push(highlight.value) + } + }) + } + } + }); + + var $searchViewElement = $("[data-view=search]"); + + if ($searchViewElement.length > 0) { + new SearchView({ el: $searchViewElement }); + } +}); diff --git a/assets/js/site.js b/assets/js/site.js index 5698943ce..75a7c7158 100644 --- a/assets/js/site.js +++ b/assets/js/site.js @@ -1,4 +1,4 @@ -$(function() { +$(function () { $("#newsletter").validate(); var ads = [ @@ -28,7 +28,6 @@ $(function() { }, - { quote: "Black Tie, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.", class: "black-tie", @@ -40,6 +39,18 @@ $(function() { class: "black-tie", url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update", btn_text: "Check it Out!" + }, + { + quote: "Want a different icon look? Check out Black Tie, our new multi-weight icon set.", + class: "black-tie", + url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update", + btn_text: "Check it Out!" + }, + { + quote: "Check out Black Tie, our new multi-weight icon set!", + class: "black-tie", + url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update", + btn_text: "Check it Out!" } ]; @@ -52,87 +63,8 @@ $(function() { $('[data-toggle="popover"]').popover(); - var $filter_by = $('#filter-by'); - - // Filter icons - if($filter_by.length) { - var $filter_val = $('#filter-val'); - var $filter = $('#filter'); - var $other = $('#new, #web-application, #hand, #transportation, #gender, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart'); - var $clear = $('#filter-clear'); - var $no_results = $('#no-search-results'); - - var $icons = $('.filter-icon', $filter); - - // Add tab completion - $filter_by.tabcomplete(filterSet, { - arrowKeys: true - }); - - $clear.on('click', function(e) { - e.preventDefault(); - $filter_by - .val('') - .trigger('input') - .trigger('keyup') - .focus(); - - $clear.addClass('hide'); // Hide clear button - }); - - - $filter_by.on('keyup', function() { - var $this = $(this); - var val = $this.val().toLowerCase(); - $filter.toggle(!!val); - $other.toggle(!val); - $clear.toggleClass('hide', !val); - $filter_val.text(val); - - if(!val) return; - - var resultsCount = 0; - $icons.each(function() { - var filter = $(this).attr('data-filter').split('|'); - var show = inFilter(val, filter); - if (!show) { - if (val.slice(-1) === 's') { - // Try to be smart. Make plural terms singular. - show = inFilter(val.slice(0, -1), filter); - } - } - if (show) resultsCount++; - $(this).toggle(!!show); - }); - - if( resultsCount == 0 && val.length != 0 ) { - $no_results.find('span').text(val); - $no_results.show(); - } else { - $no_results.hide(); - } - }); - } - - function inFilter(val, filter) { - for (var i = 0; i < filter.length; i++) { - if (filter[i].match(val)) return true; - } - return false; - } - - $filter_by - .val('') - .trigger('input') - .trigger('keyup') - .focus(); - - if ($clear) { - $clear.addClass('hide'); // Hide clear button - } - function selectFonticonsAd() { - random_number = Math.floor( Math.random() * ads.length ); + random_number = Math.floor(Math.random() * ads.length); random_ad = ads[random_number]; $('#banner').addClass(random_ad.class); diff --git a/assets/js/tabcomplete.min.js b/assets/js/tabcomplete.min.js deleted file mode 100644 index f4c1fdf87..000000000 --- a/assets/js/tabcomplete.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! - * tabcomplete - * http://github.com/erming/tabcomplete - * v1.4.1 - */ -!function(a){function b(b,c,d){return a.grep(c,function(a){return d?!a.indexOf(b):!a.toLowerCase().indexOf(b.toLowerCase())})}function c(b){var c=this,d=c.prev(".hint");c.css({backgroundColor:"transparent",position:"relative"}),d.length||(c.options.wrapInput&&c.wrap(a("
").css({position:"relative",height:c.css("height"),display:c.css("display")})),d=c.clone().attr("tabindex",-1).removeAttr("id name placeholder").addClass("hint").insertBefore(c),d.css({position:"absolute"}));var e="";if("undefined"!=typeof b){var f=c.val();e=f+b.substr(f.split(/ |\n/).pop().length)}d.val(e)}function d(a){var b=this,c=b.val();a&&(b.val(c+a.substr(c.split(/ |\n/).pop().length)),b[0].selectionStart=c.length)}var e={backspace:8,tab:9,up:38,down:40};a.tabcomplete={},a.tabcomplete.defaultOptions={after:"",arrowKeys:!1,hint:"placeholder",match:b,caseSensitive:!1,minLength:1,wrapInput:!0},a.fn.tab=a.fn.tabcomplete=function(b,f){if(this.length>1)return this.each(function(){a(this).tabcomplete(b,f)});var g=this.prop("tagName");if("INPUT"==g||"TEXTAREA"==g){this.options=f=a.extend(a.tabcomplete.defaultOptions,f),this.unbind(".tabcomplete"),this.prev(".hint").remove();var h=this,i=!1,j=-1,k=[],l="",m=a.noop;switch(f.hint){case"placeholder":m=c;break;case"select":m=d}return this.on("input.tabcomplete",function(){var c=h.val(),d=c.split(/ |\n/).pop();j=-1,l="",k=[],h[0].selectionStart==c.length&&d.length&&(k=f.match(d,b,f.caseSensitive),f.after&&(k=a.map(k,function(a){return a+f.after}))),h.trigger("match",k.length),f.hint&&(("select"!=f.hint||!i)&&d.length>=f.minLength?m.call(h,k[0]):m.call(h,"")),i&&(i=!1)}),this.on("keydown.tabcomplete",function(a){var b=a.which;if(b==e.tab||f.arrowKeys&&(b==e.up||b==e.down)){if(a.preventDefault(),b!=e.up)j++;else{if(-1==j)return;0==j?j=k.length-1:j--}var c=k[j%k.length];if(!c)return;var d=h.val();if(l=l||d.split(/ |\n/).pop(),l.length - - +
-