Skip to content

Julia - Fix leaderboard GUI #4657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JuliaHa0902 wants to merge 2 commits into
base: development
Choose a base branch
from
Open

Julia - Fix leaderboard GUI #4657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9cc8b6e
Fix leaderboard responsiveness
JuliaHa0902 Dec 31, 2025
8404fd0
Update test to match new Leaderboard
JuliaHa0902 Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 26 additions & 15 deletions src/components/LeaderBoard/Leaderboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ function LeaderBoard({

useEffect(() => {
const checkAbbreviatedView = () => {
const isAbbrev = window.innerWidth < window.screen.width * 0.75;
const isAbbrev = window.innerWidth < 1300;
setIsAbbreviatedView(isAbbrev);
};

Expand Down Expand Up @@ -674,7 +674,10 @@ function LeaderBoard({
</div>
</Alert>
)}
<div id="leaderboard" className="my-custom-scrollbar table-wrapper-scroll-y mb-5">
<div
id="leaderboard"
className={`${styles['my-custom-scrollbar']} ${styles['table-wrapper-scroll-y']} mb-5`}
>
<div className="search-container mx-1">
<input
className={`form-control col-12 mb-2 ${
Expand All @@ -688,12 +691,11 @@ function LeaderBoard({
</div>
<Table
data-testid="dark-mode-table"
className={`leaderboard table-fixed ${
className={`${styles.leaderboard} ${styles['table-fixed']} ${
darkMode ? 'text-light dark-mode bg-yinmn-blue' : ''
} ${isAbbreviatedView ? 'abbreviated-mode' : ''}`}
style={{ minWidth: '500px' }}
} ${isAbbreviatedView ? styles['abbreviated-mode'] : ''}`}
>
<thead className="responsive-font-size">
<thead className={styles['responsive-font-size']}>
<tr className={darkMode ? 'bg-space-cadet' : ''} style={darkModeStyle}>
<th style={darkModeStyle}>
<span>{isAbbreviatedView ? 'Stat.' : 'Status'}</span>
Expand Down Expand Up @@ -743,11 +745,17 @@ function LeaderBoard({
</th>
</tr>
</thead>
<tbody className="my-custome-scrollbar responsive-font-size">
<tr className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}>
<tbody
className={`${styles['my-custom-scrollbar']} ${styles['responsive-font-size']}`}
>
<tr
className={
darkMode ? styles['dark-leaderboard-row'] : styles['light-leaderboard-row']
}
>
{isAbbreviatedView ? (
<td colSpan={2}>
<div className="leaderboard-totals-container text-center">
<div className={`${styles['leaderboard-totals-container']} text-center`}>
<span>{stateOrganizationData.name}</span>
{viewZeroHouraMembers(loggedInUser.role) && (
<span className="leaderboard-totals-title">
Expand All @@ -761,10 +769,10 @@ function LeaderBoard({
) : (
<>
<td aria-label="Placeholder" />
<td className="leaderboard-totals-container">
<td className={`${styles['leaderboard-totals-container']}`}>
<span>{stateOrganizationData.name}</span>
{viewZeroHouraMembers(loggedInUser.role) && (
<span className="leaderboard-totals-title">
<span className={`${styles['leaderboard-totals-title']}`}>
0 hrs Totals:{' '}
{filteredUsers.filter(user => user.weeklycommittedHours === 0).length}{' '}
Members
Expand Down Expand Up @@ -798,7 +806,7 @@ function LeaderBoard({
color="primary"
/>
</td>
<td className="align-middle">
<td className="align-middle" colSpan={2}>
<span title="Tangible + Intangible time = Total time">
{filteredUsers
.reduce((total, user) => total + parseFloat(user.totaltime), 0)
Expand All @@ -809,7 +817,6 @@ function LeaderBoard({
.toFixed(2)}
</span>
</td>
<td aria-label="Placeholder" />
</tr>
{filteredUsers.map(item => {
const { hasTimeOff, isCurrentlyOff, additionalWeeks } = getTimeOffStatus(
Expand All @@ -823,7 +830,9 @@ function LeaderBoard({
return (
<tr
key={item.personId}
className={darkMode ? 'dark-leaderboard-row' : 'light-leaderboard-row'}
className={
darkMode ? styles['dark-leaderboard-row'] : styles['light-leaderboard-row']
}
>
<td className="align-middle">
<div>
Expand Down Expand Up @@ -1072,7 +1081,9 @@ function LeaderBoard({
title={mouseoverTextValue}
id="Total time"
className={
item.totalintangibletime_hrs > 0 ? 'leaderboard-totals-title' : null
item.totalintangibletime_hrs > 0
? styles['leaderboard-totals-title']
: null
}
>
{item.totaltime}
Expand Down
27 changes: 14 additions & 13 deletions src/components/LeaderBoard/Leaderboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
@media (max-width: 544px) {
.leaderboard {
font-size: 0.7rem;
min-width: 400px;
} /*1rem = 16px*/

.my-custom-scrollbar {
Expand All @@ -67,6 +68,10 @@
border-top-style: solid;
border-top-color: rgb(222, 226, 230);
}

.responsive-font-size {
font-size: 0.75rem !important;
}
}
.row {
width: 97%;
Expand Down Expand Up @@ -103,20 +108,16 @@
flex-direction: column;
}

@media screen and (max-width: 544px) {
@media (max-width: 1300px) {
.leaderboard thead th {
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.5rem 0.3rem;
vertical-align: middle;
}
.responsive-font-size {
font-size: 0.75rem !important;
}
}


.leaderboard.abbreviated-mode thead th {
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
min-width: 70px;
padding: 0.5rem 0.3rem;
vertical-align: middle;
}
2 changes: 1 addition & 1 deletion src/components/LeaderBoard/__tests__/Leaderboard.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ describe('Leaderboard page structure', () => {

it('displays correct Total Time label and value', () => {
renderWithProvider(<Leaderboard {...props} />);
const header = screen.getByText('Total Time');
const header = screen.getByText(content => content === 'Total Time' || content === 'Tot. Time');
expect(header).toBeInTheDocument();

const timeValue = screen.getByTitle('Tangible + Intangible time = Total time');
Expand Down
Loading