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:
parent
762fddea70
commit
fe90bd63c3
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue