feat: Add mobile responsiveness to interest list table and simplify dashboard routing

- Change dashboard default route to always navigate to interest-list page
- Add horizontal scrolling for data table on mobile devices
- Implement responsive table styles with min-width and no-wrap for better mobile UX
- Remove conditional navigation logic based on portal tags
This commit is contained in:
Matt 2025-06-04 01:40:13 +02:00
parent 762fddea70
commit fe90bd63c3
2 changed files with 42 additions and 21 deletions

View File

@ -1,9 +1,3 @@
<script lang="ts" setup>
const tags = usePortalTags();
onBeforeMount(() =>
navigateTo(
toValue(tags).interest ? "/dashboard/interest-analytics" : "/dashboard/site"
)
);
onBeforeMount(() => navigateTo("/dashboard/interest-list"));
</script>

View File

@ -97,19 +97,20 @@
<!-- Data Table -->
<v-card elevation="0" class="rounded-lg">
<v-data-table
:headers="headers"
:items="filteredInterests"
:search="search"
:sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
must-sort
hover
:loading="loading"
loading-text="Loading interests..."
:items-per-page="50"
:items-per-page-options="[10, 20, 50, 100]"
class="modern-table"
>
<div class="table-container">
<v-data-table
:headers="headers"
:items="filteredInterests"
:search="search"
:sort-by="[{ key: 'Created At', order: 'desc' }, { key: 'Full Name', order: 'asc' }]"
must-sort
hover
:loading="loading"
loading-text="Loading interests..."
:items-per-page="50"
:items-per-page-options="[10, 20, 50, 100]"
class="modern-table"
>
<template #item="{ item }">
<tr @click="handleRowClick(item)" class="table-row">
<td>
@ -204,7 +205,8 @@
</template>
</v-data-table>
</v-data-table>
</div>
</v-card>
</v-container>
@ -472,4 +474,29 @@ const getRelativeTime = (dateString: string) => {
.v-avatar {
font-size: 0.875rem;
}
/* Mobile horizontal scrolling */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.table-container {
margin: 0 -12px;
padding: 0 12px;
}
.modern-table :deep(.v-table__wrapper) {
min-width: 1200px;
}
.modern-table :deep(th) {
white-space: nowrap;
}
.modern-table :deep(td) {
white-space: nowrap;
}
}
</style>