diff --git a/client/src/templates/Challenges/classic/desktop-layout.tsx b/client/src/templates/Challenges/classic/desktop-layout.tsx
index a303c1f86c..0e11011bc7 100644
--- a/client/src/templates/Challenges/classic/desktop-layout.tsx
+++ b/client/src/templates/Challenges/classic/desktop-layout.tsx
@@ -9,7 +9,6 @@ import {
ResizeProps
} from '../../../redux/prop-types';
import ActionRow from './action-row';
-import EditorTabs from './editor-tabs';
const { showUpcomingChanges } = envData;
@@ -82,10 +81,10 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
const challengeFile = getChallengeFile();
const projectBasedChallenge = showUpcomingChanges && hasEditableBoundaries;
- const isPreviewDisplayable = projectBasedChallenge
+ const displayPreview = projectBasedChallenge
? showPreview && hasPreview
: hasPreview;
- const isConsoleDisplayable = projectBasedChallenge ? showConsole : true;
+ const displayConsole = projectBasedChallenge ? showConsole : true;
const { codePane, editorPane, instructionPane, previewPane, testsPane } =
layoutState;
@@ -112,9 +111,6 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
)}
- {challengeFile && showUpcomingChanges && !hasEditableBoundaries && (
-
- )}
{challengeFile && (
{
>
{editor}
- {isConsoleDisplayable && (
+ {displayConsole && (
)}
- {isConsoleDisplayable && (
+ {displayConsole && (
{
)}
- {isPreviewDisplayable && (
-
- )}
- {isPreviewDisplayable && (
+ {displayPreview && }
+ {displayPreview && (
{preview}
diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx
index d412707649..f278b7ded3 100644
--- a/client/src/templates/Challenges/classic/mobile-layout.tsx
+++ b/client/src/templates/Challenges/classic/mobile-layout.tsx
@@ -33,6 +33,7 @@ interface MobileLayoutProps {
preview: JSX.Element;
testOutput: JSX.Element;
videoUrl: string;
+ usesMultifileEditor: boolean;
}
class MobileLayout extends Component {
static displayName: string;
@@ -49,7 +50,8 @@ class MobileLayout extends Component {
hasPreview,
preview,
guideUrl,
- videoUrl
+ videoUrl,
+ usesMultifileEditor
} = this.props;
const editorTabPaneProps = {
@@ -57,6 +59,10 @@ class MobileLayout extends Component {
unmountOnExit: true
};
+ // Unlike the desktop layout the mobile version does not have an ActionRow,
+ // but still needs a way to switch between the different tabs.
+ const displayEditorTabs = showUpcomingChanges && usesMultifileEditor;
+
return (
<>
{
title={i18next.t('learn.editor-tabs.code')}
{...editorTabPaneProps}
>
- {showUpcomingChanges && }
+ {displayEditorTabs && }
{editor}
{
})}
preview={this.renderPreview()}
testOutput={this.renderTestOutput()}
+ usesMultifileEditor={usesMultifileEditor}
videoUrl={this.getVideoUrl()}
/>
diff --git a/curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json b/curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json
index 52dbe573c8..000de7300c 100644
--- a/curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json
+++ b/curriculum/challenges/_meta/learn-css-animation-by-building-a-ferris-wheel/meta.json
@@ -1,6 +1,7 @@
{
"name": "Learn CSS Animation by Building a Ferris Wheel",
"isUpcomingChange": true,
+ "usesMultifileEditor": true,
"dashedName": "learn-css-animation-by-building-a-ferris-wheel",
"order": 15,
"time": "5 hours",
diff --git a/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json b/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json
index 85c04aed17..2726677b0a 100644
--- a/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json
+++ b/curriculum/challenges/_meta/learn-css-flexbox-by-building-a-photo-gallery/meta.json
@@ -1,6 +1,7 @@
{
"name": "Learn CSS Flexbox by Building a Photo Gallery",
"isUpcomingChange": true,
+ "usesMultifileEditor": true,
"dashedName": "learn-css-flexbox-by-building-a-photo-gallery",
"order": 20,
"time": "5 hours",
diff --git a/curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json b/curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json
index d862dfd46a..c9c7dd7514 100644
--- a/curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json
+++ b/curriculum/challenges/_meta/learn-css-grid-by-building-a-magazine/meta.json
@@ -1,6 +1,7 @@
{
"name": "Learn CSS Grid by Building a Magazine",
"isUpcomingChange": true,
+ "usesMultifileEditor": true,
"dashedName": "learn-css-grid-by-building-a-magazine",
"order": 16,
"time": "5 hours",
diff --git a/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json b/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json
index 6e7737da15..7b4d912d2f 100644
--- a/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json
+++ b/curriculum/challenges/_meta/learn-html-forms-by-building-a-registration-form/meta.json
@@ -1,6 +1,7 @@
{
"name": "Learn HTML Forms by Building a Registration Form",
"isUpcomingChange": true,
+ "usesMultifileEditor": true,
"dashedName": "learn-html-forms-by-building-a-registration-form",
"order": 23,
"time": "5 hours",
diff --git a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
index 7ddd52842d..39f2fc833d 100644
--- a/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
+++ b/curriculum/challenges/_meta/learn-typography-by-building-a-nutrition-label/meta.json
@@ -1,6 +1,7 @@
{
"name": "Learn Typography by Building a Nutrition Label",
"isUpcomingChange": true,
+ "usesMultifileEditor": true,
"dashedName": "learn-typography-by-building-a-nutrition-label",
"order": 25,
"time": "5 hours",