Skip to content

Commit 713022e

Browse files
WilfordGrimleyWilfordGrimley
committed
Frontend content pass: drop Wiki/Donate, reorder Print! tabs with flags, generalize MPC copy
- Navbar: remove the Wiki nav link and Donate dropdown (and their orphaned SupportDeveloperModal/SupportBackendModal components, registrations, and modal-type entries — nothing else referenced them) - Print! page: reorder tabs to PDF, PringlePrints, MakePlayingCards, NotMPC and swap the three printshop tabs' icons for country flags (Canada/China/ USA, inline SVG rather than emoji so they render correctly on Windows) - Footer's GitHub link now points at our own fork instead of upstream - Generalize MakePlayingCards-specific copy on pages outside the Print! tab/desktop-tool flow (homepage, editor title, DPI filter blurb, about page disclaimer) to reflect that the site supports multiple print shops without favoring one
1 parent a6a90bc commit 713022e

13 files changed

Lines changed: 132 additions & 261 deletions

File tree

‎frontend/src/common/types.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,8 +215,6 @@ export type Modals =
215215
| "cardDetailedView"
216216
| "gridSelector"
217217
| "changeQuery"
218-
| "supportDeveloper"
219-
| "supportBackend"
220218
| "invalidIdentifiers"
221219
| "PDFGenerator";
222220

‎frontend/src/components/NavBanner.tsx‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ import {
1010

1111
import { RightPaddedIcon } from "./icon";
1212

13+
const RightPaddedSpan = styled.span`
14+
padding-right: 0.5em;
15+
`;
16+
1317
const StyledNav = styled(Nav)<{ position?: "top" | "bottom" }>`
1418
box-shadow: 0
1519
${({ position }) =>
@@ -22,6 +26,7 @@ export interface NavBannerItem<T extends string> {
2226
label: string | React.ReactElement;
2327
disabled?: boolean;
2428
bootstrapIconName?: string;
29+
icon?: React.ReactNode;
2530
}
2631

2732
interface NavBannerProps<T extends string> {
@@ -37,24 +42,27 @@ export const NavBanner = <T extends string>({
3742
}: NavBannerProps<T>) => {
3843
return (
3944
<StyledNav justify variant={variant} position={position}>
40-
{items.map(({ key, label, disabled = false, bootstrapIconName }) => (
41-
<Nav.Item
42-
key={key}
43-
style={{
44-
height:
45-
(variant === "pills"
46-
? NavPillButtonHeight
47-
: NavUnderlineButtonHeight) + "px",
48-
}}
49-
>
50-
<Nav.Link disabled={disabled} eventKey={key}>
51-
{bootstrapIconName && (
52-
<RightPaddedIcon bootstrapIconName={bootstrapIconName} />
53-
)}
54-
{label}
55-
</Nav.Link>
56-
</Nav.Item>
57-
))}
45+
{items.map(
46+
({ key, label, disabled = false, bootstrapIconName, icon }) => (
47+
<Nav.Item
48+
key={key}
49+
style={{
50+
height:
51+
(variant === "pills"
52+
? NavPillButtonHeight
53+
: NavUnderlineButtonHeight) + "px",
54+
}}
55+
>
56+
<Nav.Link disabled={disabled} eventKey={key}>
57+
{icon && <RightPaddedSpan>{icon}</RightPaddedSpan>}
58+
{!icon && bootstrapIconName && (
59+
<RightPaddedIcon bootstrapIconName={bootstrapIconName} />
60+
)}
61+
{label}
62+
</Nav.Link>
63+
</Nav.Item>
64+
)
65+
)}
5866
</StyledNav>
5967
);
6068
};

‎frontend/src/components/flags.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import styled from "@emotion/styled";
2+
import React from "react";
3+
4+
const FlagSvg = styled.svg`
5+
width: 1.4em;
6+
height: 1em;
7+
vertical-align: -0.15em;
8+
`;
9+
10+
const MapleLeafPath =
11+
"M12 2 L13 5 L16 3.8 L14.6 6.4 L17.2 6.8 L14.7 8.3 L16.3 10.7 L13.3 10 " +
12+
"L13.7 13 L12 11.2 L10.3 13 L10.7 10 L7.7 10.7 L9.3 8.3 L6.8 6.8 L9.4 6.4 " +
13+
"L8 3.8 L11 5 Z";
14+
15+
export const CanadaFlag = () => (
16+
<FlagSvg viewBox="0 0 24 16" role="img" aria-label="Canada flag">
17+
<rect width="24" height="16" fill="#FFFFFF" />
18+
<rect width="6" height="16" fill="#FF0000" />
19+
<rect x="18" width="6" height="16" fill="#FF0000" />
20+
<path d={MapleLeafPath} fill="#FF0000" />
21+
</FlagSvg>
22+
);
23+
24+
const smallStar = (cx: number, cy: number, r: number) => {
25+
const points = Array.from({ length: 10 }, (_, i) => {
26+
const angle = (Math.PI / 5) * i - Math.PI / 2;
27+
const radius = i % 2 === 0 ? r : r * 0.4;
28+
return `${(cx + radius * Math.cos(angle)).toFixed(2)},${(
29+
cy +
30+
radius * Math.sin(angle)
31+
).toFixed(2)}`;
32+
});
33+
return points.join(" ");
34+
};
35+
36+
export const ChinaFlag = () => (
37+
<FlagSvg viewBox="0 0 24 16" role="img" aria-label="China flag">
38+
<rect width="24" height="16" fill="#DE2910" />
39+
<polygon points={smallStar(5, 5, 2.6)} fill="#FFDE00" />
40+
<polygon points={smallStar(9.5, 2.2, 0.9)} fill="#FFDE00" />
41+
<polygon points={smallStar(11, 4.7, 0.9)} fill="#FFDE00" />
42+
<polygon points={smallStar(11, 7.5, 0.9)} fill="#FFDE00" />
43+
<polygon points={smallStar(9.2, 9.7, 0.9)} fill="#FFDE00" />
44+
</FlagSvg>
45+
);
46+
47+
export const USAFlag = () => (
48+
<FlagSvg viewBox="0 0 24 16" role="img" aria-label="USA flag">
49+
<rect width="24" height="16" fill="#FFFFFF" />
50+
{Array.from({ length: 7 }, (_, i) => (
51+
<rect
52+
key={i}
53+
y={(i * 16) / 13}
54+
width="24"
55+
height={16 / 13}
56+
fill="#B22234"
57+
/>
58+
))}
59+
<rect width="10" height={(16 * 7) / 13} fill="#3C3B6E" />
60+
{Array.from({ length: 5 }, (_, row) =>
61+
Array.from({ length: row % 2 === 0 ? 3 : 2 }, (_, col) => (
62+
<circle
63+
key={`${row}-${col}`}
64+
cx={1.7 + col * 2.8 + (row % 2 === 0 ? 0 : 1.4)}
65+
cy={0.9 + row * 1.6}
66+
r="0.4"
67+
fill="#FFFFFF"
68+
/>
69+
))
70+
)}
71+
</FlagSvg>
72+
);

‎frontend/src/features/export/FinishedMyProject.tsx‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from "@/common/constants";
1717
import { useAppDispatch, useAppSelector } from "@/common/types";
1818
import { Coffee } from "@/components/Coffee";
19-
import { RightPaddedIcon } from "@/components/icon";
19+
import { CanadaFlag, ChinaFlag, USAFlag } from "@/components/flags";
2020
import { MakePlayingCardsLink } from "@/components/MakePlayingCardsLink";
2121
import { NavBanner, NavBannerItem } from "@/components/NavBanner";
2222
import { NotMPCLink } from "@/components/NotMPCLink";
@@ -393,16 +393,12 @@ const PringlePrintsInstructions = () => {
393393
type FinishedMyProjectExportType = "mpc" | "notmpc" | "pringleprints" | "pdf";
394394

395395
export function FinishedMyProject() {
396-
const [key, setKey] = useState<FinishedMyProjectExportType>("mpc");
396+
const [key, setKey] = useState<FinishedMyProjectExportType>("pringleprints");
397397
const navBannerItems: Array<NavBannerItem<FinishedMyProjectExportType>> = [
398-
{ key: "mpc", label: "MakePlayingCards", bootstrapIconName: "bag-check" },
399-
{ key: "notmpc", label: "NotMPC", bootstrapIconName: "box-seam" },
400-
{
401-
key: "pringleprints",
402-
label: "PringlePrints",
403-
bootstrapIconName: "geo-alt",
404-
},
405398
{ key: "pdf", label: "PDF", bootstrapIconName: "file-pdf" },
399+
{ key: "pringleprints", label: "PringlePrints", icon: <CanadaFlag /> },
400+
{ key: "mpc", label: "MakePlayingCards", icon: <ChinaFlag /> },
401+
{ key: "notmpc", label: "NotMPC", icon: <USAFlag /> },
406402
];
407403
return (
408404
<Tab.Container
@@ -418,22 +414,22 @@ export function FinishedMyProject() {
418414
}
419415
>
420416
<Tab.Content>
421-
<Tab.Pane eventKey="mpc">
422-
<MakePlayingCardsInstructions />
423-
</Tab.Pane>
424-
<Tab.Pane eventKey="notmpc">
425-
<NotMPCInstructions />
426-
</Tab.Pane>
427-
<Tab.Pane eventKey="pringleprints">
428-
<PringlePrintsInstructions />
429-
</Tab.Pane>
430417
<Tab.Pane eventKey="pdf" mountOnEnter>
431418
<PDFGenerator
432419
heightDelta={
433420
NavPillButtonHeight + NavUnderlineButtonHeight + NavbarHeight
434421
}
435422
/>
436423
</Tab.Pane>
424+
<Tab.Pane eventKey="pringleprints">
425+
<PringlePrintsInstructions />
426+
</Tab.Pane>
427+
<Tab.Pane eventKey="mpc">
428+
<MakePlayingCardsInstructions />
429+
</Tab.Pane>
430+
<Tab.Pane eventKey="notmpc">
431+
<NotMPCInstructions />
432+
</Tab.Pane>
437433
</Tab.Content>
438434
</OverflowCol>
439435
</Tab.Container>

‎frontend/src/features/modals/Modals.tsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { MemoizedCardDetailedView } from "@/features/cardDetailedView/CardDetail
55
import { ChangeQueryModal } from "@/features/changeQuery/ChangeQueryModal";
66
import { InvalidIdentifiersModal } from "@/features/invalidIdentifiers/InvalidIdentifiersModal";
77
import { PDFGeneratorModal } from "@/features/pdf/PDFGeneratorModal";
8-
import { SupportBackendModal } from "@/features/support/SupportBackendModal";
9-
import { SupportDeveloperModal } from "@/features/support/SupportDeveloperModal";
108
import {
119
hideModal,
1210
selectModalProps,
@@ -51,14 +49,6 @@ export function Modals() {
5149
)}
5250
</>
5351
)}
54-
<SupportDeveloperModal
55-
show={shownModal === "supportDeveloper"}
56-
handleClose={handleClose}
57-
/>
58-
<SupportBackendModal
59-
show={shownModal === "supportBackend"}
60-
handleClose={handleClose}
61-
/>
6252
<InvalidIdentifiersModal
6353
show={shownModal === "invalidIdentifiers"}
6454
handleClose={handleClose}

‎frontend/src/features/searchSettings/FilterSettings.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,9 @@ export function FilterSettings({
4646
At a fixed physical size, a higher DPI yields a higher resolution
4747
print.
4848
<br />
49-
MakePlayingCards prints cards up to <b>800 DPI</b>, meaning an 800 DPI
50-
print and a 1200 DPI print will <b>look the same</b>.
49+
Print resolution has a practical ceiling, though &mdash; beyond a
50+
certain point, a higher DPI print will <b>look the same</b> as a lower
51+
one.
5152
<br />
5253
<br />
5354
</>

‎frontend/src/features/support/SupportBackendModal.tsx‎

Lines changed: 0 additions & 96 deletions
This file was deleted.

‎frontend/src/features/support/SupportDeveloperModal.tsx‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

0 commit comments

Comments
 (0)