forked from tangled.org/core
this repo has no description

appview/profile: tweak cards a bit

anirudh.fi 508dc503 e6548253

verified
Changed files
+99 -87
appview
pages
templates
+99 -87
appview/pages/templates/user/profile.html
···
{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
{{ define "content" }}
-
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-
<div class="md:col-span-1">
-
{{ block "profileCard" . }} {{ end }}
-
</div>
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+
<div class="md:col-span-1">
+
{{ block "profileCard" . }}{{ end }}
+
</div>
-
<div class="md:col-span-3">
-
{{ block "ownRepos" . }} {{ end }}
-
{{ block "collaboratingRepos" . }} {{ end }}
-
</div>
-
</div>
+
<div class="md:col-span-3">
+
{{ block "ownRepos" . }}{{ end }}
+
{{ block "collaboratingRepos" . }}{{ end }}
+
</div>
+
</div>
{{ end }}
{{ define "profileCard" }}
-
<div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit">
-
<div class="flex justify-center items-center">
-
{{ if .AvatarUri }}
-
<img class="w-1/2 rounded-full p-2" src="{{ .AvatarUri }}" />
-
{{ end }}
-
</div>
-
<p class="text-xl font-bold text-center">
-
{{ didOrHandle .UserDid .UserHandle }}
-
</p>
-
<div class="text-sm text-center">
-
<span>{{ .ProfileStats.Followers }} followers</span>
-
<div class="inline-block px-1 select-none after:content-['·']"></div>
-
<span>{{ .ProfileStats.Following }} following</span>
-
</div>
+
<div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit">
+
<div class="flex justify-center items-center">
+
{{ if .AvatarUri }}
+
<img class="w-1/2 rounded-full p-2" src="{{ .AvatarUri }}" />
+
{{ end }}
+
</div>
+
<p class="text-xl font-bold text-center">
+
{{ didOrHandle .UserDid .UserHandle }}
+
</p>
+
<div class="text-sm text-center">
+
<span>{{ .ProfileStats.Followers }} followers</span>
+
<div
+
class="inline-block px-1 select-none after:content-['·']"
+
></div>
+
<span>{{ .ProfileStats.Following }} following</span>
+
</div>
-
{{ if ne .FollowStatus.String "IsSelf" }}
-
{{ template "fragments/follow" . }}
-
{{ end }}
-
</div>
+
{{ if ne .FollowStatus.String "IsSelf" }}
+
{{ template "fragments/follow" . }}
+
{{ end }}
+
</div>
{{ end }}
{{ define "ownRepos" }}
-
<p class="text-sm font-bold py-2 px-6">REPOS</p>
-
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-
{{ range .Repos }}
-
<div
-
id="repo-card"
-
class="py-4 px-6 drop-shadow-sm rounded bg-white"
-
>
-
<div id="repo-card-name" class="font-medium">
-
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}">{{ .Name }}</a>
-
</div>
-
{{ if .Description }}
-
<div class="text-gray-600 text-sm">
-
{{ .Description }}
-
</div>
-
{{ end }}
-
<div class="text-gray-600 text-sm font-mono inline-flex gap-4">
-
{{ .Knot }}
+
<p class="text-sm font-bold py-2 px-6">REPOS</p>
+
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+
{{ range .Repos }}
+
<div
+
id="repo-card"
+
class="py-4 px-6 drop-shadow-sm rounded bg-white"
+
>
+
<div id="repo-card-name" class="font-medium">
+
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
+
>{{ .Name }}</a
+
>
+
</div>
+
{{ if .Description }}
+
<div class="text-gray-600 text-sm">
+
{{ .Description }}
+
</div>
+
{{ end }}
+
<div
+
class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto"
+
>
+
{{ .Knot }}
-
{{ if .RepoStats.StarCount }}
-
<div class="flex gap-1 items-center text-sm">
-
<span class="w-2 h-2 fill-current" data-lucide="star"></span>
-
<span>{{ .RepoStats.StarCount }}</span>
-
</div>
-
{{ end }}
-
</div>
-
</div>
-
{{ else }}
-
<p class="px-6">This user does not have any repos yet.</p>
-
{{ end }}
-
</div>
+
{{ if .RepoStats.StarCount }}
+
<div class="flex gap-1 items-center text-sm">
+
<span
+
class="w-3 h-3 fill-current"
+
data-lucide="star"
+
></span>
+
<span>{{ .RepoStats.StarCount }}</span>
+
</div>
+
{{ end }}
+
</div>
+
</div>
+
{{ else }}
+
<p class="px-6">This user does not have any repos yet.</p>
+
{{ end }}
+
</div>
{{ end }}
{{ define "collaboratingRepos" }}
-
<p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>
-
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-
{{ range .CollaboratingRepos }}
-
<div
-
id="repo-card"
-
class="py-4 px-6 drop-shadow-sm rounded bg-white"
-
>
-
<div id="repo-card-name" class="font-medium">
-
<a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
-
{{ index $.DidHandleMap .Did }}/{{ .Name }}
-
</a>
-
</div>
-
{{ if .Description }}
-
<div class="text-gray-600 text-sm">
-
{{ .Description }}
-
</div>
-
{{ end }}
-
<div class="text-gray-600 text-sm font-mono inline-flex gap-4">
-
{{ .Knot }}
+
<p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>
+
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+
{{ range .CollaboratingRepos }}
+
<div
+
id="repo-card"
+
class="py-4 px-6 drop-shadow-sm rounded bg-white flex flex-col"
+
>
+
<div id="repo-card-name" class="font-medium">
+
<a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}">
+
{{ index $.DidHandleMap .Did }}/{{ .Name }}
+
</a>
+
</div>
+
{{ if .Description }}
+
<div class="text-gray-600 text-sm">
+
{{ .Description }}
+
</div>
+
{{ end }}
+
<div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto">
+
{{ .Knot }}
-
{{ if .RepoStats.StarCount }}
-
<div class="flex gap-1 items-center text-sm">
-
<span class="w-2 h-2 fill-current" data-lucide="star"></span>
-
<span>{{ .RepoStats.StarCount }}</span>
-
</div>
-
{{ end }}
-
</div>
-
</div>
-
{{ else }}
-
<p class="px-6">This user is not collaborating.</p>
-
{{ end }}
-
</div>
+
{{ if .RepoStats.StarCount }}
+
<div class="flex gap-1 items-center text-sm">
+
<span
+
class="w-3 h-3 fill-current"
+
data-lucide="star"
+
></span>
+
<span>{{ .RepoStats.StarCount }}</span>
+
</div>
+
{{ end }}
+
</div>
+
</div>
+
{{ else }}
+
<p class="px-6">This user is not collaborating.</p>
+
{{ end }}
+
</div>
{{ end }}