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

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

@ -10,7 +10,7 @@
:validateFile="validateFile" :validateFile="validateFile"
> >
<template #default="{ openFileSelector, error }"> <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"> <div class="group relative h-24 w-24">
<Avatar <Avatar
size="3xl" size="3xl"
@ -53,11 +53,13 @@
</div> </div>
</component> </component>
</div> </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"> <div class="text-3xl font-semibold text-gray-900">
{{ organization.doc.name }} {{ organization.doc.name }}
</div> </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 <div
v-if="organization.doc.website" v-if="organization.doc.website"
class="flex items-center gap-1.5" class="flex items-center gap-1.5"
@ -67,7 +69,7 @@
</div> </div>
<span <span
v-if="organization.doc.website" 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; &middot;
</span> </span>
@ -80,7 +82,7 @@
</div> </div>
<span <span
v-if="organization.doc.industry" 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; &middot;
</span> </span>
@ -93,7 +95,7 @@
</div> </div>
<span <span
v-if="organization.doc.territory" 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; &middot;
</span> </span>
@ -106,7 +108,7 @@
</div> </div>
<span <span
v-if="organization.doc.annual_revenue" 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; &middot;
</span> </span>
@ -119,7 +121,7 @@
" "
variant="ghost" variant="ghost"
:label="__('More')" :label="__('More')"
class="-ml-1 cursor-pointer hover:text-gray-900" class="w-fit cursor-pointer hover:text-gray-900 sm:-ml-1"
@click=" @click="
() => { () => {
detailMode = true detailMode = true