scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2425 from rschamp/admin-panel-occlusion

Browse source 
Don't occlude page content with the admin panel
This commit is contained in:
Paul Kaplan 2018-12-10 10:35:59 -05:00 committed by GitHub
commit 901dfeb6ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/page/www/page.jsx
View file

@ -6,9 +6,12 @@ const Navigation = require('../../navigation/www/navigation.jsx');
const Footer = require('../../footer/www/footer.jsx'); const Footer = require('../../footer/www/footer.jsx');
const ErrorBoundary = require('../../errorboundary/errorboundary.jsx'); const ErrorBoundary = require('../../errorboundary/errorboundary.jsx');
const Page = props => ( const Page = ({
children,
className
}) => (
<ErrorBoundary> <ErrorBoundary>
<div className="page"> <div className={classNames('page', className)}>
<div <div
className={classNames({ className={classNames({
staging: process.env.SCRATCH_ENV === 'staging' staging: process.env.SCRATCH_ENV === 'staging'
@ -18,7 +21,7 @@ const Page = props => (
<Navigation /> <Navigation />
</div> </div>
<div id="view"> <div id="view">
{props.children} {children}
</div> </div>
<div id="footer"> <div id="footer">
<Footer /> <Footer />
@ -28,7 +31,8 @@ const Page = props => (
); );
Page.propTypes = { Page.propTypes = {
children: PropTypes.node children: PropTypes.node,
className: PropTypes.string
}; };
module.exports = Page; module.exports = Page;

9
src/views/preview/preview.scss
View file

@ -20,6 +20,14 @@ $stage-width: 480px;
height: 100%; height: 100%;
} }
.page-has-admin-panel {
padding-left: 20px;
}
.page-has-admin-panel.admin-panel-open {
padding-left: 250px;
}
.preview { .preview {
.inner { .inner {
@ -36,6 +44,7 @@ $stage-width: 480px;
} }
.project-admin-panel { .project-admin-panel {
margin-top: 51px;
border: 0; border: 0;
padding: 1rem; padding: 1rem;
overflow: hidden; overflow: hidden;

8
src/views/preview/project-view.jsx
View file

@ -2,6 +2,7 @@
// idea is that we shouldn't require a page reload to switch back and forth // idea is that we shouldn't require a page reload to switch back and forth
const bindAll = require('lodash.bindall'); const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const connect = require('react-redux').connect; const connect = require('react-redux').connect;
@ -537,7 +538,12 @@ class Preview extends React.Component {
return ( return (
this.props.playerMode ? this.props.playerMode ?
<Page> <Page
className={classNames({
'page-has-admin-panel': this.props.isAdmin,
'admin-panel-open': this.state.adminPanelOpen
})}
>
<PreviewPresentation <PreviewPresentation
addToStudioOpen={this.state.addToStudioOpen} addToStudioOpen={this.state.addToStudioOpen}
adminModalOpen={this.state.adminModalOpen} adminModalOpen={this.state.adminModalOpen}