Skip to content

Bugfix 2720/homepage crammed #2723

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

Merged
merged 3 commits into from
Nov 6, 2024
Merged

Bugfix 2720/homepage crammed #2723

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3e0745
Merge pull request #2717 from objectcomputing/bugfix-2678/too-many-em…
mkimberlin Nov 5, 2024
d538fba
Use Mui Grid for the anniversaries, birthdays, and kudos to allow the…
ocielliottc Nov 5, 2024
1d74bb9
Updated snapshot.
ocielliottc Nov 5, 2024
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
27 changes: 21 additions & 6 deletions web-ui/src/pages/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import MyBirthday from '../components/celebrations/MyBirthday';
import { AppContext } from '../context/AppContext';
import { selectCsrfToken, selectCurrentUser } from '../context/selectors';
import { sortAnniversaries, sortBirthdays } from '../context/util';
import { Button } from '@mui/material';
import { Button, Grid } from '@mui/material';

import './HomePage.css';

Expand Down Expand Up @@ -76,6 +76,13 @@ export default function HomePage() {
return document.cookie.indexOf("OJWT=") != -1;
}

// This width matches the birthdays-card and anniversaries-card style.
// However, we do not want to set this width on the PublicKudos css as it is
// used elsewhere and does not need to have it's width restricted. This only
// applies if if we have birthdays or anniversaries to display on this page.
const kudosStyle = birthdays.length == 0 &&
anniversaries.length == 0 ? {} : { width: '450px' };

return (
<div className="home-page">
<div className="celebrations">
Expand All @@ -87,11 +94,19 @@ export default function HomePage() {
myAnniversary={myAnniversaryData}
/>
) : (
<>
{ anniversaries.length > 0 && (<Anniversaries anniversaries={anniversaries} />) }
{ birthdays.length > 0 && (<Birthdays birthdays={birthdays} />) }
<PublicKudos />
</>
<Grid container spacing={2} style={{ padding: '0 20px 0 20px' }}>
{ anniversaries.length > 0 && (
<Grid item>
<Anniversaries anniversaries={anniversaries} />
</Grid>) }
{ birthdays.length > 0 && (
<Grid item>
<Birthdays birthdays={birthdays} />
</Grid>) }
<Grid item style={kudosStyle}>
<PublicKudos />
</Grid>
</Grid>
)}
</div>
{checkForImpersonation() &&
Expand Down
79 changes: 44 additions & 35 deletions web-ui/src/pages/__snapshots__/HomePage.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,49 +9,58 @@ exports[`renders correctly 1`] = `
class="celebrations"
>
<div
class="public-kudos"
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-2 css-mhc70k-MuiGrid-root"
style="padding: 0px 20px 0px 20px;"
>
<div
class="kudos-title"
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<h1>
Kudos
</h1>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary kudos-dialog-open css-1e6y48t-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
<div
class="public-kudos"
>
<span
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
<div
class="kudos-title"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="StarIcon"
focusable="false"
viewBox="0 0 24 24"
<h1>
Kudos
</h1>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary kudos-dialog-open css-1e6y48t-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
<path
d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
<span
class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
data-testid="StarIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
/>
</svg>
</span>
Give Kudos
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</svg>
</span>
Give Kudos
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
</button>
</div>
<div
class="kudos-list"
/>
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-zow5z4-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
>
<div
class="kudos-list"
/>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading