test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: padding/margin fix for listviews for mobile view

Browse Source
This commit is contained in:
Shariq Ansari 2024-06-05 17:24:12 +05:30
parent 7d85b8186b
commit 4131b6c111
10 changed files with 41 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/ListViews/CallLogsListView.vue
View File

@ -11,7 +11,7 @@
row-key="name"
v-bind="$attrs"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -29,9 +29,8 @@
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows id="list-rows">
<ListRows class="mx-3 sm:mx-5" id="list-rows">
<ListRow
class="mx-5"
v-for="row in rows"
:key="row.name"
v-slot="{ idx, column, item }"
@ -141,7 +140,7 @@
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t px-5 py-2"
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

10
frontend/src/components/ListViews/ContactsListView.vue
View File

@ -14,7 +14,10 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader
class="mx-3 sm:mx-5"
@columnWidthUpdated="emit('columnWidthUpdated')"
>
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -32,9 +35,8 @@
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows id="list-rows">
<ListRows class="mx-3 sm:mx-5" id="list-rows">
<ListRow
class="mx-5"
v-for="row in rows"
:key="row.name"
v-slot="{ idx, column, item }"
@ -136,7 +138,7 @@
</ListView>
<ListFooter
v-if="pageLengthCount"
class="border-t px-5 py-2"
class="border-t px-3 py-2 sm:px-5"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

4
frontend/src/components/ListViews/DealsListView.vue
View File

@ -11,7 +11,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -173,7 +173,7 @@
</ListView>
<ListFooter
v-if="pageLengthCount"
class="border-t px-5 py-2"
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

7
frontend/src/components/ListViews/EmailTemplatesListView.vue
View File

@ -10,7 +10,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -28,9 +28,8 @@
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows id="list-rows">
<ListRows class="mx-3 sm:mx-5" id="list-rows">
<ListRow
class="mx-5"
v-for="row in rows"
:key="row.name"
v-slot="{ idx, column, item }"
@ -129,7 +128,7 @@
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t px-5 py-2"
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

4
frontend/src/components/ListViews/LeadsListView.vue
View File

@ -11,7 +11,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -186,7 +186,7 @@
</ListView>
<ListFooter
v-if="pageLengthCount"
class="border-t px-5 py-2"
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

4
frontend/src/components/ListViews/ListRows.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="mx-5 mt-2 h-full overflow-y-auto" v-if="showGroupedRows">
<div class="mx-3 mt-2 h-full overflow-y-auto sm:mx-5" v-if="showGroupedRows">
<div v-for="group in reactivieRows" :key="group.group">
<ListGroupHeader :group="group">
<div
@ -27,7 +27,7 @@
</ListGroupRows>
</div>
</div>
<ListRows class="mx-5" v-else id="list-rows">
<ListRows class="mx-3 sm:mx-5" v-else id="list-rows">
<ListRow
v-for="row in reactivieRows"
:key="row.name"

7
frontend/src/components/ListViews/OrganizationsListView.vue
View File

@ -13,7 +13,7 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -31,9 +31,8 @@
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows id="list-rows">
<ListRows class="mx-3 sm:mx-5" id="list-rows">
<ListRow
class="mx-5"
v-for="row in rows"
:key="row.name"
v-slot="{ idx, column, item }"
@ -122,7 +121,7 @@
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t px-5 py-2"
class="border-t sm:px-5 px-3 py-2"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

10
frontend/src/components/ListViews/TasksListView.vue
View File

@ -10,7 +10,10 @@
}"
row-key="name"
>
<ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
<ListHeader
class="mx-3 sm:mx-5"
@columnWidthUpdated="emit('columnWidthUpdated')"
>
<ListHeaderItem
v-for="column in columns"
:key="column.key"
@ -28,9 +31,8 @@
</Button>
</ListHeaderItem>
</ListHeader>
<ListRows id="list-rows">
<ListRows class="mx-3 sm:mx-5" id="list-rows">
<ListRow
class="mx-5"
v-for="row in rows"
:key="row.name"
v-slot="{ idx, column, item }"
@ -135,7 +137,7 @@
</ListSelectBanner>
</ListView>
<ListFooter
class="border-t px-5 py-2"
class="border-t px-3 py-2 sm:px-5"
v-model="pageLengthCount"
:options="{
rowCount: options.rowCount,

22
frontend/src/components/ViewControls.vue
View File

@ -1,9 +1,9 @@
<template>
<div
v-if="isMobileView"
class="flex flex-col justify-between gap-2 px-5 py-4"
class="flex flex-col justify-between gap-2 sm:px-5 px-3 py-4"
>
<div class="flex items-center justify-between gap-2">
<div class="flex items-center justify-between gap-2 overflow-x-auto">
<div class="flex gap-2">
<Dropdown :options="viewsDropdownOptions">
<template #default="{ open }">
@ -41,15 +41,14 @@
</Button>
</div>
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between gap-2">
<Filter
v-model="list"
:doctype="doctype"
:default_filters="filters"
@update="updateFilter"
/>
<div class="flex items-center justify-between gap-2 overflow-x-auto">
<div class="flex gap-2">
<Filter
v-model="list"
:doctype="doctype"
:default_filters="filters"
@update="updateFilter"
/>
<GroupBy
v-if="route.params.viewType === 'group_by'"
v-model="list"
@ -57,6 +56,9 @@
:hideLabel="isMobileView"
@update="updateGroupBy"
/>
</div>
<div class="flex gap-2">
<SortBy
v-model="list"
:doctype="doctype"

4
frontend/src/pages/Notes.vue
View File

@ -22,7 +22,7 @@
<div class="flex-1 overflow-y-auto">
<div
v-if="notes.data?.data?.length"
class="grid sm:grid-cols-4 grid-cols-1 gap-4 px-5 pb-3"
class="grid grid-cols-1 gap-2 px-3 pb-2 sm:grid-cols-4 sm:gap-4 sm:px-5 sm:pb-3"
>
<div
v-for="note in notes.data.data"
@ -75,7 +75,7 @@
</div>
<ListFooter
v-if="notes.data?.data?.length"
class="border-t px-5 py-2"
class="border-t px-3 py-2 sm:px-5"
v-model="notes.data.page_length_count"
:options="{
rowCount: notes.data.row_count,