Merge pull request 'front page redesign & post filtering' (#63) from r/lumbung.space:main into main
Reviewed-on: #63
This commit is contained in:
262
themes/lumbung-theme/layouts/page/filter.html
Normal file
262
themes/lumbung-theme/layouts/page/filter.html
Normal file
@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html>
|
||||
<html{{ with .Site.LanguageCode }} lang="{{ . }}"{{ end }}>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="{{ "css/chroma.css" | relURL }}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ "vendor/bare/css/bare.min.css" | relURL }}" />
|
||||
<style>
|
||||
/*** Important ***/
|
||||
.tf-filter-item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button.active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button.disable-button {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.show-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*** Aesthetics ***/
|
||||
section {
|
||||
margin-top: 18px !important;
|
||||
}
|
||||
.tf-items-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tf-item {
|
||||
width: 250px;
|
||||
margin: 8px;
|
||||
background: #fff;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 2rem
|
||||
}
|
||||
|
||||
.chroma {
|
||||
overflow-x: auto;
|
||||
padding: 4px;
|
||||
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 0 18px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
}
|
||||
|
||||
.acc:after {
|
||||
content: '\02795';
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.acc.active:after {
|
||||
content: "\2796";
|
||||
}
|
||||
|
||||
.navbtn {
|
||||
padding: 0.5rem!important;
|
||||
font-size: 90%!important;
|
||||
|
||||
}
|
||||
.nava {
|
||||
text-transform: none;
|
||||
font-size: 90%!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
|
||||
|
||||
{{ $pages := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||
{{ $sections := .Site.Params.mainSections }}
|
||||
|
||||
{{ $.Scratch.Set "authors" (slice ) }}
|
||||
{{ $.Scratch.Set "noAuthors" 0 }}
|
||||
|
||||
{{ range where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
|
||||
{{ with .Params.authors }}
|
||||
{{ if eq ( printf "%T" . ) "[]string" }}
|
||||
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
|
||||
{{ $.Scratch.Add "authors" . }}
|
||||
{{ end }}
|
||||
{{ else if ( printf "%T" . ) "[]string" }}
|
||||
{{ range . }}
|
||||
{{ if ( not ( in ($.Scratch.Get "authors") . ) ) }}
|
||||
{{ $.Scratch.Add "authors" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
{{ $.Scratch.Add "noAuthors" 1 }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
{{ $tags := $.Site.Taxonomies.tags.ByCount }}
|
||||
|
||||
{{ $.Scratch.Set "untagged" 0 }}
|
||||
{{ range $pages }}
|
||||
{{ with .Params.tags }}{{ else }}{{ $.Scratch.Add "untagged" 1 }}{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<div class="tf-wrapper">
|
||||
<div class="tf-buttons-container flex-grow">
|
||||
<h4>Sections</h4>
|
||||
<button xx id="selectAllSections" onclick="htf.showAll('section')">
|
||||
All Sections
|
||||
</button>
|
||||
{{ range $sections }}
|
||||
<button xx class="sect-button" id="sect-{{ . | urlize }}" onclick="htf.checkFilter('{{ . | urlize }}', 'sect-')">
|
||||
{{ . | title }} <span id="ssect-{{ . | urlize }}"> -count-</span> | <span id="csect-{{ . | urlize }}"> -count-</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
<h4>Authors</h4>
|
||||
<button xx id="selectAllAuthors" onclick="htf.showAll('authors')">
|
||||
All Authors
|
||||
</button>
|
||||
{{ range $.Scratch.Get "authors" }}
|
||||
<button xx class="auth-button" id="auth-{{ . | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ . | replaceRE "[.]" "_" | urlize }}', 'auth-')">
|
||||
{{ . }} <span id="sauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span> | <span id="cauth-{{ . | replaceRE "[.]" "_" | urlize }}"> -count-</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
{{ if gt ( $.Scratch.Get "noAuthors") 0 }}
|
||||
<button xx class="auth-button" id="auth-no-author" onclick="htf.checkFilter('no-author', 'auth-')">
|
||||
No Author <span id="sauth-no-author"> -count-</span> | <span id="cauth-no-author"> -count-</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
<h4>Tags</h4>
|
||||
<button xx class="" id="selectAllTags" onclick="htf.showAll('tags')">
|
||||
All Tags
|
||||
</button>
|
||||
{{ range $tags }}
|
||||
{{ if .Term }}
|
||||
<button xx class="tag-button" id="tag-{{ .Term | replaceRE "[.]" "_" | urlize }}" onclick="htf.checkFilter('{{ .Term | replaceRE "[.]" "_" | urlize }}', 'tag-')">
|
||||
<span>{{.Term | humanize | title }}</span>
|
||||
<span id="stags-{{ .Term | urlize }}"> -count-</span> | <span id="ctags-{{ .Term | urlize }}"> -count-</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if gt ( $.Scratch.Get "untagged") 0 }}
|
||||
<button xx class="tag-button" id="tag-tfuntagged" onclick="htf.checkFilter('tfuntagged', 'tag-')">
|
||||
Untagged <span id="stags-tfuntagged"> -count-</span> | <span id="ctags-tfuntagged"> -count-</span>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<hr >
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<hr >
|
||||
<div><h2><span id="selectedItemCount"></span> Items</h2></div>
|
||||
<div class="tf-items-container">
|
||||
{{ range $pages.ByPublishDate.Reverse }}
|
||||
{{ if in .Params.categories "tv"}}
|
||||
{{- partial "video_box.html" . -}}
|
||||
{{ else if in .Params.categories "calendar" }}
|
||||
{{- partial "calendar_card.html" . -}}
|
||||
{{ else if in .Params.categories "network" }}
|
||||
{{- partial "network_card.html" . -}}
|
||||
{{ else if in .Params.categories "pen" }}
|
||||
{{- partial "pen_card.html" . -}}
|
||||
{{ else if in .Params.categories "shouts" }}
|
||||
{{- partial "shout_card.html" . -}}
|
||||
{{ else if in .Params.categories "books.lumbung.space"}}
|
||||
{{- partial "book_card.html" . -}}
|
||||
{{ else }}
|
||||
{{- partial "card.html" . -}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="{{ "vendor/htf/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
|
||||
<!--<script src="{{ "hugotagsfilter.js" | relURL}}"></script>-->
|
||||
<script>
|
||||
var htfConfig = {
|
||||
filters: [
|
||||
{
|
||||
name: 'tags',
|
||||
prefix: 'tag-',
|
||||
buttonClass: 'tag-button',
|
||||
allSelector: '#selectAllTags',
|
||||
attrName: 'data-tags',
|
||||
selectedPrefix: 'stags-',
|
||||
countPrefix: 'ctags-'
|
||||
},
|
||||
{
|
||||
name: 'section',
|
||||
prefix: 'sect-',
|
||||
buttonClass: 'sect-button',
|
||||
allSelector: '#selectAllSections',
|
||||
attrName: 'data-section',
|
||||
selectedPrefix: 'ssect-',
|
||||
countPrefix: 'csect-'
|
||||
|
||||
},
|
||||
{
|
||||
name: 'authors',
|
||||
prefix: 'auth-',
|
||||
buttonClass: 'auth-button',
|
||||
allSelector: '#selectAllAuthors',
|
||||
attrName: 'data-authors',
|
||||
selectedPrefix: 'sauth-',
|
||||
countPrefix: 'cauth-'
|
||||
|
||||
}
|
||||
],
|
||||
showItemClass: "show-item",
|
||||
filterItemClass: "filter-item",
|
||||
activeButtonClass: "active",
|
||||
counterSelector: "selectedItemCount",
|
||||
populateCount: true,
|
||||
setDisabledButtonClass: "disable-button"
|
||||
}
|
||||
var htf = new HugoTagsFilter(htfConfig);
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleAcc(el) {
|
||||
el.classList.toggle("active")
|
||||
var panel = el.nextElementSibling;
|
||||
if (panel.style.maxHeight){
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user