From ad1db0f366951e8f86723046af4002cfe152a883 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Mon, 7 Jul 2025 15:07:43 +0530 Subject: [PATCH 01/22] Image Popup Expands Page Width when add lengthy comment on Click in Image Gallery. --- src/pages/Gallary/ImagePop.css | 98 +++++++++++++++++++++++++--------- 1 file changed, 72 insertions(+), 26 deletions(-) diff --git a/src/pages/Gallary/ImagePop.css b/src/pages/Gallary/ImagePop.css index dfdb549c..367758f6 100644 --- a/src/pages/Gallary/ImagePop.css +++ b/src/pages/Gallary/ImagePop.css @@ -1,103 +1,149 @@ +/* Image Modal Overlay */ .image-modal-overlay { position: fixed; top: 0; left: 0; - z-index: 9999; /* High z-index to ensure it's on top */ + z-index: 9999; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.85); /* Dark semi-transparent background */ + background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; } +/* Main Modal Content Box */ .image-modal-content { background: #fff; padding: 24px; - max-width: 90%; /* Responsive max-width */ - max-height: 100%; /* Responsive max-height */ + max-width: 50%; + max-height: 95vh; /* Limits the modal's height to 95% of viewport height */ border-radius: 12px; position: relative; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); text-align: center; - display: flex; /* Use flexbox for internal layout */ + display: flex; flex-direction: column; align-items: center; justify-content: center; + overflow-y: auto; /* Enables vertical scrolling */ + + /* --- HIDE SCROLLBAR FOR MAIN MODAL CONTENT --- */ + /* For Webkit browsers (Chrome, Safari, Edge) */ + &::-webkit-scrollbar { + width: 0px; /* Hide vertical scrollbar */ + height: 0px; /* Hide horizontal scrollbar, though unlikely needed here */ + } + /* For Firefox */ + scrollbar-width: none; /* Hide scrollbar in Firefox */ + /* For Internet Explorer and Edge (legacy) */ + -ms-overflow-style: none; + /* --- END HIDE SCROLLBAR --- */ } +/* Image Styles */ .modal-image { max-width: 100%; - max-height: 70vh; /* Limits image height to 70% of viewport height */ + max-height: 70vh; + width: auto; border-radius: 10px; - object-fit: contain; /* Ensures the whole image is visible without cropping */ + object-fit: contain; margin-bottom: 20px; - flex-shrink: 0; /* Prevent image from shrinking if content is too large */ + flex-shrink: 0; } -.image-details { +/* Scrollable Container for Text Details */ +.image-details-scroll-container { + width: 100%; + flex-grow: 1; + max-height: calc(95vh - 70vh - (24px * 2) - 20px); /* Approximate calculation for text area height */ + overflow-y: auto; /* Enables vertical scrolling for details */ text-align: left; + padding-right: 5px; /* Add some padding so text doesn't touch the hidden scrollbar area */ + + /* --- HIDE SCROLLBAR FOR TEXT DETAILS SECTION --- */ + /* For Webkit browsers (Chrome, Safari, Edge) */ + &::-webkit-scrollbar { + width: 0px; /* Hide vertical scrollbar */ + height: 0px; /* Hide horizontal scrollbar */ + } + /* For Firefox */ + scrollbar-width: none; /* Hide scrollbar in Firefox */ + /* For Internet Explorer and Edge (legacy) */ + -ms-overflow-style: none; + /* --- END HIDE SCROLLBAR --- */ +} + +/* Image Details Section (inside the scroll container) */ +.image-details { color: #444; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; - width: 100%; /* Ensure details section takes full width */ + width: 100%; + text-align: left; } .image-details p { - margin: 4px 0; /* Reduce vertical space between lines in details */ + margin: 4px 0; + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; + text-overflow: initial; + text-align: left; } +/* Close Button */ .close-button { position: absolute; - top: 1px; /* Position relative to the modal content */ + top: 1px; right: 8px; font-size: 30px; background: none; border: none; - color: black; /* White color for visibility on dark overlay */ + color: black; cursor: pointer; padding: 0; line-height: 1; - z-index: 10000; /* Ensure it's above everything else */ + z-index: 10000; } -/* Styles for the navigation buttons */ +/* Navigation Buttons */ .nav-button { position: absolute; - top: 50%; /* Vertically center them */ - transform: translateY(-50%); /* Adjust for perfect vertical centering */ - background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ + top: 50%; + transform: translateY(-50%); + background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px 15px; font-size: 30px; cursor: pointer; - z-index: 1000; /* Ensure buttons are above the image */ - border-radius: 50%; /* Make them circular */ + z-index: 1000; + border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; - transition: background-color 0.3s ease; /* Smooth hover effect */ + transition: background-color 0.3s ease; } .nav-button:hover { - background-color: rgba(0, 0, 0, 0.8); /* Darker on hover */ + background-color: rgba(0, 0, 0, 0.8); } .nav-button.prev-button { - left: 0px; /* Position left arrow */ + left: 0px; } .nav-button.next-button { - right: 0px; /* Position right arrow */ + right: 0px; } -/* Style for disabled buttons (optional) */ +/* Disabled Button Style */ .nav-button:disabled { opacity: 0.5; cursor: not-allowed; -} +} \ No newline at end of file From 9b63b2000ed18603bbc4eed8b5fa71c2e60f22e1 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Tue, 8 Jul 2025 12:35:02 +0530 Subject: [PATCH 02/22] Adding pagination 20 in Profile Attendance page and adding condtion to show more then 20 records to show paging. --- .../employee/AttendancesEmployeeRecords.jsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/pages/employee/AttendancesEmployeeRecords.jsx b/src/pages/employee/AttendancesEmployeeRecords.jsx index 1908ef21..bac57a09 100644 --- a/src/pages/employee/AttendancesEmployeeRecords.jsx +++ b/src/pages/employee/AttendancesEmployeeRecords.jsx @@ -85,7 +85,7 @@ const AttendancesEmployeeRecords = ({ employee }) => { const currentDate = new Date().toLocaleDateString("en-CA"); const { currentPage, totalPages, currentItems, paginate } = usePagination( sortedFinalList, - 10 + 20 ); useEffect(() => { @@ -141,13 +141,12 @@ const AttendancesEmployeeRecords = ({ employee }) => { id="DataTables_Table_0_length" >
- +
setIsRefreshing(!isRefreshing)} @@ -224,7 +223,7 @@ const AttendancesEmployeeRecords = ({ employee }) => { )}
- {!loading && data.length > 5 && ( + {!loading && sortedFinalList.length > 20 && ( )} + ); }; -export default Directory; \ No newline at end of file +export default Directory; + From e1e4ba2b541e8bb329b614186596867614cbacf0 Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Tue, 8 Jul 2025 12:45:48 +0530 Subject: [PATCH 04/22] Navigate to "Projects" Page Should Display Only Message When No Projects Are Assigned. --- src/pages/project/ProjectList.jsx | 162 +++++++++++++++--------------- 1 file changed, 79 insertions(+), 83 deletions(-) diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx index 24e87ca1..a72276ed 100644 --- a/src/pages/project/ProjectList.jsx +++ b/src/pages/project/ProjectList.jsx @@ -315,96 +315,91 @@ const ProjectList = () => {

No projects found.

)} - {listView ? ( -
-
-
- - - - - - - - - - - - - - - {currentItems.length === 0 ? ( + {listView ? ( + currentItems.length === 0 ? ( +
+ No projects found. +
+ ) : ( +
+
+
+
- Project Name - Contact PersonSTART DATEDEADLINETaskProgress -
- -
    - {[ - { - id: "b74da4c2-d07e-46f2-9919-e75e49b12731", - label: "Active", - }, - { - id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", - label: "On Hold", - }, - { - id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", - label: "Inactive", - }, - { - id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", - label: "Completed", - }, - ].map(({ id, label }) => ( -
  • -
    - handleStatusChange(id)} - /> - -
    -
    • - ))} -
-
- 		- Action -
+ - + + + + + + + + - ) : ( - currentItems.map((project) => ( + + + {currentItems.map((project) => ( - )) - )} - -
- No projects found - + Project Name + Contact PersonSTART DATEDEADLINETaskProgress +
+ +
    + {[ + { + id: "b74da4c2-d07e-46f2-9919-e75e49b12731", + label: "Active", + }, + { + id: "603e994b-a27f-4e5d-a251-f3d69b0498ba", + label: "On Hold", + }, + { + id: "ef1c356e-0fe0-42df-a5d3-8daee355492d", + label: "Inactive", + }, + { + id: "33deaef9-9af1-4f2a-b443-681ea0d04f81", + label: "Completed", + }, + ].map(({ id, label }) => ( +
  • +
    + handleStatusChange(id)} + /> + +
    +
    • + ))} +
+
+ 		+ Action +
-
{" "} -
{" "} -
+ ))} + + + + + + ) ) : (
{currentItems.map((project) => ( @@ -417,6 +412,7 @@ const ProjectList = () => {
)} + {!loading && totalPages > 1 && ( )} - - ); };