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

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

@ -86,34 +86,38 @@
<!-- Sidebar --> <!-- Sidebar -->
<div class="w5 flex flex-column g2 flex-shrink-0"> <div class="w5 flex flex-column g2 flex-shrink-0">
{{ if .User }} {{ if .User }}
<div class="bg--card link--normal"> <div class="sidebar-card bg--card link--normal">
<div class="pa2 flex justify-between items-center"> <div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
<span class="f7">Your projects</span> <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>
<div class="ph2 flex flex-column g2"> <div class="sidebar-card-content">
{{ range .UserProjects }} <div class="ph2 flex flex-column g2">
{{ template "list-project" . }} {{ range .UserProjects }}
{{ else }} {{ template "list-project" . }}
<div class="f7 pv3 tc c--dim">You have not created any projects.</div> {{ else }}
{{ end }} <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> </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>
<div class="bg--card link--normal"> <div class="sidebar-card bg--card link--normal">
<div class="pa2 flex justify-between items-center"> <div onclick="collapse(event)" class="pa2 flex justify-between items-center pointer">
<span class="f7">Following</span> <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>
<div class="ph2 pb2 flex flex-column g2"> <div class="sidebar-card-content">
{{ range .Following }} <div class="ph2 pb2 flex flex-column g2">
{{ template "list-follow" . }} {{ range .Following }}
{{ else }} {{ template "list-follow" . }}
<div class="f7 pv3 tc c--dim">You are not following anything.</div> {{ else }}
{{ end }} <div class="f7 pv3 tc c--dim">You are not following anything.</div>
{{ end }}
</div>
</div> </div>
</div> </div>
{{ end }} {{ end }}
@ -134,6 +138,19 @@
</div> </div>
</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 }} {{ end }}
{{ define "list-project" }} {{ define "list-project" }}