Permalink
Browse files

Rework PilotDetails form layout for consistency

Changed gunnery and piloting fields to be dropdowns
Rendered all form fields using the Form.Field shorthand syntax
  • Loading branch information...
markerikson committed Jan 7, 2017
1 parent e1325ac commit dcdc0ec2dbb5dee0c4c6bec459eaa3d5818033c9
Showing with 48 additions and 24 deletions.
  1. +48 −24 src/features/pilots/PilotDetails/PilotDetails.jsx
@@ -22,6 +22,18 @@ const RANKS = [
{value: "Colonel", text : "Colonel"},
];
const SKILL_VALUES = [
{value : 0, text : 0},
{value : 1, text : 1},
{value : 2, text : 2},
{value : 3, text : 3},
{value : 4, text : 4},
{value : 5, text : 5},
{value : 6, text : 6},
{value : 7, text : 7},
{value : 8, text : 8},
]
const MECHS = [
{value : "WHM-6R", text : "Warhammer WHM-6R"}
];
@@ -71,56 +83,68 @@ export class PilotDetails extends Component {
return (
<Form size="large">
<Form.Field name="name" width={16}>
<label>Name</label>
<input
<Form.Field
name="name"
label="Name"
width={16}
placeholder="Name"
value={name}
disabled={!canStopEditing}
control="input"
/>
</Form.Field>
<Form.Field name="rank" width={16}>
<label>Rank</label>
<Dropdown
<Form.Field
name="rank"
label="Rank"
width={16}
control={Dropdown}
fluid
selection
options={RANKS}
value={rank}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="age" width={6}>
<label>Age</label>
<input
<Form.Field
name="age"
width={6}
label="Age"
placeholder="Age"
control="input"
value={age}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="gunnery" width={6}>
<label>Gunnery</label>
<input
<Form.Field
name="gunnery"
label="Gunnery"
width={6}
control={Dropdown}
fluid
selection
options={SKILL_VALUES}
value={gunnery}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="piloting" width={6}>
<label>Piloting</label>
<input
<Form.Field
name="piloting"
label="Piloting"
width={6}
control={Dropdown}
fluid
selection
options={SKILL_VALUES}
value={piloting}
disabled={!canStopEditing}
/>
</Form.Field>
<Form.Field name="mech" width={16}>
<label>Mech</label>
<Dropdown
<Form.Field
name="mech"
label="Mech"
width={16}
control={Dropdown}
fluid
selection
options={MECHS}
value={mechType}
disabled={true}
/>
</Form.Field>
<Grid.Row width={16}>
<Button
primary

0 comments on commit dcdc0ec

Please sign in to comment.