autonomic-cooperative/sophie-lewis-hugo
Archived
0
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

writing: add accordion functionality

Browse Source
This commit is contained in:
desmukh 2022-12-27 12:19:29 +05:00
parent 5207ecca45
commit 9135a41cd6
4 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
layouts/partials/accordion-script.html Normal file
View File

@ -0,0 +1,16 @@
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

14
layouts/partials/essay-accordion.html
View File

@ -1,6 +1,8 @@
<h2>{{ .year }}</h2>
{{ range where .essays "year" .year }}
<div class="writing-item">
<p>{{ .year }}. <a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
</div>
{{ end }}
<button class="accordion">{{ .year }}</button>
<div class="acc-panel">
{{ range where .essays "year" .year }}
<div class="writing-item">
<p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
</div>
{{ end }}
</div>

37
layouts/partials/head.html Normal file
View File

@ -0,0 +1,37 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
{{/* scss compiling */}}
{{ $options := (dict "targetPath" "css/style.css" "outputStyle" "compressed") }}
{{ $style := resources.Get "scss/main.scss" | resources.ToCSS $options }}
{{ template "_internal/twitter_cards.html" . }}
<link href='{{ $style.RelPermalink }}' rel="stylesheet">
<title>{{ $title }}</title>
{{- partial "octocss.html" . -}}
{{ if eq .Title "Writing" }}
<style>
.accordion {
background-color: transparent;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.acc-panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
{{ end }}
</head>

1
layouts/writing/list.html
View File

@ -13,6 +13,7 @@
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2019)}}
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2018)}}
{{ partial "essay-accordion" (dict "essays" .Params.Essays "year" 2017)}}
{{ partial "accordion-script"}}
</div>
</div>
</div>