DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Allow playground on lg screens not just xl

Browse Source 
Summary: This is now possible with the changes to centering the content

Reviewed By: danielbuechele

Differential Revision: D7009506

fbshipit-source-id: e2ff11d25dd6c388c82983d615e2a4c50b992583
This commit is contained in:
Emil Sjölander
2018-02-16 06:41:58 -08:00
committed by Facebook Github Bot
parent b21dd9891a
commit c84ed90272
6 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/components/DocsSidebar.css
View File

@@ -25,7 +25,7 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 992px) {
.DocsSidebar { .DocsSidebar {
width: 100%; width: 100%;
padding: 20px; padding: 20px;

2
website/src/components/Toolbar.js
View File

@@ -34,7 +34,7 @@ export default class Toolbar extends Component<Props> {
<Link to="/docs" activeClassName="selected">Documentation</Link> <Link to="/docs" activeClassName="selected">Documentation</Link>
<Row> <Row>
<Col xl={24} lg={0} md={0} sm={0} xs={0}> <Col lg={24} md={0} sm={0} xs={0}>
<Link to="/playground" activeClassName="selected">Playground</Link> <Link to="/playground" activeClassName="selected">Playground</Link>
</Col> </Col>
</Row> </Row>

2
website/src/pages/index.js
View File

@@ -57,7 +57,7 @@ const HeroSection = () => (
const PlaygroundSection = () => ( const PlaygroundSection = () => (
<Row> <Row>
<Col xl={24} lg={0} md={0} sm={0} xs={0}> <Col lg={24} md={0} sm={0} xs={0}>
<Playground selectedNodePath={[]} showGuides={false} height={601} /> <Playground selectedNodePath={[]} showGuides={false} height={601} />
</Col> </Col>
</Row> </Row>

6
website/src/pages/playground/index.css
View File

@@ -1,16 +1,16 @@
.playground { .playground-page {
display: flex; display: flex;
flex: 1; flex: 1;
} }
.playground .error-container { .playground-page .error-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.playground .error-text { .playground-page .error-text {
color: #444950; color: #444950;
line-height: 180%; line-height: 180%;
font-size: 16px; font-size: 16px;

6
website/src/pages/playground/index.js
View File

@@ -18,12 +18,12 @@ import './index.css';
export default () => ( export default () => (
<Page> <Page>
<Row className="playground"> <Row className="playground-page">
<Col xl={24} lg={0} md={0} sm={0} xs={0}> <Col lg={24} md={0} sm={0} xs={0}>
<Playground height="100%" selectedNodePath={[]} persist /> <Playground height="100%" selectedNodePath={[]} persist />
</Col> </Col>
<Col xl={0} xs={24} className="error-container"> <Col lg={0} xs={24} className="error-container">
<p className="error-text">Sorry! The playground only works on larger displays currently.</p> <p className="error-text">Sorry! The playground only works on larger displays currently.</p>
</Col> </Col>
</Row> </Row>

2
website/src/templates/index.css
View File

@@ -80,7 +80,7 @@
padding-right: 3px; padding-right: 3px;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 992px) {
.playground .Playground { .playground .Playground {
display: none; display: none;
} }