From f710b7d187b6c33908f4b3b713f5bcddbf19f9b0 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:00:04 +0100 Subject: Update styling and scaling and add links to FormListing --- src/components/FormListing.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx index 58f21f8..09b3134 100644 --- a/src/components/FormListing.tsx +++ b/src/components/FormListing.tsx @@ -1,5 +1,6 @@ /** @jsx jsx */ import { css, jsx } from "@emotion/core"; +import { Link } from "react-router-dom"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; @@ -24,6 +25,8 @@ function FormListing(props: FormListingProps) { border-radius: 10px; transition-property: transform, width; transition-duration: 500ms; + text-decoration: none; + color: inherit; @media (max-width: 575px) { width: 80%; @@ -40,10 +43,12 @@ function FormListing(props: FormListingProps) { closedTag = }; - return
-

{closedTag}{props.title}

-

{props.description}

-
+ return +
+

{closedTag}{props.title}

+

{props.description}

+
+ } export default FormListing; -- cgit v1.2.3 From 41af45eb63a6f323aa24320cd9743bfc02e13559 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:00:13 +0100 Subject: Update header responsiveness --- src/components/HeaderBar/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index 94dd900..6289dfc 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -46,11 +46,15 @@ function HeaderBar() { font-size: 2em; } - @media (max-width: 400px) { - font-size: 1.5em; + @media (max-width: 450px) { + font-size: 1.70em; text-align: center; margin-left: 0; } + + @media (max-width: 400px) { + font-size: 1.3em; + } `}> Python Discord Forms -- cgit v1.2.3 From 5e959c4beb90331edf7eb6b7048354bd7f9d1ebb Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:00:23 +0100 Subject: Add a dummy page for form information --- src/pages/FormPage.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/pages/FormPage.tsx (limited to 'src') diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx new file mode 100644 index 0000000..aa4cec3 --- /dev/null +++ b/src/pages/FormPage.tsx @@ -0,0 +1,12 @@ +/** @jsx jsx */ +import { jsx } from "@emotion/core"; +import { Link } from "react-router-dom"; + +function FormPage() { + return
+

Form page

+ Go home +
+} + +export default FormPage; -- cgit v1.2.3 From 59777abe9a344cec1e12d7ef239fc90685c54f0a Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:00:35 +0100 Subject: Add routing to the App, with CSS transitions for fading between pages --- src/App.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index d372e2f..56fbd17 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,18 @@ /** @jsx jsx */ +/** @global location */ import { css, jsx, Global } from "@emotion/core"; +import { + BrowserRouter as Router, + Route, + Switch +} from "react-router-dom"; + +import { CSSTransition, TransitionGroup } from "react-transition-group"; + import LandingPage from "./pages/LandingPage"; import colors from "./colors"; +import FormPage from "./pages/FormPage"; const globalStyles = css` @import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap'); @@ -18,13 +28,53 @@ body { font-family: "Hind", "Helvetica", "Arial", sans-serif; margin: 0; } + +.fade-enter, +.fade-exit { + position: absolute; + top: 0; + left: 0; + transition: 300ms ease opacity; + width: 100%; +} + +.fade-enter, +.fade-exit-active { + opacity: 0; +} + +.fade-enter-active { + opacity: 1; + z-index: 1; +} `; +const routes = [ + { path: "/", Component: LandingPage }, + { path: "/form", Component: FormPage} +] + function App() { return (
- + + ( + + + + {routes.map(({path, Component}) => ( + + ))} + + + + )}/> +
); }; -- cgit v1.2.3 From 74c3ed23904a2ed672019275ccefb6c87d9bd7d1 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Tue, 29 Sep 2020 01:14:12 +0100 Subject: Update tests to match new form listing component --- src/tests/components/FormListing.test.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index 26c7c93..cb06201 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -2,28 +2,30 @@ import React from 'react'; import { render } from '@testing-library/react'; import FormListing from "../../components/FormListing"; +import { BrowserRouter as Router } from 'react-router-dom'; + test('renders form listing with specified title', () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/Example form listing/i); expect(formListing).toBeInTheDocument(); }); test('renders form listing with specified description', () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/My form listing/i); expect(formListing).toBeInTheDocument(); }); test('renders form listing with background green colour for open', () => { - const { container } = render(); - const elem = container.querySelector("div"); + const { container } = render(); + const elem = container.querySelector("a"); const style = window.getComputedStyle(elem); expect(style.backgroundColor).toBe("rgb(67, 181, 129)"); }); test('renders form listing with background dark colour for closed', () => { - const { container } = render(); - const elem = container.querySelector("div"); + const { container } = render(); + const elem = container.querySelector("a"); const style = window.getComputedStyle(elem); expect(style.backgroundColor).toBe("rgb(44, 47, 51)"); }); -- cgit v1.2.3