hmn
/
hmn
4
Fork 10
Code Issues 60 Pull Requests 1 Releases 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

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

@ -86,34 +86,38 @@
<!-- 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="ph2 flex flex-column g2">
{{ range .UserProjects }}
{{ template "list-project" . }}
{{ else }}
<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
{{ end }}
<div class="sidebar-card-content">
<div class="ph2 flex flex-column g2">
{{ range .UserProjects }}
{{ template "list-project" . }}
{{ else }}
<div class="f7 pv3 tc c--dim">You have not created any projects.</div>
{{ end }}
</div>
<a class="bt mt2 pa2 flex justify-between" href="{{ .NewProjectUrl }}">
<div>Create new project</div>
<div class="svgicon-lite flex items-center">{{ svg "add" }}</div>
</a>
</div>
<a class="bt mt2 pa2 flex justify-between" href="{{ .NewProjectUrl }}">
<div>Create new project</div>
<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">
<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="svgicon f8">{{ svg "chevron-down" }}</span>
<span class="sidebar-chevron svgicon-lite rot-180">{{ svg "chevron-down" }}</span>
</div>
<div class="ph2 pb2 flex flex-column g2">
{{ range .Following }}
{{ template "list-follow" . }}
{{ else }}
<div class="f7 pv3 tc c--dim">You are not following anything.</div>
{{ end }}
<div class="sidebar-card-content">
<div class="ph2 pb2 flex flex-column g2">
{{ range .Following }}
{{ template "list-follow" . }}
{{ else }}
<div class="f7 pv3 tc c--dim">You are not following anything.</div>
{{ end }}
</div>
</div>
</div>
{{ end }}
@ -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" }}