Added expandable metadata to Archives

1 files changed, 47 insertions, 6 deletions

diff --git a/layouts/section/archive.html b/layouts/section/archive.html
index 148ddb3..ba50fc0 100644
--- a/layouts/section/archive.html
+++ b/layouts/section/archive.html
@@ -1,5 +1,4 @@
-{{ define "main" }}
-{{- $paginator := .Paginate (where .Site.Pages "Kind" "page").ByDate.Reverse 50 }}
+{{ define "main" }} {{- $paginator := .Paginate (where .Site.Pages "Kind" "page").ByDate.Reverse 50 }}
 <h1 class="standard top-h1 mt-4 mb-4">{{ .Title }}</h1>
 <table class="standard table table-sm table-striped">
   <thead>
@@ -14,17 +13,59 @@
     {{ range $paginator.Pages }}
     <tr>
       <td class="p-2">
+        <span
+          class="mr-2"
+          style="cursor: pointer; color: rgba(34, 8, 167, 0.94)"
+          onclick="expand(this)"
+          ><i class="fas fa-plus-circle"></i
+        ></span>
         <a href="{{ .Permalink | relURL }}"> {{- .Title -}} </a>
-        {{- if .Params.description }}:
-        {{ .Params.description }}
-        {{ end }}
+        {{- if .Params.description }}: {{ .Params.description }} {{ end }}
+        <div
+          class="ml-3 metadata"
+          style="max-height: 0; overflow:hidden; transition: 0.15s"
+        >
+          {{ partial "metadata/metadata-readingtime" . }}
+          {{ if ne $.Kind "section" }}
+          {{ partial "metadata/metadata-section" . }}
+          {{ end }}
+          {{ partial "metadata/metadata-taxonomy" . }}
+        </div>
       </td>
       <td class="text-right" style="font-size: 0.9em;">
-          <time>{{- .Date.Format (default "January 2, 2006" $.Site.Params.dateFormat) -}}</time>
+        <time>
+          {{- .Date.Format (default "January 2, 2006" $.Site.Params.dateFormat) -}}
+        </time>
       </td>
     </tr>
     {{ end }}
   </tbody>
 </table>
 {{ template "_internal/pagination.html" . }}
+<script>
+  const expand = function(elem) {
+    elem.firstChild.classList.toggle("fa-plus-circle");
+    elem.firstChild.classList.toggle("fa-minus-circle");
+    let d = elem.nextElementSibling.nextElementSibling;
+    if (elem.firstChild.classList.contains("fa-plus-circle")) {
+      elem.classList.remove("is-expanded");
+      d.style.maxHeight = "0px";
+    } else {
+      if (document.querySelector(".is-expanded")) {
+        document
+          .querySelector(".is-expanded")
+          .firstChild.classList.add("fa-plus-circle");
+        document
+          .querySelector(".is-expanded")
+          .firstChild.classList.remove("fa-minus-circle");
+        document.querySelector(".is-expanded").classList.remove("is-expanded");
+      }
+      elem.classList.add("is-expanded");
+      Array.from(document.querySelectorAll(".metadata")).forEach(
+        elem => (elem.style.maxHeight = 0)
+      );
+      d.style.maxHeight = d.scrollHeight + "px";
+    }
+  };
+</script>
 {{ end }}