test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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">
<WhatsAppArea
class="px-4 sm:px-10"
class="px-3 sm:px-10"
v-model="whatsappMessages"
v-model:reply="replyMessage"
:messages="whatsappMessages.data"
@ -37,7 +37,7 @@
</div>
<div
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)">
<NoteArea :note="note" v-model="all_activities" />
@ -46,7 +46,7 @@
<div v-else-if="title == 'Comments'" class="pb-5">
<div v-for="(comment, i) in activities">
<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
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 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
v-model="all_activities"
v-model:doc="doc"
@ -74,7 +77,7 @@
<div v-else-if="title == 'Calls'" class="activity">
<div v-for="(call, i) in activities">
<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
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
v-else
v-for="(activity, i) in activities"
class="activity px-4 sm:px-10"
class="activity px-3 sm:px-10"
:class="
title == 'Activity'
['Activity', 'Emails'].includes(title)
? 'grid grid-cols-[30px_minmax(auto,_1fr)] gap-2 sm:gap-4'
: ''
"
>
<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="[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
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> +{{ activity.other_versions.length + 1 }} </span>
<span>{{ __('changes from') }}</span>
<span>{{ activity.owner_name }}</span>
</div>
<span>{{ activity.show_others ? __('Hide') : __('Show') }}</span>
<span> +{{ activity.other_versions.length + 1 }} </span>
<span>{{ __('changes from') }}</span>
<span>{{ activity.owner_name }}</span>
<Button
class="!size-4"
variant="ghost"
@ -271,55 +270,51 @@
v-for="activity in [activity, ...activity.other_versions]"
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="flex flex-1 items-center gap-1">
<span
v-if="activity.data.field_label"
class="max-w-xs truncate text-gray-600"
<div class="inline-flex flex-wrap gap-1 text-gray-600">
<span
v-if="activity.data.field_label"
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) }}
</span>
<FeatherIcon
name="arrow-right"
class="mx-1 h-4 w-4 text-gray-600"
/>
</div>
<div class="flex flex-wrap items-center gap-1">
<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"
<UserAvatar :user="activity.data.old_value" size="xs" />
{{ getUser(activity.data.old_value).full_name }}
</div>
<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'"
>
<div
class="flex items-center gap-1"
v-if="activity.options == 'User'"
>
<UserAvatar :user="activity.data.old_value" size="xs" />
{{ getUser(activity.data.old_value).full_name }}
</div>
<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>
<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 class="ml-auto whitespace-nowrap">

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

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

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

@ -1,6 +1,6 @@
<template>
<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">
<Avatar
:image="activity.caller.image"
@ -55,7 +55,7 @@
/>
</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')">
<template #prefix>
<CalendarIcon class="size-3" />

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

@ -1,6 +1,6 @@
<template>
<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">
<UserAvatar class="mr-1" :user="activity.owner" size="md" />
<span class="font-medium text-gray-800">

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

@ -1,11 +1,11 @@
<template>
<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="flex items-center gap-2">
<div class="-mb-0.5 flex items-center justify-between gap-2 truncate">
<div class="flex items-center gap-2 truncate">
<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 + '>' }}
</span>
<Badge
@ -15,7 +15,7 @@
theme="green"
/>
</div>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 shrink-0">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<div class="text-sm text-gray-600">
{{ __(timeAgo(activity.creation)) }}

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

@ -1,7 +1,7 @@
<template>
<div
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
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 = {}" />
</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">
<FileUploader @success="(file) => uploadFile(file)">
<template v-slot="{ openFileSelector }">