add some base editor styling
This commit is contained in:
catarak
parent
bd3a554121
commit
5858914559
15 changed files with 74 additions and 10 deletions
|
|
@ -4,7 +4,7 @@ import { Provider } from 'react-redux'
|
|||
import configureStore from '../shared/redux/store/configureStore'
|
||||
import App from '../shared/containers/App/App'
|
||||
|
||||
require('../static/styles/main.scss');
|
||||
require('../styles/main.scss');
|
||||
|
||||
const initialState = window.__INITIAL_STATE__
|
||||
const store = configureStore(initialState)
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>p5.js Web Editor</title>
|
||||
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="root" class="root-app">
|
||||
</div>
|
||||
<script src="/dist/bundle.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ class Editor extends React.Component {
|
|||
this._cm = CodeMirror(this.refs.container, {
|
||||
theme: 'p5-widget',
|
||||
value: this.props.content,
|
||||
// value: "var a = 'Hello World!';",
|
||||
lineNumbers: true,
|
||||
mode: 'javascript'
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ class PreviewFrame extends React.Component {
|
|||
renderFrameContents() {
|
||||
let doc = ReactDOM.findDOMNode(this).contentDocument;
|
||||
if(doc.readyState === 'complete') {
|
||||
// ReactDOM.render(this.props.children, doc.body);
|
||||
this.renderSketch();
|
||||
} else {
|
||||
setTimeout(this.renderFrameContents, 0);
|
||||
|
|
@ -21,6 +20,7 @@ class PreviewFrame extends React.Component {
|
|||
let doc = ReactDOM.findDOMNode(this).contentDocument;
|
||||
doc.write('');
|
||||
doc.close();
|
||||
ReactDOM.render(this.props.head, doc.head);
|
||||
let p5Script = doc.createElement('script');
|
||||
p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
|
||||
doc.body.appendChild(p5Script);
|
||||
|
|
@ -39,7 +39,7 @@ class PreviewFrame extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
return <iframe sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
|
||||
return <iframe className="preview-frame" frameBorder="0" sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"></iframe>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,11 +9,15 @@ import * as FileActions from '../../redux/actions'
|
|||
class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div class="app">
|
||||
<div className="app">
|
||||
<Editor
|
||||
content={this.props.file.content}
|
||||
updateFile={this.props.updateFile} />
|
||||
<PreviewFrame content={this.props.file.content} />
|
||||
<PreviewFrame
|
||||
content={this.props.file.content}
|
||||
head={
|
||||
<link type='text/css' rel='stylesheet' href='preview-styles.css' />
|
||||
}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
4
static/preview-styles.css
Normal file
4
static/preview-styles.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import 'vendors/codemirror';
|
||||
|
||||
@import 'components/p5-widget-codemirror-theme';
|
||||
1
styles/abstracts/_variables.scss
Normal file
1
styles/abstracts/_variables.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
$base-font-size: 16;
|
||||
8
styles/base/_base.scss
Normal file
8
styles/base/_base.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
html {
|
||||
font-size: #{$base-font-size}px;
|
||||
}
|
||||
|
||||
.root-app {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
8
styles/base/_reset.scss
Normal file
8
styles/base/_reset.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// At some point, I will put in a ~real~ reset, but for now
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
17
styles/components/_editor.scss
Normal file
17
styles/components/_editor.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.CodeMirror {
|
||||
font-family: Inconsolata, monospace;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumbers {
|
||||
padding-right: #{10 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
width: #{35 / $base-font-size}rem;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding-top: #{25 / $base-font-size}rem;
|
||||
padding-left: #{5 / $base-font-size}rem;
|
||||
}
|
||||
14
styles/layout/_ide.scss
Normal file
14
styles/layout/_ide.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.app {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-holder {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-frame {
|
||||
width: 50%;
|
||||
}
|
||||
11
styles/main.scss
Normal file
11
styles/main.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import 'abstracts/variables';
|
||||
|
||||
@import 'base/reset';
|
||||
@import 'base/base';
|
||||
|
||||
@import 'vendors/codemirror';
|
||||
|
||||
@import 'components/p5-widget-codemirror-theme';
|
||||
@import 'components/editor';
|
||||
|
||||
@import 'layout/ide';
|
||||
Loading…
Reference in a new issue