pramod_Enhancement-#420 : Minor UI Enhancements – Modal Size & Responsive Adjustments #165
@ -94,14 +94,15 @@ const CardViewDirectory = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="list-inline m-0 ps-4">
|
||||
<li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
</li>
|
||||
<li className="list-inline-item text-small">
|
||||
{contact.organization}
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="list-inline m-0 ps-4 d-flex align-items-start">
|
||||
<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">
|
||||
{contact.organization}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div
|
||||
className="card-footer text-start px-1 py-1"
|
||||
@ -113,16 +114,17 @@ const CardViewDirectory = ({
|
||||
}}
|
||||
>
|
||||
<hr className="my-0" />
|
||||
{contact.contactEmails[0] && (
|
||||
<ul className="list-inline my-1 ">
|
||||
<li className="list-inline-item me-2">
|
||||
<i className="bx bx-envelope bx-xs"></i>
|
||||
</li>
|
||||
<li className="list-inline-item text-small">
|
||||
{contact.contactEmails[0]?.emailAddress}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
{contact.contactEmails[0] && (
|
||||
<ul className="list-unstyled my-1 d-flex align-items-start">
|
||||
<li className="me-2">
|
||||
<i className="bx bx-envelope bx-xs mt-1"></i>
|
||||
</li>
|
||||
<li className="flex-grow-1 text-break small">
|
||||
{contact.contactEmails[0].emailAddress}
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
|
||||
|
||||
{contact.contactPhones[0] && (
|
||||
<ul className="list-inline m-0 ">
|
||||
|
@ -58,23 +58,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Email:</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
<div style={{ flex: 1 }}>
|
||||
<ul className="list-unstyled mb-0">
|
||||
{contactProfile.contactEmails.map((email, idx) => (
|
||||
<li
|
||||
className="list-inline-item me-3 d-flex align-items-center"
|
||||
key={idx}
|
||||
>
|
||||
<i className="bx bx-envelope bx-xs me-1"></i>
|
||||
<span className="me-2">{email.emailAddress}</span>
|
||||
<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 cursor-pointer ${
|
||||
className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
|
||||
copiedIndex === idx
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
title={copiedIndex === idx ? "Copied!" : "Copy Email"}
|
||||
style={{ fontSize: "16px" }}
|
||||
style={{ flexShrink: 0 }}
|
||||
onClick={() => handleCopy(email.emailAddress, idx)}
|
||||
></i>
|
||||
</li>
|
||||
@ -103,33 +102,28 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
)}
|
||||
|
||||
{contactProfile?.createdAt && (
|
||||
<div className="d-flex mb-2">
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Created : </p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contactProfile?.address && (
|
||||
<div className="d-flex mb-2">
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Location : </p>
|
||||
<p className="m-0">Location:</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
<li className="list-inline-item">
|
||||
<i className="bx bx-map bx-xs me-1"></i>
|
||||
{contactProfile?.address}
|
||||
</li>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -141,13 +135,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
|
||||
<div style={{ width: "100px", minWidth: "100px" }}>
|
||||
<p className="m-0">Orgnization : </p>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="list-inline mb-0">
|
||||
<li className="list-inline-item">
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
{contactProfile.organization}
|
||||
</li>
|
||||
</ul>
|
||||
<div className="d-flex align-items-center">
|
||||
<i className="fa-solid fa-briefcase me-2"></i>
|
||||
|
||||
<span style={{ wordBreak: "break-word" }}>
|
||||
{contactProfile.organization}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
@ -76,7 +76,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
|
||||
<i className="bx bxs-file-image bx-sm me-1_5"></i> <span className="d-none d-md-inline">Image Gallary</span>
|
||||
</a>
|
||||
</li>
|
||||
{DirAdmin || DireManager || DirUser && (
|
||||
{(DirAdmin || DireManager || DirUser) && (
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className={`nav-link ${activePill === "directory" ? "active" : ""}`}
|
||||
|
@ -77,6 +77,27 @@ useEffect(() => {
|
||||
setTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
};
|
||||
const handleInputKey = (e) => {
|
||||
const key = e.key?.toLowerCase();
|
||||
|
||||
if ((key === "enter" || key === " " || e.code === "Space") && input.trim() !== "") {
|
||||
e.preventDefault();
|
||||
const existing = options.find(
|
||||
(opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
|
||||
);
|
||||
const newTag = existing
|
||||
? existing
|
||||
: {
|
||||
id: null,
|
||||
name: input.trim(),
|
||||
description: input.trim(),
|
||||
};
|
||||
addTag(newTag);
|
||||
} else if ((key === "backspace" || e.code === "Backspace") && input === "") {
|
||||
setTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleSuggestionClick = (suggestion) => {
|
||||
addTag(suggestion);
|
||||
@ -122,6 +143,7 @@ useEffect(() => {
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
onKeyUp={handleInputKey}
|
||||
placeholder={placeholder}
|
||||
style={{
|
||||
border: "none",
|
||||
|
@ -1,5 +1,5 @@
|
||||
.editor-wrapper {
|
||||
max-width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 1px auto;
|
||||
background: #fff;
|
||||
|
||||
|
@ -274,7 +274,7 @@ const handleDeleteContact = async (overrideId = null) => {
|
||||
setOpen_contact(null);
|
||||
setIsOpenModalNote(false);
|
||||
}}
|
||||
size="lg"
|
||||
size="xl"
|
||||
>
|
||||
{open_contact && (
|
||||
<ProfileContactDirectory
|
||||
|
Loading…
x
Reference in New Issue
Block a user