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

Put the follow link in a gooder spot

This commit is contained in:
Ben Visness 2024-07-02 22:22:38 -05:00
parent 22c70cda8e
commit a646dddec0
3 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/templates/img/add.svg
View File

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<svg width="14" height="14" fill="currentColor" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M6,6L6,0L8,0L8,6L14,6L14,8L8,8L8,14L6,14L6,8L0,8L0,6L6,6Z" style="fill-rule:nonzero;"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 413 B

5
src/templates/img/remove.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-5,-5)">
<rect x="5" y="11" width="14" height="2" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

70
src/templates/src/project_homepage.html
View File

@ -44,7 +44,47 @@
</a>
{{ end }}
<div class="details flex-grow-1">
<a href="{{ .Project.Url }}"><h3 class="b mb2 f4">{{ .Project.Name }}</h3></a>
<div class="flex justify-between mb2">
<a href="{{ .Project.Url }}"><h3 class="b f4">{{ .Project.Name }}</h3></a>
{{ if .FollowUrl }}
<a id="follow_link" class="flex items-center" href="javascript:;">
<div class="follow-follow" {{ if .Following }}hidden{{ end }}>
<span class="svgicon f7 mr1">{{ svg "add" }}</span>
Follow
</div>
<div class="follow-unfollow" {{ if not .Following }}hidden{{ end }}>
<span class="svgicon f7 mr1">{{ svg "remove" }}</span>
Unfollow
</div>
</a>
<script>
const followLink = document.getElementById("follow_link");
let following = {{ .Following }};
followLink.addEventListener("click", async function() {
followLink.disabled = true;
let formData = new FormData();
formData.set("csrf_token", "{{ .Session.CSRFToken }}");
formData.set("project_id", "{{ .Project.ID }}");
if (following) {
formData.set("unfollow", "true");
}
let result = await fetch("{{ .FollowUrl }}", {
method: "POST",
body: formData,
redirect: "error",
});
if (result.ok) {
following = !following;
followLink.querySelector(".follow-follow").hidden = following;
followLink.querySelector(".follow-unfollow").hidden = !following;
}
followLink.disabled = false;
});
</script>
{{ end }}
</div>
<div class="blurb">{{ .Project.Blurb }}</div>
{{ with .Owners }}
<hr class="mv3">
@ -77,34 +117,6 @@
{{/* TODO(redesign): Add a fade at the bottom of this. */}}
</div>
{{ end }}
{{ if .FollowUrl }}
<a id="follow_link" class="db" href="javascript:;">{{ if .Following }}Unfollow{{ else }}Follow{{ end }}</a>
<script>
const followLink = document.getElementById("follow_link");
let following = {{ .Following }};
followLink.addEventListener("click", async function() {
followLink.disabled = true;
let formData = new FormData();
formData.set("csrf_token", "{{ .Session.CSRFToken }}");
formData.set("project_id", "{{ .Project.ID }}");
if (following) {
formData.set("unfollow", "true");
}
let result = await fetch("{{ .FollowUrl }}", {
method: "POST",
body: formData,
redirect: "error",
});
if (result.ok) {
following = !following;
followLink.textContent = (following ? "Unfollow" : "Follow");
}
followLink.disabled = false;
});
</script>
{{ end }}
</div>
</div>
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}