Skip to content

Feature 2288 guild community badges #2318

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
mvolkmann merged 4 commits into from
May 3, 2024
Merged

Feature 2288 guild community badges #2318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e0f26d
added community/guild icon in GuildSummaryCard
mvolkmann May 2, 2024
f3128eb
updated title for Guilds page
mvolkmann May 2, 2024
8a7f4d2
Merge branch 'develop' into feature-2288-guild-community-badges
mvolkmann May 2, 2024
1cfe74e
updated some snapshot tests
mvolkmann May 2, 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
17 changes: 15 additions & 2 deletions web-ui/src/components/guild-results/GuildSummaryCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import EditGuildModal from './EditGuildModal';
import { Link } from 'react-router-dom';
import { Link as StyledLink } from '@mui/material';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHammer, faPeopleGroup } from '@fortawesome/free-solid-svg-icons';

import {
Button,
Card,
Expand All @@ -32,14 +35,20 @@ const classes = {
};
const StyledCard = styled(Card)(() => ({
[`&.${classes.card}`]: {
width: '340px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between'
justifyContent: 'space-between',
position: 'relative',
Copy link
Collaborator Author

@mvolkmann mvolkmann May 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An icon will be positioned relative to this card element.

width: '340px'
},
[`& .${classes.header}`]: {
width: '100%'
},
['& [data-icon]']: {
position: 'absolute',
right: '1rem',
top: '1rem'
},
[`& .${classes.title}`]: {
overflow: 'hidden',
textOverflow: 'ellipsis',
Expand Down Expand Up @@ -128,6 +137,10 @@ const GuildSummaryCard = ({ guild, index, isOpen, onGuildSelect }) => {

return (
<StyledCard className={classes.card}>
<FontAwesomeIcon
icon={guild.community ? faPeopleGroup : faHammer}
size="2x"
/>
<CardHeader
classes={{
content: classes.header,
Expand Down
34 changes: 32 additions & 2 deletions web-ui/src/components/guild-results/__snapshots__/GuildResults.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,23 @@ exports[`renders correctly 1`] = `
class="guilds"
>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1vzgej0-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -163,8 +178,23 @@ exports[`renders correctly 1`] = `
</div>
</div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1vzgej0-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down
51 changes: 48 additions & 3 deletions web-ui/src/components/guild-results/__snapshots__/GuildSummaryCard.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,23 @@
exports[`renders correctly 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1vzgej0-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -52,8 +67,23 @@ exports[`renders correctly 1`] = `
exports[`renders correctly for ADMIN 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1vzgej0-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down Expand Up @@ -142,8 +172,23 @@ exports[`renders correctly for ADMIN 1`] = `
exports[`renders correctly for guild lead 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1vzgej0-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root GuildSummaryCard-card css-1xtmct9-MuiPaper-root-MuiCard-root"
>
<svg
aria-hidden="true"
class="svg-inline--fa fa-hammer fa-2x "
data-icon="hammer"
data-prefix="fas"
focusable="false"
role="img"
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M413.5 237.5c-28.2 4.8-58.2-3.6-80-25.4l-38.1-38.1C280.4 159 272 138.8 272 117.6V105.5L192.3 62c-5.3-2.9-8.6-8.6-8.3-14.7s3.9-11.5 9.5-14l47.2-21C259.1 4.2 279 0 299.2 0h18.1c36.7 0 72 14 98.7 39.1l44.6 42c24.2 22.8 33.2 55.7 26.6 86L503 183l8-8c9.4-9.4 24.6-9.4 33.9 0l24 24c9.4 9.4 9.4 24.6 0 33.9l-88 88c-9.4 9.4-24.6 9.4-33.9 0l-24-24c-9.4-9.4-9.4-24.6 0-33.9l8-8-17.5-17.5zM27.4 377.1L260.9 182.6c3.5 4.9 7.5 9.6 11.8 14l38.1 38.1c6 6 12.4 11.2 19.2 15.7L134.9 484.6c-14.5 17.4-36 27.4-58.6 27.4C34.1 512 0 477.8 0 435.7c0-22.6 10.1-44.1 27.4-58.6z"
fill="currentColor"
/>
</svg>
<div
class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
>
Expand Down
2 changes: 1 addition & 1 deletion web-ui/src/components/menu/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const adminLinks = [
];

const directoryLinks = [
['/guilds', 'Guilds'],
['/guilds', 'Guilds & Communities'],
['/people', 'People'],
['/teams', 'Teams']
];
Expand Down
12 changes: 6 additions & 6 deletions web-ui/src/components/menu/__snapshots__/Menu.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ exports[`<Menu /> > renders correctly 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down Expand Up @@ -281,7 +281,7 @@ exports[`<Menu /> > renders correctly 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down Expand Up @@ -500,7 +500,7 @@ exports[`<Menu /> > renders correctly for admin 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down Expand Up @@ -668,7 +668,7 @@ exports[`<Menu /> > renders correctly for admin 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down Expand Up @@ -892,7 +892,7 @@ exports[`<Menu /> > renders correctly for pdl 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down Expand Up @@ -1029,7 +1029,7 @@ exports[`<Menu /> > renders correctly for pdl 1`] = `
<span
class="MuiTypography-root MuiTypography-body1 MuiListItemText-primary Menu-subListItem css-10hburv-MuiTypography-root"
>
Guilds
Guilds & Communities
</span>
</div>
</a>
Expand Down
4 changes: 1 addition & 3 deletions web-ui/src/components/routes/Routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,7 @@ export default function Routes() {
<TeamsPage />
</Route>
<Route path="/guilds">
<Header title="Guilds">
<GroupIcon fontSize="large" />
</Header>
<Header title="Guilds & Communities" />
<GuildsPage />
</Route>
<Route exact path="/">
Expand Down