ansxor.ca
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.
REVERTED
appview/pages/templates/repo/index.html
REVERTED
appview/pages/templates/repo/index.html
···
35
{{ end }}
36
37
{{ define "repoLanguages" }}
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">
40
{{ range $value := .Languages }}
41
-
<div
42
-
title='{{ or $value.Name "Other" }} {{ printf "%.1f" $value.Percentage }}%'
43
-
style="background-color: {{ $value.Color }}; width: {{ $value.Percentage }}%"
44
-
></div>
45
{{ end }}
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 items-center gap-2 text-xs"
51
-
>
52
-
<div class="rounded-full h-2 w-2" style="background-color: {{ $value.Color }}"></div>
53
-
<div>{{ or $value.Name "Other" }}
54
-
<span class="text-gray-500 dark:text-gray-400">
55
-
{{ if lt $value.Percentage 0.05 }}
56
-
0.1%
57
-
{{ else }}
58
-
{{ printf "%.1f" $value.Percentage }}%
59
-
{{ end }}
60
-
</span></div>
61
-
</div>
62
-
{{ end }}
63
-
</div>
64
-
</details>
65
{{ end }}
66
67
···
35
{{ end }}
36
37
{{ define "repoLanguages" }}
38
+
<div class="flex gap-[1px] -m-6 mb-6 overflow-hidden rounded-t">
39
{{ 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>
45
{{ end }}
46
+
</div>
47
{{ end }}
48
49