show only most recent if not searching, visibility

pull/809/head
Luke Smith 2 years ago
parent eadba0b80b
commit 5e3b7c54e7

@ -6,6 +6,7 @@ theme = 'lugo'
[params]
favicon = "/favicon.svg"
stylesheet = "/style.css"
indexarticles = 50
[markup]
[markup.goldmark]

@ -6,7 +6,7 @@ description: 'The fast-loading recipe site with cooking only and no ads.'
## What do you want to cook?
<div class="search js-only">
<input type="text" id="search" placeholder="Search...">
<input type="text" id="search" placeholder="Search ALL Recipes...">
<button id="clear-search">
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><title>Backspace</title><path d="M135.19 390.14a28.79 28.79 0 0021.68 9.86h246.26A29 29 0 00432 371.13V140.87A29 29 0 00403.13 112H156.87a28.84 28.84 0 00-21.67 9.84v0L46.33 256l88.86 134.11z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33M336.67 192.33L206.66 322.34M336.67 322.34L206.66 192.33"></path></svg>
</button>
@ -22,6 +22,7 @@ document.addEventListener("DOMContentLoaded", () => {
const recipes = document.querySelectorAll("#artlist li");
const search = document.getElementById("search");
const oldheading = document.getElementById("newest-recipes");
const clearSearch = document.getElementById("clear-search");
const artlist = document.getElementById("artlist");
@ -32,6 +33,7 @@ document.addEventListener("DOMContentLoaded", () => {
const hasFilter = searchText.length > 0;
artlist.classList.toggle("list-searched", hasFilter);
oldheading.classList.toggle("hidden", hasFilter);
// for each recipe hide all but matched
recipes.forEach(recipe => {
@ -51,11 +53,14 @@ document.addEventListener("DOMContentLoaded", () => {
})
artlist.classList.remove("list-searched");
oldheading.classList.remove("hidden");
})
})
// @license-end
</script>
## Newest Recipes
{{< artlist >}}
## Or Browse by Category...

@ -1,5 +1,7 @@
<ul id=artlist>
{{range.Site.RegularPages}}
<li data-tags="{{.Params.Tags}}"><a href="{{.Permalink}}">{{.Title}}</a></li>
{{end}}
{{ $number := 0 -}}
{{- range.Site.RegularPages -}}
{{- $number = add $number 1 -}}
<li data-tags="{{.Params.Tags}}" {{ if gt $number .Site.Params.indexarticles }}class="older-article"{{ end }}><a href="{{.Permalink}}">{{.Title}}</a></li>
{{ end -}}
</ul>

@ -20,6 +20,7 @@ body {
a {
color: gold ;
text-decoration: none ;
}
#tagcloud {
@ -111,6 +112,22 @@ img[alt="XMR Logo"] {
}
.older-article {
display: none ;
}
.hidden {
display: none !important ;
}
#artlist {
font-size: large ;
}
#artlist li {
padding: .25em ;
}
@media (min-width: 55em) {
#artlist { column-count: 2 ;}
}
@ -155,6 +172,7 @@ button#clear-search:hover {
.matched-recipe {
font-size: x-large ;
display: block !important ;
}
.list-searched {

Loading…
Cancel
Save