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

fix: made contact & organization page responsive

Browse Source
This commit is contained in:
Shariq Ansari 2024-05-27 19:02:45 +05:30
parent 812207cead
commit 9c7fa24fe8
2 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/pages/Contact.vue
View File

@ -7,7 +7,7 @@
<div v-if="contact.data" class="flex h-full flex-col overflow-hidden">
<FileUploader @success="changeContactImage" :validateFile="validateFile">
<template #default="{ openFileSelector, error }">
<div class="flex items-center justify-start gap-6 p-5">
<div class="flex items-start justify-start gap-6 p-5 sm:items-center">
<div class="group relative h-24 w-24">
<Avatar
size="3xl"
@ -50,14 +50,16 @@
</div>
</component>
</div>
<div class="flex flex-col gap-0.5 truncate">
<div class="flex flex-col gap-2 truncate sm:gap-0.5">
<div class="truncate text-3xl font-semibold">
<span v-if="contact.data.salutation">
{{ contact.data.salutation + '. ' }}
</span>
<span>{{ contact.data.full_name }}</span>
</div>
<div class="flex items-center gap-2 text-base text-gray-700">
<div
class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
>
<div
v-if="contact.data.email_id"
class="flex items-center gap-1.5"
@ -67,7 +69,7 @@
</div>
<span
v-if="contact.data.email_id"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -79,7 +81,9 @@
<div
class="flex items-center gap-1.5"
:class="callEnabled ? 'cursor-pointer' : ''"
@click="callEnabled && makeCall(contact.data.actual_mobile_no)"
@click="
callEnabled && makeCall(contact.data.actual_mobile_no)
"
>
<PhoneIcon class="h-4 w-4" />
<span class="">{{ contact.data.actual_mobile_no }}</span>
@ -87,7 +91,7 @@
</component>
<span
v-if="contact.data.actual_mobile_no"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -107,7 +111,7 @@
</div>
<span
v-if="contact.data.company_name"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -119,7 +123,7 @@
"
variant="ghost"
:label="__('More')"
class="-ml-1 cursor-pointer hover:text-gray-900"
class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
@click="
() => {
detailMode = true

18
frontend/src/pages/Organization.vue
View File

@ -10,7 +10,7 @@
:validateFile="validateFile"
>
<template #default="{ openFileSelector, error }">
<div class="flex items-center justify-start gap-6 p-5">
<div class="flex items-start justify-start gap-6 p-5 sm:items-center">
<div class="group relative h-24 w-24">
<Avatar
size="3xl"
@ -53,11 +53,13 @@
</div>
</component>
</div>
<div class="flex flex-col justify-center gap-0.5">
<div class="flex flex-col justify-center gap-2 sm:gap-0.5">
<div class="text-3xl font-semibold text-gray-900">
{{ organization.doc.name }}
</div>
<div class="flex items-center gap-2 text-base text-gray-700">
<div
class="flex flex-col flex-wrap gap-3 text-base text-gray-700 sm:flex-row sm:items-center sm:gap-2"
>
<div
v-if="organization.doc.website"
class="flex items-center gap-1.5"
@ -67,7 +69,7 @@
</div>
<span
v-if="organization.doc.website"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -80,7 +82,7 @@
</div>
<span
v-if="organization.doc.industry"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -93,7 +95,7 @@
</div>
<span
v-if="organization.doc.territory"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -106,7 +108,7 @@
</div>
<span
v-if="organization.doc.annual_revenue"
class="text-3xl leading-[0] text-gray-600"
class="hidden text-3xl leading-[0] text-gray-600 sm:flex"
>
&middot;
</span>
@ -119,7 +121,7 @@
"
variant="ghost"
:label="__('More')"
class="-ml-1 cursor-pointer hover:text-gray-900"
class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
@click="
() => {
detailMode = true