moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust component sizes on demo page

Browse Source
This commit is contained in:
Moein Moradi
2025-08-30 16:44:46 +03:30
parent e5c8465287
commit 7325e18cec
5 changed files with 637 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
resources/js/pages/dashboards/demo.vue
View File

@@ -2,96 +2,78 @@
import { onMounted, nextTick } from 'vue'
import { GridStack } from 'gridstack'
import EcommerceCongratulationsJohn from '@/views/dashboards/ecommerce/EcommerceCongratulationsJohn.vue'
import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
import EcommerceOrder from '@/views/dashboards/ecommerce/EcommerceOrder.vue'
import EcommercePopularProducts from '@/views/dashboards/ecommerce/EcommercePopularProducts.vue'
import EcommerceRevenueReport from '@/views/dashboards/ecommerce/EcommerceRevenueReport.vue'
import EcommerceStatistics from '@/views/dashboards/ecommerce/EcommerceStatistics.vue'
import EcommerceTotalProfitLineCharts from '@/views/dashboards/ecommerce/EcommerceTotalProfitLineCharts.vue'
import EcommerceTransactions from '@/views/dashboards/ecommerce/EcommerceTransactions.vue'
import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
import AnalysisCard from "@/components/AnalysisCard.vue";
import CostOverview from "@/components/CostOverview.vue";
import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
import GanttChart from './gantt.vue'
onMounted(async () => {
const grid = GridStack.init({
column: 12,
cellHeight: 50,
cellHeight: '110',
float: true,
draggable: { handle: '.grid-stack-item-content' },
resizable: true
resizable: true,
maxRow: 20,
})
await nextTick()
})
</script>
<template>
<div class="grid-stack">
<div class="grid-stack-item" gs-w="8" gs-h="4" gs-max-h="4" gs-x="0" gs-y="0">
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<EcommerceCongratulationsJohn />
<GeneratedLeadsCard :progress="32" />
</div>
</div>
<div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="0">
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<EcommerceStatistics />
<GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
</div>
</div>
<div class="grid-stack-item" gs-w="7" gs-h="3" gs-max-h="3" gs-x="0" gs-y="4">
<div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
<div class="grid-stack-item-content">
<EcommerceTotalProfitLineCharts />
<GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
</div>
</div>
<div class="grid-stack-item" gs-w="5" gs-h="3" gs-max-h="3" gs-x="7" gs-y="4">
<div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
<div class="grid-stack-item-content">
<EcommerceExpensesRadialBarCharts />
<ProjectActivityBarChart />
</div>
</div>
<div class="grid-stack-item" gs-w="3" gs-h="5" gs-max-h="5" gs-x="0" gs-y="7">
<div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
<div class="grid-stack-item-content">
<EcommerceGeneratedLeads />
<AnalysisCard />
</div>
</div>
<div class="grid-stack-item" gs-w="6" gs-h="5" gs-max-h="5" gs-x="3" gs-y="7">
<div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
<div class="grid-stack-item-content">
<EcommerceRevenueReport />
</div>
</div>
<div class="grid-stack-item" gs-w="3" gs-h="3" gs-max-h="3" gs-x="9" gs-y="7">
<div class="grid-stack-item-content">
<EcommerceOrder />
</div>
</div>
<div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="0" gs-y="12">
<div class="grid-stack-item-content">
<EcommerceEarningReports />
</div>
</div>
<div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="4" gs-y="12">
<div class="grid-stack-item-content">
<EcommercePopularProducts />
</div>
</div>
<div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="12">
<div class="grid-stack-item-content">
<EcommerceTransactions />
</div>
</div>
<div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6" gs-x="0" gs-y="16">
<div class="grid-stack-item-content">
<EcommerceInvoiceTable />
<GanttChart />
</div>
</div>
</div>
</template>
</template>
<style>
.grid-stack-item-content {
height: 100%;
display: flex;
flex-direction: column;
}
.grid-stack-item-content>* {
flex: 1;
margin-bottom: 3.2rem;
}
.grid-stack-item:has(GanttChart) {
height: 100vh !important;
}
.grid-stack-item:has(GanttChart) .grid-stack-item-content {
height: 100vh;
}
</style>