From dbc3c8a69392a81283b29248d31bd92a23025367 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Mon, 18 Jan 2021 11:54:12 +0200 Subject: Move invalid styles to common styles --- src/commonStyles.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 89a2746..f5a5beb 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -1,4 +1,5 @@ import { css } from "@emotion/react"; +import colors from "./colors"; const selectable = css` -moz-user-select: text; @@ -50,6 +51,12 @@ const textInputs = css` border-radius: 8px; `; +const invalidStyles = css` + .invalid-box { + box-shadow: 0 0 10px ${colors.error}; + border: none; + } +`; export { selectable, @@ -57,4 +64,5 @@ export { hiddenInput, multiSelectInput, textInputs, + invalidStyles }; -- cgit v1.2.3 From c44a1b216d2b7472e0facef15fddf08a834b12e2 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Tue, 19 Jan 2021 16:01:44 +0200 Subject: Add webkit CSS to invalidStyle to support Safari --- src/commonStyles.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index f5a5beb..0cd68d5 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -53,6 +53,8 @@ const textInputs = css` const invalidStyles = css` .invalid-box { + -webkit-appearance: none; + -webkit-box-shadow: 0 0 10px ${colors.error}; box-shadow: 0 0 10px ${colors.error}; border: none; } -- cgit v1.2.3 From a49bb796c7d4eee1f8184be78f1671bdf1cef61d Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Wed, 20 Jan 2021 13:27:21 +0200 Subject: Add state for displaying thanks for submitting showing --- src/commonStyles.tsx | 63 +++++++++++++++++++++++++++++- src/pages/FormPage.tsx | 103 +++++++++++++++++++------------------------------ 2 files changed, 101 insertions(+), 65 deletions(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 0cd68d5..3ff2a2f 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -60,11 +60,72 @@ const invalidStyles = css` } `; +const containerStyles = css` + margin: auto; + width: 50%; + + text-align: center; + font-size: 1.5rem; + white-space: nowrap; + + > div { + display: inline-block; + margin: 2rem auto; + width: 50%; + } + + @media (max-width: 850px) { + width: 100%; + + > div { + display: flex; + justify-content: center; + + margin: 0 auto; + } + } + + .return_button { + text-align: left; + } + + .return_button.closed { + text-align: center; + } +`; + +const separatorStyles = css` + height: 0; + display: none; + + @media (max-width: 850px) { + display: block; + } +`; + +const returnStyles = css` + padding: 0.5rem 2rem; + border-radius: 8px; + + color: white; + text-decoration: none; + + background-color: ${colors.greyple}; + transition: background-color 300ms; + + :hover { + background-color: ${colors.darkerGreyple}; + } +`; + export { selectable, unselectable, hiddenInput, multiSelectInput, textInputs, - invalidStyles + invalidStyles, + containerStyles, + separatorStyles, + returnStyles }; diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index b4a8903..cf6947b 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -2,8 +2,9 @@ import { jsx, css } from "@emotion/react"; import { Link } from "react-router-dom"; -import React, { SyntheticEvent, useEffect, useState, createRef, RefObject } from "react"; +import React, { SyntheticEvent, useEffect, useState, createRef } from "react"; import { useParams } from "react-router"; +import { PropagateLoader } from "react-spinners"; import HeaderBar from "../components/HeaderBar"; import RenderedQuestion from "../components/Question"; @@ -12,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop"; import { Form, FormFeatures, getForm } from "../api/forms"; import colors from "../colors"; -import { unselectable } from "../commonStyles"; +import { unselectable, containerStyles, separatorStyles, returnStyles } from "../commonStyles"; import { Question, QuestionType } from "../api/question"; import ApiClient from "../api/client"; @@ -26,65 +27,6 @@ interface NavigationProps { } class Navigation extends React.Component { - containerStyles = css` - margin: auto; - width: 50%; - - text-align: center; - font-size: 1.5rem; - white-space: nowrap; - - > div { - display: inline-block; - margin: 2rem auto; - width: 50%; - } - - @media (max-width: 850px) { - width: 100%; - - > div { - display: flex; - justify-content: center; - - margin: 0 auto; - } - } - - .return_button { - text-align: left; - } - - .return_button.closed { - text-align: center; - } - `; - - separatorStyles = css` - height: 0; - display: none; - - @media (max-width: 850px) { - display: block; - } - `; - - returnStyles = css` - padding: 0.5rem 2rem; - border-radius: 8px; - - color: white; - text-decoration: none; - - background-color: ${colors.greyple}; - transition: background-color 300ms; - - :hover { - background-color: ${colors.darkerGreyple}; - } - } - `; - submitStyles = css` text-align: right; @@ -118,11 +60,11 @@ class Navigation extends React.Component { } return ( -
+
- Return Home + Return Home
-
+
{ submit }
); @@ -158,6 +100,8 @@ function FormPage(): JSX.Element { const { id } = useParams(); const [form, setForm] = useState
(); + const [sending, setSending] = useState(); + const [sent, setSent] = useState(); useEffect(() => { getForm(id).then(form => { @@ -165,6 +109,33 @@ function FormPage(): JSX.Element { }); }, []); + if (form && sent) { + const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`; + return ( +
+ +
+

Thanks for your response!

+
+ Return Home +
+
+
+
+ ); + } + + if (sending) { + return ( +
+ +
+ +
+
+ ); + } + if (!form) { return ; } @@ -198,6 +169,8 @@ function FormPage(): JSX.Element { return; } + setSending(true); + const answers = {}; questions.forEach(prop => { const question = prop.props.question; @@ -233,6 +206,8 @@ function FormPage(): JSX.Element { }); await ApiClient.post(`forms/submit/${id}`, {response: answers}); + setSending(false); + setSent(true); } const open: boolean = form.features.includes(FormFeatures.Open); -- cgit v1.2.3 From 449a56d91e7208b057a0a5165fbbc2bfadd33ba6 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 21 Jan 2021 14:34:53 +0200 Subject: Implement dynamic showing of form submitted text --- src/commonStyles.tsx | 2 +- src/pages/FormPage.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 3ff2a2f..cbfc40a 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -66,7 +66,6 @@ const containerStyles = css` text-align: center; font-size: 1.5rem; - white-space: nowrap; > div { display: inline-block; @@ -109,6 +108,7 @@ const returnStyles = css` color: white; text-decoration: none; + white-space: nowrap; background-color: ${colors.greyple}; transition: background-color 300ms; diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index cf6947b..72b073f 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -29,6 +29,7 @@ interface NavigationProps { class Navigation extends React.Component { submitStyles = css` text-align: right; + white-space: nowrap; button { padding: 0.5rem 4rem; @@ -110,12 +111,13 @@ function FormPage(): JSX.Element { }, []); if (form && sent) { - const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif;`; + const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`; + const divStyle = css`width: 80%;`; return (
-
-

Thanks for your response!

+
+

{form.submitted_text ?? "Thanks for your response!"}

Return Home
-- cgit v1.2.3 From 8d3469e69d1030b5d83108c6e967bffbb9e1d9a9 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 21 Jan 2021 20:13:51 +0200 Subject: Use relative units --- src/commonStyles.tsx | 4 ++-- src/components/ErrorMessage.tsx | 6 +++--- src/pages/FormPage.tsx | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index cbfc40a..2caa77e 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -54,8 +54,8 @@ const textInputs = css` const invalidStyles = css` .invalid-box { -webkit-appearance: none; - -webkit-box-shadow: 0 0 10px ${colors.error}; - box-shadow: 0 0 10px ${colors.error}; + -webkit-box-shadow: 0 0 0.6rem ${colors.error}; + box-shadow: 0 0 0.6rem ${colors.error}; border: none; } `; diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx index 55e3759..1cf3cbc 100644 --- a/src/components/ErrorMessage.tsx +++ b/src/components/ErrorMessage.tsx @@ -9,9 +9,9 @@ interface ErrorMessageProps { const styles = css` color: ${colors.error}; - font-size: 18px; - line-height: 15px; - margin: 15px 0 0; + font-size: 1.15rem; + line-height: 1.1rem; + margin: 1rem 0 0; `; export default function ErrorMessage(props: ErrorMessageProps): JSX.Element|null { diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index 72b073f..21303ab 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -107,11 +107,12 @@ function FormPage(): JSX.Element { useEffect(() => { getForm(id).then(form => { setForm(form); + setSent(true); }); }, []); if (form && sent) { - const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 250px;`; + const thanksStyle = css`font-family: "Uni Sans", "Hind", "Arial", sans-serif; margin-top: 15.5rem;`; const divStyle = css`width: 80%;`; return (
-- cgit v1.2.3 From e221e20a82411dabc4d6c21172f0c68badc64364 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 28 Jan 2021 19:31:25 +0200 Subject: Remove unnecessary separator from sent form return home button --- src/commonStyles.tsx | 10 ---------- src/pages/FormPage.tsx | 12 ++++++++++-- 2 files changed, 10 insertions(+), 12 deletions(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 2caa77e..1136b34 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -93,15 +93,6 @@ const containerStyles = css` } `; -const separatorStyles = css` - height: 0; - display: none; - - @media (max-width: 850px) { - display: block; - } -`; - const returnStyles = css` padding: 0.5rem 2rem; border-radius: 8px; @@ -126,6 +117,5 @@ export { textInputs, invalidStyles, containerStyles, - separatorStyles, returnStyles }; diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index 36ca86f..abb008f 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -13,7 +13,7 @@ import ScrollToTop from "../components/ScrollToTop"; import { Form, FormFeatures, getForm } from "../api/forms"; import colors from "../colors"; -import { unselectable, containerStyles, separatorStyles, returnStyles } from "../commonStyles"; +import { unselectable, containerStyles, returnStyles } from "../commonStyles"; import { Question, QuestionType } from "../api/question"; import ApiClient from "../api/client"; @@ -27,6 +27,15 @@ interface NavigationProps { } class Navigation extends React.Component { + separatorStyles = css` + height: 0; + display: none; + + @media (max-width: 850px) { + display: block; + } + `; + submitStyles = css` text-align: right; white-space: nowrap; @@ -121,7 +130,6 @@ function FormPage(): JSX.Element {
Return Home
-
); -- cgit v1.2.3 From 978754f9bc81d0d836ddea6656af4a3dadce5248 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 28 Jan 2021 19:34:15 +0200 Subject: Move container and return styles back to FormPage --- src/commonStyles.tsx | 53 +------------------------------------------------- src/pages/FormPage.tsx | 52 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 51 insertions(+), 54 deletions(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 1136b34..57002a9 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -60,62 +60,11 @@ const invalidStyles = css` } `; -const containerStyles = css` - margin: auto; - width: 50%; - - text-align: center; - font-size: 1.5rem; - - > div { - display: inline-block; - margin: 2rem auto; - width: 50%; - } - - @media (max-width: 850px) { - width: 100%; - - > div { - display: flex; - justify-content: center; - - margin: 0 auto; - } - } - - .return_button { - text-align: left; - } - - .return_button.closed { - text-align: center; - } -`; - -const returnStyles = css` - padding: 0.5rem 2rem; - border-radius: 8px; - - color: white; - text-decoration: none; - white-space: nowrap; - - background-color: ${colors.greyple}; - transition: background-color 300ms; - - :hover { - background-color: ${colors.darkerGreyple}; - } -`; - export { selectable, unselectable, hiddenInput, multiSelectInput, textInputs, - invalidStyles, - containerStyles, - returnStyles + invalidStyles }; diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index abb008f..de80e8a 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -13,10 +13,58 @@ import ScrollToTop from "../components/ScrollToTop"; import { Form, FormFeatures, getForm } from "../api/forms"; import colors from "../colors"; -import { unselectable, containerStyles, returnStyles } from "../commonStyles"; +import { unselectable } from "../commonStyles"; import { Question, QuestionType } from "../api/question"; import ApiClient from "../api/client"; +const containerStyles = css` + margin: auto; + width: 50%; + + text-align: center; + font-size: 1.5rem; + + > div { + display: inline-block; + margin: 2rem auto; + width: 50%; + } + + @media (max-width: 850px) { + width: 100%; + + > div { + display: flex; + justify-content: center; + + margin: 0 auto; + } + } + + .return_button { + text-align: left; + } + + .return_button.closed { + text-align: center; + } +`; + +const returnStyles = css` + padding: 0.5rem 2rem; + border-radius: 8px; + + color: white; + text-decoration: none; + white-space: nowrap; + + background-color: ${colors.greyple}; + transition: background-color 300ms; + + :hover { + background-color: ${colors.darkerGreyple}; + } +`; interface PathParams { id: string @@ -74,7 +122,7 @@ class Navigation extends React.Component {
Return Home
-
+
{ submit }
); -- cgit v1.2.3 From bdb8ed5d9a03ec4e0abbc23d209d0f0017d3413f Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Fri, 5 Feb 2021 17:38:05 +0200 Subject: Use border-color: transparent instead border: none --- src/commonStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/commonStyles.tsx') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index 57002a9..b2969f8 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -56,7 +56,7 @@ const invalidStyles = css` -webkit-appearance: none; -webkit-box-shadow: 0 0 0.6rem ${colors.error}; box-shadow: 0 0 0.6rem ${colors.error}; - border: none; + border-color: transparent; } `; -- cgit v1.2.3