Refactoring and UI improvements on the admin home page (#348)

components/MiniTile.vue

@@ -0,0 +1,28 @@
+<template>
+  <TileWithLink>
+    <div class="h-full flex gap-4">
+      <div class="flex-1 my-auto">
+        <slot name="icon" />
+      </div>
+      <div
+        class="md:flex-8 flex-6 lg:flex-2 my-auto text-center flex md:flex-row-reverse lg:inline"
+      >
+        <div class="md:text-2xl text-3xl flex-1 font-bold self-center">
+          {{ value }}
+        </div>
+        <div
+          class="text-2xl xl:text-xs flex-1 md:flex-auto text-left md:text-center lg:text-center self-center"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </div>
+  </TileWithLink>
+</template>
+
+<script setup lang="ts">
+const { label, value } = defineProps<{
+  label: string;
+  value: string | number;
+}>();
+</script>

components/PieChart/PieChart.vue

@@ -1,34 +1,36 @@
 <template>
   <h2 v-if="title" class="text-lg mb-4 w-full">{{ title }}</h2>
-  <div class="flex flex-col xl:flex-row gap-4">
+  <div class="flex">
-    <div class="relative flex grow max-w-[12rem]">
+    <div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
-      <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+      <div class="relative flex max-w-[12rem] my-auto min-w-50">
-        <PieChartPieSlice
+        <svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
+          <PieChartPieSlice
+            v-for="slice in slices"
+            :key="`${slice.percentage}-${slice.totalPercentage}`"
+            :slice="slice"
+          />
+        </svg>
+        <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+      </div>
+      <ul class="flex flex-col gap-y-1 m-auto text-left">
+        <li
           v-for="slice in slices"
-          :key="`${slice.percentage}-${slice.totalPercentage}`"
+          :key="slice.value"
-          :slice="slice"
+          class="text-sm inline-flex items-center gap-x-1"
-        />
+        >
-      </svg>
+          <span
-      <div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
+            class="size-3 inline-block rounded-sm"
+            :class="CHART_COLOURS[slice.color].bg"
+          />
+          {{
+            $t("common.labelValueColon", {
+              label: slice.label,
+              value: slice.value,
+            })
+          }}
+        </li>
+      </ul>
     </div>
-    <ul class="flex flex-col gap-y-1 my-auto text-left">
-      <li
-        v-for="slice in slices"
-        :key="slice.value"
-        class="text-sm inline-flex items-center gap-x-1"
-      >
-        <span
-          class="size-3 inline-block rounded-sm"
-          :class="CHART_COLOURS[slice.color].bg"
-        />
-        {{
-          $t("common.labelValueColon", {
-            label: slice.label,
-            value: slice.value,
-          })
-        }}
-      </li>
-    </ul>
   </div>
 </template>
 

pages/admin/index.vue

@@ -15,83 +15,42 @@
     >
       <div class="grid grid-cols-6 gap-4">
         <div class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1">
-          <TileWithLink>
+          <MiniTile :value="version" :label="t('home.admin.version')">
-            <div class="h-full flex">
+            <template #icon>
-              <div class="flex-1 my-auto">
+              <ApplicationLogo />
-                <ApplicationLogo />
+            </template>
-              </div>
+          </MiniTile>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-2xl flex-1 font-bold">{{ version }}</div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.version") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
         </div>
 
         <div class="col-span-6 lg:col-span-1 md:col-span-3">
-          <TileWithLink>
+          <MiniTile :label="t('home.admin.games')" :value="gameCount">
-            <div class="h-full flex">
+            <template #icon>
-              <div class="flex-1 my-auto">
+              <GamepadIcon />
-                <GamepadIcon />
+            </template>
-              </div>
+          </MiniTile>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-3xl flex-1 font-bold">{{ gameCount }}</div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.games") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
         </div>
 
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-1 lg:row-start-2"
         >
-          <TileWithLink>
+          <MiniTile
-            <div class="h-full flex">
+            :value="sources.length"
-              <div class="flex-1 my-auto">
+            :label="t('home.admin.librarySources')"
-                <ServerStackIcon />
+          >
-              </div>
+            <template #icon>
-              <div
+              <ServerStackIcon />
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
+            </template>
-              >
+          </MiniTile>
-                <div class="text-3xl flex-1 font-bold">
-                  {{ sources.length }}
-                </div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.librarySources") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
         </div>
 
         <div
           class="col-span-6 lg:col-span-1 md:col-span-3 row-span-1 lg:col-start-2 lg:row-start-2"
         >
-          <TileWithLink>
+          <MiniTile :value="userStats.userCount" :label="t('home.admin.users')">
-            <div class="h-full flex">
+            <template #icon>
-              <div class="flex-1 my-auto">
+              <UserGroupIcon />
-                <UserGroupIcon />
+            </template>
-              </div>
+          </MiniTile>
-              <div
-                class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
-              >
-                <div class="text-3xl flex-1 font-bold">
-                  {{ userStats.userCount }}
-                </div>
-                <div class="text-xs flex-1 text-left lg:text-center">
-                  {{ t("home.admin.users") }}
-                </div>
-              </div>
-            </div>
-          </TileWithLink>
         </div>
 
         <div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">