Merge pull request #40 from topcoder-platform/PROD-2649_mobile-fixes

PROD-2649 - handle mobile fixes

Author: vas3a

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

@@ -40,6 +40,13 @@
   padding-bottom: 16px;
 }
 
+#challenge-page-tabs .tab-content.no-toolpanel {
+  height: calc(
+    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 24px -
+      16px
+  );
+}
+
 #challenge-page-tabs .tab-pane {
   height: 100%;
   overflow: hidden;

client/src/templates/Challenges/classic/editor.tsx

@@ -1054,7 +1054,11 @@ const Editor = (props: EditorProps): JSX.Element => {
       focusIfTargetEditor();
     }
 
-    if (props.initialTests) initTests(props.initialTests);
+    // Once a challenge has been completed, we don't want changes to the content
+    // to reset the tests since the user is already done with the challenge.
+    if (props.initialTests && !challengeIsComplete()) {
+      initTests(props.initialTests);
+    }
 
     if (hasEditableRegion() && editor) {
       if (props.isResetting) {

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -1,8 +1,18 @@
 import React, { Component, ReactElement } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
 
+import { Test } from '../../../redux/prop-types';
 import ToolPanel from '../components/tool-panel';
+import { challengeTestsSelector } from '../redux';
 import MobilePaneSelector, { Tab } from './mobile-pane-selector';
 
+const mapStateToProps = createSelector(
+  challengeTestsSelector,
+  (tests: Test[]) => ({
+    tests
+  })
+);
 interface MobileLayoutProps {
   editor: JSX.Element | null;
   guideUrl: string;
@@ -15,6 +25,8 @@ interface MobileLayoutProps {
   testOutput: JSX.Element;
   videoUrl: string;
   usesMultifileEditor: boolean;
+  testsRunning: boolean;
+  tests: Test[];
 }
 
 interface MobileLayoutState {
@@ -45,11 +57,13 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       hasPreview,
       notes,
       preview,
-      guideUrl,
-      videoUrl,
+      tests,
+      testsRunning,
       usesMultifileEditor
     } = this.props;
 
+    const isChallengeComplete = tests.every(test => test.pass && !test.err);
+
     // Unlike the desktop layout the mobile version does not have an ActionRow,
     // but still needs a way to switch between the different tabs.
 
@@ -63,19 +77,29 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
           hasNotes={hasNotes}
           usesMultifileEditor={usesMultifileEditor}
         />
-        <div className='tab-content'>
+        <div
+          className={`tab-content ${
+            hasEditableBoundaries ? 'no-toolpanel' : ''
+          }`}
+        >
           {currentTab === Tab.Editor && editor}
           {currentTab === Tab.Instructions && instructions}
           {currentTab === Tab.Console && testOutput}
           {currentTab === Tab.Notes && notes}
           {currentTab === Tab.Preview && preview}
         </div>
-        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
+        {!hasEditableBoundaries && (
+          <ToolPanel
+            isMobile={true}
+            isRunningTests={testsRunning}
+            challengeIsCompleted={isChallengeComplete}
+          />
+        )}
       </div>
     );
   }
 }
 
 MobileLayout.displayName = 'MobileLayout';
 
-export default MobileLayout;
+export default connect(mapStateToProps)(MobileLayout);

client/src/templates/Challenges/classic/show.tsx

@@ -446,7 +446,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
           <Helmet title={`${this.getBlockNameTitle(t)} | freeCodeCamp.org`} />
           <Media maxWidth={MAX_MOBILE_WIDTH}>
             <MobileLayout
-              editor={this.renderEditor()}
+              editor={this.renderEditor(hasEditableBoundaries)}
               guideUrl={getGuideUrl({ forumTopicId, title })}
               hasEditableBoundaries={hasEditableBoundaries}
               hasNotes={!!notes}
@@ -459,6 +459,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
               testOutput={this.renderTestOutput()}
               usesMultifileEditor={usesMultifileEditor}
               videoUrl={this.getVideoUrl()}
+              testsRunning={this.props.testsRunning}
             />
           </Media>
           <Media minWidth={MAX_MOBILE_WIDTH + 1}>

client/src/templates/Challenges/components/output.css

@@ -6,6 +6,7 @@
   width: 100%;
   overflow-y: auto;
   background: var(--tc-black-5);
+  margin-bottom: 0;
 }
 
 pre.output-text code {

client/src/templates/Challenges/components/tool-panel.tsx

@@ -52,8 +52,8 @@ interface ToolPanelProps {
   openHelpModal: () => void;
   openVideoModal: () => void;
   openResetModal: () => void;
-  guideUrl: string;
-  videoUrl: string;
+  guideUrl?: string;
+  videoUrl?: string;
   challengeIsCompleted?: boolean;
 }