From 1bf571cd45ae4e0e9cb83b0cb65eb9a031589580 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Thu, 2 Mar 2023 11:29:32 +0100 Subject: [PATCH 1/3] fix: Go to right page when switching page on content pages (legal / impress) fix #992 --- app/components/content-mdx-provider.tsx | 14 ++++++++++---- app/components/header.tsx | 4 +++- app/components/layout.tsx | 4 ++-- e2e/actions.ts | 5 +++++ e2e/home.spec.ts | 20 ++++++++++++++++++-- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/app/components/content-mdx-provider.tsx b/app/components/content-mdx-provider.tsx index b6eef362c..7d1136de0 100644 --- a/app/components/content-mdx-provider.tsx +++ b/app/components/content-mdx-provider.tsx @@ -5,6 +5,13 @@ import { ReactNode } from "react"; import { ContentLayout, StaticContentLayout } from "@/components/layout"; import { Intro, Tutorial, Examples, Contribute } from "@/homepage"; +const castContentId = (contentId: unknown) => { + if (typeof contentId === "string") { + return contentId; + } + return undefined; +}; + const Wrapper = ({ contentId, children, @@ -12,13 +19,12 @@ const Wrapper = ({ contentId: unknown; children: ReactNode; }) => { - if (typeof contentId !== "string") { - return {children}; - } return contentId === "home" ? ( {children} ) : ( - {children} + + {children} + ); }; diff --git a/app/components/header.tsx b/app/components/header.tsx index ff3f00621..a27c9846f 100644 --- a/app/components/header.tsx +++ b/app/components/header.tsx @@ -94,8 +94,10 @@ const useHeaderStyles = makeStyles( export const Header = ({ pageType = "app", + contentId, }: { pageType?: "content" | "app"; + contentId: string | undefined; }) => { const router = useRouter(); const isConfiguring = router.pathname === "/create/[chartId]"; @@ -113,7 +115,7 @@ export const Header = ({ }} > - + diff --git a/app/components/layout.tsx b/app/components/layout.tsx index 38bf93200..d8c958282 100644 --- a/app/components/layout.tsx +++ b/app/components/layout.tsx @@ -7,7 +7,7 @@ import { Header, HeaderProgressProvider } from "@/components/header"; export const AppLayout = ({ children }: { children?: ReactNode }) => ( -
+
-
+
await screen.locator('text="Back to main"').click(), }, + common: { + switchLang: async (lang: "de" | "fr" | "en" | "it") => { + await page.locator(`a[hreflang="${lang}"]`).click(); + }, + }, }); export type Actions = ReturnType; diff --git a/e2e/home.spec.ts b/e2e/home.spec.ts index 759e0a2fd..3b2b5f031 100644 --- a/e2e/home.spec.ts +++ b/e2e/home.spec.ts @@ -28,9 +28,9 @@ describe("The Home Page", () => { expect(await page.locator("html").getAttribute("lang")).toEqual("fr"); }); - test("language switch should work", async ({ page, screen }) => { + test("language switch should work", async ({ page, screen, actions }) => { await page.goto("/"); - await page.locator('a[hreflang="fr"]').click(); + await actions.common.switchLang("fr"); await screen.findByText( "Visualisez les données ouvertes de l’administration publique suisse", undefined, @@ -41,3 +41,19 @@ describe("The Home Page", () => { expect(await page.locator("html").getAttribute("lang")).toBe("fr"); }); }); + +describe("content pages", () => { + test("language switch should work", async ({ page, actions, screen }) => { + await page.goto("/en/legal-framework"); + + await actions.common.switchLang("fr"); + await screen.findByText( + "Utilisation des jeux de données publiés sur visualize.admin.ch", + undefined, + { + timeout: 20 * 1000, + } + ); + expect(await page.locator("html").getAttribute("lang")).toBe("fr"); + }); +}); From 36652d06cfa4aacff85d242307f0e626ce800667 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Thu, 2 Mar 2023 11:29:32 +0100 Subject: [PATCH 2/3] feat: Adjustment to spacing of content layout --- app/components/layout.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/components/layout.tsx b/app/components/layout.tsx index d8c958282..b54b98dd0 100644 --- a/app/components/layout.tsx +++ b/app/components/layout.tsx @@ -51,7 +51,13 @@ export const ContentLayout = ({ ); }; -export const StaticContentLayout = ({ children }: { children?: ReactNode }) => { +export const StaticContentLayout = ({ + children, + contentId, +}: { + children?: ReactNode; + contentId: string | undefined; +}) => { return ( { backgroundColor: "grey.100", }} > -
+
{ flex: 1, width: "100%", maxWidth: 1024, + my: [4, 6], mx: [0, 0, "auto"], px: 4, + + "& h2": { + mb: 1, + }, }} > {children} From 2935331a88962d98827f2fde90e87cb8478a861f Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Thu, 2 Mar 2023 14:10:05 +0100 Subject: [PATCH 3/3] feat: better mobile footer --- app/components/footer.tsx | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/app/components/footer.tsx b/app/components/footer.tsx index 613c3e1f1..c12cdc3a0 100644 --- a/app/components/footer.tsx +++ b/app/components/footer.tsx @@ -95,20 +95,13 @@ export const Footer = ({ sx }: { sx?: FlexProps["sx"] }) => { alignItems: ["flex-start", "center"], }} > - - {/* - Help - - - Contact - */} - - @@ -117,8 +110,10 @@ export const Footer = ({ sx }: { sx?: FlexProps["sx"] }) => { { px: [4, 3], py: [3, 4], color: "secondary.main", + order: [7, 0], }} > @@ -181,8 +177,9 @@ const useFooterLinkStyles = makeStyles((theme: Theme) => ({ bottomLink: { fontSize: "0.875rem", - borderLeftStyle: "solid", - borderLeftColor: theme.palette.grey[500], + borderTopStyle: "solid", + borderTopColor: theme.palette.grey[500], + textDecoration: "none", cursor: "pointer", "&:hover": { @@ -236,7 +233,8 @@ const FooterLinkBottom = forwardRef< sx={{ px: [4, 3], py: [3, 4], - borderLeftWidth: ["1px", 0], + borderTopWidth: ["1px", 0], + width: ["100%", "auto"], }} > {children}