UI Alignment and Icon Styling Issue in Contact Card Design in Directory.
This commit is contained in:
parent
5956e64492
commit
7709483a76
@ -107,13 +107,13 @@ const CardViewDirectory = ({
|
||||
{/* <li className="list-inline-item me-1 small">
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
</li> */}
|
||||
<li className="list-inline-item text-break small ms-5">
|
||||
<li className="list-inline-item text-break small ms-5 px-1">
|
||||
{contact.organization}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
className={`card-footer text-start px-1 py-1 ${IsActive && "cursor-pointer"
|
||||
className={`card-footer text-start mx-4 px-4 py-1 ${IsActive && "cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (IsActive) {
|
||||
|
||||
@ -47,7 +47,6 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
<div className="d-flex flex-column text-start ms-1">
|
||||
<span className="m-0 fw-semibold">{contact?.name}</span>
|
||||
<small className="text-secondary small-text">
|
||||
{/* {contactProfile?.tags?.map((tag) => tag.name).join(" | ")} */}
|
||||
{contactProfile?.designation}
|
||||
</small>
|
||||
</div>
|
||||
@ -56,23 +55,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
||||
{contactProfile?.contactEmails?.length > 0 && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Email:</p>
|
||||
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
|
||||
<i className="bx bx-envelope bx-xs me-1"></i>
|
||||
<p className="m-0">Email :</p>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<ul className="list-unstyled mb-0">
|
||||
{contactProfile.contactEmails.map((email, idx) => (
|
||||
<li className="d-flex align-items-center mb-1" key={idx}>
|
||||
<i className="bx bx-envelope bx-xs me-1 mt-1"></i>
|
||||
<span className="me-1 flex-grow text-break overflow-wrap">
|
||||
{email.emailAddress}
|
||||
</span>
|
||||
<i
|
||||
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
|
||||
copiedIndex === idx
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
title={copiedIndex === idx ? "Copied!" : "Copy Email"}
|
||||
style={{ flexShrink: 0 }}
|
||||
onClick={() => handleCopy(email.emailAddress, idx)}
|
||||
@ -86,14 +84,14 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
|
||||
{contactProfile?.contactPhones?.length > 0 && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Phone : </p>
|
||||
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
|
||||
<i className="bx bx-phone bx-xs me-1"></i>
|
||||
<p className="m-0">Phone :</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
{contactProfile?.contactPhones.map((phone, idx) => (
|
||||
<li className="list-inline-item me-3" key={idx}>
|
||||
<i className="bx bx-phone bx-xs me-1"></i>
|
||||
{phone.phoneNumber}
|
||||
</li>
|
||||
))}
|
||||
@ -104,12 +102,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
|
||||
{contactProfile?.createdAt && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Created : </p>
|
||||
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
|
||||
<i className="bx bx-calendar-week bx-xs me-1"></i>
|
||||
<p className="m-0">Created :</p>
|
||||
</div>
|
||||
<div className="d-flex align-items-center">
|
||||
<li className="list-inline-item">
|
||||
<i className="bx bx-calendar-week bx-xs me-1"></i>
|
||||
{moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
|
||||
</li>
|
||||
</div>
|
||||
@ -117,11 +115,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
)}
|
||||
{contactProfile?.address && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Location:</p>
|
||||
<div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
|
||||
<i className="bx bx-map bx-xs me-1"></i>
|
||||
<p className="m-0">Location :</p>
|
||||
</div>
|
||||
<div className="d-flex align-items-center">
|
||||
<i className="bx bx-map bx-xs me-1 "></i>
|
||||
<span className="text-break small">
|
||||
{contactProfile.address}
|
||||
</span>
|
||||
@ -133,12 +131,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
||||
{contactProfile?.organization && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Orgnization : </p>
|
||||
<div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
|
||||
<i className="fa-solid fa-briefcase me-1"></i>
|
||||
<p className="m-0">Organization :</p>
|
||||
</div>
|
||||
<div className="d-flex align-items-center">
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
|
||||
<span style={{ wordBreak: "break-word" }}>
|
||||
{contactProfile.organization}
|
||||
</span>
|
||||
@ -147,29 +144,29 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
)}
|
||||
{contactProfile?.contactCategory && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Category : </p>
|
||||
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
|
||||
<i className="bx bx-user bx-xs me-1"></i>
|
||||
<p className="m-0">Category :</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
<li className="list-inline-item">
|
||||
<i className="bx bx-user bx-xs me-1"></i>
|
||||
{contactProfile.contactCategory.name}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{contactProfile?.tags?.length > 0 && (
|
||||
{contactProfile?.tags?.length > 0 && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Tags : </p>
|
||||
<div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
|
||||
<i className="fa-solid fa-tag me-2"></i>
|
||||
<p className="m-0">Tags :</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
{contactProfile.tags.map((tag, index) => (
|
||||
<li key={index} className="list-inline-item">
|
||||
<i className="fa-solid fa-tag me-1"></i>
|
||||
{tag.name}
|
||||
</li>
|
||||
))}
|
||||
@ -179,11 +176,13 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
)}
|
||||
|
||||
{contactProfile?.buckets?.length > 0 && (
|
||||
<div className="d-flex ">
|
||||
<div className="d-flex">
|
||||
{contactProfile?.contactEmails?.length > 0 && (
|
||||
<div className="d-flex mb-2 align-items-center">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Buckets : </p>
|
||||
<div style={{ width: "100px", minWidth: "130px" }}>
|
||||
<p className="m-0">
|
||||
<i className="bx bx-layer me-0"></i>Buckets :
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
@ -200,12 +199,15 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{contactProfile?.projects?.length > 0 && (
|
||||
<div className="d-flex mb-2 align-items-start">
|
||||
<div style={{ minWidth: "100px" }}>
|
||||
<p className="m-0 text-start">Projects :</p>
|
||||
<div style={{ minWidth: "110px" }}>
|
||||
<p className="m-0 text-start">
|
||||
<i className="bx bx-building-house me-0"></i>Projects :
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-start">
|
||||
<ul className="list-inline mb-0">
|
||||
@ -220,9 +222,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
<div className="d-flex mb-2 align-items-start">
|
||||
<div style={{ minWidth: "100px" }}>
|
||||
<p className="m-0 text-start">Description :</p>
|
||||
<div style={{ minWidth: "110px" }}>
|
||||
<p className="m-0 text-start">
|
||||
<i className="bx bx-book me-0"></i>Description :
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-start">
|
||||
{displayText}
|
||||
@ -237,6 +242,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<hr className="my-1" />
|
||||
<NotesDirectory
|
||||
refetchProfile={refetch}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user