r/lumbung.space
0
0
Fork 0
forked from ruangrupa/lumbung.space
Code Issues Pull Requests Projects Releases Wiki Activity

merge filter & frontpage redesign #1

Merged
r merged 5 commits from filter into main 2022-10-10 07:37:27 +00:00
Conversation 0 Commits 5 Files Changed 24 +136 -55
8 changed files with 136 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 72e2872a2b - Show all commits

81
themes/lumbung-theme/layouts/_default/baseof.html
View File

@ -11,6 +11,8 @@
{{- partial "news-ticker.html" . -}}
{{- partial "footer.html" . -}}
</body>
<script src="{{ "js/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
<script>
function toggleDescription(id) {
document.querySelector(id).classList.toggle("collapsed");
@ -33,19 +35,84 @@
if (document.querySelector('[aria-label="Previous"]')) {
document.querySelector('[aria-label="Previous"]').parentElement.classList.add('previous-page-link')
}
// for toggling submenus in mobile navigation drawer
let submenuLinks = document.querySelectorAll('.drawer .has-submenu');
[...submenuLinks].forEach(submenuLink => {
submenuLink.addEventListener('click', function() {
submenuLink.querySelector('.submenu').classList.toggle('opened')
})
})
// footer random color
var color = ['orange','green','blue'];
var footer = document.getElementById("footer");
var rand = Math.floor(Math.random() * color.length);
footer.classList.add(color[rand]);
// mobile menu
document.getElementById("menu-button").onclick=function(){
this.classList.toggle("active");
document.getElementById("menu").classList.toggle("active");
}
// mobile menu - submenu
submenuLinks = document.querySelectorAll(".has-submenu");
[...submenuLinks].forEach((t=>{
t.addEventListener("click",(function(){t.querySelector(".submenu").classList.toggle("active")}))
}));
// mobile mainfilter
document.getElementById("filter-link").onclick=function(){document.getElementById("filter").classList.toggle("active")};
// mobile filter
filterButtons=document.querySelectorAll(".filter-buttons");
[...filterButtons].forEach((t=>{
t.addEventListener("click",(function(){t.querySelector(".filter-buttons-dropdown").classList.toggle("active");
t.querySelector(".filter-by").classList.toggle("active")}))
}));
// load more cards
document.getElementById("load-more").onclick=function(){
document.getElementById('load-more-paginator').click();
}
// filter config
var htfConfig = {
filters: [
{
name: 'tags',
prefix: 'tag-',
buttonClass: 'tag-button',
allSelector: '#selectAllTags',
attrName: 'data-tags',
selectedPrefix: 'stags-',
},
{
name: 'section',
prefix: 'sect-',
buttonClass: 'sect-button',
allSelector: '#selectAllSections',
attrName: 'data-section',
selectedPrefix: 'ssect-',
},
{
name: 'contributors',
prefix: 'cont-',
buttonClass: 'cont-button',
allSelector: '#selectAllContributors',
attrName: 'data-contributors',
selectedPrefix: 'scont-',
},
{
name: 'sources',
prefix: 'src-',
buttonClass: 'src-button',
allSelector: '#selectAllSources',
attrName: 'data-sources',
selectedPrefix: 'ssrc-',
}
],
showItemClass: "show-item",
filterItemClass: "filter-item",
activeButtonClass: "active",
counterSelector: "selectedItemCount",
populateCount: true,
setDisabledButtonClass: "disable-button"
}
var htf = new HugoTagsFilter(htfConfig);
</script>
</html>

72
themes/lumbung-theme/layouts/_default/list.html
View File

@ -1,40 +1,48 @@
{{ define "main" }}
<main>
<section class='entries'>
<div class="h-feed">
{{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
<div class="h-feed">
{{ $range := where .Pages "Params.hidden" "ne" "true" }}
{{ $paginator := .Paginate $range }}
{{ $pageSize := $paginator.PageSize }}
{{ $totalPostsToShow := mul $paginator.PageNumber $pageSize }}
{{ range $index, $el := (first $totalPostsToShow $range) }}
<div class='post {{if eq .Section "tv"}}tv{{ end }}' {{ if eq $index (sub $totalPostsToShow $pageSize) }}id="newpage"{{ end }}>
{{if eq .Section "tv"}}
{{- partial "video_box.html" . -}}
{{ else if eq .Section "events" }}
{{- partial "partials/calendar_card.html" . -}}
{{ else if eq .Section "shouts" }}
{{ if in .Params.sources "pen.lumbung.space" }}
{{- partial "pen_card.html" . -}}
{{ else }}
{{- partial "shout_card.html" . -}}
{{ end }}
{{ else if eq .Section "social" }}
{{- partial "social_card.html" . -}}
{{ else if eq .Section "publications"}}
{{- partial "book_card.html" . -}}
{{ else if eq .Section "sounds"}}
{{- partial "sounds_card.html" . -}}
{{ else }}
{{- partial "card.html" . -}}
{{ end }}
{{- partial "video_box.html" . -}}
{{ else if eq .Section "events" }}
{{- partial "partials/calendar_card.html" . -}}
{{ else if eq .Section "shouts" }}
{{ if in .Params.sources "pen.lumbung.space" }}
{{- partial "partials/pen_card.html" . -}}
{{ else }}
{{- partial "partials/shout_card.html" . -}}
{{ end }}
{{ else if eq .Section "social" }}
{{- partial "partials/social_card.html" . -}}
{{ else if eq .Section "publications"}}
{{- partial "partials/book_card.html" . -}}
{{ else if eq .Section "sounds"}}
{{- partial "sounds_card.html" . -}}
{{ else }}
{{- partial "card.html" . -}}
{{ end }}
</div>
{{ end }}
</div>
<nav class="pagination-container">
{{ template "_internal/pagination.html" . }}
</nav>
<div class="page-nav">
{{ if and (gt $paginator.TotalPages 1) ($paginator.HasNext) }}
<a id="load-more-paginator" class="nextpage" href="{{ $paginator.Next.URL }}#newpage">load more</a>
{{ end }}
</div>
</section>
</main>
{{ end }}

6
themes/lumbung-theme/layouts/index.html
View File

@ -1,5 +1,4 @@
{{ define "main" }}
<main>
<section class='entries'>
@ -42,9 +41,8 @@
<div class="page-nav">
{{ if and (gt $paginator.TotalPages 1) ($paginator.HasNext) }}
<a class="nextpage" href="{{ $paginator.Next.URL }}#newpage">Next Page</a>
<a id="load-more-paginator" class="nextpage" href="{{ $paginator.Next.URL }}#newpage">load more</a>
{{ end }}
<a class="nextpage load-all-trigger" href="{{ $paginator.Last.URL }}">Load all</a>
</div>
<div class="lumbung-radio-player" onclick="window.open('https://lumbungradio.stationofcommons.org', 'Lumbung Radio', 'height=800,width=450')">
@ -54,8 +52,6 @@
<span>lumbung radio</span>
<img src="/img/lumbung-radio-logo.png" alt="" height="30">
</div>
</section>
</main>

1
themes/lumbung-theme/layouts/partials/filter-nav.html
View File

@ -12,6 +12,7 @@
<div class="filter-container">
<div class="filter-information">
<div><span id="selectedItemCount"></span> Cards</div>
<div id="load-more">load more cards</div>
</div>
<div class="filter-buttons-container">
<div class="filter-buttons">

7
themes/lumbung-theme/layouts/partials/footer.html
View File

@ -18,9 +18,4 @@
<div class="f-credits">
<a href="https://panduan.lumbung.space/share/684ea8a2-bc47-4111-acf2-f88a200b640f">Imprint</a> - <a href="https://panduan.lumbung.space/share/8a742222-2561-4d67-a9f1-6c7c4fe8bead">Privacy Policy</a> - <a href="https://panduan.lumbung.space/share/507566f6-6b7e-402e-bfd4-034feebdcba6">Glossary</a> - <a href="https://panduan.lumbung.space/share/ef6f6638-856d-4c9a-ab89-d82af567aba4">Terms of Use</a>
</div>
</footer>
<script src="{{ "js/hugotagsfilter-1.2.2.min.js" | relURL}}"></script>
<script>
document.getElementById("menu-button").onclick=function(){this.classList.toggle("active"),document.getElementById("menu").classList.toggle("active")},submenuLinks=document.querySelectorAll(".has-submenu"),[...submenuLinks].forEach((t=>{t.addEventListener("click",(function(){t.querySelector(".submenu").classList.toggle("active")}))})),filterButtons=document.querySelectorAll(".filter-buttons"),[...filterButtons].forEach((t=>{t.addEventListener("click",(function(){t.querySelector(".filter-buttons-dropdown").classList.toggle("active"),t.querySelector(".filter-by").classList.toggle("active")}))})),document.getElementById("filter-link").onclick=function(){document.getElementById("filter").classList.toggle("active")};var htfConfig={filters:[{name:"tags",prefix:"tag-",buttonClass:"tag-button",allSelector:"#selectAllTags",attrName:"data-tags",selectedPrefix:"stags-"},{name:"section",prefix:"sect-",buttonClass:"sect-button",allSelector:"#selectAllSections",attrName:"data-section",selectedPrefix:"ssect-"},{name:"contributors",prefix:"cont-",buttonClass:"cont-button",allSelector:"#selectAllContributors",attrName:"data-contributors",selectedPrefix:"scont-"},{name:"sources",prefix:"src-",buttonClass:"src-button",allSelector:"#selectAllSources",attrName:"data-sources",selectedPrefix:"ssrc-"}],showItemClass:"show-item",filterItemClass:"filter-item",activeButtonClass:"active",counterSelector:"selectedItemCount",populateCount:!0,setDisabledButtonClass:"disable-button"},htf=new HugoTagsFilter(htfConfig);
</script>
</footer>

2
themes/lumbung-theme/layouts/partials/header.html
View File

@ -7,7 +7,7 @@
</header>
<div class="menu-row">
<nav id="menu" class="menu">
<img class="menu-dot" src="/img/black-dot.svg" alt="black dot">
<a href="#"><img class="menu-dot" src="/img/black-dot.svg" alt="black dot"></a>
<ul>
<li><a href="/timeline/">harvest</a></li>
{{/* <li><a href="/about/">about</a></li> */}}

2
themes/lumbung-theme/layouts/partials/social_card.html
View File

@ -1,4 +1,4 @@
<div class='social card {{ range .Params.tags }}{{ if or (eq . "lumbungkios") (eq . "lumbunggallery")}}{{.}}{{ end }}{{ end }} filter-item' data-section="{{ .Section }}" data-sources='{{- partial "data/sources.html" . -}}' data-contributors='{{- partial "data/contributors.html" . -}}' data-tags='{{- partial "data/tags.html" . -}}'>
<div class='social card {{ range .Params.tags }}{{ if or (eq . "lumbungkios") (eq . "lumbungkiosproducts")}}lumbungkios{{else if (eq . "lumbunggallery")}}{{.}}{{ end }}{{ end }} filter-item' data-section="{{ .Section }}" data-sources='{{- partial "data/sources.html" . -}}' data-contributors='{{- partial "data/contributors.html" . -}}' data-tags='{{- partial "data/tags.html" . -}}'>
<article class="h-entry social">
<header>
{{ $postPermalink := .Permalink}}

20
themes/lumbung-theme/static/css/main.css
View File

@ -53,6 +53,11 @@
/*Main Stuff*/
html {
scroll-behavior: smooth;
}
body {
font-size: 21px;
font-family: Gudea, sans-serif;
@ -127,15 +132,15 @@ a {
max-width: 400px;
}
.card:nth-child(even) {
.post:nth-child(even) {
transform: rotate(-1deg);
}
.card:nth-child(odd) {
.post:nth-child(odd) {
transform: rotate(1deg);
}
.card:nth-child(5) {
.post:nth-child(5) {
transform: rotate(2deg);
}
@ -1178,6 +1183,12 @@ li.page-item:after {
width: 15%;
}
#load-more {
font-size: 0.8rem;
text-decoration: underline;
cursor: pointer;
}
.filter-buttons-container {
align-items: center;
display: flex;
@ -2117,6 +2128,9 @@ input:checked + label + .description {
.filter-information {
width: 100%;
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-buttons-container {