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

Merge pull request #15022 from no-stack-dub-sack/feat/challenge-desc

Browse Source 
feat(views): create global challenge-description component
This commit is contained in:
Berkeley Martinez
2017-08-08 18:22:10 -07:00
committed by GitHub
parent 34d512ffeb 5501542e10
commit 0d70db5d98
5 changed files with 76 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
common/app/routes/challenges/Challenge-Description.jsx Normal file
View File

@ -0,0 +1,24 @@
import React, { PropTypes } from 'react';
import { Col, Row } from 'react-bootstrap';
import ns from './ns.json';
const propTypes = {
children: PropTypes.array
};
export default function ChallengeDescription({ children }) {
return (
<Row>
<Col
className={ `${ns}-instructions` }
xs={ 12 }
>
{ children }
</Col>
</Row>
);
}
ChallengeDescription.displayName = 'ChallengeDescription';
ChallengeDescription.propTypes = propTypes;

38
common/app/routes/challenges/challenges.less
View File

@ -38,6 +38,44 @@
}
}
.@{ns}-instructions {
margin-bottom: 5px;
h4 {
margin-bottom: 0;
}
blockquote {
font-size: 90%;
font-family: @font-family-monospace !important;
color: @code-color;
background-color: #fffbe5;
border-radius: @border-radius-base;
border: 1px solid @pre-border-color;
white-space: pre;
padding: 5px 10px;
margin-bottom: 10px;
margin-top: -5px;
overflow: auto;
}
dfn {
font-family: @font-family-monospace;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
padding: 1px 5px;
}
& a, #MDN-links a {
color: #31708f;
}
& a::after, #MDN-links a::after {
font-size: 70%;
font-family: FontAwesome;
content: " \f08e";
}
ol {
font-size: 16px;
}
}
.night {
.@{ns}-instructions blockquote {
background-color: #242424;

16
common/app/routes/challenges/views/backend/Back-End.jsx
View File

@ -8,6 +8,7 @@ import {
} from 'react-bootstrap';
import ChallengeTitle from '../../Challenge-Title.jsx';
import ChallengeDescription from '../../Challenge-Description.jsx';
import SolutionInput from '../../Solution-Input.jsx';
import TestSuite from '../../Test-Suite.jsx';
import Output from '../../Output.jsx';
@ -120,13 +121,16 @@ export class BackEnd extends PureComponent {
return (
<Row>
<Col
md={ 6 }
mdOffset={ 3 }
xs={ 12 }
xs={ 6 }
xsOffset={ 3 }
>
<Row className='challenge-instructions'>
<ChallengeTitle>{ title }</ChallengeTitle>
{ this.renderDescription(description) }
<Row>
<ChallengeTitle>
{ title }
</ChallengeTitle>
<ChallengeDescription>
{ this.renderDescription(description) }
</ChallengeDescription>
</Row>
<Row>
<form

13
common/app/routes/challenges/views/classic/Side-Panel.jsx
View File

@ -3,12 +3,12 @@ import ReactDom from 'react-dom';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import PureComponent from 'react-pure-render/component';
import { Col, Row } from 'react-bootstrap';
import ns from './ns.json';
import ToolPanel from './Tool-Panel.jsx';
import ChallengeTitle from '../../Challenge-Title.jsx';
import ChallengeDescription from '../../Challenge-Description.jsx';
import TestSuite from '../../Test-Suite.jsx';
import Output from '../../Output.jsx';
import {
@ -132,14 +132,9 @@ export class SidePanel extends PureComponent {
<ChallengeTitle>
{ title }
</ChallengeTitle>
<Row>
<Col
className={ `${ns}-instructions` }
xs={ 12 }
>
{ this.renderDescription(description) }
</Col>
</Row>
<ChallengeDescription>
{ this.renderDescription(description) }
</ChallengeDescription>
</div>
<ToolPanel
executeChallenge={ executeChallenge }

48
common/app/routes/challenges/views/classic/classic.less
View File

@ -16,55 +16,7 @@
padding-right: 5px;
}
.@{ns}-instructions {
margin-bottom: 5px;
h4 {
margin-bottom: 0;
}
blockquote {
font-size: 90%;
font-family: @font-family-monospace;
color: @code-color;
background-color: #fffbe5;
border-radius: @border-radius-base;
border: 1px solid @pre-border-color;
white-space: pre;
padding: 5px 10px;
margin-bottom: 10px;
margin-top: -5px;
overflow: auto;
}
dfn {
font-family: @font-family-monospace;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
padding: 1px 5px;
}
& a, #MDN-links a {
color: #31708f;
}
& a::after, #MDN-links a::after {
font-size: 70%;
font-family: FontAwesome;
content: " \f08e";
}
ol {
font-size: 16px;
}
}
.night {
.@{ns}-instructions blockquote {
background-color: #242424;
border-color: #515151;
color: #ABABAB
}
.@{ns}-instructions dfn {
background-color: #242424;
color: #02a902;
}
.@{ns}-editor .CodeMirror {
background-color:#242424;
color:#ABABAB;