Vertically center form elements

Zenmo · Dec 7, 2023 · 7a9cc01 · 7a9cc01
1 parent 5969778
commit 7a9cc01
Show file tree

Hide file tree

Showing 14 changed files with 60 additions and 62 deletions.
diff --git a/frontend/src/components/company-survey-v2/address.tsx b/frontend/src/components/company-survey-v2/address.tsx
@@ -1,9 +1,6 @@
 import {UseFormReturn} from 'react-hook-form'
 import {FormRow} from './generic/form-row'
-import {LabelRow} from './generic/label-row'
-import {NumberInput} from './generic/number-input'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
 import {TextInput} from './generic/text-input'
 
 export const Address = ({form, prefix}: { form: UseFormReturn , prefix: string }) => {

diff --git a/frontend/src/components/company-survey-v2/cars.tsx b/frontend/src/components/company-survey-v2/cars.tsx
@@ -1,7 +1,5 @@
 import {UseFormReturn} from 'react-hook-form'
-import {LabelRow} from './generic/label-row'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
 
 export const Cars = ({form, prefix}: { form: UseFormReturn, prefix: string}) => {
     const {register, watch} = form

diff --git a/frontend/src/components/company-survey-v2/generic/form-row.tsx b/frontend/src/components/company-survey-v2/generic/form-row.tsx
@@ -1,8 +1,9 @@
 import {css} from '@emotion/react'
 import {get} from 'lodash'
-import {FunctionComponent, ReactNode} from 'react'
+import {FunctionComponent, ReactElement, ReactNode} from 'react'
 import {FieldError, UseFormReturn} from 'react-hook-form'
 import {RegisterOptions} from 'react-hook-form/dist/types/validator'
+import {LabelRow} from './label-row'
 
 export type WrappedInputProps = {
     name: string,
@@ -30,30 +31,47 @@ export const FormRow = ({label, InputComponent, WrappedInput, suffix, name, opti
     const errorMessage = getErrorMessage(error)
     options = setValidationMessage(options)
 
+    let labelElement: ReactNode
+    if (options?.required) {
+        labelElement = (
+            <div>
+                {options?.required && <span css={{color: 'red'}}>* </span>}
+                {label}
+            </div>
+        )
+    } else if (typeof label === 'string') {
+        labelElement = <div>{label}</div>
+    } else {
+        labelElement = label
+    }
+
     return (
         <label css={css`
             display: flex;
-
-            & > div:nth-of-type(1) {
+        `}>
+            <div css={css`
                 text-align: right;
                 width: 50%;
                 padding: 0.3rem;
-            }
 
-            & > div:nth-of-type(2) {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            `}>
+                {labelElement}
+            </div>
+            <div css={css`
                 width: 50%;
                 padding: 0.3rem;
-            }
-        `}>
-            <div>
-                {options?.required && <span css={{color: 'red'}}>* </span>}
-                {label}
-            </div>
-            <div>
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            `}>
                 <div>
                     {InputComponent && <InputComponent {...form.register(name, options)} />}
                     {WrappedInput && <WrappedInput name={name} form={form} options={options} />}
-                    &nbsp;&nbsp;{suffix}
+                    {suffix && <>&nbsp;&nbsp;{suffix}</>}
                 </div>
                 {errorMessage && <div css={{color: 'red'}}>{errorMessage}</div>}
             </div>

diff --git a/frontend/src/components/company-survey-v2/generic/label-row.tsx b/frontend/src/components/company-survey-v2/generic/label-row.tsx
@@ -2,29 +2,31 @@ import {css} from '@emotion/react'
 import {FunctionComponent, PropsWithChildren, ReactElement, ReactNode} from 'react'
 
 export const LabelRow = ({label, children}: PropsWithChildren<{label: any}>) => {
-    let labelElement: ReactElement | undefined
-    if (typeof label === "string") {
-        labelElement = <div>{label}</div>
-    } else {
-        labelElement = label
-    }
-
     return (
         <label css={css`
             display: flex;
-          
-            & > *:nth-of-type(1) {
+        `}>
+            <div css={css`
                 text-align: right;
                 width: 50%;
                 padding: 0.3rem;
-            }
-            & > *:nth-of-type(2) {
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            `}>
+                {label}
+            </div>
+            <div css={css`
                 width: 50%;
                 padding: 0.3rem;
-            }
-        `}>
-            {labelElement}
-            <div>{children}</div>
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            `}>
+                {children}
+            </div>
         </label>
     )
 }
diff --git a/frontend/src/components/company-survey-v2/generic/old-number-input.tsx b/frontend/src/components/company-survey-v2/generic/old-number-input.tsx
diff --git a/frontend/src/components/company-survey-v2/heat.tsx b/frontend/src/components/company-survey-v2/heat.tsx
@@ -2,10 +2,7 @@ import {UseFormReturn} from 'react-hook-form'
 import {BooleanInput} from './generic/boolean-input'
 import {FormRow} from './generic/form-row'
 import {NumberRow} from './generic/number-row'
-import {TextInput} from './generic/text-input'
 import {HeatingType, HeatingTypeCheckboxes} from './heating-type-checkboxes'
-import {LabelRow} from './generic/label-row'
-import {OldNumberInput} from './generic/old-number-input'
 import {TextAreaRow} from "./generic/text-area-row";
 
 export const Heat = ({form, prefix}: { form: UseFormReturn, prefix: string }) => {

diff --git a/frontend/src/components/company-survey-v2/natural-gas.tsx b/frontend/src/components/company-survey-v2/natural-gas.tsx
@@ -2,9 +2,7 @@ import {UseFormReturn} from 'react-hook-form'
 import {BooleanInput} from './generic/boolean-input'
 import {FormRow} from './generic/form-row'
 import {LabelRow} from './generic/label-row'
-import {NumberInput} from './generic/number-input'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
 import {Purpose, Upload} from './generic/upload'
 
 export const NaturalGas =  ({form, prefix, project}: { form: UseFormReturn , prefix: string, project: string }) => {

diff --git a/frontend/src/components/company-survey-v2/storage.tsx b/frontend/src/components/company-survey-v2/storage.tsx
@@ -1,10 +1,7 @@
 import {UseFormReturn} from 'react-hook-form'
 import {BooleanInput} from './generic/boolean-input'
 import {FormRow} from './generic/form-row'
-import {LabelRow} from './generic/label-row'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
-import {TextInput} from './generic/text-input'
 import {TextAreaRow} from "./generic/text-area-row"
 
 export const Storage = ({form, prefix}: { form: UseFormReturn, prefix: string }) => {

diff --git a/frontend/src/components/company-survey-v2/supply.tsx b/frontend/src/components/company-survey-v2/supply.tsx
@@ -2,10 +2,7 @@ import {UseFormReturn} from 'react-hook-form'
 import {BooleanInput} from './generic/boolean-input'
 import {FormRow} from './generic/form-row'
 import {NumberRow} from './generic/number-row'
-import {TextInput} from './generic/text-input'
 import {PVOrientation} from './pv-orientation'
-import {LabelRow} from './generic/label-row'
-import {OldNumberInput} from './generic/old-number-input'
 import {TextAreaRow} from "./generic/text-area-row";
 
 export const Supply = ({form, prefix, hasSupplyName}: {form: UseFormReturn, prefix: string, hasSupplyName: string}) => {

diff --git a/frontend/src/components/company-survey-v2/survey.tsx b/frontend/src/components/company-survey-v2/survey.tsx
@@ -116,6 +116,9 @@ export const Survey: FunctionComponent<{project: Project}> = ({project}) => {
                 },
                 '& h2, & h3': {
                     padding: '.2rem 1rem',
+                },
+                'input[type="text"], input[type="email"], input[type="number"], textarea': {
+                    padding: '.3rem',
                 }
             }}>
                 <Intro project={project} />

diff --git a/frontend/src/components/company-survey-v2/transport.tsx b/frontend/src/components/company-survey-v2/transport.tsx
@@ -2,10 +2,7 @@ import {UseFormReturn} from 'react-hook-form'
 import {BooleanInput} from './generic/boolean-input'
 import {Cars} from './cars'
 import {FormRow} from './generic/form-row'
-import {LabelRow} from './generic/label-row'
 import {NumberInput} from './generic/number-input'
-import {OldNumberInput} from './generic/old-number-input'
-import {TextInput} from './generic/text-input'
 import {Trucks} from './trucks'
 import {Vans} from './vans'
 
@@ -22,18 +19,18 @@ export const Transport = ({form, prefix}: { form: UseFormReturn, prefix: string
                 WrappedInput={BooleanInput}
                 name={`${prefix}.hasVehicles`}
                 form={form} />
+            <FormRow
+                label="Aantal personenauto's voor woon-werk verkeer per dag?"
+                WrappedInput={NumberInput}
+                name={`${prefix}.numDailyCarCommuters`}
+                form={form} />
             {hasVehicles && (
                 <>
                     <Trucks form={form} prefix={`${prefix}.trucks`} />
                     <Vans form={form} prefix={`${prefix}.vans`} />
                     <Cars form={form} prefix={`${prefix}.cars`} />
                 </>
             )}
-            <FormRow
-                label="Aantal personenauto's voor woon-werk verkeer per dag?"
-                WrappedInput={NumberInput}
-                name={`${prefix}.numDailyCarCommuters`}
-                form={form} />
         </>
     )
 }
diff --git a/frontend/src/components/company-survey-v2/trucks.tsx b/frontend/src/components/company-survey-v2/trucks.tsx
@@ -1,7 +1,5 @@
 import {UseFormReturn} from 'react-hook-form'
-import {LabelRow} from './generic/label-row'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
 
 export const Trucks = ({form, prefix}: { form: UseFormReturn, prefix: string}) => {
     const {register, watch} = form

diff --git a/frontend/src/components/company-survey-v2/vans.tsx b/frontend/src/components/company-survey-v2/vans.tsx
@@ -1,7 +1,5 @@
 import {UseFormReturn} from 'react-hook-form'
-import {LabelRow} from './generic/label-row'
 import {NumberRow} from './generic/number-row'
-import {OldNumberInput} from './generic/old-number-input'
 
 export const Vans = ({form, prefix}: { form: UseFormReturn, prefix: string}) => {
     const {register, watch} = form

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+textarea {
+    font-family: inherit;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;