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

fix(learn): some styling issues

Browse Source
This commit is contained in:
Valeriy
2019-01-12 03:47:58 +03:00
committed by Stuart Taylor
parent c683f4c579
commit 369f150029
4 changed files with 22 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/learn.css
View File

@@ -7,27 +7,12 @@
margin: 0 auto; margin: 0 auto;
} }
@media screen, (max-width: 630px) { @media screen and (max-width: 630px) {
.learn-page-wrapper { .learn-page-wrapper {
padding: 0px 25px 0px 25px; padding: 0 25px;
} }
} }
.learn-page-wrapper p { .learn-page-wrapper p {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
#learn-app-wrapper {
overflow-x:hidden;
}
@media screen, (max-width: 767px) {
#learn-app-wrapper {
right: -2em;
padding: 2px 0 0 0;
}
}
.reflex-layout.reflex-container.vertical {
margin: 0 18px;
}

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

@@ -1,20 +1,20 @@
import React, { Component, Fragment } from 'react'; import React, { Component } from 'react';
import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex'; import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const propTypes = { const propTypes = {
resizeProps: PropTypes.shape({
onStopResize: PropTypes.func,
onResize: PropTypes.func
}),
instructions: PropTypes.element,
challengeFile: PropTypes.shape({ challengeFile: PropTypes.shape({
key: PropTypes.string key: PropTypes.string
}), }),
editor: PropTypes.element, editor: PropTypes.element,
testOutput: PropTypes.element,
hasPreview: PropTypes.bool, hasPreview: PropTypes.bool,
preview: PropTypes.element instructions: PropTypes.element,
preview: PropTypes.element,
resizeProps: PropTypes.shape({
onStopResize: PropTypes.func,
onResize: PropTypes.func
}),
testOutput: PropTypes.element
}; };
class DesktopLayout extends Component { class DesktopLayout extends Component {
@@ -43,7 +43,7 @@ class DesktopLayout extends Component {
renderOnResize={true} renderOnResize={true}
renderOnResizeRate={20} renderOnResizeRate={20}
{...resizeProps} {...resizeProps}
> >
{editor} {editor}
</ReflexElement> </ReflexElement>
<ReflexSplitter propagate={true} {...resizeProps} /> <ReflexSplitter propagate={true} {...resizeProps} />
@@ -53,19 +53,17 @@ class DesktopLayout extends Component {
renderOnResize={true} renderOnResize={true}
renderOnResizeRate={20} renderOnResizeRate={20}
{...resizeProps} {...resizeProps}
> >
{testOutput} {testOutput}
</ReflexElement> </ReflexElement>
</ReflexContainer> </ReflexContainer>
)} )}
</ReflexElement> </ReflexElement>
{hasPreview && <ReflexSplitter propagate={true} {...resizeProps} />}
{hasPreview && ( {hasPreview && (
<Fragment> <ReflexElement flex={0.7} {...resizeProps}>
<ReflexSplitter propagate={true} {...resizeProps} /> {preview}
<ReflexElement flex={0.7} {...resizeProps}> </ReflexElement>
{preview}
</ReflexElement>
</Fragment>
)} )}
</ReflexContainer> </ReflexContainer>
); );

2
client/src/templates/Challenges/classic/classic.css
View File

@@ -13,7 +13,7 @@
overflow-y: auto; overflow-y: auto;
} }
@media screen, (max-width: 767px) { @media screen and (max-width: 767px) {
.instructions-panel { .instructions-panel {
height: calc(100vh - 112px); height: calc(100vh - 112px);
} }

8
client/src/templates/Challenges/components/preview.css
View File

@@ -1,4 +1,5 @@
.challenge-preview, .challenge-preview-frame { .challenge-preview,
.challenge-preview-frame {
height: calc(100vh - 38px); height: calc(100vh - 38px);
width: 100%; width: 100%;
padding: 0; padding: 0;
@@ -6,8 +7,9 @@
border: none; border: none;
} }
@media screen, (max-width: 767px) { @media screen and (max-width: 767px) {
.challenge-preview, .challenge-preview-frame { .challenge-preview,
.challenge-preview-frame {
height: calc(100vh - 112px); height: calc(100vh - 112px);
} }
} }