gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(learn): backend challenge UI

Browse Source
This commit is contained in:
Valeriy
2019-01-12 17:41:41 +03:00
committed by Stuart Taylor
parent 369f150029
commit 7f5758d58a
2 changed files with 66 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/src/templates/Challenges/backend/Show.js
View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { reduxForm } from 'redux-form'; import { reduxForm } from 'redux-form';
import { graphql } from 'gatsby'; import { graphql } from 'gatsby';
@ -80,6 +81,12 @@ const options = {
}; };
export class BackEnd extends Component { export class BackEnd extends Component {
constructor(props) {
super(props);
this.state = {};
this.updateDimensions = this.updateDimensions.bind(this);
}
componentDidMount() { componentDidMount() {
const { const {
initTests, initTests,
@ -94,6 +101,15 @@ export class BackEnd extends Component {
} = this.props; } = this.props;
initTests(tests); initTests(tests);
updateChallengeMeta({ ...challengeMeta, challengeType }); updateChallengeMeta({ ...challengeMeta, challengeType });
window.addEventListener('resize', this.updateDimensions);
}
updateDimensions() {
this.setState({ width: window.innerWidth, height: window.innerHeight });
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimensions);
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
@ -143,43 +159,50 @@ export class BackEnd extends Component {
const blockNameTitle = `${blockName} - ${title}`; const blockNameTitle = `${blockName} - ${title}`;
return ( return (
<LearnLayout> <LearnLayout>
<Spacer /> <Grid>
<div> <Row>
<ChallengeTitle>{blockNameTitle}</ChallengeTitle> <Col xs={12}>
<ChallengeDescription <Spacer />
description={description} <div>
instructions={instructions} <ChallengeTitle>{blockNameTitle}</ChallengeTitle>
/> <ChallengeDescription
</div> description={description}
<div> instructions={instructions}
<Form />
buttonText={buttonCopy + '(Ctrl + Enter)'} </div>
formFields={formFields} <div>
id={backendNS} <Form
options={options} buttonText={buttonCopy + '(Ctrl + Enter)'}
submit={executeChallenge} formFields={formFields}
/> id={backendNS}
<ProjectToolPanel guideUrl={createGuideUrl(slug)} /> options={options}
</div> submit={executeChallenge}
<div> />
<br /> <ProjectToolPanel guideUrl={createGuideUrl(slug)} />
<Output </div>
defaultOutput={`/** <div>
<br />
<Output
defaultOutput={`/**
* *
* Test output will go here * Test output will go here
* *
* *
*/`} */`}
height={150} dimensions={this.state}
output={output} height={150}
/> output={output}
</div> />
<div> </div>
<TestSuite tests={tests} /> <div>
</div> <TestSuite tests={tests} />
<Spacer /> </div>
<CompletionModal /> <Spacer />
<HelpModal /> </Col>
<CompletionModal />
<HelpModal />
</Row>
</Grid>
</LearnLayout> </LearnLayout>
); );
} }

25
client/src/templates/Challenges/components/Challenge-Description.js
View File

@ -1,6 +1,5 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Col, Row } from '@freecodecamp/react-bootstrap';
import './challenge-description.css'; import './challenge-description.css';
@ -12,20 +11,18 @@ const propTypes = {
function ChallengeDescription({ description, instructions, section }) { function ChallengeDescription({ description, instructions, section }) {
return ( return (
<Row> <div className={`challenge-instructions ${section}`}>
<Col className={`challenge-instructions ${section}`} xs={12}> <div dangerouslySetInnerHTML={{ __html: description }} />
<div dangerouslySetInnerHTML={{ __html: description }} /> {instructions ? (
{instructions ? ( <Fragment>
<Fragment>
<hr />
<div dangerouslySetInnerHTML={{ __html: instructions }} />
<hr />
</Fragment>
) : (
<hr /> <hr />
)} <div dangerouslySetInnerHTML={{ __html: instructions }} />
</Col> <hr />
</Row> </Fragment>
) : (
<hr />
)}
</div>
); );
} }