From 8ae29d4e2f0cb71a6ec882fc5c4d206373619732 Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Fri, 9 May 2025 16:46:26 -0500 Subject: [PATCH 01/14] Fix the width of Task and Timelog in mobile, set max-width for Leaderboard --- src/components/Header/Header.css | 4 - src/components/LeaderBoard/Leaderboard.css | 5 +- src/components/LeaderBoard/Leaderboard.jsx | 614 +++++++++++---------- src/components/Timelog/Timelog.jsx | 2 +- 4 files changed, 316 insertions(+), 309 deletions(-) diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index de9f54967c..a40ff10ef8 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -19,10 +19,6 @@ font-size: medium; } -.card { - margin-left: 35px; - margin-right: 50px; -} .card-wrapper { padding-top: 1rem; diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css index 8077dfa23c..10eb693b2c 100644 --- a/src/components/LeaderBoard/Leaderboard.css +++ b/src/components/LeaderBoard/Leaderboard.css @@ -1,5 +1,6 @@ .leaderboard { font-size: 1rem; + min-width: 500px; } /*1rem = 16px*/ .my-custom-scrollbar { @@ -47,6 +48,8 @@ } + + /* Small devices (landscape phones, 544px and up) */ @media (max-width: 544px) { .leaderboard { @@ -55,7 +58,7 @@ .my-custom-scrollbar { max-height: 500px; - overflow: scroll; + overflow: auto; margin-bottom: 1rem; } diff --git a/src/components/LeaderBoard/Leaderboard.jsx b/src/components/LeaderBoard/Leaderboard.jsx index 0148dec99e..d2b1a0e544 100644 --- a/src/components/LeaderBoard/Leaderboard.jsx +++ b/src/components/LeaderBoard/Leaderboard.jsx @@ -530,7 +530,7 @@ function LeaderBoard({ )} -
+
- - - - - - - - - - - + + ); + })} + +
- {isAbbreviatedView ? 'Stat.' : 'Status'} - -
- {isAbbreviatedView ? 'Name' : 'Name'} - -
- 		- {isAbbreviatedView ? 'Days Lft.' : 'Days Left'} - - {isAbbreviatedView ? 'Time Off' : 'Time Off'} - - {isAbbreviatedView ? 'Tan. Time' : 'Tangible Time'} - - {isAbbreviatedView ? 'Prog.' : 'Progress'} - -
-
- {isAbbreviatedView ? 'Tot. Time' : 'Total Time'} +
+ + + + + - - - - - - - + + + + + - - {filteredUsers.map(item => { - const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus( - item.personId, - ); - - return ( - - + + + + + + + + + {filteredUsers.map(item => { + const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus( + item.personId, + ); + + return ( + + + - + - - - - - + + - - ); - })} - -
+ {isAbbreviatedView ? 'Stat.' : 'Status'} + +
+ {isAbbreviatedView ? 'Name' : 'Name'} +
- {isOwner && ( - - )} - -
- - {stateOrganizationData.name} - {viewZeroHouraMembers(loggedInUser.role) && ( - - 0 hrs Totals:{' '} - {filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '} - Members - - )} - - - - {filteredUsers - .reduce((total, user) => total + user.tangibletime, 0) - .toFixed(2)} - - - total + user.tangibletime, 0) - .toFixed(2)} hours`} - value={ - (filteredUsers.reduce((total, user) => total + user.tangibletime, 0) / - filteredUsers.reduce( - (total, user) => total + user.weeklycommittedHours, - 0, - )) * - 100 + + + {isAbbreviatedView ? 'Days Lft.' : 'Days Left'} + + {isAbbreviatedView ? 'Time Off' : 'Time Off'} + + {isAbbreviatedView ? 'Tan. Time' : 'Tangible Time'} + + {isAbbreviatedView ? 'Prog.' : 'Progress'} + - - - - {filteredUsers - .reduce((total, user) => total + parseFloat(user.totaltime), 0) - .toFixed(2)}{' '} - of{' '} - {filteredUsers.reduce((total, user) => total + user.weeklycommittedHours, 0)} - - -
-
- - +
+ {isAbbreviatedView ? 'Tot. Time' : 'Total Time'} +
+ {isOwner && ( + + )} +
+ +
+ + {stateOrganizationData.name} + {viewZeroHouraMembers(loggedInUser.role) && ( + + 0 hrs Totals:{' '} + {filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '} + Members + + )} + + + + {filteredUsers + .reduce((total, user) => total + user.tangibletime, 0) + .toFixed(2)} + + + total + user.tangibletime, 0) + .toFixed(2)} hours`} + value={ + (filteredUsers.reduce((total, user) => total + user.tangibletime, 0) / + filteredUsers.reduce( + (total, user) => total + user.weeklycommittedHours, + 0, + )) * + 100 + } + color="primary" + /> + + + {filteredUsers + .reduce((total, user) => total + parseFloat(user.totaltime), 0) + .toFixed(2)}{' '} + of{' '} + {filteredUsers.reduce( + (total, user) => total + user.weeklycommittedHours, + 0, + )} + + +
+
+ - Jump to personal Dashboard - - -

Are you sure you wish to view this {item.name} dashboard?

- - - {' '} - - - -
-
- {/* */} + + Jump to personal Dashboard + + +

Are you sure you wish to view this {item.name} dashboard?

+ + + {' '} + + + +
{ - dashboardToggle(item); - }} - onKeyDown={e => { - if (e.key === 'Enter') { - dashboardToggle(item); - } + style={{ + display: 'flex', + alignItems: 'center', + justifyContent: hasSummaryIndicatorPermission + ? 'space-between' + : 'center', }} > - {hasLeaderboardPermissions(item.role) && - showStar(item.tangibletime, item.weeklycommittedHours) ? ( - 0 - ? `\n Additional make-up hours this week: ${item.missedHours}` - : '' - } \n Click to view their Dashboard`} - style={{ - color: assignStarDotColors( - item.tangibletime, - item.weeklycommittedHours + item.missedHours, - ), - fontSize: '20px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }} - /> - ) : ( + {/* */} +
{ + dashboardToggle(item); + }} + onKeyDown={e => { + if (e.key === 'Enter') { + dashboardToggle(item); + } + }} + > + {hasLeaderboardPermissions(item.role) && + showStar(item.tangibletime, item.weeklycommittedHours) ? ( + 0 + ? `\n Additional make-up hours this week: ${item.missedHours}` + : '' + } \n Click to view their Dashboard`} + style={{ + color: assignStarDotColors( + item.tangibletime, + item.weeklycommittedHours + item.missedHours, + ), + fontSize: '20px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }} + /> + ) : ( +
0 + ? `\n Additional make-up hours this week: ${item.missedHours}` + : '' + } \n Click to view their Dashboard`} + style={{ + backgroundColor: + item.tangibletime >= + item.weeklycommittedHours + item.missedHours + ? '#32CD32' + : 'red', + width: 15, + height: 15, + borderRadius: 7.5, + margin: 'auto', + verticalAlign: 'middle', + }} + /> + )} +
+ {hasSummaryIndicatorPermission && item.hasSummary && (
0 - ? `\n Additional make-up hours this week: ${item.missedHours}` - : '' - } \n Click to view their Dashboard`} + title="Weekly Summary Submitted" style={{ - backgroundColor: - item.tangibletime >= - item.weeklycommittedHours + item.missedHours - ? '#32CD32' - : 'red', - width: 15, - height: 15, - borderRadius: 7.5, - margin: 'auto', - verticalAlign: 'middle', + color: '#32a518', + cursor: 'default', }} - /> + > + ✓ +
)}
- {hasSummaryIndicatorPermission && item.hasSummary && ( -
*/} +
+ + {item.name} + +     + {hasVisibilityIconPermission && !item.isVisible && ( + + )} + {hasTimeOffIndicatorPermission && additionalWeeks > 0 && ( + - ✓ - + {isCurrentlyOff ? `+${additionalWeeks}` : additionalWeeks} + + + )} - - {/* */} - - - {item.name} - -     - {hasVisibilityIconPermission && !item.isVisible && ( - - )} - {hasTimeOffIndicatorPermission && additionalWeeks > 0 && ( - + + + {displayDaysLeft(item.endDate)} + + +
- {isCurrentlyOff ? `+${additionalWeeks}` : additionalWeeks} - - - - )} -
- - {displayDaysLeft(item.endDate)} - - -
- {hasTimeOff && ( - - )} -
- 		- {item.tangibletime} - - - - - - 0 ? 'leaderboard-totals-title' : null - } + + + + + )} + + + {item.tangibletime} + - {item.totaltime} - -
+ + + + +
+ 0 ? 'leaderboard-totals-title' : null + } + > + {item.totaltime} + +
+
) : ( diff --git a/src/components/Timelog/Timelog.jsx b/src/components/Timelog/Timelog.jsx index 9f225feb5d..8b1204c1fb 100644 --- a/src/components/Timelog/Timelog.jsx +++ b/src/components/Timelog/Timelog.jsx @@ -583,7 +583,7 @@ useEffect(() => {
) : ( - + {props.isDashboard ? null : ( Date: Tue, 13 May 2025 00:56:05 -0500 Subject: [PATCH 02/14] Remove placeholder in TinyMCE on focus, set min height 250px, add scrollable to Team Member Tasks --- src/components/TeamMemberTasks/style.css | 6 +----- src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx | 5 +++-- src/components/WeeklySummary/WeeklySummary.jsx | 4 ++-- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/TeamMemberTasks/style.css b/src/components/TeamMemberTasks/style.css index f97ccff260..6d2410e236 100644 --- a/src/components/TeamMemberTasks/style.css +++ b/src/components/TeamMemberTasks/style.css @@ -9,7 +9,7 @@ } .task_table-container { - overflow: hidden; + overflow: auto; position: relative; } @@ -389,10 +389,6 @@ margin-top: 5px; } -.task_table-container { - width: 100%; - overflow-y: hidden; -} .hours-btn-div { display: flex; diff --git a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx index 677b20b7cb..d8f2269595 100644 --- a/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx +++ b/src/components/Timelog/TimeEntryForm/TimeEntryForm.jsx @@ -101,10 +101,10 @@ function TimeEntryForm(props) { subscript superscript charmap | help', branding: false, toolbar_mode: 'sliding', - min_height: 180, + min_height: 250, max_height: 300, autoresize_bottom_margin: 1, - content_style: 'body { cursor: text !important; }', + content_style: 'body { cursor: text !important; } .mce-content-body[data-mce-placeholder]:focus::before {content: "";}', images_upload_handler: customImageUploadHandler, skin: darkMode ? 'oxide-dark' : 'oxide', content_css: darkMode ? 'dark' : 'default', @@ -234,6 +234,7 @@ function TimeEntryForm(props) { }; const handleEditorChange = (content, editor) => { + editor.focus(); const { wordcount } = editor.plugins; const regexFilter = /https:\/\/(?!(www\.)?localhost|(www\.)?dropbox\.com(?!\/scl\/)|(www\.)?[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+)[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}.*$/gim; const hasLink = regexFilter.test(content); diff --git a/src/components/WeeklySummary/WeeklySummary.jsx b/src/components/WeeklySummary/WeeklySummary.jsx index 9ec5cd8663..899f2d0a15 100644 --- a/src/components/WeeklySummary/WeeklySummary.jsx +++ b/src/components/WeeklySummary/WeeklySummary.jsx @@ -686,10 +686,10 @@ export class WeeklySummary extends Component { toolbar: 'bold italic underline link removeformat | bullist numlist outdent indent | styleselect fontsizeselect | table| strikethrough forecolor backcolor | subscript superscript charmap | help', branding: false, - min_height: 180, + min_height: 250, max_height: 500, autoresize_bottom_margin: 1, - content_style: 'body { font-size: 14px; }', + content_style: 'body { font-size: 14px; } .mce-content-body[data-mce-placeholder]:focus::before {content: "";}', images_upload_handler: customImageUploadHandler, skin: darkMode ? 'oxide-dark' : 'oxide', content_css: darkMode ? 'dark' : 'default', From 4bf83c8bd790b266b83040cb18d9ae0143c02225 Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Tue, 13 May 2025 18:19:55 -0500 Subject: [PATCH 03/14] Move the i icon next to the checkbox, add some margin to the checkbox --- src/components/TeamMemberTasks/FollowupCheckButton.jsx | 2 +- src/components/TeamMemberTasks/TeamMemberTask.jsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TeamMemberTasks/FollowupCheckButton.jsx b/src/components/TeamMemberTasks/FollowupCheckButton.jsx index 3daf48f5d0..75f4a48ad5 100644 --- a/src/components/TeamMemberTasks/FollowupCheckButton.jsx +++ b/src/components/TeamMemberTasks/FollowupCheckButton.jsx @@ -73,7 +73,7 @@ const FollowupCheckButton = ({ moseoverText, user, task }) => { {canSeeFollowUpCheckButton && ( - <> +
- +
)} Date: Wed, 14 May 2025 00:09:15 -0500 Subject: [PATCH 04/14] Add margin bottom to Leaderboard table and Task and TimeEntry table, fix responsibility of Single Task --- src/components/LeaderBoard/Leaderboard.css | 2 +- .../Projects/WBS/SingleTask/SingleTask.js | 323 +++++++++--------- .../WBS/WBSDetail/EditTask/EditTaskModal.jsx | 12 +- src/components/Projects/WBS/WBSDetail/wbs.css | 12 +- src/components/Timelog/Timelog.css | 3 + 5 files changed, 180 insertions(+), 172 deletions(-) diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css index 10eb693b2c..30c860343e 100644 --- a/src/components/LeaderBoard/Leaderboard.css +++ b/src/components/LeaderBoard/Leaderboard.css @@ -59,7 +59,7 @@ .my-custom-scrollbar { max-height: 500px; overflow: auto; - margin-bottom: 1rem; + margin-bottom: 50px; } .leaderboard thead th { diff --git a/src/components/Projects/WBS/SingleTask/SingleTask.js b/src/components/Projects/WBS/SingleTask/SingleTask.js index 672c767924..54d83f4419 100644 --- a/src/components/Projects/WBS/SingleTask/SingleTask.js +++ b/src/components/Projects/WBS/SingleTask/SingleTask.js @@ -88,168 +88,169 @@ function SingleTask(props) { )} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Action + + # + + Task Name + + + + + + + + + + + + + +
+
+ + {user.role === 'Volunteer' ? ( + '' + ) : ( + <> +
{task.num}{task.taskName}{task.priority} + {task?.resources && + task.resources.map((elem, i) => { + try { + if (elem.profilePic) { + return ( + + + + ); + } + return ( + + {elem.name.substring(0, 2)} + + ); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Action - - # - - Task Name - - - - - - - - - - - - - -
-
- - {user.role === 'Volunteer' ? ( - '' - ) : ( - <> -
{task.num}{task.taskName}{task.priority} - {task?.resources && - task.resources.map((elem, i) => { - try { - if (elem.profilePic) { - return ( - - - - ); - } - return ( - - {elem.name.substring(0, 2)} - - ); - - } catch (err) {} - })} - - {task.isAssigned ? ( - {task.status}{task.hoursBest}{task.hoursWorst}{task.hoursMost}{parseFloat(task.estimatedHours).toFixed(2)}{parseFloat(task.hoursLogged).toFixed(2)}{task.startedDatetime ? formatDate(task.startedDatetime) : 'N/A'}{task.dueDatetime ? formatDate(task.dueDatetime) : 'N/A'}{task.links} -
+ } catch (err) {} + })} + 		+ {task.isAssigned ? ( + {task.status}{task.hoursBest}{task.hoursWorst}{task.hoursMost}{parseFloat(task.estimatedHours).toFixed(2)}{parseFloat(task.hoursLogged).toFixed(2)}{task.startedDatetime ? formatDate(task.startedDatetime) : 'N/A'}{task.dueDatetime ? formatDate(task.dueDatetime) : 'N/A'}{task.links} +
+
diff --git a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx index ad16ec09af..ae655ed095 100644 --- a/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx +++ b/src/components/Projects/WBS/WBSDetail/EditTask/EditTaskModal.jsx @@ -751,18 +751,22 @@ function EditTaskModal(props) { { canUpdateTask && } { canSuggestTask && - } { !canUpdateTask && !canSuggestTask && - } diff --git a/src/components/Projects/WBS/WBSDetail/wbs.css b/src/components/Projects/WBS/WBSDetail/wbs.css index 989df37e74..ac738b74ad 100644 --- a/src/components/Projects/WBS/WBSDetail/wbs.css +++ b/src/components/Projects/WBS/WBSDetail/wbs.css @@ -3,6 +3,10 @@ width: calc(100% - 40px); } +.task-name { + min-width: 200px; +} + .level-space-1 { margin-left: 0px; } @@ -93,12 +97,8 @@ /* Added controlBtn class to ensure uniform margin between buttons */ .controlBtn { margin-right: 8px; /* Adds margin between buttons */ -} - - -.controlBtn { float: left; - margin-left: 10px; + /* margin-left: 10px; */ } @@ -187,7 +187,7 @@ } .tasks-table { - overflow-x: scroll; + overflow-x: auto; width: 100% !important; } diff --git a/src/components/Timelog/Timelog.css b/src/components/Timelog/Timelog.css index 805a579023..f6219ebc69 100644 --- a/src/components/Timelog/Timelog.css +++ b/src/components/Timelog/Timelog.css @@ -121,6 +121,9 @@ padding: 0 8%; margin-left: 15px; } + .container-timelog-wrapper { + margin-bottom: 50px; + } } @media screen and (max-width: 575px) and (min-width: 399px) { From b402b06c37427fc572c59eb7aea69dd960b4619e Mon Sep 17 00:00:00 2001 From: Julia Ha Date: Wed, 14 May 2025 19:23:16 -0500 Subject: [PATCH 05/14] Fix various responsiveness error in Projects, WBS and Task page: align buttons in Projects header page, align back button and title in WBS list page, fix gap in WBS list table, make task table scrollable and all information visible --- src/components/LeaderBoard/Leaderboard.css | 3 +- .../Projects/AddProject/AddProject.jsx | 1 + src/components/Projects/Overview/Overview.css | 4 +- src/components/Projects/Projects.jsx | 2 +- .../Projects/WBS/SingleTask/SingleTask.js | 4 +- .../WBS/WBSDetail/EditTask/EditTaskModal.jsx | 8 +- .../Projects/WBS/WBSDetail/Task/Task.jsx | 16 +- .../Projects/WBS/WBSDetail/WBSTasks.jsx | 198 +++++++++--------- .../Projects/WBS/WBSItem/WBSItem.jsx | 2 +- src/components/Projects/WBS/wbs.jsx | 38 ++-- 10 files changed, 128 insertions(+), 148 deletions(-) diff --git a/src/components/LeaderBoard/Leaderboard.css b/src/components/LeaderBoard/Leaderboard.css index 30c860343e..5256153cbf 100644 --- a/src/components/LeaderBoard/Leaderboard.css +++ b/src/components/LeaderBoard/Leaderboard.css @@ -16,7 +16,8 @@ border-top-color: rgb(222, 226, 230); } -.leaderboard tbody tr td, thead tr th { +.leaderboard tbody tr td, +.leaderboard thead tr th { text-align: left !important; } diff --git a/src/components/Projects/AddProject/AddProject.jsx b/src/components/Projects/AddProject/AddProject.jsx index a1babce1a9..84def92f3f 100644 --- a/src/components/Projects/AddProject/AddProject.jsx +++ b/src/components/Projects/AddProject/AddProject.jsx @@ -154,6 +154,7 @@ const AddProject = (props) => { borderColor: 'green', color: 'green', borderWidth: '1px', + marginBottom: '10px' }} > Add New Project diff --git a/src/components/Projects/Overview/Overview.css b/src/components/Projects/Overview/Overview.css index 49723e7512..4f5e0d3461 100644 --- a/src/components/Projects/Overview/Overview.css +++ b/src/components/Projects/Overview/Overview.css @@ -7,7 +7,7 @@ border-radius: 8px; height: 40px; width: 300px; - margin: 10px; + /* margin: 10px; */ padding: 10px; } @@ -20,7 +20,7 @@ border-radius: 8px; height: 40px; width: 300px; - margin: 10px; + /* margin: 10px; */ padding: 10px; } diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx index 71922ce3a3..138dda1ee1 100644 --- a/src/components/Projects/Projects.jsx +++ b/src/components/Projects/Projects.jsx @@ -222,7 +222,7 @@ const Projects = function(props) {
{fetching || !fetched ? : null} -
+

Projects

showUpDeleteModal()} style={darkMode ? boxStyleDark : boxStyle} > - Delete - {' '} -