From 781560abba70afab67337a01c2bcdfb8e20c6a00 Mon Sep 17 00:00:00 2001
From: Eric Cornelissen <ericornelissen@gmail.com>
Date: Mon, 29 Oct 2018 18:21:34 +0100
Subject: [PATCH] Update no search results message (#1036)

* Restore "No matching icons found." message

* Update message when no icons are found

with a message that links to a new issue
---
 index.html     |  3 +++
 site_script.js | 11 ++++++-----
 stylesheet.css | 14 +++++++-------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index e3f6e2cb..fe196165 100644
--- a/index.html
+++ b/index.html
@@ -219,6 +219,9 @@
             <svg id="sort-relevance" class="sort-btn" aria-labelledby="sort-relevance" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" display="none"><title id="sort-relevance">Sort by relevance</title><path d="M9.219,18.857H6.648V0.429C6.656,0.201,6.478,0.008,6.25,0H3.648C3.533-0.004,3.421,0.04,3.34,0.121C3.259,0.203,3.215,0.314,3.219,0.429v18.428H0.648c-0.179-0.012-0.344,0.098-0.402,0.268c-0.071,0.17-0.04,0.326,0.094,0.469l4.286,4.287C4.724,23.961,4.826,24,4.934,24c0.114,0.001,0.224-0.041,0.308-0.119l4.272-4.273c0.081-0.086,0.128-0.199,0.134-0.318c0.008-0.23-0.172-0.423-0.402-0.432C9.237,18.857,9.228,18.857,9.219,18.857z"/><path d="M22.971,4.984c0.226-0.22,0.304-0.543,0.207-0.843c-0.099-0.3-0.352-0.515-0.666-0.561l-2.777-0.403c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.519C18.079,0.174,17.797,0,17.479,0c-0.316,0-0.598,0.176-0.737,0.458l-1.243,2.519c-0.054,0.108-0.156,0.183-0.273,0.199L12.445,3.58c-0.311,0.043-0.569,0.261-0.665,0.56c-0.098,0.3-0.019,0.624,0.207,0.843l2.012,1.96c0.086,0.084,0.125,0.207,0.104,0.322l-0.475,2.769c-0.041,0.245,0.021,0.481,0.18,0.667c0.244,0.292,0.674,0.381,1.016,0.201l2.486-1.307c0.104-0.056,0.232-0.054,0.339,0l2.485,1.307C20.256,10.967,20.387,11,20.518,11c0.245,0,0.477-0.109,0.633-0.298c0.156-0.185,0.223-0.429,0.18-0.667l-0.475-2.768c-0.021-0.117,0.02-0.24,0.104-0.322L22.971,4.984z"/><path d="M22.966,17.984c0.227-0.219,0.307-0.543,0.209-0.844c-0.099-0.299-0.354-0.516-0.666-0.561l-2.777-0.404c-0.119-0.018-0.221-0.092-0.274-0.199l-1.241-2.518c-0.141-0.283-0.422-0.46-0.738-0.46s-0.6,0.177-0.738,0.46l-1.242,2.518c-0.054,0.107-0.156,0.184-0.275,0.199l-2.775,0.404c-0.314,0.045-0.568,0.259-0.666,0.561c-0.098,0.301-0.018,0.623,0.207,0.844l2.011,1.961c0.087,0.082,0.124,0.205,0.104,0.322l-0.475,2.769c-0.055,0.312,0.07,0.618,0.328,0.806c0.254,0.186,0.586,0.207,0.865,0.063l2.484-1.307c0.107-0.056,0.234-0.056,0.341,0l2.485,1.307C20.253,23.968,20.384,24,20.515,24c0.172,0,0.34-0.055,0.482-0.158c0.256-0.188,0.383-0.494,0.329-0.806l-0.478-2.769c-0.02-0.117,0.021-0.24,0.104-0.322L22.966,17.984z M20.874,23.115c0.021,0.14-0.029,0.273-0.145,0.354c-0.115,0.086-0.258,0.094-0.385,0.029l-2.487-1.309c-0.118-0.063-0.251-0.096-0.382-0.096s-0.264,0.032-0.385,0.098l-2.485,1.307c-0.124,0.064-0.269,0.057-0.382-0.029c-0.116-0.08-0.168-0.215-0.146-0.354l0.479-2.77c0.045-0.267-0.043-0.539-0.236-0.729l-2.014-1.96c-0.104-0.099-0.135-0.237-0.092-0.371c0.045-0.136,0.154-0.228,0.295-0.249l2.778-0.403c0.269-0.038,0.5-0.207,0.618-0.448l1.242-2.521c0.064-0.127,0.184-0.202,0.326-0.202c0.144,0,0.265,0.075,0.328,0.202l1.242,2.521c0.117,0.241,0.35,0.41,0.617,0.448l2.78,0.403c0.14,0.021,0.249,0.113,0.292,0.249c0.044,0.134,0.011,0.272-0.092,0.371l-2.01,1.96c-0.192,0.189-0.281,0.461-0.235,0.729L20.874,23.115z"/></svg>
         </div>
         <ul class="grid">
+            <li class="grid-item--if-empty">
+                Icon missing? Request it <a href="https://github.com/simple-icons/simple-icons/issues/new?template=icon_request.md">here</a>.
+            </li>
             <li class="grid-item grid-item--ad">
                 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIPK7M&placement=simpleiconsorg" id="_carbonads_js"></script>
             </li>
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) {