random-mirrors/based.cooking
1
0
Fork 0
mirror of https://github.com/LukeSmithxyz/based.cooking.git synced 2025-03-27 03:59:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

when searching, list one column, big results

Browse Source
This commit is contained in:
Luke Smith 2022-05-26 19:24:19 -04:00
parent 56c44d2637
commit 10b9f8fbc3
No known key found for this signature in database
GPG Key ID: 4C50B54A911F6252
2 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
content/_index.md
View File

@ -16,6 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
const rec = document.querySelectorAll('#artlist li') const rec = document.querySelectorAll('#artlist li')
const search = document.querySelector('#search') const search = document.querySelector('#search')
const clearSearch = document.querySelector('.clear-search') const clearSearch = document.querySelector('.clear-search')
const artlist = document.getElementById('artlist')
search.addEventListener('input', e => { search.addEventListener('input', e => {
// grab search input value // grab search input value
@ -26,12 +27,15 @@ document.addEventListener('DOMContentLoaded', () => {
const isMatch = recipeName.includes(searchText) const isMatch = recipeName.includes(searchText)
el.hidden = !isMatch el.hidden = !isMatch
el.classList.toggle('matched-recipe', isMatch && searchText.length !== 0);
artlist.classList.add('list-searched');
}) })
}) })
clearSearch.addEventListener('click', e => { clearSearch.addEventListener('click', e => {
search.value = '' search.value = ''
rec.forEach(el => el.hidden = false) rec.forEach(el => el.hidden = false)
artlist.classList.remove('list-searched') ;
}) })
}) })
</script> </script>

11
static/style.css
View File

@ -51,6 +51,7 @@ h1 {
h2 { h2 {
color: tomato ; color: tomato ;
text-align: center ;
} }
footer { footer {
@ -146,3 +147,13 @@ button.clear-search {
button.clear-search:hover { button.clear-search:hover {
color: #eee; color: #eee;
} }
.matched-recipe {
font-size: x-large ;
}
.list-searched {
column-count: 1 !important ;
list-style: decimal ;
}