web/simple-icons
1
0
Fork 0
mirror of https://github.com/simple-icons/simple-icons.git synced 2024-12-26 01:13:41 +02:00
Code Releases Activity

Notify the user when nothing is found

Browse Source
This commit is contained in:
nietonfir 2017-07-10 00:06:04 +02:00
parent 69ae7706aa
commit f06e07ec98
1 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -304,6 +304,15 @@
margin-top: 0; margin-top: 0;
} }
} }
.grid.search__empty:after {
content: 'No matching icons found.';
font-size: 1.25em;
line-height: 1.5em;
text-align: center;
width: 100%;
}
@supports (display: grid) { @supports (display: grid) {
.grid { .grid {
display: grid; display: grid;
@ -313,6 +322,16 @@
grid-row-gap: 0.375rem; grid-row-gap: 0.375rem;
grid-auto-flow: dense; grid-auto-flow: dense;
} }
.grid.search__empty:after {
grid-column: 1/span 2;
grid-row-end: span 2;
}
@media (min-width: 30.75rem) {
.grid.search__empty:after {
grid-column: 1/-3;
}
}
} }
.grid-item { .grid-item {
@ -479,7 +498,8 @@
<script type="text/javascript"> <script type="text/javascript">
(function(document) { (function(document) {
var icons = [{{ allIconNames }}], var icons = [{{ allIconNames }}],
$icons = document.querySelectorAll('.grid > .grid-item:not(.grid-item--ad)'), $grid = document.querySelector('.grid'),
$icons = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
$search = document.querySelector('.search'), $search = document.querySelector('.search'),
$searchClose = $search.querySelector('.search__close'), $searchClose = $search.querySelector('.search__close'),
$searchInput = $search.querySelector('input'); $searchInput = $search.querySelector('input');
@ -521,15 +541,19 @@
} }
function search(value) { function search(value) {
var hiddenCounter = 0,
value = value.toLowerCase().trim(); value = value.toLowerCase().trim();
icons.forEach(function(e, i) { icons.forEach(function(e, i) {
if (e.indexOf(value) > -1) { if (e.indexOf(value) > -1) {
$icons[i].classList.remove('hidden'); $icons[i].classList.remove('hidden');
} else { } else {
hiddenCounter++;
$icons[i].classList.add('hidden'); $icons[i].classList.add('hidden');
} }
}) })
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
} }
$search.addEventListener('input', debounce(function(e) { $search.addEventListener('input', debounce(function(e) {