adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 04:32: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> <template>
<DashboardCard title="Activity Graph" :icon="BoltIcon"> <DashboardCard title="Activity Graph" :icon="BoltIcon">
<div class="px-2"> <div class="px-2">
<v-chart class="chart" :option="option" style="height: 310px" /> <v-chart class="chart" :option="option" style="height: 290px" />
</div> </div>
</DashboardCard> </DashboardCard>
</template> </template>

6
resources/js/Components/Dashboard/DayOverviewCardEntry.vue
View File

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

2
resources/js/Components/Dashboard/RecentlyTrackedTasksCardEntry.vue
View File

@@ -9,7 +9,7 @@ defineProps<{
</script> </script>
<template> <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"> <div class="col-span-4">
<p class="font-semibold text-white pb-1"> <p class="font-semibold text-white pb-1">
{{ title }} {{ title }}

2
resources/js/Components/Dashboard/TeamActivityCardEntry.vue
View File

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

2
resources/js/Components/Dashboard/ThisWeekOverview.vue
View File

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