test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: added vertical and horizontal scroll in listview

Browse Source
This commit is contained in:
Shariq Ansari 2023-07-25 11:33:20 +05:30
parent 0669f3d7a1
commit bb471ee4ef
3 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/AppSidebar.vue
View File

@ -1,27 +1,25 @@
<template>
<div class="inline-flex h-full flex-col border-r w-[220px]">
<div class="flex p-2">
<UserDropdown />
</div>
<div class="flex-1">
<nav class="space-y-0.5 px-2">
<NavLinks
:links="navigations"
class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
active="bg-gray-100 hover:bg-gray-200"
inactive="hover:bg-gray-50"
>
<template v-slot="{ link }">
<div class="flex w-full items-center space-x-2">
<span class="grid h-5 w-6 place-items-center">
<component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
</span>
<span class="text-base">{{ link.name }}</span>
</div>
</template>
</NavLinks>
</nav>
</div>
<div class="flex p-2">
<UserDropdown />
</div>
<div class="flex-1">
<nav class="space-y-0.5 px-2">
<NavLinks
:links="navigations"
class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
active="bg-gray-100 hover:bg-gray-200"
inactive="hover:bg-gray-50"
>
<template v-slot="{ link }">
<div class="flex w-full items-center space-x-2">
<span class="grid h-5 w-6 place-items-center">
<component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
</span>
<span class="text-base">{{ link.name }}</span>
</div>
</template>
</NavLinks>
</nav>
</div>
</template>

6
frontend/src/components/DesktopLayout.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="flex h-full">
<div>
<div class="flex h-screen w-screen">
<div class="h-full border-r w-[220px]">
<AppSidebar />
</div>
<div class="w-full">
<div class="flex-1 flex flex-col h-full overflow-auto">
<slot />
</div>
</div>

52
frontend/src/components/ListView.vue
View File

@ -37,35 +37,37 @@
<Button icon="more-horizontal" />
</div>
</div>
<div id="content" class="">
<div
id="list-header"
class="flex space-x-2 items-center px-5 py-2 border-b"
>
<Checkbox class="mr-2" />
<div id="content" class="flex flex-col w-full overflow-x-auto flex-1">
<div class="flex flex-col overflow-y-hidden w-max min-w-full">
<div
v-for="column in columns"
:key="column"
class="text-sm text-gray-600"
:class="[column.size, column.align]"
id="list-header"
class="flex space-x-4 items-center px-5 py-2 border-b"
>
{{ column.label }}
</div>
</div>
<div id="list-rows">
<div
v-for="row in rows"
:key="row"
class="flex space-x-2 items-center mx-2 px-3 py-2 border-b"
>
<Checkbox class="mr-2" />
<Checkbox class="" />
<div
v-for="column in columns"
:key="column.key"
class="text-base text-gray-900"
:key="column"
class="text-sm text-gray-600"
:class="[column.size, column.align]"
>
{{ row[column.key] }}
{{ column.label }}
</div>
</div>
<div id="list-rows" class="h-full overflow-y-auto">
<div
v-for="row in rows"
:key="row"
class="flex space-x-4 items-center mx-2 px-3 py-2 border-b"
>
<Checkbox class="" />
<div
v-for="column in columns"
:key="column.key"
class="text-base text-gray-900"
:class="[column.size, column.align]"
>
{{ row[column.key] }}
</div>
</div>
</div>
</div>
@ -84,11 +86,11 @@ const props = defineProps({
},
columns: {
type: Array,
default: []
default: [],
},
rows: {
type: Array,
default: []
default: [],
},
})