make dashboard cards more compact

This commit is contained in:
Gregor Vostrak
2024-03-13 15:59:09 +01:00
parent 5ac5501572
commit d952b46984
7 changed files with 29 additions and 15 deletions

View File

@@ -79,7 +79,7 @@ const option = ref({
<template>
<DashboardCard title="Activity Graph" :icon="BoltIcon">
<div class="px-2">
<v-chart class="chart" :option="option" style="height: 310px" />
<v-chart class="chart" :option="option" style="height: 290px" />
</div>
</DashboardCard>
</template>

View File

@@ -26,13 +26,13 @@ function dayFormat(date: string) {
<template>
<div class="px-4 py-2 grid grid-cols-3">
<div class="flex items-center">
<p class="font-semibold text-white pb-1">
<p class="font-medium text-base text-white">
{{ dayFormat(date) }}
</p>
</div>
<div class="flex items-center">
<div class="flex items-center justify-center">
<svg
class="w-20"
class="w-20 opacity-70 transition hover:opacity-100"
viewBox="0 0 42 10"
fill="none"
xmlns="http://www.w3.org/2000/svg">

View File

@@ -9,7 +9,7 @@ defineProps<{
</script>
<template>
<div class="px-4 py-2.5 grid grid-cols-5">
<div class="px-4 py-1.5 grid grid-cols-5">
<div class="col-span-4">
<p class="font-semibold text-white pb-1">
{{ title }}

View File

@@ -9,7 +9,7 @@ defineProps<{
<template>
<div class="px-4 py-3 grid grid-cols-3">
<div class="col-span-2">
<p class="font-semibold text-white pb-1">
<p class="font-semibold text-white ">
{{ name }}
</p>
<div class="text-muted font-medium">

View File

@@ -130,7 +130,7 @@ const option = ref({
</script>
<template>
<div class="grid gap-x-6 grid-cols-4">
<div class="grid gap-x-6 xl:gap-x-8 grid-cols-4">
<div class="col-span-3">
<CardTitle
title="This Week"