1
0
forked from test/crm

fix: make other dependent component responsive

This commit is contained in:
Shariq Ansari 2024-05-27 19:10:28 +05:30
parent 41724aad08
commit 615ff0a2dc
6 changed files with 16 additions and 16 deletions

View File

@ -12,14 +12,14 @@
<template v-slot:editor="{ editor }">
<EditorContent
:class="[
editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
]"
:editor="editor"
/>
</template>
<template v-slot:bottom>
<div v-if="editable" class="flex flex-col gap-2">
<div class="flex flex-wrap gap-2 px-10">
<div class="flex flex-wrap gap-2 sm:px-10 px-4">
<AttachmentItem
v-for="a in attachments"
:key="a.file_url"
@ -35,7 +35,7 @@
</AttachmentItem>
</div>
<div
class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
>
<div class="flex items-center overflow-x-auto">
<TextEditorFixedMenu

View File

@ -1,5 +1,5 @@
<template>
<div class="flex justify-between gap-3 border-t px-10 py-2.5">
<div class="flex justify-between gap-3 border-t sm:px-10 px-4 py-2.5">
<div class="flex gap-1.5">
<Button
ref="sendEmailRef"

View File

@ -9,7 +9,7 @@
:editable="editable"
>
<template #top>
<div class="mx-10 flex items-center gap-2 border-t py-2.5">
<div class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5">
<span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
<TextInput
class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
@ -17,7 +17,7 @@
/>
</div>
<div
class="mx-10 flex items-center gap-2 border-t py-2.5"
class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5"
:class="[cc || bcc ? 'border-b' : '']"
>
<span class="text-xs text-gray-500">{{ __('TO') }}:</span>
@ -32,7 +32,7 @@
</div>
<div
v-if="cc"
class="mx-10 flex items-center gap-2 py-2.5"
class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5"
:class="bcc ? 'border-b' : ''"
>
<span class="text-xs text-gray-500">{{ __('CC') }}:</span>
@ -46,7 +46,7 @@
"
/>
</div>
<div v-if="bcc" class="mx-10 flex items-center gap-2 py-2.5">
<div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5">
<span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
<MultiselectInput
ref="bccInput"
@ -62,14 +62,14 @@
<template v-slot:editor="{ editor }">
<EditorContent
:class="[
editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
]"
:editor="editor"
/>
</template>
<template v-slot:bottom>
<div v-if="editable" class="flex flex-col gap-2">
<div class="flex flex-wrap gap-2 px-10">
<div class="flex flex-wrap gap-2 sm:px-10 px-4">
<AttachmentItem
v-for="a in attachments"
:key="a.file_url"
@ -85,7 +85,7 @@
</AttachmentItem>
</div>
<div
class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
>
<div class="flex items-center overflow-x-auto">
<TextEditorFixedMenu

View File

@ -1,11 +1,11 @@
<template>
<div class="flex flex-col gap-1.5 border-b px-6 py-3">
<div class="flex flex-col gap-1.5 border-b sm:px-6 py-3 px-4">
<div
v-for="s in slaSection"
:key="s.label"
class="flex items-center gap-2 text-base leading-5"
>
<div class="w-[106px] text-sm text-gray-600">{{ __(s.label) }}</div>
<div class="sm:w-[106px] w-36 text-sm text-gray-600">{{ __(s.label) }}</div>
<div class="grid min-h-[28px] items-center">
<Tooltip v-if="s.tooltipText" :text="__(s.tooltipText)">
<div class="ml-2 cursor-pointer">

View File

@ -9,7 +9,7 @@
class="flex items-center gap-2 px-3 leading-5 first:mt-3"
>
<Tooltip :text="__(field.label)" hoverDelay="1">
<div class="w-[106px] shrink-0 truncate text-sm text-gray-600">
<div class="sm:w-[106px] w-36 shrink-0 truncate text-sm text-gray-600">
<span>{{ __(field.label) }}</span>
<span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
</div>

View File

@ -1,7 +1,7 @@
<template>
<div
v-if="reply?.message"
class="flex items-center justify-around gap-2 px-10 pt-2"
class="flex items-center justify-around gap-2 sm:px-10 px-4 pt-2"
>
<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-10 py-2.5">
<div class="flex items-end gap-2 sm:px-10 px-4 py-2.5">
<div class="flex h-8 items-center gap-2">
<FileUploader @success="(file) => uploadFile(file)">
<template v-slot="{ openFileSelector }">