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

Don't occlude page content with the admin panel

src/components/page/www/page.jsx

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

src/views/preview/preview.scss

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

src/views/preview/project-view.jsx

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