feat(client): place tool panel at the bottom

client/src/templates/Challenges/classic/DesktopLayout.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import PropTypes from 'prop-types';
 
@@ -14,7 +14,8 @@ const propTypes = {
     onStopResize: PropTypes.func,
     onResize: PropTypes.func
   }),
-  testOutput: PropTypes.element
+  testOutput: PropTypes.element,
+  toolPanel: PropTypes.element
 };
 
 class DesktopLayout extends Component {
@@ -26,46 +27,50 @@ class DesktopLayout extends Component {
       editor,
       testOutput,
       hasPreview,
-      preview
+      preview,
+      toolPanel
     } = this.props;
     return (
-      <ReflexContainer className='desktop-layout' orientation='vertical'>
+      <Fragment>
-        <ReflexElement flex={1} {...resizeProps}>
+        <ReflexContainer className='desktop-layout' orientation='vertical'>
-          {instructions}
+          <ReflexElement flex={1} {...resizeProps}>
-        </ReflexElement>
+            {instructions}
-        <ReflexSplitter propagate={true} {...resizeProps} />
-        <ReflexElement flex={1} {...resizeProps}>
-          {challengeFile && (
-            <ReflexContainer key={challengeFile.key} orientation='horizontal'>
-              <ReflexElement
-                flex={1}
-                propagateDimensions={true}
-                renderOnResize={true}
-                renderOnResizeRate={20}
-                {...resizeProps}
-                >
-                {editor}
-              </ReflexElement>
-              <ReflexSplitter propagate={true} {...resizeProps} />
-              <ReflexElement
-                flex={0.25}
-                propagateDimensions={true}
-                renderOnResize={true}
-                renderOnResizeRate={20}
-                {...resizeProps}
-                >
-                {testOutput}
-              </ReflexElement>
-            </ReflexContainer>
-          )}
-        </ReflexElement>
-        {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
-        {hasPreview && (
-          <ReflexElement flex={0.7} {...resizeProps}>
-            {preview}
           </ReflexElement>
-        )}
+          <ReflexSplitter propagate={true} {...resizeProps} />
-      </ReflexContainer>
+          <ReflexElement flex={1} {...resizeProps}>
+            {challengeFile && (
+              <ReflexContainer key={challengeFile.key} orientation='horizontal'>
+                <ReflexElement
+                  flex={1}
+                  propagateDimensions={true}
+                  renderOnResize={true}
+                  renderOnResizeRate={20}
+                  {...resizeProps}
+                  >
+                  {editor}
+                </ReflexElement>
+                <ReflexSplitter propagate={true} {...resizeProps} />
+                <ReflexElement
+                  flex={0.25}
+                  propagateDimensions={true}
+                  renderOnResize={true}
+                  renderOnResizeRate={20}
+                  {...resizeProps}
+                  >
+                  {testOutput}
+                </ReflexElement>
+              </ReflexContainer>
+            )}
+          </ReflexElement>
+          {hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
+          {hasPreview && (
+            <ReflexElement flex={0.7} {...resizeProps}>
+              {preview}
+            </ReflexElement>
+          )}
+        </ReflexContainer>
+        {toolPanel}
+      </Fragment>
     );
   }
 }

client/src/templates/Challenges/classic/MobileLayout.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { TabPane, Tabs } from '@freecodecamp/react-bootstrap';
 import { connect } from 'react-redux';
 
-import ToolPanel from '../components/Tool-Panel';
 import { createStructuredSelector } from 'reselect';
 import { currentTabSelector, moveToTab } from '../redux';
 import { bindActionCreators } from 'redux';
@@ -23,13 +22,12 @@ const mapDispatchToProps = dispatch =>
 const propTypes = {
   currentTab: PropTypes.number,
   editor: PropTypes.element,
-  guideUrl: PropTypes.string,
   hasPreview: PropTypes.bool,
   instructions: PropTypes.element,
   moveToTab: PropTypes.func,
   preview: PropTypes.element,
   testOutput: PropTypes.element,
-  videoUrl: PropTypes.string
+  toolPanel: PropTypes.element
 };
 
 class MobileLayout extends Component {
@@ -42,8 +40,7 @@ class MobileLayout extends Component {
       testOutput,
       hasPreview,
       preview,
-      guideUrl,
+      toolPanel
-      videoUrl
     } = this.props;
 
     const editorTabPaneProps = {
@@ -74,7 +71,7 @@ class MobileLayout extends Component {
             </TabPane>
           )}
         </Tabs>
-        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
+        {toolPanel}
       </Fragment>
     );
   }

client/src/templates/Challenges/classic/Show.js

@@ -19,6 +19,7 @@ import VideoModal from '../components/VideoModal';
 import ResetModal from '../components/ResetModal';
 import MobileLayout from './MobileLayout';
 import DesktopLayout from './DesktopLayout';
+import ToolPanel from '../components/Tool-Panel';
 
 import { randomCompliment } from '../utils/get-words';
 import { createGuideUrl } from '../utils';
@@ -246,6 +247,17 @@ class ShowClassic extends Component {
     );
   }
 
+  renderToolPanel(isMobile) {
+    return (
+      <ToolPanel
+        className='classic-tool-panel'
+        guideUrl={this.getGuideUrl()}
+        isMobile={isMobile}
+        videoUrl={this.getVideoUrl()}
+      />
+    );
+  }
+
   render() {
     return (
       <LearnLayout>
@@ -257,14 +269,13 @@ class ShowClassic extends Component {
             matches ? (
               <MobileLayout
                 editor={this.renderEditor()}
-                guideUrl={this.getGuideUrl()}
                 hasPreview={this.hasPreview()}
                 instructions={this.renderInstructionsPanel({
                   showToolPanel: false
                 })}
                 preview={this.renderPreview()}
                 testOutput={this.renderTestOutput()}
-                videoUrl={this.getVideoUrl()}
+                toolPanel={this.renderToolPanel(true)}
               />
             ) : (
               <DesktopLayout
@@ -272,11 +283,12 @@ class ShowClassic extends Component {
                 editor={this.renderEditor()}
                 hasPreview={this.hasPreview()}
                 instructions={this.renderInstructionsPanel({
-                  showToolPanel: true
+                  showToolPanel: false
                 })}
                 preview={this.renderPreview()}
                 resizeProps={this.resizeProps}
                 testOutput={this.renderTestOutput()}
+                toolPanel={this.renderToolPanel(false)}
               />
             )
           }

client/src/templates/Challenges/classic/classic.css

@@ -3,7 +3,7 @@
 }
 
 .desktop-layout {
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height) - 42px);
 }
 
 .monaco-menu .action-label {
@@ -34,3 +34,13 @@
   height: 100%;
   overflow: hidden;
 }
+
+.classic-tool-panel.tool-panel-group {
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 0 2px;
+}
+
+.classic-tool-panel.tool-panel-group .btn-block + .btn-block {
+  margin: 0 2px 0 0;
+}

client/src/templates/Challenges/components/Tool-Panel.js

@@ -21,6 +21,7 @@ const mapDispatchToProps = dispatch =>
   );
 
 const propTypes = {
+  className: PropTypes.string,
   executeChallenge: PropTypes.func.isRequired,
   guideUrl: PropTypes.string,
   isMobile: PropTypes.bool,
@@ -31,6 +32,7 @@ const propTypes = {
 };
 
 function ToolPanel({
+  className,
   executeChallenge,
   isMobile,
   openHelpModal,
@@ -41,9 +43,11 @@ function ToolPanel({
 }) {
   return (
     <Fragment>
-      <div className={`tool-panel-group ${
+      <div
+        className={`tool-panel-group ${
           isMobile ? 'tool-panel-group-mobile' : ''
-        }`}>
+        } ${className}`}
+        >
         <Button block={true} bsStyle='primary' onClick={executeChallenge}>
           {isMobile ? 'Run' : 'Run the Tests'}
         </Button>
@@ -92,7 +96,10 @@ function ToolPanel({
 ToolPanel.displayName = 'ToolPanel';
 ToolPanel.propTypes = propTypes;
 
-export default connect(mapStateToProps, mapDispatchToProps)(ToolPanel);
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ToolPanel);
 
 /*
 <Button