style: style fix for mobile view
This commit is contained in:
Shariq Ansari
parent
21b6a33517
commit
d016996118
@ -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">
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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)) }}
|
||||
|
||||
@ -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 }">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user