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

feat(views): create global challenge-description component

common/app/routes/challenges/Challenge-Description.jsx

@@ -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;

common/app/routes/challenges/challenges.less

@@ -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;

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

@@ -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 }
+          xs={ 6 }
-          mdOffset={ 3 }
+          xsOffset={ 3 }
-          xs={ 12 }
           >
-          <Row className='challenge-instructions'>
+          <Row>
-            <ChallengeTitle>{ title }</ChallengeTitle>
+            <ChallengeTitle>
-            { this.renderDescription(description) }
+              { title }
+            </ChallengeTitle>
+            <ChallengeDescription>
+              { this.renderDescription(description) }
+            </ChallengeDescription>
           </Row>
           <Row>
             <form

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

@@ -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>
+          <ChallengeDescription>
-            <Col
+            { this.renderDescription(description) }
-              className={ `${ns}-instructions` }
+          </ChallengeDescription>
-              xs={ 12 }
-              >
-              { this.renderDescription(description) }
-            </Col>
-          </Row>
         </div>
         <ToolPanel
           executeChallenge={ executeChallenge }

common/app/routes/challenges/views/classic/classic.less

@@ -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;