tangled.org
This improves the bar containing the languages at the top of the repo index by making it a <details> element which expands into a legend describing what colours represents each language in the bar.
+29
-7
appview/pages/templates/repo/index.html
+29
-7
appview/pages/templates/repo/index.html
···
35
35
{{ end }}
36
36
37
37
{{ define "repoLanguages" }}
38
-
<div class="flex gap-[1px] -m-6 mb-6 overflow-hidden rounded-t">
38
+
<details class="group -m-6 mb-4">
39
+
<summary class="flex gap-[1px] h-4 scale-y-50 hover:scale-y-100 origin-top group-open:scale-y-100 transition-all hover:cursor-pointer overflow-hidden rounded-t">
39
40
{{ range $value := .Languages }}
40
-
<div
41
-
title='{{ or $value.Name "Other" }} {{ printf "%.1f" $value.Percentage }}%'
42
-
class="h-[4px] rounded-full"
43
-
style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%"
44
-
></div>
41
+
<div
42
+
title='{{ or $value.Name "Other" }} {{ printf "%.1f" $value.Percentage }}%'
43
+
style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%"
44
+
></div>
45
45
{{ end }}
46
-
</div>
46
+
</summary>
47
+
<div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">
48
+
{{ range $value := .Languages }}
49
+
<div
50
+
class="flex flex-grow items-center gap-2 text-xs align-items-center justify-center"
51
+
>
52
+
<div
53
+
class="rounded-full h-2 w-2"
54
+
style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ $value.Color }} 70%, white), {{ $value.Color }} 30%, color-mix(in srgb, {{ $value.Color }} 85%, black));"
55
+
>
56
+
</div>
57
+
<div>{{ or $value.Name "Other" }}
58
+
<span class="text-gray-500 dark:text-gray-400">
59
+
{{ if lt $value.Percentage 0.05 }}
60
+
0.1%
61
+
{{ else }}
62
+
{{ printf "%.1f" $value.Percentage }}%
63
+
{{ end }}
64
+
</span></div>
65
+
</div>
66
+
{{ end }}
67
+
</div>
68
+
</details>
47
69
{{ end }}
48
70
49
71
History
4 rounds
5 comments
expand 1 comment
pull request successfully merged
expand 1 comment
Looks good! If you could just squash the commit into one (with the first message), we're good to go!
expand 2 comments
Hey, thanks for this patch—this looks really good! One tiny improvement that we could make would be to space out the languages evenly? Kinda like how Forgejo does it (for example: https://codeberg.org/forgejo/forgejo).
Otherwise, very very nice.
Also, for the language color circles, perhaps we can do the same "spheres" as seen here? Keeps it consistent. :)
Excellent, thanks again!