zan.dev
appview/pages: add expandable legend to repo index template
Signed-off-by: ansxor <git@ansxor.ca>
ansxor.ca
+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