appview: refactor languageBall into template #557

···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
{{ define "repo/fragments/languageBall" }}

     

       
2
       
+
       
  <div

     

       
3
       
+
       
    class="size-2 rounded-full"

     

       
4
       
+
       
    style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ langColor . }} 70%, white), {{ langColor . }} 30%, color-mix(in srgb, {{ langColor . }} 85%, black));"

     

       
5
       
+
       
  ></div>

     

       
6
       
+
       
{{ end }}

     

···

       
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 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 }}

     

···

       
44
       
 
       
        ></div>

     

       
45
       
 
       
        {{ end }}

     

       
46
       
 
       
      </summary>

     

       
47
       
+
       
      <div class="px-4 py-2 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
       
+
       
          {{ template "repo/fragments/languageBall" $value.Name }}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
53
       
 
       
          <div>{{ or $value.Name "Other" }}

     

       
54
       
 
       
            <span class="text-gray-500 dark:text-gray-400">

     

       
55
       
 
       
              {{ if lt $value.Percentage 0.05 }}

     

···

       
36
       
 
       
  <div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">

     

       
37
       
 
       
    {{ with .Language }}

     

       
38
       
 
       
      <div class="flex gap-2 items-center text-sm">

     

       
39
       
-
       
        <div class="size-2 rounded-full"

     

       
40
       
-
       
          style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ langColor . }} 70%, white), {{ langColor . }} 30%, color-mix(in srgb, {{ langColor . }} 85%, black));"></div>

     

       
41
       
 
       
        <span>{{ . }}</span>

     

       
42
       
 
       
      </div>

     

       
43
       
 
       
    {{ end }}

     

···

       
36
       
 
       
  <div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">

     

       
37
       
 
       
    {{ with .Language }}

     

       
38
       
 
       
      <div class="flex gap-2 items-center text-sm">

     

       
39
       
+
       
        {{ template "repo/fragments/languageBall" . }}

     

       
0
       
 
       

     

       
40
       
 
       
        <span>{{ . }}</span>

     

       
41
       
 
       
      </div>

     

       
42
       
 
       
    {{ end }}

     

···

       
73
       
 
       
            {{ with .Repo.RepoStats }}

     

       
74
       
 
       
              {{ with .Language }}

     

       
75
       
 
       
                <div class="flex gap-2 items-center text-xs font-mono text-gray-400 ">

     

       
76
       
-
       
                  <div class="size-2 rounded-full"

     

       
77
       
-
       
                    style="background: radial-gradient(circle at 35% 35%, color-mix(in srgb, {{ langColor . }} 70%, white), {{ langColor . }} 30%, color-mix(in srgb, {{ langColor . }} 85%, black));"></div>

     

       
78
       
 
       
                  <span>{{ . }}</span>

     

       
79
       
 
       
                </div>

     

       
80
       
 
       
              {{end }}

     

···

       
73
       
 
       
            {{ with .Repo.RepoStats }}

     

       
74
       
 
       
              {{ with .Language }}

     

       
75
       
 
       
                <div class="flex gap-2 items-center text-xs font-mono text-gray-400 ">

     

       
76
       
+
       
                  {{ template "repo/fragments/languageBall" . }}

     

       
0
       
 
       

     

       
77
       
 
       
                  <span>{{ . }}</span>

     

       
78
       
 
       
                </div>

     

       
79
       
 
       
              {{end }}