From d2cc29d22203cfea0adc61ceaa72ba936070045a Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 02:29:27 +0300 Subject: Updates HeaderBar Changes header bar component to accept a description, and render it properly on different screens. Additionally adds a button to return to the home page. Updates tests. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/components/HeaderBar/index.tsx | 131 ++++++++++++++++++++++++++----------- src/components/HeaderBar/logo.svg | 3 + 2 files changed, 94 insertions(+), 40 deletions(-) create mode 100644 src/components/HeaderBar/logo.svg (limited to 'src/components/HeaderBar') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index dfe3957..439851d 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -1,59 +1,110 @@ /** @jsx jsx */ -import { css, jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import Header1 from "./header_1.svg"; import Header2 from "./header_2.svg"; +import Logo from "./logo.svg"; + +import { Link } from "react-router-dom"; interface HeaderBarProps { - title?: string + title?: string + description?: string } const headerImageStyles = css` -z-index: -1; -top: 0; -position: absolute; -width: 100%; -transition: height 1s; + * { + z-index: -1; + top: 0; + position: absolute; + width: 100%; + transition: height 1s; + } +`; + +const headerTextStyles = css` + transition: margin 1s; + font-family: "Uni Sans", "Hind", "Arial", sans-serif; + + margin: 0 2rem 10rem 2rem; + + .title { + font-size: 3vmax; + margin-bottom: 0; + } + + .description { + font-size: 1.5vmax; + } + + .title, .description { + transition: font-size 1s; + } + + @media (max-width: 480px) { + margin-top: 7rem; + text-align: center; + + .title { + font-size: 5vmax; + } + + .description { + font-size: 2vmax; + } + } +`; + +const homeButtonStyles = css` + svg { + transform: scale(0.25); + transition: top 300ms, transform 300ms; + + @media (max-width: 480px) { + transform: scale(0.15); + } + } + + * { + position: absolute; + top: -10rem; + right: 1rem; + + z-index: 0; + transform-origin: right; + + @media (max-width: 700px) { + top: -11.5rem; + } + + @media (max-width: 480px) { + top: -12.5rem; + } + } `; -function HeaderBar({ title }: HeaderBarProps): JSX.Element { +function HeaderBar({ title, description }: HeaderBarProps): JSX.Element { if (!title) { title = "Python Discord Forms"; } - - return
+ + return (
- - +
+ + +
+ +
+

{title}

+

{description}

+
+ + + +
-

- {title} -

-
; + ); } export default HeaderBar; diff --git a/src/components/HeaderBar/logo.svg b/src/components/HeaderBar/logo.svg new file mode 100644 index 0000000..e7f43fc --- /dev/null +++ b/src/components/HeaderBar/logo.svg @@ -0,0 +1,3 @@ + +image/svg+xml + -- cgit v1.2.3 From 1a2a87add140ba4f4ae1305963259a9bcc4a76d6 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Sun, 17 Jan 2021 03:07:46 +0300 Subject: Centers Title With No Description Makes the header bar title take up more space when no title is provided, and stops the page from rendering the description. Co-authored-by: Joe Banks Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/components/HeaderBar/index.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) (limited to 'src/components/HeaderBar') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index 439851d..5c536ef 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -27,16 +27,20 @@ const headerTextStyles = css` font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin: 0 2rem 10rem 2rem; - + .title { font-size: 3vmax; margin-bottom: 0; } - + + .full_size { + line-height: 200%; + } + .description { font-size: 1.5vmax; } - + .title, .description { transition: font-size 1s; } @@ -49,6 +53,10 @@ const headerTextStyles = css` font-size: 5vmax; } + .full_size { + line-height: 100%; + } + .description { font-size: 2vmax; } @@ -64,7 +72,7 @@ const homeButtonStyles = css` transform: scale(0.15); } } - + * { position: absolute; top: -10rem; @@ -96,8 +104,8 @@ function HeaderBar({ title, description }: HeaderBarProps): JSX.Element {
-

{title}

-

{description}

+

{title}

+ {description ?

{description}

: null}
-- cgit v1.2.3