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",