jessikitty/drop
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paco
2026-02-09 07:40:45 +00:00
committed by GitHub
parent 2b9edaaf53
commit d0d79b3668
3 changed files with 80 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/components/MiniTile.vue
+28
View File
@@ -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>
server/components/PieChart/PieChart.vue
+29 -27
View File
@@ -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="relative flex grow max-w-[12rem]">
<svg class="aspect-square grow relative inline" viewBox="0 0 100 100">
<PieChartPieSlice
<div class="flex">
<div class="flex flex-col md:flex-row xl:gap-4 mx-auto">
<div class="relative flex max-w-[12rem] my-auto min-w-50">
<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}`"
:slice="slice"
/>
</svg>
<div class="absolute inset-0 bg-zinc-900 rounded-full m-12" />
: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>
<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>
server/pages/admin/index.vue
+23 -64
View File
@@ -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>
<div class="h-full flex">
<div class="flex-1 my-auto">
<ApplicationLogo />
</div>
<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>
<MiniTile :value="version" :label="t('home.admin.version')">
<template #icon>
<ApplicationLogo />
</template>
</MiniTile>
</div>
<div class="col-span-6 lg:col-span-1 md:col-span-3">
<TileWithLink>
<div class="h-full flex">
<div class="flex-1 my-auto">
<GamepadIcon />
</div>
<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>
<MiniTile :label="t('home.admin.games')" :value="gameCount">
<template #icon>
<GamepadIcon />
</template>
</MiniTile>
</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>
<div class="h-full flex">
<div class="flex-1 my-auto">
<ServerStackIcon />
</div>
<div
class="flex-6 lg:flex-2 my-auto text-center flex lg:inline mx-4"
>
<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>
<MiniTile
:value="sources.length"
:label="t('home.admin.librarySources')"
>
<template #icon>
<ServerStackIcon />
</template>
</MiniTile>
</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>
<div class="h-full flex">
<div class="flex-1 my-auto">
<UserGroupIcon />
</div>
<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>
<MiniTile :value="userStats.userCount" :label="t('home.admin.users')">
<template #icon>
<UserGroupIcon />
</template>
</MiniTile>
</div>
<div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">