forked from tangled.org/core
Monorepo for Tangled

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
··· 1 1 {{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }} 2 2 3 3 {{ define "content" }} 4 - <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> 5 - <div class="md:col-span-1"> 6 - {{ block "profileCard" . }} {{ end }} 7 - </div> 4 + <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> 5 + <div class="md:col-span-1"> 6 + {{ block "profileCard" . }}{{ end }} 7 + </div> 8 8 9 - <div class="md:col-span-3"> 10 - {{ block "ownRepos" . }} {{ end }} 11 - {{ block "collaboratingRepos" . }} {{ end }} 12 - </div> 13 - </div> 9 + <div class="md:col-span-3"> 10 + {{ block "ownRepos" . }}{{ end }} 11 + {{ block "collaboratingRepos" . }}{{ end }} 12 + </div> 13 + </div> 14 14 {{ end }} 15 15 16 16 {{ define "profileCard" }} 17 - <div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit"> 18 - <div class="flex justify-center items-center"> 19 - {{ if .AvatarUri }} 20 - <img class="w-1/2 rounded-full p-2" src="{{ .AvatarUri }}" /> 21 - {{ end }} 22 - </div> 23 - <p class="text-xl font-bold text-center"> 24 - {{ didOrHandle .UserDid .UserHandle }} 25 - </p> 26 - <div class="text-sm text-center"> 27 - <span>{{ .ProfileStats.Followers }} followers</span> 28 - <div class="inline-block px-1 select-none after:content-['·']"></div> 29 - <span>{{ .ProfileStats.Following }} following</span> 30 - </div> 17 + <div class="bg-white px-6 py-4 rounded drop-shadow-sm max-h-fit"> 18 + <div class="flex justify-center items-center"> 19 + {{ if .AvatarUri }} 20 + <img class="w-1/2 rounded-full p-2" src="{{ .AvatarUri }}" /> 21 + {{ end }} 22 + </div> 23 + <p class="text-xl font-bold text-center"> 24 + {{ didOrHandle .UserDid .UserHandle }} 25 + </p> 26 + <div class="text-sm text-center"> 27 + <span>{{ .ProfileStats.Followers }} followers</span> 28 + <div 29 + class="inline-block px-1 select-none after:content-['·']" 30 + ></div> 31 + <span>{{ .ProfileStats.Following }} following</span> 32 + </div> 31 33 32 - {{ if ne .FollowStatus.String "IsSelf" }} 33 - {{ template "fragments/follow" . }} 34 - {{ end }} 35 - </div> 34 + {{ if ne .FollowStatus.String "IsSelf" }} 35 + {{ template "fragments/follow" . }} 36 + {{ end }} 37 + </div> 36 38 {{ end }} 37 39 38 40 {{ define "ownRepos" }} 39 - <p class="text-sm font-bold py-2 px-6">REPOS</p> 40 - <div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> 41 - {{ range .Repos }} 42 - <div 43 - id="repo-card" 44 - class="py-4 px-6 drop-shadow-sm rounded bg-white" 45 - > 46 - <div id="repo-card-name" class="font-medium"> 47 - <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}">{{ .Name }}</a> 48 - </div> 49 - {{ if .Description }} 50 - <div class="text-gray-600 text-sm"> 51 - {{ .Description }} 52 - </div> 53 - {{ end }} 54 - <div class="text-gray-600 text-sm font-mono inline-flex gap-4"> 55 - {{ .Knot }} 41 + <p class="text-sm font-bold py-2 px-6">REPOS</p> 42 + <div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> 43 + {{ range .Repos }} 44 + <div 45 + id="repo-card" 46 + class="py-4 px-6 drop-shadow-sm rounded bg-white" 47 + > 48 + <div id="repo-card-name" class="font-medium"> 49 + <a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}" 50 + >{{ .Name }}</a 51 + > 52 + </div> 53 + {{ if .Description }} 54 + <div class="text-gray-600 text-sm"> 55 + {{ .Description }} 56 + </div> 57 + {{ end }} 58 + <div 59 + class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto" 60 + > 61 + {{ .Knot }} 56 62 57 - {{ if .RepoStats.StarCount }} 58 - <div class="flex gap-1 items-center text-sm"> 59 - <span class="w-2 h-2 fill-current" data-lucide="star"></span> 60 - <span>{{ .RepoStats.StarCount }}</span> 61 - </div> 62 - {{ end }} 63 - </div> 64 - </div> 65 - {{ else }} 66 - <p class="px-6">This user does not have any repos yet.</p> 67 - {{ end }} 68 - </div> 63 + {{ if .RepoStats.StarCount }} 64 + <div class="flex gap-1 items-center text-sm"> 65 + <span 66 + class="w-3 h-3 fill-current" 67 + data-lucide="star" 68 + ></span> 69 + <span>{{ .RepoStats.StarCount }}</span> 70 + </div> 71 + {{ end }} 72 + </div> 73 + </div> 74 + {{ else }} 75 + <p class="px-6">This user does not have any repos yet.</p> 76 + {{ end }} 77 + </div> 69 78 {{ end }} 70 79 71 80 {{ define "collaboratingRepos" }} 72 - <p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p> 73 - <div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> 74 - {{ range .CollaboratingRepos }} 75 - <div 76 - id="repo-card" 77 - class="py-4 px-6 drop-shadow-sm rounded bg-white" 78 - > 79 - <div id="repo-card-name" class="font-medium"> 80 - <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}"> 81 - {{ index $.DidHandleMap .Did }}/{{ .Name }} 82 - </a> 83 - </div> 84 - {{ if .Description }} 85 - <div class="text-gray-600 text-sm"> 86 - {{ .Description }} 87 - </div> 88 - {{ end }} 89 - <div class="text-gray-600 text-sm font-mono inline-flex gap-4"> 90 - {{ .Knot }} 81 + <p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p> 82 + <div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> 83 + {{ range .CollaboratingRepos }} 84 + <div 85 + id="repo-card" 86 + class="py-4 px-6 drop-shadow-sm rounded bg-white flex flex-col" 87 + > 88 + <div id="repo-card-name" class="font-medium"> 89 + <a href="/{{ index $.DidHandleMap .Did }}/{{ .Name }}"> 90 + {{ index $.DidHandleMap .Did }}/{{ .Name }} 91 + </a> 92 + </div> 93 + {{ if .Description }} 94 + <div class="text-gray-600 text-sm"> 95 + {{ .Description }} 96 + </div> 97 + {{ end }} 98 + <div class="text-gray-400 pt-1 text-sm font-mono inline-flex gap-4 mt-auto"> 99 + {{ .Knot }} 91 100 92 - {{ if .RepoStats.StarCount }} 93 - <div class="flex gap-1 items-center text-sm"> 94 - <span class="w-2 h-2 fill-current" data-lucide="star"></span> 95 - <span>{{ .RepoStats.StarCount }}</span> 96 - </div> 97 - {{ end }} 98 - </div> 99 - </div> 100 - {{ else }} 101 - <p class="px-6">This user is not collaborating.</p> 102 - {{ end }} 103 - </div> 101 + {{ if .RepoStats.StarCount }} 102 + <div class="flex gap-1 items-center text-sm"> 103 + <span 104 + class="w-3 h-3 fill-current" 105 + data-lucide="star" 106 + ></span> 107 + <span>{{ .RepoStats.StarCount }}</span> 108 + </div> 109 + {{ end }} 110 + </div> 111 + </div> 112 + {{ else }} 113 + <p class="px-6">This user is not collaborating.</p> 114 + {{ end }} 115 + </div> 104 116 {{ end }}