diff --git a/client/index.js b/client/index.js index b68ae5ba..4e647922 100644 --- a/client/index.js +++ b/client/index.js @@ -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) diff --git a/index.html b/index.html index 7548e2ef..dbc888ab 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,10 @@ p5.js Web Editor + -
+
diff --git a/shared/components/Editor/Editor.jsx b/shared/components/Editor/Editor.jsx index 0d13297f..9fc3c1de 100644 --- a/shared/components/Editor/Editor.jsx +++ b/shared/components/Editor/Editor.jsx @@ -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' }); diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx index dfa5c6ec..7a58f186 100644 --- a/shared/components/Preview/PreviewFrame.jsx +++ b/shared/components/Preview/PreviewFrame.jsx @@ -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 ; + return ; } } diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx index b5ae2aaa..c510d501 100644 --- a/shared/containers/App/App.jsx +++ b/shared/containers/App/App.jsx @@ -9,11 +9,15 @@ import * as FileActions from '../../redux/actions' class App extends React.Component { render() { return ( -
+
- + + }/>
); } diff --git a/static/preview-styles.css b/static/preview-styles.css new file mode 100644 index 00000000..fa33bc1d --- /dev/null +++ b/static/preview-styles.css @@ -0,0 +1,4 @@ +html, body { + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/static/styles/main.scss b/static/styles/main.scss deleted file mode 100644 index d3ff66d5..00000000 --- a/static/styles/main.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'vendors/codemirror'; - -@import 'components/p5-widget-codemirror-theme'; \ No newline at end of file diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss new file mode 100644 index 00000000..e0af53f9 --- /dev/null +++ b/styles/abstracts/_variables.scss @@ -0,0 +1 @@ +$base-font-size: 16; \ No newline at end of file diff --git a/styles/base/_base.scss b/styles/base/_base.scss new file mode 100644 index 00000000..ef0932b8 --- /dev/null +++ b/styles/base/_base.scss @@ -0,0 +1,8 @@ +html { + font-size: #{$base-font-size}px; +} + +.root-app { + min-height: 100%; + height: 100%; +} \ No newline at end of file diff --git a/styles/base/_reset.scss b/styles/base/_reset.scss new file mode 100644 index 00000000..94606930 --- /dev/null +++ b/styles/base/_reset.scss @@ -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%; +} \ No newline at end of file diff --git a/styles/components/_editor.scss b/styles/components/_editor.scss new file mode 100644 index 00000000..e3fdd25a --- /dev/null +++ b/styles/components/_editor.scss @@ -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; +} \ No newline at end of file diff --git a/static/styles/components/_p5-widget-codemirror-theme.scss b/styles/components/_p5-widget-codemirror-theme.scss similarity index 100% rename from static/styles/components/_p5-widget-codemirror-theme.scss rename to styles/components/_p5-widget-codemirror-theme.scss diff --git a/styles/layout/_ide.scss b/styles/layout/_ide.scss new file mode 100644 index 00000000..b1f3633f --- /dev/null +++ b/styles/layout/_ide.scss @@ -0,0 +1,14 @@ +.app { + display: flex; + flex-direction: row; + height: 100%; +} + +.editor-holder { + width: 50%; + height: 100%; +} + +.preview-frame { + width: 50%; +} \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 00000000..a93953f8 --- /dev/null +++ b/styles/main.scss @@ -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'; \ No newline at end of file diff --git a/static/styles/vendors/_codemirror.scss b/styles/vendors/_codemirror.scss similarity index 100% rename from static/styles/vendors/_codemirror.scss rename to styles/vendors/_codemirror.scss