gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: unneeded scrollbar multi file editor (#42411)

Browse Source 
* fix: multi editor unneeded scrollbar
This commit is contained in:
Sem Bauke
2021-06-23 19:15:36 +02:00
committed by GitHub
parent 4ed0befc4e
commit 3b4afe0e59
1 changed files with 65 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
client/src/templates/Challenges/classic/DesktopLayout.js
View File

@ -84,69 +84,79 @@ class DesktopLayout extends Component {
return ( return (
<Fragment> <Fragment>
{projectBasedChallenge && ( <ReflexContainer className='desktop-layout' orientation='horizontal'>
<ActionRow switchDisplayTab={this.switchDisplayTab} {...this.state} /> {projectBasedChallenge && (
)} <ActionRow
<ReflexContainer className='desktop-layout' orientation='vertical'> switchDisplayTab={this.switchDisplayTab}
{!projectBasedChallenge && ( {...this.state}
<ReflexElement />
flex={instructionPane.flex}
name='instructionPane'
{...resizeProps}
>
{instructions}
</ReflexElement>
)} )}
{!projectBasedChallenge && ( <ReflexElement flex={8} {...reflexProps} {...resizeProps}>
<ReflexSplitter propagate={true} {...resizeProps} /> <ReflexContainer orientation='vertical'>
)} {!projectBasedChallenge && (
<ReflexElement
flex={editorPane.flex}
name='editorPane'
{...resizeProps}
>
{challengeFile && showUpcomingChanges && !hasEditableBoundries && (
<EditorTabs />
)}
{challengeFile && (
<ReflexContainer key={challengeFile.key} orientation='horizontal'>
<ReflexElement <ReflexElement
flex={codePane.flex} flex={instructionPane.flex}
name='codePane' name='instructionPane'
{...reflexProps}
{...resizeProps} {...resizeProps}
> >
{<Fragment>{editor}</Fragment>} {instructions}
</ReflexElement> </ReflexElement>
{isConsoleDisplayable && ( )}
<ReflexSplitter propagate={true} {...resizeProps} /> {!projectBasedChallenge && (
)} <ReflexSplitter propagate={true} {...resizeProps} />
{isConsoleDisplayable && ( )}
<ReflexElement
flex={testsPane.flex} <ReflexElement
name='testsPane' flex={editorPane.flex}
{...reflexProps} name='editorPane'
{...resizeProps} {...resizeProps}
>
{challengeFile &&
showUpcomingChanges &&
!hasEditableBoundries && <EditorTabs />}
{challengeFile && (
<ReflexContainer
key={challengeFile.key}
orientation='horizontal'
> >
{testOutput} <ReflexElement
</ReflexElement> flex={codePane.flex}
name='codePane'
{...reflexProps}
{...resizeProps}
>
<Fragment>{editor}</Fragment>
</ReflexElement>
{isConsoleDisplayable && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{isConsoleDisplayable && (
<ReflexElement
flex={testsPane.flex}
name='testsPane'
{...reflexProps}
{...resizeProps}
>
{testOutput}
</ReflexElement>
)}
</ReflexContainer>
)} )}
</ReflexContainer> </ReflexElement>
)} {isPreviewDisplayable && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{isPreviewDisplayable && (
<ReflexElement
flex={previewPane.flex}
name='previewPane'
{...resizeProps}
>
{preview}
</ReflexElement>
)}
</ReflexContainer>
</ReflexElement> </ReflexElement>
{isPreviewDisplayable && (
<ReflexSplitter propagate={true} {...resizeProps} />
)}
{isPreviewDisplayable && (
<ReflexElement
flex={previewPane.flex}
name='previewPane'
{...resizeProps}
>
{preview}
</ReflexElement>
)}
</ReflexContainer> </ReflexContainer>
</Fragment> </Fragment>
); );