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

style: style fix for mobile view

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-22 13:27:50 +05:30
parent 21b6a33517
commit d016996118
6 changed files with 70 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@
> >
<div v-if="title == 'WhatsApp' && whatsappMessages.data?.length"> <div v-if="title == 'WhatsApp' && whatsappMessages.data?.length">
<WhatsAppArea <WhatsAppArea
class="px-4 sm:px-10" class="px-3 sm:px-10"
v-model="whatsappMessages" v-model="whatsappMessages"
v-model:reply="replyMessage" v-model:reply="replyMessage"
:messages="whatsappMessages.data" :messages="whatsappMessages.data"
@ -37,7 +37,7 @@
</div> </div>
<div <div
v-else-if="title == 'Notes'" v-else-if="title == 'Notes'"
class="grid grid-cols-1 gap-4 px-4 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3" class="grid grid-cols-1 gap-4 px-3 pb-3 sm:px-10 sm:pb-5 lg:grid-cols-2 xl:grid-cols-3"
> >
<div v-for="note in activities" @click="modalRef.showNote(note)"> <div v-for="note in activities" @click="modalRef.showNote(note)">
<NoteArea :note="note" v-model="all_activities" /> <NoteArea :note="note" v-model="all_activities" />
@ -46,7 +46,7 @@
<div v-else-if="title == 'Comments'" class="pb-5"> <div v-else-if="title == 'Comments'" class="pb-5">
<div v-for="(comment, i) in activities"> <div v-for="(comment, i) in activities">
<div <div
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-4 sm:gap-4 sm:px-10" class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 px-3 sm:gap-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"
@ -62,7 +62,10 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="title == 'Tasks'" class="px-4 pb-3 sm:px-10 sm:pb-5"> <div
v-else-if="title == 'Tasks'"
class="px-3 pb-3 sm:px-10 sm:pb-5 overflow-x-auto sm:w-full w-max"
>
<TaskArea <TaskArea
v-model="all_activities" v-model="all_activities"
v-model:doc="doc" v-model:doc="doc"
@ -74,7 +77,7 @@
<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 <div
class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-4 sm:px-10" class="activity grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-3 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"
@ -103,15 +106,15 @@
<div <div
v-else v-else
v-for="(activity, i) in activities" v-for="(activity, i) in activities"
class="activity px-4 sm:px-10" class="activity px-3 sm:px-10"
:class=" :class="
title == 'Activity' ['Activity', 'Emails'].includes(title)
? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4' ? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
: '' : ''
" "
> >
<div <div
v-if="title == 'Activity'" v-if="['Activity', 'Emails'].includes(title)"
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="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']" :class="[i != activities.length - 1 ? 'before:h-full' : 'before:h-4']"
> >
@ -187,16 +190,12 @@
<div class="flex items-center justify-stretch gap-2 text-base"> <div class="flex items-center justify-stretch gap-2 text-base">
<div <div
v-if="activity.other_versions" v-if="activity.other_versions"
class="inline-flex gap-1.5 text-gray-800 font-medium" class="inline-flex flex-wrap gap-1.5 text-gray-800 font-medium"
> >
<div class="inline-flex gap-1"> <span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
<span>{{ <span> +{{ activity.other_versions.length + 1 }} </span>
activity.show_others ? __('Hide') : __('Show') <span>{{ __('changes from') }}</span>
}}</span> <span>{{ activity.owner_name }}</span>
<span> +{{ activity.other_versions.length + 1 }} </span>
<span>{{ __('changes from') }}</span>
<span>{{ activity.owner_name }}</span>
</div>
<Button <Button
class="!size-4" class="!size-4"
variant="ghost" variant="ghost"
@ -271,55 +270,51 @@
v-for="activity in [activity, ...activity.other_versions]" v-for="activity in [activity, ...activity.other_versions]"
class="flex items-start justify-stretch gap-2 py-1.5 text-base" class="flex items-start justify-stretch gap-2 py-1.5 text-base"
> >
<div class="flex items-start gap-1 text-gray-600"> <div class="inline-flex flex-wrap gap-1 text-gray-600">
<div class="flex flex-1 items-center gap-1"> <span
<span v-if="activity.data.field_label"
v-if="activity.data.field_label" class="max-w-xs truncate text-gray-600"
class="max-w-xs truncate text-gray-600" >
{{ __(activity.data.field_label) }}
</span>
<FeatherIcon
name="arrow-right"
class="mx-1 h-4 w-4 text-gray-600"
/>
<span v-if="activity.type">
{{ startCase(__(activity.type)) }}
</span>
<span
v-if="activity.data.old_value"
class="max-w-xs font-medium text-gray-800"
>
<div
class="flex items-center gap-1"
v-if="activity.options == 'User'"
> >
{{ __(activity.data.field_label) }} <UserAvatar :user="activity.data.old_value" size="xs" />
</span> {{ getUser(activity.data.old_value).full_name }}
<FeatherIcon </div>
name="arrow-right" <div class="truncate" v-else>
class="mx-1 h-4 w-4 text-gray-600" {{ activity.data.old_value }}
/> </div>
</div> </span>
<div class="flex flex-wrap items-center gap-1"> <span v-if="activity.to">{{ __('to') }}</span>
<span v-if="activity.type">{{ <span
startCase(__(activity.type)) v-if="activity.data.value"
}}</span> class="max-w-xs font-medium text-gray-800"
<span >
v-if="activity.data.old_value" <div
class="max-w-xs font-medium text-gray-800" class="flex items-center gap-1"
v-if="activity.options == 'User'"
> >
<div <UserAvatar :user="activity.data.value" size="xs" />
class="flex items-center gap-1" {{ getUser(activity.data.value).full_name }}
v-if="activity.options == 'User'" </div>
> <div class="truncate" v-else>
<UserAvatar :user="activity.data.old_value" size="xs" /> {{ activity.data.value }}
{{ getUser(activity.data.old_value).full_name }} </div>
</div> </span>
<div class="truncate" v-else>
{{ activity.data.old_value }}
</div>
</span>
<span v-if="activity.to">{{ __('to') }}</span>
<span
v-if="activity.data.value"
class="max-w-xs font-medium text-gray-800"
>
<div
class="flex items-center gap-1"
v-if="activity.options == 'User'"
>
<UserAvatar :user="activity.data.value" size="xs" />
{{ getUser(activity.data.value).full_name }}
</div>
<div class="truncate" v-else>
{{ activity.data.value }}
</div>
</span>
</div>
</div> </div>
<div class="ml-auto whitespace-nowrap"> <div class="ml-auto whitespace-nowrap">

2
frontend/src/components/Activities/ActivityHeader.vue
View File

@ -55,7 +55,7 @@
</template> </template>
<span>{{ __('New Task') }}</span> <span>{{ __('New Task') }}</span>
</Button> </Button>
<div class="flex gap-2" v-else-if="title == 'WhatsApp'"> <div class="flex gap-2 shrink-0" v-else-if="title == 'WhatsApp'">
<Button <Button
:label="__('Send Template')" :label="__('Send Template')"
@click="showWhatsappTemplates = true" @click="showWhatsappTemplates = true"

4
frontend/src/components/Activities/CallArea.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="mb-1 flex items-start justify-stretch gap-2 py-1 text-base"> <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
<div class="inline-flex items-center flex-wrap gap-1 text-gray-600"> <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
<Avatar <Avatar
:image="activity.caller.image" :image="activity.caller.image"
@ -55,7 +55,7 @@
/> />
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center flex-wrap gap-2">
<Badge :label="dateFormat(activity.creation, 'MMM D, dddd')"> <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
<template #prefix> <template #prefix>
<CalendarIcon class="size-3" /> <CalendarIcon class="size-3" />

2
frontend/src/components/Activities/CommentArea.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :id="activity.name"> <div :id="activity.name">
<div class="mb-1 flex items-start justify-stretch gap-2 py-1 text-base"> <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
<div class="inline-flex items-center flex-wrap gap-1 text-gray-600"> <div class="inline-flex items-center flex-wrap gap-1 text-gray-600">
<UserAvatar class="mr-1" :user="activity.owner" size="md" /> <UserAvatar class="mr-1" :user="activity.owner" size="md" />
<span class="font-medium text-gray-800"> <span class="font-medium text-gray-800">

10
frontend/src/components/Activities/EmailArea.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div <div
class="cursor-pointer rounded-md shadow bg-white px-3 py-1.5 text-base leading-6 transition-all duration-300 ease-in-out" class="cursor-pointer flex flex-col rounded-md shadow bg-white px-3 py-1.5 text-base transition-all duration-300 ease-in-out"
> >
<div class="-mb-0.5 flex items-center justify-between gap-2"> <div class="-mb-0.5 flex items-center justify-between gap-2 truncate">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 truncate">
<span>{{ activity.data.sender_full_name }}</span> <span>{{ activity.data.sender_full_name }}</span>
<span class="text-sm text-gray-600"> <span class="sm:flex hidden text-sm text-gray-600">
{{ '<' + activity.data.sender + '>' }} {{ '<' + activity.data.sender + '>' }}
</span> </span>
<Badge <Badge
@ -15,7 +15,7 @@
theme="green" theme="green"
/> />
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 shrink-0">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)"> <Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<div class="text-sm text-gray-600"> <div class="text-sm text-gray-600">
{{ __(timeAgo(activity.creation)) }} {{ __(timeAgo(activity.creation)) }}

4
frontend/src/components/Activities/WhatsAppBox.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="reply?.message" v-if="reply?.message"
class="flex items-center justify-around gap-2 px-4 pt-2 sm:px-10" class="flex items-center justify-around gap-2 px-3 pt-2 sm:px-10"
> >
<div <div
class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600" class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600"
@ -18,7 +18,7 @@
<Button variant="ghost" icon="x" @click="reply = {}" /> <Button variant="ghost" icon="x" @click="reply = {}" />
</div> </div>
<div class="flex items-end gap-2 px-4 py-2.5 sm:px-10" v-bind="$attrs"> <div class="flex items-end gap-2 px-3 py-2.5 sm:px-10" v-bind="$attrs">
<div class="flex h-8 items-center gap-2"> <div class="flex h-8 items-center gap-2">
<FileUploader @success="(file) => uploadFile(file)"> <FileUploader @success="(file) => uploadFile(file)">
<template v-slot="{ openFileSelector }"> <template v-slot="{ openFileSelector }">