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,
span {
font-size: 1.3rem;
height: unset;
}
.ant-form-item {
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 { CloseCircleOutlined } from '@ant-design/icons';
import { useParams } from 'react-router';
import './RegForm.scss';
@@ -18,7 +19,7 @@ interface FormValues {
visitors: Visitor[];
}
const preferences = ['vegan', 'vegetarian', 'murder'].map((preference) => {
const preferences = ['vegan', 'vegetarian', 'everything'].map((preference) => {
return (
<Option key={preference} value={preference}>
<FormattedMessage id={'registration.form.preferences.' + preference} />
@@ -71,7 +72,6 @@ export const RegForm = () => {
name='registration'
onFinish={onFinish}
autoComplete='off'
layout='vertical'
>
<Form.List name='visitors'>
{(fields, { add, remove }) => (
@@ -123,13 +123,7 @@ export const RegForm = () => {
})}
fieldKey={[field.fieldKey, 'preferences']}
>
<Select
placeholder={intl.formatMessage({
id: 'registration.form.preferences.placeholder',
})}
>
{preferences}
</Select>
<Select defaultValue='everything'>{preferences}</Select>
</Form.Item>
<Form.Item
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.missing": "Missing name",
"registration.form.allergies": "Food allergies",
"registration.form.allergies.placeholder": "Lactose, wheat...",
"registration.form.allergies": "Food allergies (select or write)",
"registration.form.allergies.placeholder": "Everything goes",
"registration.form.allergies.lactose": "Lactose",
"registration.form.allergies.dairy": "Dairy",
"registration.form.allergies.gluten": "Gluten",
"registration.form.allergies.wheat": "Wheat",
"registration.form.preferences": "Food preferences",
"registration.form.preferences.placeholder": "Vegan...",
"registration.form.preferences.everything": "Everything goes",
"registration.form.preferences.vegan": "Vegan",
"registration.form.preferences.vegetarian": "Vegetarian",
"registration.form.preferences.murder": "Murder",
"registration.form.welcomeDrinks": "Welcome drink",
"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.placeholder": "Koko tai lempinimi",
"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.dairy": "Maitotuotteet",
"registration.form.allergies.gluten": "Gluteeni",
"registration.form.allergies.wheat": "Vehnä",
"registration.form.preferences": "Erikoisruokavalio",
"registration.form.preferences.placeholder": "Vegaaninen...",
"registration.form.preferences.vegan": "Vegaani",
"registration.form.preferences.vegetarian": "Kasvissyöjä",
"registration.form.preferences.murder": "Murha",
"registration.form.preferences.everything": "Kaikki käy",
"registration.form.preferences.vegan": "Vegaaninen",
"registration.form.preferences.vegetarian": "Kasvis",
"registration.form.welcomeDrinks": "Tervetuliasmalja",
"registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?",