diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css index 045e35d787..a96b2c77b0 100644 --- a/client/src/components/layouts/learn.css +++ b/client/src/components/layouts/learn.css @@ -1,4 +1,6 @@ #learn-app-wrapper .desktop-layout { + display: flex; + flex-direction: column; height: calc( 100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) ); diff --git a/client/src/templates/Challenges/classic/DesktopLayout.js b/client/src/templates/Challenges/classic/DesktopLayout.js index 610d8c4653..514989ab06 100644 --- a/client/src/templates/Challenges/classic/DesktopLayout.js +++ b/client/src/templates/Challenges/classic/DesktopLayout.js @@ -37,9 +37,7 @@ const propTypes = { }; const reflexProps = { - propagateDimensions: true, - renderOnResize: true, - renderOnResizeRate: 20 + propagateDimensions: true }; class DesktopLayout extends Component { @@ -88,7 +86,7 @@ class DesktopLayout extends Component { layoutState; return ( - +
{projectBasedChallenge && ( )} - - - {!projectBasedChallenge && ( - - {instructions} - - )} - {!projectBasedChallenge && ( - - )} - + + {!projectBasedChallenge && ( - {challengeFile && - showUpcomingChanges && - !hasEditableBoundries && } - {challengeFile && ( - + )} + {!projectBasedChallenge && ( + + )} + + + {challengeFile && showUpcomingChanges && !hasEditableBoundries && ( + + )} + {challengeFile && ( + + + {editor} + + {isConsoleDisplayable && ( + + )} + {isConsoleDisplayable && ( - {editor} + {testOutput} - {isConsoleDisplayable && ( - - )} - {isConsoleDisplayable && ( - - {testOutput} - - )} - - )} + )} + + )} + + {isPreviewDisplayable && ( + + )} + {isPreviewDisplayable && ( + + {preview} - {isPreviewDisplayable && ( - - )} - {isPreviewDisplayable && ( - - {preview} - - )} - - - + )} + +
); } } diff --git a/client/src/templates/Challenges/classic/MultifileEditor.js b/client/src/templates/Challenges/classic/MultifileEditor.js index d569e461da..b1390e80ea 100644 --- a/client/src/templates/Challenges/classic/MultifileEditor.js +++ b/client/src/templates/Challenges/classic/MultifileEditor.js @@ -98,9 +98,7 @@ class MultifileEditor extends Component { // editors.map(props => ).join() // ...probably! As long as we can put keys in the right places. const reflexProps = { - propagateDimensions: true, - renderOnResize: true, - renderOnResizeRate: 20 + propagateDimensions: true }; let splitterJSXRight, splitterHTMLRight, splitterCSSRight;