fix: standarize form field UI
parent
e727acb281
commit
4edd995c76
|
@ -6,11 +6,10 @@ import {
|
|||
Col,
|
||||
ControlLabel,
|
||||
FormControl,
|
||||
FormGroup,
|
||||
HelpBlock
|
||||
} from '@freecodecamp/react-bootstrap';
|
||||
|
||||
import './form-fields.css';
|
||||
|
||||
const propTypes = {
|
||||
errors: PropTypes.objectOf(PropTypes.string),
|
||||
fields: PropTypes.objectOf(
|
||||
|
@ -48,15 +47,12 @@ function FormFields(props) {
|
|||
const key = kebabCase(name);
|
||||
const type = name in types ? types[name] : 'text';
|
||||
return (
|
||||
<div className='inline-form-field' key={key}>
|
||||
<Col sm={3} xs={12}>
|
||||
<Col key={key} xs={12}>
|
||||
<FormGroup>
|
||||
{type === 'hidden' ? null : (
|
||||
<ControlLabel htmlFor={key}>{startCase(name)}</ControlLabel>
|
||||
)}
|
||||
</Col>
|
||||
<Col sm={9} xs={12}>
|
||||
<FormControl
|
||||
bsSize='lg'
|
||||
componentClass={type === 'textarea' ? type : 'input'}
|
||||
id={key}
|
||||
name={name}
|
||||
|
@ -72,8 +68,8 @@ function FormFields(props) {
|
|||
<Alert bsStyle='danger'>{errors[name]}</Alert>
|
||||
</HelpBlock>
|
||||
) : null}
|
||||
</Col>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
@ -11,10 +11,10 @@ exports[`<DynamicForm /> snapshot 1`] = `
|
|||
>
|
||||
<div>
|
||||
<div
|
||||
className="inline-form-field"
|
||||
className="col-xs-12"
|
||||
>
|
||||
<div
|
||||
className="col-sm-3 col-xs-12"
|
||||
className="form-group"
|
||||
>
|
||||
<label
|
||||
className="control-label"
|
||||
|
@ -22,12 +22,8 @@ exports[`<DynamicForm /> snapshot 1`] = `
|
|||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="col-sm-9 col-xs-12"
|
||||
>
|
||||
<input
|
||||
className="form-control input-lg"
|
||||
className="form-control"
|
||||
id="name"
|
||||
name="name"
|
||||
onChange={[Function]}
|
||||
|
|
|
@ -1,6 +0,0 @@
|
|||
.inline-form-field {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
|
@ -161,42 +161,35 @@ export class BackEnd extends Component {
|
|||
<LearnLayout>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12} >
|
||||
<Spacer />
|
||||
<div>
|
||||
<ChallengeTitle>{blockNameTitle}</ChallengeTitle>
|
||||
<ChallengeDescription
|
||||
description={description}
|
||||
instructions={instructions}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Form
|
||||
buttonText={buttonCopy + '(Ctrl + Enter)'}
|
||||
formFields={formFields}
|
||||
id={backendNS}
|
||||
options={options}
|
||||
submit={executeChallenge}
|
||||
/>
|
||||
<ProjectToolPanel guideUrl={createGuideUrl(slug)} />
|
||||
</div>
|
||||
<div>
|
||||
<br />
|
||||
<Output
|
||||
defaultOutput={`/**
|
||||
*
|
||||
* Test output will go here
|
||||
*
|
||||
*
|
||||
*/`}
|
||||
dimensions={this.state}
|
||||
height={150}
|
||||
output={output}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TestSuite tests={tests} />
|
||||
</div>
|
||||
<ChallengeTitle>{blockNameTitle}</ChallengeTitle>
|
||||
<ChallengeDescription
|
||||
description={description}
|
||||
instructions={instructions}
|
||||
/>
|
||||
<Form
|
||||
buttonText={buttonCopy + '(Ctrl + Enter)'}
|
||||
formFields={formFields}
|
||||
id={backendNS}
|
||||
options={options}
|
||||
submit={executeChallenge}
|
||||
/>
|
||||
<ProjectToolPanel guideUrl={createGuideUrl(slug)} />
|
||||
<br />
|
||||
<Output
|
||||
defaultOutput={`/**
|
||||
*
|
||||
* Test output will go here
|
||||
*
|
||||
*
|
||||
*/`}
|
||||
dimensions={this.state}
|
||||
height={150}
|
||||
output={output}
|
||||
/>
|
||||
<TestSuite tests={tests} />
|
||||
|
||||
<Spacer />
|
||||
</Col>
|
||||
<CompletionModal />
|
||||
|
|
Loading…
Reference in New Issue