Skip to content

Commit

Permalink
Community page changes (#511)
Browse files Browse the repository at this point in the history 
Co-authored-by: Elliot Braem <[email protected]>
  • Loading branch information
@itexpert120 @elliotBraem
itexpert120 and elliotBraem authored Nov 27, 2023
1 parent e67c2c7 commit 8e687e1
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 114 deletions.
148 changes: 49 additions & 99 deletions src/devhub/entity/community/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,118 +4,68 @@ if (!href) {
return <></>;
}

const CommunityCard = ({
format,
isBannerEnabled,
metadata,
...otherProps
}) => {
const renderFormat =
format === "small" || format === "medium" ? format : "small";
const Card = styled.div`
cursor: pointer;
background-color: white;
border-radius: 0.5rem;
padding: 1.5rem;
gap: 1rem;
height: 100%;
min-height: 12rem;
const link = href({
widgetSrc: "${REPL_DEVHUB}/widget/app",
params: { page: "community", handle: metadata.handle },
});
display: flex;
align-items: center;
justify-content: flex-start;
transition: all 300ms;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
const CommunityName = styled.h5`
color: #151515;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 41.667% */
`;
&:hover {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
const CommunityDescription = styled.p`
color: #818181;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 28.8px */
`;
img.logo {
height: 6rem;
width: 6rem;
border-radius: 50%;
const Logo = styled.img`
width: 8rem;
height: 8rem;
object-fit: cover;
}
@media screen and (max-width: 768px) {
width: 4rem;
height: 4rem;
}
`;
h3,
p {
margin: 0;
}
const formatSmall = (
<Link
{...otherProps}
to={link}
className={[
"d-flex p-0 p-lg-3",
"rounded-2 border border-2",
"text-black text-decoration-none attractable flex-grow-1",
].join(" ")}
style={{
background: isBannerEnabled
? `center / cover no-repeat url(${metadata.banner_url})`
: "#ffffff",
}}
>
<div
className="d-flex align-items-center gap-3 rounded-4 w-100 h-100"
style={{
background: "rgba(255, 255, 255, 0.9)",
backdropFilter: "blur(4px)",
padding: "3rem 1rem",
}}
>
<Logo
alt="Community logo"
className="flex-shrink-0 rounded-circle attractable"
src={metadata.logo_url}
/>
h3 {
font-size: 1.25rem;
font-weight: 600;
}
<div className="d-flex flex-column justify-content-center gap-1 w-100">
<CommunityName
style={{ textOverflow: "ellipsis", wordWrap: "break-word" }}
>
{metadata.name}
</CommunityName>
p {
font-size: 1rem;
font-weight: 400;
}
`;

<CommunityDescription
style={{ textOverflow: "ellipsis", wordWrap: "break-word" }}
>
{metadata.description}
</CommunityDescription>
</div>
</div>
</Link>
);
const CommunityCard = ({ metadata }) => {
const { handle, logo_url, name, description } = metadata;
const link = href({
widgetSrc: "${REPL_DEVHUB}/widget/app",
params: { page: "community", handle: handle },
});

const formatMedium = (
<Link
className="card d-flex flex-column flex-shrink-0 text-decoration-none text-reset attractable"
to={link}
style={{ width: "23%", maxWidth: 304 }}
>
<div
className="card-img-top w-100"
style={{
background: `center / cover no-repeat url(${metadata.banner_url})`,
height: 164,
}}
/>
return (
<Link to={link} style={{ all: "unset" }}>
<Card>
<img className="logo" src={logo_url} />

<div className="d-flex flex-column gap-2 p-3 card-text">
<h5 class="h5 m-0">{metadata.name}</h5>
<span class="text-secondary text-wrap">{metadata.description}</span>
</div>
<div className="d-flex flex-column justify-content-center gap-1 w-100">
<h3>{name}</h3>
<p>{description}</p>
</div>
</Card>
</Link>
);

return {
small: formatSmall,
medium: formatMedium,
}[renderFormat];
};

return CommunityCard(props);
39 changes: 24 additions & 15 deletions src/devhub/page/communities.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,16 @@ const CardGrid = styled.div`
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
@media screen and (max-width: 1000px) {
@media screen and (max-width: 992px) {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 2rem;
}
`;
Expand All @@ -122,25 +126,30 @@ return (
Communities
</h1>

<div className="d-flex flex-column-reverse flex-lg-row gap-3 justify-content-between align-items-center">
<div className="d-flex flex-column flex-lg-row col-12 col-md-6 mt-3 mt-lg-0 align-items-center gap-4 col-lg-6">
<div className="d-flex flex-column-reverse flex-sm-row gap-3 justify-content-between align-items-center">
<div className="d-flex flex-column flex-sm-row col-12 col-sm-6 mt-3 mt-lg-0 align-items-center gap-4">
<input
type="text"
placeholder="🔍 Search Communities"
className="form-control w-100"
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
/>
<select
class="form-select"
onChange={(e) => setSort(e.target.value)}
>
<option selected value="">
Sort
</option>
<option value="a-z">A-Z</option>
<option value="z-a">Z-A</option>
</select>
<div className="d-flex align-items-center gap-2 col-sm-6 col-12">
<label htmlFor="sort">Sort:</label>
<select
name="sort"
id="sort"
class="form-select"
onChange={(e) => setSort(e.target.value)}
>
<option selected value="">
Latest
</option>
<option value="a-z">A-Z</option>
<option value="z-a">Z-A</option>
</select>
</div>
</div>
{context.accountId && (
<div className="d-flex flex-column justify-content-center">
Expand Down

0 comments on commit 8e687e1

Please sign in to comment.