pramod_Enhancement-#420 : Minor UI Enhancements – Modal Size & Responsive Adjustments #165

Merged
pramod.mahajan merged 5 commits from pramod_Enhancement-#420 into Feature_Directory 2025-05-31 06:52:10 +00:00
6 changed files with 68 additions and 51 deletions

View File

@ -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 ">

View File

@ -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>
)}

View File

@ -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" : ""}`}

View File

@ -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",

View File

@ -1,5 +1,5 @@
.editor-wrapper {
max-width: 800px;
max-width: 100%;
margin: 1px auto;
background: #fff;

View File

@ -274,7 +274,7 @@ const handleDeleteContact = async (overrideId = null) => {
setOpen_contact(null);
setIsOpenModalNote(false);
}}
size="lg"
size="xl"
>
{open_contact && (
<ProfileContactDirectory