r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fixes #680 by adjusting canvas and iframe layout

Browse source 
- Set the preview canvas to `display:block` to remove vertical spacing
caused by the default value, which was making a full-height canvas cause
vertical scrolling, and the vertical scrollbar caused horizontal
scrolling
- Wrap the preview content in a container with `position:relative` and
no other visible content, so that the full-height iframe excludes the
height of the preview frame header, preventing it from going beyond the
height of the page
This commit is contained in:
bendman 2018-09-08 11:50:39 -07:00
parent 3b1cd6782b
commit ffa4ac145a
4 changed files with 52 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
client/modules/IDE/pages/IDEView.jsx
View file

@ -370,41 +370,43 @@ class IDEView extends React.Component {
<header className="preview-frame__header">
<h2 className="preview-frame__title">Preview</h2>
</header>
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
<div className="preview-frame__content">
<div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
</div>
<div>
{(
(
(this.props.preferences.textOutput ||
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) &&
this.props.ide.isPlaying
) ||
this.props.ide.isAccessibleOutputPlaying
)
}
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}
files={this.props.files}
content={this.props.selectedFile.content}
isPlaying={this.props.ide.isPlaying}
isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
autorefresh={this.props.preferences.autorefresh}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
endSketchRefresh={this.props.endSketchRefresh}
stopSketch={this.props.stopSketch}
setBlobUrl={this.props.setBlobUrl}
expandConsole={this.props.expandConsole}
/>
</div>
<div>
{(
(
(this.props.preferences.textOutput ||
this.props.preferences.gridOutput ||
this.props.preferences.soundOutput
) &&
this.props.ide.isPlaying
) ||
this.props.ide.isAccessibleOutputPlaying
)
}
</div>
<PreviewFrame
htmlFile={this.props.htmlFile}
files={this.props.files}
content={this.props.selectedFile.content}
isPlaying={this.props.ide.isPlaying}
isAccessibleOutputPlaying={this.props.ide.isAccessibleOutputPlaying}
textOutput={this.props.preferences.textOutput}
gridOutput={this.props.preferences.gridOutput}
soundOutput={this.props.preferences.soundOutput}
setTextOutput={this.props.setTextOutput}
setGridOutput={this.props.setGridOutput}
setSoundOutput={this.props.setSoundOutput}
dispatchConsoleEvent={this.props.dispatchConsoleEvent}
autorefresh={this.props.preferences.autorefresh}
previewIsRefreshing={this.props.ide.previewIsRefreshing}
endSketchRefresh={this.props.endSketchRefresh}
stopSketch={this.props.stopSketch}
setBlobUrl={this.props.setBlobUrl}
expandConsole={this.props.expandConsole}
/>
</div>
</SplitPane>
</SplitPane>

3
client/modules/IDE/reducers/files.js
View file

@ -31,6 +31,9 @@ const defaultCSS =
margin: 0;
padding: 0;
}
canvas {
display: block;
}
`;
const initialState = () => {

10
client/styles/components/_preview-frame.scss
View file

@ -5,6 +5,11 @@
border-width: 0;
}
.preview-frame-holder {
display: flex;
flex-direction: column;
height: 100%;
}
.preview-frame-overlay {
height: 100%;
@ -37,3 +42,8 @@
font-size: #{12 / $base-font-size}rem;
font-weight: normal;
}
.preview-frame__content {
position: relative;
flex: 1 1 0;
}

3
server/examples.js
View file

@ -28,6 +28,9 @@ const defaultCSS =
margin: 0;
padding: 0;
}
canvas {
display: block;
}
`;
const clientId = process.env.GITHUB_ID;