From 72e2872a2bc2530f51052d6eaacb773fe58ce5d7 Mon Sep 17 00:00:00 2001
From: rra <rscmbbng@riseup.net>
Date: Mon, 10 Oct 2022 09:35:35 +0200
Subject: [PATCH] final fixes from Cristoph

---
 .../layouts/_default/baseof.html              | 81 +++++++++++++++++--
 .../lumbung-theme/layouts/_default/list.html  | 72 +++++++++--------
 themes/lumbung-theme/layouts/index.html       |  6 +-
 .../layouts/partials/filter-nav.html          |  1 +
 .../layouts/partials/footer.html              |  7 +-
 .../layouts/partials/header.html              |  2 +-
 .../layouts/partials/social_card.html         |  2 +-
 themes/lumbung-theme/static/css/main.css      | 20 ++++-
 8 files changed, 136 insertions(+), 55 deletions(-)

diff --git a/themes/lumbung-theme/layouts/_default/baseof.html b/themes/lumbung-theme/layouts/_default/baseof.html
index 9e34d4e..007eb1a 100644
--- a/themes/lumbung-theme/layouts/_default/baseof.html
+++ b/themes/lumbung-theme/layouts/_default/baseof.html
@@ -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>
diff --git a/themes/lumbung-theme/layouts/_default/list.html b/themes/lumbung-theme/layouts/_default/list.html
index 094ef4d..9178d35 100644
--- a/themes/lumbung-theme/layouts/_default/list.html
+++ b/themes/lumbung-theme/layouts/_default/list.html
@@ -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 }}
\ No newline at end of file
diff --git a/themes/lumbung-theme/layouts/index.html b/themes/lumbung-theme/layouts/index.html
index 9db5fab..190ba06 100644
--- a/themes/lumbung-theme/layouts/index.html
+++ b/themes/lumbung-theme/layouts/index.html
@@ -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>
diff --git a/themes/lumbung-theme/layouts/partials/filter-nav.html b/themes/lumbung-theme/layouts/partials/filter-nav.html
index da36f2c..373c62b 100644
--- a/themes/lumbung-theme/layouts/partials/filter-nav.html
+++ b/themes/lumbung-theme/layouts/partials/filter-nav.html
@@ -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">
diff --git a/themes/lumbung-theme/layouts/partials/footer.html b/themes/lumbung-theme/layouts/partials/footer.html
index 3c74e2b..c75a630 100644
--- a/themes/lumbung-theme/layouts/partials/footer.html
+++ b/themes/lumbung-theme/layouts/partials/footer.html
@@ -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>
\ No newline at end of file
+</footer>
\ No newline at end of file
diff --git a/themes/lumbung-theme/layouts/partials/header.html b/themes/lumbung-theme/layouts/partials/header.html
index d29fae1..ba3b1a0 100644
--- a/themes/lumbung-theme/layouts/partials/header.html
+++ b/themes/lumbung-theme/layouts/partials/header.html
@@ -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>  */}}
diff --git a/themes/lumbung-theme/layouts/partials/social_card.html b/themes/lumbung-theme/layouts/partials/social_card.html
index ebff12f..464150e 100644
--- a/themes/lumbung-theme/layouts/partials/social_card.html
+++ b/themes/lumbung-theme/layouts/partials/social_card.html
@@ -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}}
diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index a2c5195..b0508f9 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/themes/lumbung-theme/static/css/main.css
@@ -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 {