diff --git a/index.html b/index.html
index e3f6e2cb..fe196165 100644
--- a/index.html
+++ b/index.html
@@ -219,6 +219,9 @@
+ -
+ Icon missing? Request it here.
+
-
diff --git a/site_script.js b/site_script.js
index 6c8742fa..36546bca 100644
--- a/site_script.js
+++ b/site_script.js
@@ -64,10 +64,9 @@
}
function search(value) {
- var hiddenCounter = 0,
- query = normalizeSearchTerm(value);
+ var query = normalizeSearchTerm(value);
- icons.map(function(icon, iconIndex) {
+ var matchedIcons = icons.map(function(icon, iconIndex) {
var letters = query.split(''),
indexes = [],
index = 0;
@@ -97,7 +96,9 @@
};
}).filter(function(item) {
return item !== null;
- }).sort(function(a, b) {
+ });
+
+ matchedIcons.sort(function(a, b) {
return a.score - b.score;
}).forEach(function(item, index) {
var element = item.element;
@@ -105,7 +106,7 @@
element.classList.remove('hidden');
});
- $grid.classList.toggle('search__empty', hiddenCounter == icons.length);
+ $grid.classList.toggle('search__empty', matchedIcons.length == 0);
if (query === '') {
if ($sortRelevance.classList.contains('active')) {
selectSortingOrder(previousOrder);
diff --git a/stylesheet.css b/stylesheet.css
index 522420b1..8beed6ac 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -221,15 +221,15 @@ a.share-button {
}
}
-.grid.search__empty:after {
- content: 'No matching icons found.';
+.grid > .grid-item--if-empty {
+ display: none;
+}
+
+.grid.search__empty > .grid-item--if-empty {
+ display: block;
font-size: 1.25em;
+ grid-column: span 3;
line-height: 1.5em;
- text-align: center;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
}
@supports (display: grid) {