Make registration form responsive.

This commit is contained in:
codevictory
2021-12-28 21:42:39 +02:00
parent 9414314e96
commit 2add3359d6
4 changed files with 25 additions and 19 deletions

View File

@@ -35,10 +35,23 @@ form#registration {
label, label,
span { span {
font-size: 1.3rem; font-size: 1.3rem;
height: unset;
} }
.ant-form-item { .ant-form-item {
width: 100%; width: 100%;
.ant-form-item-label {
width: 100%;
text-align: left;
}
.ant-select-arrow svg {
padding-bottom: 7px;
}
.anticon-close svg {
padding-top: 3px;
}
} }
} }

View File

@@ -1,4 +1,5 @@
import { Button, Form, Input, Select } from 'antd'; import { Button, Form, Input, Select } from 'antd';
import { CloseCircleOutlined } from '@ant-design/icons';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import './RegForm.scss'; import './RegForm.scss';
@@ -18,7 +19,7 @@ interface FormValues {
visitors: Visitor[]; visitors: Visitor[];
} }
const preferences = ['vegan', 'vegetarian', 'murder'].map((preference) => { const preferences = ['vegan', 'vegetarian', 'everything'].map((preference) => {
return ( return (
<Option key={preference} value={preference}> <Option key={preference} value={preference}>
<FormattedMessage id={'registration.form.preferences.' + preference} /> <FormattedMessage id={'registration.form.preferences.' + preference} />
@@ -71,7 +72,6 @@ export const RegForm = () => {
name='registration' name='registration'
onFinish={onFinish} onFinish={onFinish}
autoComplete='off' autoComplete='off'
layout='vertical'
> >
<Form.List name='visitors'> <Form.List name='visitors'>
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
@@ -123,13 +123,7 @@ export const RegForm = () => {
})} })}
fieldKey={[field.fieldKey, 'preferences']} fieldKey={[field.fieldKey, 'preferences']}
> >
<Select <Select defaultValue='everything'>{preferences}</Select>
placeholder={intl.formatMessage({
id: 'registration.form.preferences.placeholder',
})}
>
{preferences}
</Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name={[field.name, 'welcomeDrinks']} name={[field.name, 'welcomeDrinks']}

View File

@@ -16,18 +16,17 @@ export const registration: Record<string, string> = {
"registration.form.name.placeholder": "Full or nickname", "registration.form.name.placeholder": "Full or nickname",
"registration.form.name.missing": "Missing name", "registration.form.name.missing": "Missing name",
"registration.form.allergies": "Food allergies", "registration.form.allergies": "Food allergies (select or write)",
"registration.form.allergies.placeholder": "Lactose, wheat...", "registration.form.allergies.placeholder": "Everything goes",
"registration.form.allergies.lactose": "Lactose", "registration.form.allergies.lactose": "Lactose",
"registration.form.allergies.dairy": "Dairy", "registration.form.allergies.dairy": "Dairy",
"registration.form.allergies.gluten": "Gluten", "registration.form.allergies.gluten": "Gluten",
"registration.form.allergies.wheat": "Wheat", "registration.form.allergies.wheat": "Wheat",
"registration.form.preferences": "Food preferences", "registration.form.preferences": "Food preferences",
"registration.form.preferences.placeholder": "Vegan...", "registration.form.preferences.everything": "Everything goes",
"registration.form.preferences.vegan": "Vegan", "registration.form.preferences.vegan": "Vegan",
"registration.form.preferences.vegetarian": "Vegetarian", "registration.form.preferences.vegetarian": "Vegetarian",
"registration.form.preferences.murder": "Murder",
"registration.form.welcomeDrinks": "Welcome drink", "registration.form.welcomeDrinks": "Welcome drink",
"registration.form.welcomeDrinks.placeholder": "What fancy you?", "registration.form.welcomeDrinks.placeholder": "What fancy you?",

View File

@@ -15,18 +15,18 @@ export const registration: Record<string, string> = {
"registration.form.name": "Nimi", "registration.form.name": "Nimi",
"registration.form.name.placeholder": "Koko tai lempinimi", "registration.form.name.placeholder": "Koko tai lempinimi",
"registration.form.name.missing": "Nimi puuttuu", "registration.form.name.missing": "Nimi puuttuu",
"registration.form.allergies": "Ruoka-allergiat",
"registration.form.allergies.placeholder": "Laktoosi, vehnä...", "registration.form.allergies": "Ruoka-allergiat (valitse tai kirjoita)",
"registration.form.allergies.placeholder": "Kaikki käy",
"registration.form.allergies.lactose": "Laktoosi", "registration.form.allergies.lactose": "Laktoosi",
"registration.form.allergies.dairy": "Maitotuotteet", "registration.form.allergies.dairy": "Maitotuotteet",
"registration.form.allergies.gluten": "Gluteeni", "registration.form.allergies.gluten": "Gluteeni",
"registration.form.allergies.wheat": "Vehnä", "registration.form.allergies.wheat": "Vehnä",
"registration.form.preferences": "Erikoisruokavalio", "registration.form.preferences": "Erikoisruokavalio",
"registration.form.preferences.placeholder": "Vegaaninen...", "registration.form.preferences.everything": "Kaikki käy",
"registration.form.preferences.vegan": "Vegaani", "registration.form.preferences.vegan": "Vegaaninen",
"registration.form.preferences.vegetarian": "Kasvissyöjä", "registration.form.preferences.vegetarian": "Kasvis",
"registration.form.preferences.murder": "Murha",
"registration.form.welcomeDrinks": "Tervetuliasmalja", "registration.form.welcomeDrinks": "Tervetuliasmalja",
"registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?", "registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?",