adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

make dashboard cards more compact

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Components/Dashboard/ActivityGraphCard.vue
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>

6
resources/js/Components/Dashboard/DayOverviewCardEntry.vue
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">

2
resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
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 }}

2
resources/js/Components/Dashboard/TeamActivityCardEntry.vue
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">

2
resources/js/Components/Dashboard/ThisWeekOverview.vue
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"

17
resources/js/Pages/Dashboard.vue
View File

@@ -10,6 +10,7 @@ import type { Organization, User } from '@/types/models';
import { onMounted } from 'vue';
import { useProjectsStore } from '@/utils/useProjects';
import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
import MainContainer from "@/Pages/MainContainer.vue";
const page = usePage<{
auth: {
@@ -67,12 +68,12 @@ const props = defineProps<{
<template>
<AppLayout title="Dashboard" data-testid="dashboard_view">
<div
class="py-8 sm:px-6 lg:px-8 mx-auto border-b border-default-background-seperator">
<MainContainer
class="py-8 border-b border-default-background-seperator">
<TimeTracker></TimeTracker>
</div>
<div
class="grid gap-x-6 grid-cols-4 sm:px-6 lg:px-8 pt-6 pb-7 border-b border-default-background-seperator">
</MainContainer>
<MainContainer
class="grid gap-x-6 xl:gap-x-8 grid-cols-4 pt-6 pb-7 border-b border-default-background-seperator">
<RecentlyTrackedTasksCard
:latestTasks="props.latestTasks"></RecentlyTrackedTasksCard>
<LastSevenDaysCard
@@ -85,14 +86,14 @@ const props = defineProps<{
:latestTeamActivity="
props.latestTeamActivity
"></TeamActivityCard>
</div>
<div class="sm:px-6 lg:px-8 py-6">
</MainContainer>
<MainContainer class="py-6">
<ThisWeekOverview
:weeklyProjectOverview="props.weeklyProjectOverview"
:total-weekly-billable-amount="props.totalWeeklyBillableAmount"
:total-weekly-billable-time="props.totalWeeklyBillableTime"
:total-weekly-time="props.totalWeeklyTime"
:weekly-history="props.weeklyHistory"></ThisWeekOverview>
</div>
</MainContainer>
</AppLayout>
</template>

13
resources/js/Pages/MainContainer.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup lang="ts">
</script>
<template>
<div class="sm:px-6 lg:px-8 xl:px-12 mx-auto">
<slot></slot>
</div>
</template>
<style scoped>
</style>