Skip to content

Commit

Permalink
contribution card update
Browse files Browse the repository at this point in the history
  • Loading branch information
@hemarina
hemarina committed Sep 19, 2023
1 parent b1eee8a commit b18928d
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 66 deletions.
151 changes: 86 additions & 65 deletions website/src/components/gallery/ShowcaseCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ import {
CardPreview,
Link as FluentUILink,
ToggleButton,
Input,
Popover,
PopoverTrigger,
PopoverSurface,
} from "@fluentui/react-components";
import { useBoolean } from "@fluentui/react-hooks";
import {
Expand Down Expand Up @@ -50,9 +54,8 @@ const TagComp = React.forwardRef<HTMLLIElement, Tag>(
style={{
alignContent: "center",
borderColor: "#E0E0E0",
fontSize: "10px",
color: "#616161",
margin: "2px",
fontSize: "10px",
}}
>
{label}
Expand All @@ -74,30 +77,33 @@ function ShowcaseCardTag({
TagList.indexOf(tagObject.tag)
);

const checkAzureTag = tagObjectsSorted.filter((tag) =>
tag.label.includes("Azure")
);

const length = tagObjectsSorted.length;
const rest = length - 8;
let number = 11;
if (checkAzureTag.length > 5) {
number = 9;
}
const rest = length - number;

if (moreTag) {
if (length > 8) {
if (length > number) {
return (
<>
{tagObjectsSorted.slice(0, 8).map((tagObject, index) => {
{tagObjectsSorted.slice(0, number).map((tagObject, index) => {
const id = `showcase_card_tag_${tagObject.tag}`;
return (
<div>
<TagComp key={index} id={id} {...tagObject} />
</div>
);
return <TagComp key={index} id={id} {...tagObject} />;
})}
<Badge
appearance="outline"
size="medium"
style={{
alignContent: "center",
borderColor: "#E0E0E0",
fontSize: "10px",
color: "#616161",
margin: "2px 0",
fontSize: "10px",
}}
>
+ {rest} more
Expand All @@ -110,11 +116,7 @@ function ShowcaseCardTag({
{tagObjectsSorted.map((tagObject, index) => {
const id = `showcase_card_tag_${tagObject.tag}`;

return (
<div>
<TagComp key={index} id={id} {...tagObject} />
</div>
);
return <TagComp key={index} id={id} {...tagObject} />;
})}
</>
);
Expand All @@ -126,8 +128,23 @@ function ShowcaseCardTag({
const id = `showcase_card_tag_${tagObject.tag}`;

return (
<div>
<TagComp key={index} id={id} {...tagObject} />
<div
key={index}
id={id}
style={{
height: "20px",
alignContent: "center",
border: "1px solid #E0E0E0",
padding: "0 5px",
marginTop: "3px",
fontSize: "10px",
minWidth: "0px",
color: "#616161",
fontWeight: "500",
borderRadius: "100px",
}}
>
{tagObject.label}
</div>
);
})}
Expand Down Expand Up @@ -208,7 +225,7 @@ const useStyles = makeStyles({
card: {
...shorthands.margin("auto"),
width: "350px",
height: "368px",
height: "353px",
maxWidth: "100%",
maxHeight: "100%",
minWidth: "300px",
Expand Down Expand Up @@ -321,8 +338,9 @@ function ShowcaseCard({ user }: { user: User }) {
key={user.title}
className={styles.card}
style={{
background: "linear-gradient(#FAFAFA 0 0)bottom/100% 45px no-repeat",
background: "linear-gradient(#FAFAFA 0 0)bottom/100% 52px no-repeat",
borderRadius: "8px",
padding: "16px",
}}
>
<CardHeader
Expand Down Expand Up @@ -437,7 +455,7 @@ function ShowcaseCard({ user }: { user: User }) {
style={{
display: "flex",
overflow: "hidden",
columnGap: "5px",
gap: "4px",
flexFlow: "wrap",
}}
onClick={openPanel}
Expand All @@ -449,42 +467,41 @@ function ShowcaseCard({ user }: { user: User }) {
<CardPreview
style={{ borderTop: "solid #F0F0F0", backgroundColor: "#FAFAFA" }}
></CardPreview>
<CardFooter
// style={{ display: "flex", justifyContent:'center',alignItems: "center", width: "100%" }}
>
<Button
style={{ padding: "0px", fontWeight: "100" }}
onClick={() => {
navigator.clipboard.writeText(azdInitCommand);
}}
>
<div
className={styles.cardFooterAzdCommand}
style={{
whiteSpace: "nowrap",
overflow: "hidden",
paddingLeft: "3px",
}}
>
{azdInitCommand}
</div>
</Button>
<Button
<CardFooter>
<Input
size="small"
className={styles.cardFooterAzdCommand}
defaultValue={azdInitCommand}
style={{
fontSize: "11px",
minWidth: "36px",
padding: "0px",
color: "white",
backgroundColor: "#7160E8",
borderColor: "#7160E8",
fontWeight: "100",
flex: "1",
minHeight: "20px",
padding: "3px",
}}
onClick={() => {
navigator.clipboard.writeText(azdInitCommand);
}}
>
Copy
</Button>
/>
<Popover withArrow size="small">
<PopoverTrigger disableButtonEnhancement>
<Button
style={{
fontSize: "11px",
minWidth: "36px",
padding: "0px",
color: "white",
backgroundColor: "#7160E8",
borderColor: "#7160E8",
fontWeight: "100",
}}
onClick={() => {
navigator.clipboard.writeText(azdInitCommand);
}}
>
Copy
</Button>
</PopoverTrigger>

<PopoverSurface style={{ padding: "5px", fontSize: "12px" }}>
<div>Copied!</div>
</PopoverSurface>
</Popover>
</CardFooter>
</Card>
);
Expand All @@ -509,7 +526,11 @@ export function ShowcaseContributionCard(): React.ReactElement {
return null;
}
return (
<Card className={styles.card} id="contributionCard">
<Card
className={styles.card}
id="contributionCard"
style={{ padding: "24px", borderRadius: "8px" }}
>
<ToggleButton
onClick={() => closeCard("contributionCard")}
size="small"
Expand All @@ -533,7 +554,7 @@ export function ShowcaseContributionCard(): React.ReactElement {
<div
style={{
color: "#242424",
fontSize: "24px",
fontSize: "20px",
fontWeight: "550",
height: "0px",
}}
Expand All @@ -543,7 +564,7 @@ export function ShowcaseContributionCard(): React.ReactElement {
<div
style={{
color: "#242424",
fontSize: "14px",
fontSize: "12px",
}}
>
<p
Expand All @@ -561,14 +582,15 @@ export function ShowcaseContributionCard(): React.ReactElement {
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div style={{ display: "flex", paddingTop: "10px" }}>
<CardFooter>
<Button
size="small"
style={{
flex: 1,
color: "#ffffff",
fontSize: "14px",
fontSize: "12px",
backgroundColor: "#7160E8",
borderColor: "#7160E8",
height: "32px",
whiteSpace: "nowrap",
fontWeight: "550",
Expand All @@ -582,7 +604,7 @@ export function ShowcaseContributionCard(): React.ReactElement {
style={{
flex: 1,
color: "#7160E8",
fontSize: "14px",
fontSize: "12px",
height: "32px",
whiteSpace: "nowrap",
fontWeight: "550",
Expand All @@ -591,7 +613,7 @@ export function ShowcaseContributionCard(): React.ReactElement {
>
Request a template
</Button>
</div>
</CardFooter>
</Card>
);
}
Expand Down Expand Up @@ -681,9 +703,8 @@ function ShowcaseCardPanel({ user }: { user: User }) {
style={{
display: "flex",
overflow: "hidden",
columnGap: "5px",
gap: "4px",
flexFlow: "wrap",
padding: "5px 0",
}}
>
<ShowcaseCardTag tags={user.tags} moreTag={false} />
Expand Down
2 changes: 1 addition & 1 deletion website/src/data/tags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,7 @@ export const Tags: { [type in TagType]: Tag } = {
type: "Database",
},
"azuredb-postgreSQL": {
label: "Azure Database for PostgreSQL",
label: "Azure PostgreSQL",
description: "Template architecture uses Azure Database for PostgreSQL",
azureIcon: "./img/Azure-Application-Insights.svg", //TODO
url: "https://azure.microsoft.com/products/postgresql",
Expand Down

0 comments on commit b18928d

Please sign in to comment.