TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify form styles

Browse Source
This commit is contained in:
Aarni Halinen
2020-12-29 01:28:09 +02:00
parent 6eb1199d33
commit 053eea7689
8 changed files with 125 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+15
View File
@@ -1707,6 +1707,15 @@
"csstype": "^2.2.0"
}
},
"@types/react-beautiful-dnd": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
"integrity": "sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==",
"dev": true,
"requires": {
"@types/react": "*"
}
},
"@types/react-csv": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/react-csv/-/react-csv-1.1.1.tgz",
@@ -1774,6 +1783,12 @@
"@types/react-router": "*"
}
},
"@types/shortid": {
"version": "0.0.29",
"resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz",
"integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=",
"dev": true
},
"@types/styled-components": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.1.tgz",
package.json
+2
View File
@@ -47,11 +47,13 @@
"@types/js-cookie": "2.2.4",
"@types/node": "10.14.7",
"@types/react": "16.8.18",
"@types/react-beautiful-dnd": "13.0.0",
"@types/react-csv": "1.1.1",
"@types/react-dom": "16.8.4",
"@types/react-helmet": "6.0.0",
"@types/react-jsonschema-form": "1.7.3",
"@types/react-router-dom": "5.1.5",
"@types/shortid": "0.0.29",
"@types/styled-components": "5.1.1",
"@typescript-eslint/eslint-plugin": "^4.8.2",
"@typescript-eslint/parser": "^4.8.2",
src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx
+13 -3
View File
@@ -4,6 +4,7 @@ import shortid from "shortid";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { Question } from "."
import AddIcon from "@assets/img/add-icon.png";
import colors from "@theme/colors";
import QuestionList from "./QuestionList";
const Widget = styled.div`
@@ -24,6 +25,14 @@ const Widget = styled.div`
}
`;
const AddQuestionButton = styled.button`
background-color: ${colors.blue1};
color: ${colors.white};
border: none;
outline: none;
cursor: pointer;
`;
interface SignupQuestionsWidgetProps {
value: string;
onChange: (value: string) => void;
@@ -78,9 +87,10 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
)}
</Droppable>
</DragDropContext>
<button type="button" onClick={handleNewRowClick(questions)}>
<img src={AddIcon} /> New Question
</button>
<AddQuestionButton type="button" onClick={handleNewRowClick(questions)}>
<img src={AddIcon} />
New Question
</AddQuestionButton>
</Widget>
);
}
src/pages/admin/AdminCommonPage.tsx
+11 -8
View File
@@ -16,6 +16,17 @@ const Main = styled.main`
align-items: flex-start;
flex: 1;
h1 {
margin-top: 0;
}
& > div {
padding: 0 1rem;
width: 100%;
max-width: 1000px;
margin: auto;
}
@media screen and (max-width: ${breakpoints.mobile}) {
flex-flow: column nowrap;
@@ -24,14 +35,6 @@ const Main = styled.main`
}
}
& > div {
padding: 0 1rem;
width: 100%;
}
h1 {
margin-top: 0;
}
`;
export interface AdminCommonPageProps {
src/pages/admin/EventCreatePage.tsx
-1
View File
@@ -9,7 +9,6 @@ import DatetimeWidget from "@components/Widgets/DatetimeWidget";
import SectionDividerWidget from "@components/Widgets/SectionDividerWidget/SectionDividerWidget";
import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
const widgets = {
datetime: DatetimeWidget,
section_divider: SectionDividerWidget,
src/views/SignUpPage/SignUpPageView.tsx
+11 -52
View File
@@ -1,12 +1,13 @@
import React from "react";
import styled from "styled-components";
import Form, { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form";
import { SignupForm } from "@models/SignupForm";
import { buildFormSchema, buildUISchema } from "./FormUtils";
import Checkboxes from "@components/Widgets/Checkbox/Checkboxes";
import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget";
import { TextSection } from "@components/index";
import { colors } from "@theme/colors";
import FormWrapper from "@views/common/FormWrapper";
const customWidgets = {
"radio": RadioButtonWidget,
@@ -37,7 +38,6 @@ const renderList = (signUpForm: SignupForm) => {
}
const StyledSection = styled(TextSection)`
& > div {
& > span {
color: ${colors.orange1};
@@ -54,45 +54,6 @@ const StyledSection = styled(TextSection)`
color: ${colors.blue1};
}
}
form {
legend {
display: none;
}
& > div:last-child {
display: flex;
justify-content: center;
button[type="submit"] {
color: blue;
}
}
}
fieldset {
border: none;
padding: 0;
margin: 1rem 0;
.form-group {
padding-bottom: 0.5rem;
& > label {
margin: 0.5rem 0;
font-weight: 600;
display: block;
}
}
input[type="text"], input[type="email"], input[type="number"] {
display: block;
height: 48px;
width: 100%;
font-size: 1.5rem;
padding: 0 16px;
}
}
`;
const SignUpPageView: React.FC<SignUpPageViewProps> = ({
@@ -108,17 +69,15 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
const uiSchema = buildUISchema(signUpForm);
return (
<>
<Form
schema={schema as any}
uiSchema={uiSchema}
formData={formData}
widgets={customWidgets}
idPrefix="rjsf"
onChange={onChange}
onSubmit={onSubmit}
/>
</>
<FormWrapper
schema={schema as any}
uiSchema={uiSchema}
formData={formData}
widgets={customWidgets}
idPrefix="rjsf"
onChange={onChange}
onSubmit={onSubmit}
/>
);
}
src/views/admin/AdminCreateCommon.tsx
+6 -69
View File
@@ -1,81 +1,18 @@
import React from "react";
import styled from "styled-components";
import Form, { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
import { colors }from "@theme/colors";
import { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form";
import { colors } from "@theme/colors";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";
import { SignupForm } from "@models/SignupForm";
import { JobAd } from "@models/JobAd";
import FormWrapper from "@views/common/FormWrapper";
const Common = styled.div`
width: 100%;
fieldset {
border: none;
padding: 0;
margin: 1rem 0;
}
option {
padding: 4px 8px;
cursor: pointer;
}
label {
margin-bottom: 0.5rem;
}
input,
select {
padding: 0.3rem 0.5rem;
margin-bottom: 0.5rem;
}
input[type="text"],
textarea {
padding: 0.5rem 0.5rem;
border: none;
overflow: visible;
box-sizing: border-box;
}
input[type="text"],
textarea,
select {
width: 100%;
}
input[type="submit"] {
border: none;
outline: none;
background-color: ${colors.orange2};
padding: 0.5rem 1rem;
color: ${colors.white};
}
legend {
font-weight: bold;
margin: 0.5rem 0;
}
button {
background-color: ${colors.blue1};
color: ${colors.white};
padding: 0.5rem 1rem;
border: none;
outline: none;
cursor: pointer;
}
.checkbox {
label {
display: flex;
input {
margin-right: 0.5rem;
}
}
}
`;
const SuccessMsg = styled.p`
@@ -139,7 +76,7 @@ const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
{statusMessage && (
<SuccessMsg>{statusMessage}</SuccessMsg>
)}
<Form
<FormWrapper
schema={schema}
uiSchema={UISchema}
formData={formData}
@@ -148,8 +85,8 @@ const AdminCreateCommon: React.FC<AdminCreateCommonProps> = ({
onChange={onChange}
onSubmit={onSubmit}
onError={onError}
onFocus={onFocus} />
onFocus={onFocus}
/>
{error && (
<ErrorMsg>{error}</ErrorMsg>
)}
src/views/common/FormWrapper.tsx
+67
View File
@@ -0,0 +1,67 @@
import Form from "react-jsonschema-form";
import styled from "styled-components";
import colors from "@theme/colors";
const FormStyleWrapper = styled(Form)`
legend {
display: none;
}
fieldset {
border: none;
padding: 0;
margin: 1rem 0;
}
.form-group {
padding-bottom: 0.5rem;
& > label {
margin: 0.5rem 0;
font-weight: 600;
display: block;
}
}
& > div:last-child {
text-align: center;
button[type="submit"] {
background-color: ${colors.blue1};
color: ${colors.white};
padding: 0.5rem 1rem;
border: none;
outline: none;
cursor: pointer;
}
}
input,
option,
select {
font-size: 1.5rem;
padding: 0.3rem;
}
input[type="text"],
input[type="email"],
input[type="number"] {
height: 3rem;
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select
{
display: block;
width: 100%;
}
option {
cursor: pointer;
}
`;
export default FormStyleWrapper;