MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 06:13:52 +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

6
src/components/ui/data-table/DataTableLayout.vue
View File

@@ -259,8 +259,8 @@
</div>
</div>
<div v-if="showPagination" class="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="showPagination" class="dt-pagination mt-4 flex w-full items-center gap-3 mb-1">
<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>
<Select v-model="pageSizeValue">
<SelectTrigger size="sm">
@@ -296,7 +296,7 @@
<PaginationNext />
</PaginationContent>
</Pagination>
<div class="flex-1"></div>
<div class="dt-pagination-spacer flex-1"></div>
</div>
</div>
</template>

43
src/views/Dashboard/components/DashboardPanel.vue
View File

@@ -29,7 +29,7 @@
</template>
<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" />
</div>
</template>
@@ -150,4 +150,45 @@
border-radius: 0;
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>