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

fix(layout): Improve project view (#16798)

Browse Source
This commit is contained in:
Stuart Taylor
2018-02-28 19:22:56 +00:00
committed by Quincy Larson
parent 76b2c13cdf
commit 12cf871249
2 changed files with 35 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
common/app/routes/Challenges/views/project/Project.jsx
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Col, Image } from 'react-bootstrap'; import { Col } from 'react-bootstrap';
import SidePanel from './Side-Panel.jsx'; import SidePanel from './Side-Panel.jsx';
import ToolPanel from './Tool-Panel.jsx'; import ToolPanel from './Tool-Panel.jsx';
@ -14,24 +14,13 @@ import { challengeSelector } from '../../../../redux';
const mapStateToProps = createSelector( const mapStateToProps = createSelector(
challengeSelector, challengeSelector,
challengeMetaSelector, challengeMetaSelector,
( ({ description }, { title }) => ({
{
id,
description,
image
},
{ title }
) => ({
id,
image,
title, title,
description description
}) })
); );
const propTypes = { const propTypes = {
description: PropTypes.arrayOf(PropTypes.string), description: PropTypes.arrayOf(PropTypes.string),
id: PropTypes.string,
image: PropTypes.string,
isCompleted: PropTypes.bool, isCompleted: PropTypes.bool,
title: PropTypes.string title: PropTypes.string
}; };
@ -39,13 +28,10 @@ const propTypes = {
export class Project extends PureComponent { export class Project extends PureComponent {
render() { render() {
const { const {
id,
title, title,
image = 'ovKSXMs',
isCompleted, isCompleted,
description description
} = this.props; } = this.props;
const imageURL = 'https://i.imgur.com/' + image + '.png';
return ( return (
<Col <Col
md={ 8 } md={ 8 }
@ -56,11 +42,6 @@ export class Project extends PureComponent {
isCompleted={ isCompleted } isCompleted={ isCompleted }
title={ title } title={ title }
/> />
<Image
id={ id }
responsive={ true }
src={ imageURL }
/>
<br /> <br />
<ToolPanel /> <ToolPanel />
<HelpModal /> <HelpModal />

63
common/app/routes/Challenges/views/project/Tool-Panel.jsx
View File

@ -2,8 +2,9 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { Button } from 'react-bootstrap';
import { Button, ButtonGroup } from 'react-bootstrap'; import { ButtonSpacer } from '../../../../helperComponents';
import { import {
FrontEndForm, FrontEndForm,
BackEndForm BackEndForm
@ -101,35 +102,37 @@ export class ToolPanel extends PureComponent {
this.renderSubmitButton(isSignedIn, submitChallenge) : this.renderSubmitButton(isSignedIn, submitChallenge) :
<FormElement isSubmitting={ isSubmitting }/> <FormElement isSubmitting={ isSubmitting }/>
} }
<div className='button-spacer' /> <ButtonSpacer />
<ButtonGroup vertical={ true }> <Button
<Button block={ true }
bsStyle='primary' bsStyle='primary'
className='btn-primary-ghost btn-big' className='btn-primary-ghost btn-big'
componentClass='a' componentClass='a'
href={ `https://gitter.im/freecodecamp/${helpChatRoom}` } href={ `https://gitter.im/freecodecamp/${helpChatRoom}` }
target='_blank' target='_blank'
> >
Help Help
</Button> </Button>
<Button <ButtonSpacer />
block={ true } <Button
bsStyle='primary' block={ true }
className='btn-primary-ghost btn-big' bsStyle='primary'
href={ guideUrl } className='btn-primary-ghost btn-big'
target='_blank' href={ guideUrl }
> target='_blank'
Get a hint >
</Button> Get a hint
<Button </Button>
block={ true } <ButtonSpacer />
bsStyle='primary' <Button
className='btn-primary-ghost btn-big' block={ true }
onClick={ openHelpModal } bsStyle='primary'
> className='btn-primary-ghost btn-big'
Ask for help on the forum onClick={ openHelpModal }
</Button> >
</ButtonGroup> Ask for help on the forum
</Button>
<ButtonSpacer />
</div> </div>
); );
} }