MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 14:56:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement compact pagination/table header styling for data tables within dashboard panels.

Browse Source
This commit is contained in:
pa
2026-03-18 09:41:47 +09:00
parent ab596a13b9
commit 831a827ef7
2 changed files with 45 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/data-table/DataTableLayout.vue
+3 -3
View File
@@ -259,8 +259,8 @@
</div> </div>
</div> </div>
<div v-if="showPagination" class="mt-4 flex w-full items-center gap-3 mb-1"> <div v-if="showPagination" class="dt-pagination mt-4 flex w-full items-center gap-3 mb-1">
<div v-if="pageSizes.length" class="inline-flex items-center flex-1 justify-end gap-2"> <div v-if="pageSizes.length" class="dt-pagination-sizes inline-flex items-center flex-1 justify-end gap-2">
<span class="text-xs text-muted-foreground truncate">{{ t('table.pagination.rows_per_page') }}</span> <span class="text-xs text-muted-foreground truncate">{{ t('table.pagination.rows_per_page') }}</span>
<Select v-model="pageSizeValue"> <Select v-model="pageSizeValue">
<SelectTrigger size="sm"> <SelectTrigger size="sm">
@@ -296,7 +296,7 @@
<PaginationNext /> <PaginationNext />
</PaginationContent> </PaginationContent>
</Pagination> </Pagination>
<div class="flex-1"></div> <div class="dt-pagination-spacer flex-1"></div>
</div> </div>
</div> </div>
</template> </template>
src/views/Dashboard/components/DashboardPanel.vue
+42 -1
View File
@@ -29,7 +29,7 @@
</template> </template>
<template v-else-if="panelKey && panelComponent"> <template v-else-if="panelKey && panelComponent">
<div class="dashboard-panel h-full w-full overflow-y-auto"> <div class="dashboard-panel is-compact-table h-full w-full overflow-y-auto">
<component :is="panelComponent" v-bind="widgetProps" /> <component :is="panelComponent" v-bind="widgetProps" />
</div> </div>
</template> </template>
@@ -150,4 +150,45 @@
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
} }
/* Compact pagination for dashboard panels */
.dashboard-panel :deep(.dt-pagination) {
margin-top: 0.25rem;
margin-bottom: 0;
gap: 0.25rem;
justify-content: center;
}
/* Hide page-size selector + spacer in dashboard */
.dashboard-panel :deep(.dt-pagination-sizes),
.dashboard-panel :deep(.dt-pagination-spacer) {
display: none;
}
/* Hide prev/next text, keep icon only */
.dashboard-panel :deep([data-slot="pagination-previous"] span),
.dashboard-panel :deep([data-slot="pagination-next"] span) {
display: none;
}
/* Shrink prev/next buttons */
.dashboard-panel :deep([data-slot="pagination-previous"]),
.dashboard-panel :deep([data-slot="pagination-next"]) {
padding-inline: 0.25rem;
min-width: 1.75rem;
height: 1.75rem;
}
/* Shrink page number buttons */
.dashboard-panel :deep([data-slot="pagination-item"]) {
min-width: 1.75rem;
height: 1.75rem;
font-size: 0.75rem;
}
/* Shrink ellipsis */
.dashboard-panel :deep([data-slot="pagination-ellipsis"]) {
width: 1.75rem;
height: 1.75rem;
}
</style> </style>