zan.dev
appview/profile: tweak cards a bit
anirudh.fi
+99
-87
appview/pages/templates/user/profile.html
+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 }}