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

fix: make activity section responsive

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-27 19:10:05 +05:30
parent 1b11182a2c
commit 41724aad08
1 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/components/Activities.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="mx-10 mb-4 mt-8 flex items-center justify-between text-lg font-medium" class="mx-4 my-3 flex items-center justify-between text-lg font-medium sm:mx-10 sm:mb-4 sm:mt-8"
> >
<div class="flex h-8 items-center text-xl font-semibold text-gray-800"> <div class="flex h-8 items-center text-xl font-semibold text-gray-800">
{{ __(title) }} {{ __(title) }}
@ -56,7 +56,7 @@
<template #prefix> <template #prefix>
<FeatherIcon name="plus" class="h-4 w-4" /> <FeatherIcon name="plus" class="h-4 w-4" />
</template> </template>
<span>{{ __('New WhatsApp Message') }}</span> <span>{{ __('New Message') }}</span>
</Button> </Button>
</div> </div>
<Dropdown v-else :options="defaultActions" @click.stop> <Dropdown v-else :options="defaultActions" @click.stop>
@ -89,7 +89,7 @@
class="activities flex-1 overflow-y-auto" class="activities flex-1 overflow-y-auto"
> >
<WhatsAppArea <WhatsAppArea
class="px-10" class="px-4 sm:px-10"
v-model="whatsappMessages" v-model="whatsappMessages"
v-model:reply="replyMessage" v-model:reply="replyMessage"
:messages="whatsappMessages.data" :messages="whatsappMessages.data"
@ -102,7 +102,7 @@
> >
<div <div
v-if="title == 'Notes'" v-if="title == 'Notes'"
class="activity grid grid-cols-1 gap-4 px-10 pb-5 lg:grid-cols-2 xl:grid-cols-3" class="activity grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
> >
<div <div
v-for="note in activities" v-for="note in activities"
@ -158,7 +158,9 @@
</div> </div>
<div v-else-if="title == 'Comments'" class="activity pb-5"> <div v-else-if="title == 'Comments'" class="activity pb-5">
<div v-for="(comment, i) in activities"> <div v-for="(comment, i) in activities">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10"> <div
class="grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2 px-4 sm:px-10"
>
<div <div
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200" class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
@ -212,7 +214,10 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="title == 'Tasks'" class="activity px-10 pb-5"> <div
v-else-if="title == 'Tasks'"
class="activity px-4 pb-3 sm:px-10 sm:pb-5"
>
<div v-for="(task, i) in activities"> <div v-for="(task, i) in activities">
<div <div
class="flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50" class="flex cursor-pointer gap-6 rounded p-2.5 duration-300 ease-in-out hover:bg-gray-50"
@ -307,7 +312,9 @@
</div> </div>
<div v-else-if="title == 'Calls'" class="activity"> <div v-else-if="title == 'Calls'" class="activity">
<div v-for="(call, i) in activities"> <div v-for="(call, i) in activities">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10"> <div
class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10"
>
<div <div
class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200" class="relative flex justify-center after:absolute after:left-[50%] after:top-0 after:-z-10 after:border-l after:border-gray-200"
:class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'" :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
@ -324,7 +331,7 @@
</div> </div>
</div> </div>
<div <div
class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4" class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -410,8 +417,16 @@
</div> </div>
</div> </div>
<div v-else v-for="(activity, i) in activities" class="activity"> <div v-else v-for="(activity, i) in activities" class="activity">
<div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-10"> <div
class="px-4 sm:px-10"
:class="
title == 'Activity'
? 'grid grid-cols-[30px_minmax(auto,_1fr)] sm:gap-4 gap-2'
: ''
"
>
<div <div
v-if="title == 'Activity'"
class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200" class="relative flex justify-center before:absolute before:left-[50%] before:top-0 before:-z-10 before:border-l before:border-gray-200"
:class="[ :class="[
i != activities.length - 1 ? 'before:h-full' : 'before:h-4', i != activities.length - 1 ? 'before:h-full' : 'before:h-4',
@ -574,7 +589,7 @@
activity.activity_type == 'incoming_call' || activity.activity_type == 'incoming_call' ||
activity.activity_type == 'outgoing_call' activity.activity_type == 'outgoing_call'
" "
class="mb-3 flex max-w-[70%] flex-col gap-3 rounded-md bg-gray-50 p-4" class="mb-3 flex flex-col gap-3 rounded-md bg-gray-50 p-4 sm:max-w-[70%]"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
@ -625,35 +640,39 @@
:src="activity.recording_url" :src="activity.recording_url"
></audio> ></audio>
</div> </div>
<div class="flex items-center justify-between"> <div
class="flex items-center justify-between sm:justify-start sm:gap-1"
>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<Avatar <Avatar
:image="activity.caller.image" :image="activity.caller.image"
:label="activity.caller.label" :label="activity.caller.label"
size="xl" class="sm:h-8 sm:w-8"
/> />
<div class="ml-1 flex flex-col gap-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-xs font-medium sm:text-base">
{{ __(activity.caller.label) }} {{ __(activity.caller.label) }}
</div> </div>
<div class="text-xs text-gray-600"> <div class="text-2xs text-gray-600 sm:text-xs">
{{ activity.from }} {{ activity.from }}
</div> </div>
</div> </div>
<FeatherIcon </div>
name="arrow-right" <FeatherIcon
class="mx-2 h-5 w-5 text-gray-600" name="arrow-right"
/> class="size-4 text-gray-600 sm:mx-2 sm:size-5"
/>
<div class="flex items-center gap-1">
<Avatar <Avatar
:image="activity.receiver.image" :image="activity.receiver.image"
:label="activity.receiver.label" :label="activity.receiver.label"
size="xl" class="sm:h-8 sm:w-8"
/> />
<div class="ml-1 flex flex-col gap-1"> <div class="ml-1 flex flex-col gap-1">
<div class="text-base font-medium"> <div class="text-xs font-medium sm:text-base">
{{ __(activity.receiver.label) }} {{ __(activity.receiver.label) }}
</div> </div>
<div class="text-xs text-gray-600"> <div class="text-2xs text-gray-600 sm:text-xs">
{{ activity.to }} {{ activity.to }}
</div> </div>
</div> </div>