nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make home page sidebar cards collapsible

This commit is contained in:
Ben Visness 2024-06-21 20:24:55 -05:00
parent ca02716023
commit 698a301c57
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/templates/src/landing.html
View File

@ -86,11 +86,12 @@
<!-- Sidebar -->
<div class="w5 flex flex-column g2 flex-shrink-0">
{{ if .User }}
<div class="bg--card link--normal">
<div class="pa2 flex justify-between items-center">
<div class="sidebar-card bg--card link--normal">
<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
<span class="f7">Your projects</span>
<span class="svgicon-lite">{{ svg "chevron-down" }}</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div>
<div class="sidebar-card-content">
<div class="ph2 flex flex-column g2">
{{ range .UserProjects }}
{{ template "list-project" . }}
@ -103,11 +104,13 @@
<div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
</a>
</div>
<div class="bg--card link--normal">
<div class="pa2 flex justify-between items-center">
<span class="f7">Following</span>
<span class="svgicon f8">{{ svg "chevron-down" }}</span>
</div>
<div class="sidebar-card bg--card link--normal">
<div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
<span class="f7">Following</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div>
<div class="sidebar-card-content">
<div class="ph2 pb2 flex flex-column g2">
{{ range .Following }}
{{ template "list-follow" . }}
@ -116,6 +119,7 @@
{{ end }}
</div>
</div>
</div>
{{ end }}
<div class="f7 tc link--normal">
<a href="{{ .ManifestoUrl }}">Manifesto</a> - <a href="{{ .AboutUrl }}">Our Team</a> - TODO: HISTORY
@ -134,6 +138,19 @@
</div>
</div>
<script>
function collapse(e) {
const card = e.target.closest(".sidebar-card");
const content = card.querySelector(".sidebar-card-content");
const chevron = card.querySelector(".sidebar-chevron");
const hide = !content.hidden;
content.hidden = hide;
chevron.classList.toggle("rot-180", !hide);
}
</script>
{{ end }}
{{ define "list-project" }}