mirror of
https://github.com/simple-icons/simple-icons.git
synced 2024-12-16 01:10:30 +02:00
Notify the user when nothing is found
This commit is contained in:
parent
69ae7706aa
commit
f06e07ec98
28
index.html
28
index.html
@ -304,6 +304,15 @@
|
||||
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) {
|
||||
.grid {
|
||||
display: grid;
|
||||
@ -313,6 +322,16 @@
|
||||
grid-row-gap: 0.375rem;
|
||||
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 {
|
||||
@ -479,7 +498,8 @@
|
||||
<script type="text/javascript">
|
||||
(function(document) {
|
||||
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'),
|
||||
$searchClose = $search.querySelector('.search__close'),
|
||||
$searchInput = $search.querySelector('input');
|
||||
@ -521,15 +541,19 @@
|
||||
}
|
||||
|
||||
function search(value) {
|
||||
value = value.toLowerCase().trim();
|
||||
var hiddenCounter = 0,
|
||||
value = value.toLowerCase().trim();
|
||||
|
||||
icons.forEach(function(e, i) {
|
||||
if (e.indexOf(value) > -1) {
|
||||
$icons[i].classList.remove('hidden');
|
||||
} else {
|
||||
hiddenCounter++;
|
||||
$icons[i].classList.add('hidden');
|
||||
}
|
||||
})
|
||||
|
||||
$grid.classList.toggle('search__empty', hiddenCounter == icons.length);
|
||||
}
|
||||
|
||||
$search.addEventListener('input', debounce(function(e) {
|
||||
|
Loading…
Reference in New Issue
Block a user