Added styles for form creation page and all components in it. Some minor improvements in another pages

2020-11-07 06:07:27 +05:00 · 2020-11-07 06:07:27 +05:00 · 6ef34c6ab8
commit 6ef34c6ab8
parent 85d7e48e0d
15 changed files with 331 additions and 77 deletions
--- a/src/components/FormLists/index.tsx
+++ b/src/components/FormLists/index.tsx
@ -14,7 +14,7 @@ const Lists: React.FC<IListsProps> = ({ variants, name, type, onChange }) => {
    (type === 'CHECK' && 'check') || (type === 'CHOOSE' && 'radio') || undefined

  return (
-    <div>
+    <div className={styles.variantsList}>
      {variants.map((el, index) => (
        <label key={index}>
          <input
--- a/src/components/FormLists/main.module.css
+++ b/src/components/FormLists/main.module.css
@ -1,3 +1,14 @@
 .selector {
  margin-right: 0.5rem;
 }
+
+.variantsList {
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (orientation: portrait) {
+  .variantsList {
+    flex-direction: column;
+  }
+}
--- a/src/components/QuestionsForm/main.module.css
+++ b/src/components/QuestionsForm/main.module.css
@ -28,9 +28,6 @@
 }

 .select {
-  /* -webkit-appearance: none; */
-  /* -moz-appearance: none; */
-  /* appearance: none; */
  padding: 0.5rem;
  background: var(--accentColor);
  border-radius: 20px;
--- a/src/components/SubmissionsList/index.tsx
+++ b/src/components/SubmissionsList/index.tsx
@ -21,7 +21,7 @@ const SubmissionList: React.FC<ISubmissionListProps> = ({
  questions,
 }) => {
  return submissions.length > 0 ? (
-    <ul>
+    <ul className={styles.container}>
      {submissions.map((submission, submissionIndex) => (
        <li className={styles.listItem} key={submissionIndex}>
          <h2 className={styles.itemHeader}>
--- a/src/components/SubmissionsList/main.module.css
+++ b/src/components/SubmissionsList/main.module.css
@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2.3rem;
+}
+
 .listItem {
  list-style-type: none;
  border: 0.1rem var(--containerColor) solid;
--- a/src/views/CreateForm/hooks.ts
+++ b/src/views/CreateForm/hooks.ts
@ -14,6 +14,7 @@ import {
  HandleQuestionTitleChangeFT,
  HandleAnswerVariantChangeFT,
  AddVariantFT,
+  RemoveQuestionFT,
 } from './types'

 const initialState = { title: '', questions: [] }
@ -52,6 +53,13 @@ export const useFormCreator = <T extends string>(
    }))
  }

+  const removeQuestion: RemoveQuestionFT = (number) => {
+    setState(({ title, questions }) => ({
+      title,
+      questions: questions.filter((_, index) => index !== number),
+    }))
+  }
+
  const handleQuestionTitleChange: HandleQuestionTitleChangeFT = (
    questionNumber,
    e
@ -107,6 +115,7 @@ export const useFormCreator = <T extends string>(
    {
      handleFormTitleChange,
      addQuestion: createQuestion,
+      removeQuestion,
      handleQuestionTitleChange,
      handleAnswerVariantChange,
      addVariant,
--- a/src/views/CreateForm/index.tsx
+++ b/src/views/CreateForm/index.tsx
@ -3,6 +3,7 @@ import React from 'react'
 import { QuestionTypes } from './types'
 import { useFormCreator } from './hooks'
 import { creationsArray, formatQuestionsToSubmit } from './utils'
+import styles from './main.module.css'

 const CreateForm: React.FC = () => {
  const [
@ -10,6 +11,7 @@ const CreateForm: React.FC = () => {
    [formSubmit, { submitData, submitError, submitLoading }],
    {
      addQuestion,
+      removeQuestion,
      handleFormTitleChange,
      handleQuestionTitleChange,
      handleAnswerVariantChange,
@ -19,94 +21,133 @@ const CreateForm: React.FC = () => {
  ] = useFormCreator<QuestionTypes>(formatQuestionsToSubmit)

  return (
-    <>
+    <div className={styles.container}>
      <form
        onSubmit={(e) => {
          formSubmit(e)
          resetForm()
        }}
      >
-        <label>
-          Title:
+        <div className={styles.pageHeader}>
+          <h1 className={styles.pageTitle}>Create form</h1>
          <input
+            className={styles.textInput}
            type="text"
            name="Title"
+            placeholder="title"
            value={form.title}
            onChange={handleFormTitleChange}
            required
          />
-        </label>
+        </div>

-        <fieldset>
-          <legend>Content</legend>
-          <ul>
-            {creationsArray.flatMap((questionType, index) =>
-              questionType.enabled
-                ? [
-                    <li key={index}>
+        <div className={styles.mainFormContainer}>
+          <fieldset className={styles.mainForm}>
+            <div className={styles.mainFormTop} />
+            <legend className={styles.fieldsetTitle}>Content</legend>
+            <ul>
+              {form.questions.map((quesstion, questionIndex) => (
+                <li className={styles.questionToCreateLI} key={questionIndex}>
+                  <div className={styles.questionHeader}>
+                    <h3 className={styles.questionTitle}>
+                      {quesstion.type} question:
+                    </h3>
+                    <input
+                      className={[styles.textInput, styles.fullWidth].join(' ')}
+                      required
+                      type="text"
+                      name="questionTitle"
+                      placeholder="Title"
+                      value={quesstion.title}
+                      onChange={(e) =>
+                        handleQuestionTitleChange(questionIndex, e)
+                      }
+                    />
+                    <button
+                      className={styles.button}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        removeQuestion(questionIndex)
+                      }}
+                    >
+                      x
+                    </button>
+                  </div>
+                  {(quesstion.type === 'CHECK' ||
+                    quesstion.type === 'CHOOSE' ||
+                    quesstion.type === 'SELECT') && (
+                    <>
+                      <h4 className={styles.variantsHeader}>Variants</h4>
+                      <ul>
+                        {quesstion.variants.map((variant, variantIndex) => (
+                          <li key={variantIndex}>
+                            <input
+                              className={[
+                                styles.textInput,
+                                styles.fullWidth,
+                                styles.variantText,
+                              ].join(' ')}
+                              required
+                              placeholder="Variant"
+                              type="text"
+                              value={variant}
+                              onChange={(e) =>
+                                handleAnswerVariantChange(
+                                  questionIndex,
+                                  variantIndex,
+                                  e
+                                )
+                              }
+                            />
+                          </li>
+                        ))}
+                      </ul>
                      <button
                        type="button"
-                        onClick={() => addQuestion(questionType.type)}
+                        onClick={() => addVariant(questionIndex)}
+                        className={[styles.button, styles.addVariant].join(' ')}
                      >
-                        {questionType.title}
+                        +
                      </button>
-                    </li>,
-                  ]
-                : []
-            )}
-          </ul>
-          <ul>
-            {form.questions.map((quesstion, questionIndex) => (
-              <li key={questionIndex}>
-                <p>{quesstion.type} question:</p>
-                <input
-                  required
-                  type="text"
-                  name="questionTitle"
-                  placeholder="Title"
-                  value={quesstion.title}
-                  onChange={(e) => handleQuestionTitleChange(questionIndex, e)}
-                />
-                {(quesstion.type === 'CHECK' ||
-                  quesstion.type === 'CHOOSE' ||
-                  quesstion.type === 'SELECT') && (
-                  <>
-                    <ul>
-                      {quesstion.variants.map((variant, variantIndex) => (
-                        <li key={variantIndex}>
-                          <input
-                            required
-                            placeholder="Variant"
-                            type="text"
-                            value={variant}
-                            onChange={(e) =>
-                              handleAnswerVariantChange(
-                                questionIndex,
-                                variantIndex,
-                                e
-                              )
-                            }
-                          />
-                        </li>
-                      ))}
-                    </ul>
-                    <button
-                      type="button"
-                      onClick={() => addVariant(questionIndex)}
-                    >
-                      +
-                    </button>
-                  </>
-                )}
-              </li>
-            ))}
-          </ul>
-        </fieldset>
-        {submitLoading ? 'Loading...' : <input type="submit" value="Submit" />}
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {creationsArray.flatMap((questionType, index) =>
+                questionType.enabled
+                  ? [
+                      <li className={styles.questionCreatorLI} key={index}>
+                        <button
+                          className={styles.button}
+                          type="button"
+                          onClick={() => addQuestion(questionType.type)}
+                        >
+                          + {questionType.title}
+                        </button>
+                      </li>,
+                    ]
+                  : []
+              )}
+            </ul>
+          </fieldset>
+        </div>
+        <div className={styles.submitContainer}>
+          {submitLoading ? (
+            'Loading...'
+          ) : (
+            <input
+              className={[styles.button, styles.submitButton].join(' ')}
+              type="submit"
+              value="Submit"
+            />
+          )}
+        </div>
      </form>
      {submitData?.createForm.success && 'Successfully uploaded'}
      {submitError && submitError.message}
-    </>
+    </div>
  )
 }

--- a/src/views/CreateForm/main.module.css
+++ b/src/views/CreateForm/main.module.css
@ -0,0 +1,150 @@
+.container {
+  height: calc(100vh - 4rem);
+}
+
+.container form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.pageHeader {
+  display: flex;
+  gap: 1rem;
+  padding: 2.3rem;
+}
+
+.pageTitle {
+  margin-top: -0.3rem;
+}
+
+.textInput {
+  height: 2.3rem;
+  border-radius: 100vh;
+  border: none;
+  display: inline;
+  outline: none;
+  font-size: 1.2rem;
+  padding: 0 0.7rem;
+  border-bottom: 0.15rem var(--containerColor) solid;
+  transition: border 0.1s;
+}
+
+.textInput:focus {
+  border-bottom-width: 0rem;
+  border-top: 0.15rem var(--containerColor) solid;
+}
+
+.mainFormContainer {
+  margin-top: 2.3rem;
+  padding: 2.3rem;
+  padding-top: 0;
+  flex-grow: 1;
+  position: relative;
+  background: #ffffff;
+}
+
+.mainFormTop {
+  top: -2.3rem;
+  left: 0rem;
+  position: absolute;
+  height: 2.3rem;
+  width: 100%;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  background: #ffffff;
+}
+
+.mainForm {
+  border: none;
+}
+
+.fieldsetTitle {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding-bottom: 2rem;
+}
+
+.questionCreatorLI {
+  list-style: none;
+  display: inline;
+  padding-right: 0.5rem;
+}
+
+.button {
+  height: 2.3rem;
+  border-radius: 100vh;
+  border: none;
+  outline: none;
+  font-size: 1.2rem;
+  padding: 0 0.7rem;
+  cursor: pointer;
+  background-color: var(--accentColor);
+  color: var(--onAccentFontColor);
+  box-shadow: 0 1px 6px 0 var(--accentShadowColor);
+}
+
+.button:active {
+  box-shadow: none;
+}
+
+.questionToCreateLI {
+  margin-bottom: 2.3rem;
+  list-style: none;
+  border: 0.1rem var(--containerColor) solid;
+  border-radius: 20px;
+  padding: 2.3rem;
+}
+
+.questionHeader {
+  display: grid;
+  grid-template-columns: auto 1fr 2.3rem;
+  gap: 0.5rem;
+}
+
+.questionTitle {
+  line-height: 2.3rem;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.variantsHeader {
+  margin: 1rem 0;
+}
+
+.variantText {
+  margin: 0.5rem;
+}
+
+.addVariant {
+  width: 2.3rem;
+  margin: auto;
+  display: block;
+  line-height: 2.3rem;
+}
+
+.submitContainer {
+  padding: 2.3rem;
+  background-color: #ffffff;
+}
+
+.submitButton {
+  width: 100%;
+}
+
+@media (orientation: portrait) {
+  .pageHeader {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .pageTitle {
+    margin-top: 0;
+  }
+
+  .questionHeader {
+    grid-template-columns: 1fr;
+  }
+}
--- a/src/views/CreateForm/types.ts
+++ b/src/views/CreateForm/types.ts
@ -28,6 +28,8 @@ export type HandleFormTitleChangeFT = (e: ChangeEvent<HTMLInputElement>) => void

 export type CreateQuestionFT<T extends string> = (type: T) => void

+export type RemoveQuestionFT = (number: number) => void
+
 export type HandleQuestionTitleChangeFT = (
  questionNumber: number,
  e: ChangeEvent<HTMLInputElement>
@ -54,6 +56,7 @@ export type UseFormCreatorHookTurpleT<T extends string> = [
  {
    handleFormTitleChange: HandleFormTitleChangeFT
    addQuestion: CreateQuestionFT<T>
+    removeQuestion: RemoveQuestionFT
    handleQuestionTitleChange: HandleQuestionTitleChangeFT
    handleAnswerVariantChange: HandleAnswerVariantChangeFT
    addVariant: AddVariantFT
--- a/src/views/DoForm/index.tsx
+++ b/src/views/DoForm/index.tsx
@ -41,7 +41,7 @@ const DoForm: React.FC = () => {
        </p>
      </header>
      <main className={styles.main}>
-        <div className={styles.mainTop}></div>
+        <div className={styles.mainTop} />
        {form.submissions ? (
          <>
            <h1 className={styles.mainHeader}>Submissions</h1>
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@ -1,7 +1,7 @@
 import React from 'react'
 import { useQuery } from '@apollo/client'
 import { generateFromString } from 'generate-avatar'
-import { Redirect, useHistory } from 'react-router-dom'
+import { Redirect, useHistory, Link } from 'react-router-dom'

 import Card from '../../components/Card'
 import { USER } from '../../apollo'
@ -55,6 +55,9 @@ const Home: React.FC = () => {
              <Card title={form.title} id={form.id} />
            </li>
          ))}
+          <Link className={styles.createNew} to="/create">
+            <span>Create new</span> <h3>+</h3>
+          </Link>
        </ul>
      </div>

--- a/src/views/Home/main.module.css
+++ b/src/views/Home/main.module.css
@ -30,6 +30,31 @@
  overflow-y: auto;
 }

+.createNew:hover {
+  border-color: var(--containerColor);
+  color: var(--containerColor);
+}
+
+.createNew {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 0.1rem var(--accentColor) solid;
+  text-decoration: none;
+  color: var(--accentColor);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.createNew span {
+  font-weight: bold;
+  line-height: 1.17em;
+}
+
+.createNew h3 {
+  line-height: 1.17em;
+}
+
 .rightPad {
  display: flex;
  flex-direction: column;
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@ -5,6 +5,7 @@ import { LOGIN } from '../../apollo'
 import { MutationLoginArgs, ServerAnswer } from '../../apollo/typeDefs.gen'
 import styles from './main.module.css'
 import meme from './meme.png'
+import { Link } from 'react-router-dom'

 interface ILoginMutation {
  login: ServerAnswer
@ -47,7 +48,9 @@ const Login: React.FC = () => {
            </div>
          ) : (
            <>
-              <h1 className={styles.header}>Login</h1>
+              <h1 className={styles.header}>
+                Log In / <Link to="/register">Register</Link>
+              </h1>
              <input
                required
                className={styles.input}
--- a/src/views/Login/main.module.css
+++ b/src/views/Login/main.module.css
@ -48,6 +48,10 @@
  text-align: center;
 }

+.header a {
+  color: var(--accentColor);
+}
+
 .input {
  border-bottom: 0.15rem var(--containerColor) solid !important;
  transition: border 0.1s;
--- a/src/views/Register/index.tsx
+++ b/src/views/Register/index.tsx
@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client'
 import React, { FormEvent } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, Link } from 'react-router-dom'

 import { REGISTER } from '../../apollo'
 import { MutationRegisterArgs, ServerAnswer } from '../../apollo/typeDefs.gen'
@ -40,7 +40,9 @@ const Register: React.FC = () => {
          alt='Questionform says: "Is mailbox a password?"'
        />
        <form className={styles.form} onSubmit={handleSubmit}>
-          <h1 className={styles.header}>Register</h1>
+          <h1 className={styles.header}>
+            Register / <Link to="/login">Log In</Link>
+          </h1>
          <input
            required
            className={styles.input}