test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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> <template>
<div class="inline-flex h-full flex-col border-r w-[220px]"> <div class="flex p-2">
<div class="flex p-2"> <UserDropdown />
<UserDropdown /> </div>
</div> <div class="flex-1">
<div class="flex-1"> <nav class="space-y-0.5 px-2">
<nav class="space-y-0.5 px-2"> <NavLinks
<NavLinks :links="navigations"
:links="navigations" class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
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"
active="bg-gray-100 hover:bg-gray-200" inactive="hover:bg-gray-50"
inactive="hover:bg-gray-50" >
> <template v-slot="{ link }">
<template v-slot="{ link }"> <div class="flex w-full items-center space-x-2">
<div class="flex w-full items-center space-x-2"> <span class="grid h-5 w-6 place-items-center">
<span class="grid h-5 w-6 place-items-center"> <component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
<component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" /> </span>
</span> <span class="text-base">{{ link.name }}</span>
<span class="text-base">{{ link.name }}</span> </div>
</div> </template>
</template> </NavLinks>
</NavLinks> </nav>
</nav>
</div>
</div> </div>
</template> </template>

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

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

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

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