mirror of
https://github.com/bobwen-dev/react-templates
synced 2025-04-12 00:56:39 +02:00
css layout I love you
This commit is contained in:
ido
parent
99e3a49543
commit
fa51a3ea5c
@ -10,6 +10,7 @@ module.exports = function (grunt) {
|
||||
all: {
|
||||
src: [
|
||||
'src/**/*.js', 'playground/**/*.js',
|
||||
'!playground/libs/**/*.js',
|
||||
'!playground/rt-main.browser.js',
|
||||
'!playground/bundle/**',
|
||||
'!playground/tmp/**',
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
* Created by avim on 11/25/2014.
|
||||
*/
|
||||
'use strict';
|
||||
/*global ace:true*/
|
||||
define(['react', 'lodash'/*, 'ace'*/], function (React, _/*, ace*/) {
|
||||
|
||||
var editor = React.createClass({
|
||||
@ -15,8 +16,8 @@ var editor = React.createClass({
|
||||
|
||||
},
|
||||
render: function () {
|
||||
var props = _.omit(this.props, ['id', 'ref', 'key', 'value', 'valueLink', 'onChange']);
|
||||
props.id = this.state.editorId;
|
||||
var props = _.omit(this.props, ['ref', 'key', 'value', 'valueLink', 'onChange']);
|
||||
props.id = this.props.id || this.state.editorId;
|
||||
return React.DOM.div(props);
|
||||
},
|
||||
componentWillUpdate: function (nextProps/*, nextState*/) {
|
||||
@ -26,7 +27,7 @@ var editor = React.createClass({
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
this.editor = ace.edit(this.state.editorId);
|
||||
this.editor = ace.edit(this.props.id || this.state.editorId);
|
||||
// this.editor.setTheme('ace/theme/monokai');
|
||||
this.editor.setTheme('ace/theme/solarized_light');
|
||||
if (this.props.mode !== 'html') {
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
/*padding: 20px;*/
|
||||
font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
|
||||
@ -5,19 +9,25 @@ body {
|
||||
/*overflow: hidden;*/
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
/*position: relative;*/
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
/*height: 100%;*/
|
||||
display: block;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.playground-container {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #DFDFD5;
|
||||
}
|
||||
|
||||
#header {
|
||||
height: 48px;
|
||||
/*background: #4679bd;*/
|
||||
@ -42,10 +52,11 @@ html {
|
||||
}
|
||||
|
||||
.large-text-area {
|
||||
height: 90%;
|
||||
/*height: 90%;*/
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
height: 300px;
|
||||
/*display: block;*/
|
||||
/*margin: 10px;*/
|
||||
}
|
||||
|
||||
.result-area {
|
||||
@ -69,9 +80,10 @@ html {
|
||||
.playground {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
.fiddle-row {
|
||||
display: table-row;
|
||||
height: 50%;
|
||||
}
|
||||
@ -85,6 +97,7 @@ html {
|
||||
/*float: left;*/
|
||||
/*margin: 2px;*/
|
||||
/*padding: 10px;*/
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
/*position: relative; min-height: 100%;*/
|
||||
@ -10,11 +10,11 @@ requirejs.config({
|
||||
//'react/addons': 'http://fb.me/react-with-addons-0.12.1'
|
||||
},
|
||||
shim: {
|
||||
lodash: { exports: '_' },
|
||||
firebase: { exports: 'Firebase' },
|
||||
lodash: {exports: '_'},
|
||||
firebase: {exports: 'Firebase'},
|
||||
//ace: { exports: 'ace' },
|
||||
jquery: { exports: '$' },
|
||||
react: { exports: 'React' }
|
||||
jquery: {exports: '$'},
|
||||
react: {exports: 'React'}
|
||||
},
|
||||
map: {
|
||||
'*': {
|
||||
@ -26,5 +26,61 @@ requirejs.config({
|
||||
requirejs(['jquery', 'react', 'fiddle'], function ($, React, fiddle) {
|
||||
'use strict';
|
||||
window.fiddle = React.render(fiddle(), document.getElementById('container'));
|
||||
$(function () {
|
||||
$(window).resize(calcSize);
|
||||
calcSize();
|
||||
});
|
||||
|
||||
function calcSize() {
|
||||
var contentHeight = $(document).height() - 48;
|
||||
//$('#container').height(contentHeight).width($(document).width());
|
||||
//$('.code-area').each(function (i) {
|
||||
// var h = (contentHeight / 2) - 10;
|
||||
// var w = ($(document).width() / 2) - 10;
|
||||
// $(this).height(h).width(w);
|
||||
//});
|
||||
|
||||
|
||||
var h = (contentHeight / 2) - 10;
|
||||
var w = ($(document).width() / 2) - 10;
|
||||
//var size = getWindowSize();
|
||||
//$('#editor-rt').css({
|
||||
// top: 50, left: 0, bottom: h, right: w, position: 'absolute'
|
||||
//});
|
||||
//$('#editor-code').css({
|
||||
// top: 50, left: w, bottom: h, right: 0, position: 'absolute'
|
||||
//});
|
||||
//$('#editor-generated').css({
|
||||
// top: 50 + h, left: 0, bottom: 0, right: w, position: 'absolute'
|
||||
//});
|
||||
//$('#result-area').css({
|
||||
// top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute'
|
||||
//});
|
||||
|
||||
//$('.code-area').each(function (i, k) {
|
||||
// //var h = (contentHeight / 2) - 10;
|
||||
// //var w = ($(document).width() / 2) - 10;
|
||||
// //$(this).height(h).width(w);
|
||||
// $(this).css({
|
||||
// top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute'
|
||||
// });
|
||||
//});
|
||||
|
||||
$('.large-text-area').each(function (i, k) {
|
||||
//var h = (contentHeight / 2) - 10;
|
||||
//var w = ($(document).width() / 2) - 10;
|
||||
var $this = $(this);
|
||||
//$this.parent().width();
|
||||
//$this.parent().width();
|
||||
console.log('' + $this.parent().height() + ',' + $this.parent().width() );
|
||||
//$(this).css({);
|
||||
|
||||
$this.height($this.parent().height() - 2).width($this.parent().width() - 2);
|
||||
//$(this).css({
|
||||
// top: 50 + h, left: w, bottom: 0, right: 0, position: 'absolute'
|
||||
//});
|
||||
});
|
||||
//.large-text-area
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<div class="fiddle">
|
||||
<div id="header">
|
||||
<div id="header-title">
|
||||
<img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="36" height="36" />
|
||||
<span><</span>
|
||||
<img class="nav-logo" src="https://facebook.github.io/react/img/logo.svg" width="32" height="32" />
|
||||
<span>/></span>
|
||||
RTFiddle
|
||||
</div>
|
||||
<div id="buttons-bar">
|
||||
@ -14,6 +16,8 @@
|
||||
<!--<h2>Play with react templates and save/share your results</h2>-->
|
||||
<!--<button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button>-->
|
||||
<!--<br />-->
|
||||
<playground ref="playground" direction="vertical" fiddle="{true}" />
|
||||
<div class="playground-container">
|
||||
<playground ref="playground" direction="vertical" fiddle="{true}" />
|
||||
</div>
|
||||
<!--</div>-->
|
||||
</div>
|
||||
@ -10,22 +10,22 @@ define([
|
||||
this.save();
|
||||
}
|
||||
return function () {
|
||||
return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('img', {
|
||||
return React.createElement('div', { 'className': 'fiddle' }, React.createElement('div', { 'id': 'header' }, React.createElement('div', { 'id': 'header-title' }, React.createElement('span', {}, '<'), React.createElement('img', {
|
||||
'className': 'nav-logo',
|
||||
'src': 'https://facebook.github.io/react/img/logo.svg',
|
||||
'width': '36',
|
||||
'height': '36'
|
||||
}), '\n RTFiddle\n '), React.createElement('div', { 'id': 'buttons-bar' }, React.createElement('button', {
|
||||
'width': '32',
|
||||
'height': '32'
|
||||
}), React.createElement('span', {}, '/>'), '\n RTFiddle\n '), React.createElement('div', { 'id': 'buttons-bar' }, React.createElement('button', {
|
||||
'className': 'btn',
|
||||
'onClick': onClick1.bind(this)
|
||||
}, 'Save fiddle'))) /* <div> */
|
||||
/* <h1>React Templates fiddle</h1> */
|
||||
/* <h2>Play with react templates and save/share your results</h2> */
|
||||
/* <button class="btn btn-lg btn-primary" onClick="(evt)=>evt.preventDefault();this.save()">Save fiddle</button> */
|
||||
/* <br /> */, React.createElement(playground, {
|
||||
/* <br /> */, React.createElement('div', { 'className': 'playground-container' }, React.createElement(playground, {
|
||||
'ref': 'playground',
|
||||
'direction': 'vertical',
|
||||
'fiddle': true
|
||||
}) /* </div> */);
|
||||
})) /* </div> */);
|
||||
};
|
||||
});
|
||||
@ -1,28 +1,28 @@
|
||||
<!DOCTYPE rt CodeEditor="./aceEditor">
|
||||
<!--suppress ALL -->
|
||||
<div class="playground">
|
||||
<div class="row">
|
||||
<div class="fiddle-row">
|
||||
<div class="code-area">
|
||||
<CodeEditor class="large-text-area" style="border: {this.validHTML ? '1px solid black' : '2px solid red'};"
|
||||
<CodeEditor id="editor-rt" class="large-text-area" style="border: {this.validHTML ? '1px solid black' : '2px solid red'};"
|
||||
value="{this.state.templateHTML}"
|
||||
mode="html"
|
||||
onChange="(evt) => this.setState({'templateHTML':evt.target.value})" />
|
||||
</div>
|
||||
<div class="code-area">
|
||||
<CodeEditor class="large-text-area" style="border: {this.validProps ? '1px solid black' : '2px solid red'};"
|
||||
<CodeEditor id="editor-code" class="large-text-area" style="border: {this.validProps ? '1px solid black' : '2px solid red'};"
|
||||
value="{this.state.templateProps}"
|
||||
mode="javascript"
|
||||
onChange="(evt) => this.setState({'templateProps':evt.target.value})" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="fiddle-row">
|
||||
<div class="code-area">
|
||||
<CodeEditor class="large-text-area" style="border:1px solid black;"
|
||||
<CodeEditor id="editor-generated" class="large-text-area" style="border:1px solid black;"
|
||||
value="{this.templateSource}"
|
||||
mode="javascript"
|
||||
readOnly="{true}" />
|
||||
</div>
|
||||
<div key="result-area" class="result-area well">
|
||||
<div id="result-area" key="result-area" class="result-area well">
|
||||
<h2>Preview:</h2>
|
||||
<form class="sample-view" onSubmit="(e) => e.preventDefault();">
|
||||
<this.sample key="sample">
|
||||
|
||||
@ -15,25 +15,29 @@ define([
|
||||
e.preventDefault();
|
||||
}
|
||||
return function () {
|
||||
return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, {
|
||||
return React.createElement('div', { 'className': 'playground' }, React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, {
|
||||
'id': 'editor-rt',
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateHTML,
|
||||
'mode': 'html',
|
||||
'onChange': onChange1.bind(this)
|
||||
})), React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, {
|
||||
'id': 'editor-code',
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateProps,
|
||||
'mode': 'javascript',
|
||||
'onChange': onChange2.bind(this)
|
||||
}))), React.createElement('div', { 'className': 'row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, {
|
||||
}))), React.createElement('div', { 'className': 'fiddle-row' }, React.createElement('div', { 'className': 'code-area' }, React.createElement(CodeEditor, {
|
||||
'id': 'editor-generated',
|
||||
'className': 'large-text-area',
|
||||
'style': { border: '1px solid black' },
|
||||
'value': this.templateSource,
|
||||
'mode': 'javascript',
|
||||
'readOnly': true
|
||||
})), React.createElement('div', {
|
||||
'id': 'result-area',
|
||||
'key': 'result-area',
|
||||
'className': 'result-area well'
|
||||
}, React.createElement('h2', {}, 'Preview:'), React.createElement('form', {
|
||||
|
||||
@ -60,8 +60,8 @@ define(['react', 'lodash', './playground-fiddle.rt', './playground.rt'], functio
|
||||
// ' <button onClick="()=>this.add()">Add</button><br/>\n' +
|
||||
// ' <button onClick="()=>this.clearDone()">Clear done</button>\n' +
|
||||
// '</div>';
|
||||
var templateHTML = "<div></div>";
|
||||
var templateProps = "{}";
|
||||
var templateHTML = '<div></div>';
|
||||
var templateProps = '{}';
|
||||
//var templateProps = "{\n mixins: [React.addons.LinkedStateMixin],\n getInitialState: function () {\n return {edited: '', todos: [], counter: 0};\n },\n add: function () {\n if (this.state.edited.trim().length === 0) {\n return;\n }\n var newTodo = {value: this.state.edited, done: false, key: this.state.counter};\n this.setState({todos: this.state.todos.concat(newTodo), edited: '', counter: this.state.counter + 1});\n },\n remove: function (todo) {\n this.setState({todos: _.reject(this.state.todos, todo)});\n },\n toggleChecked: function (index) {\n var todos = _.cloneDeep(this.state.todos);\n todos[index].done = !todos[index].done;\n this.setState({todos: todos});\n },\n clearDone: function () {\n this.setState({todos: _.filter(this.state.todos, {done: false})});\n }\n}";
|
||||
|
||||
var Playground = React.createClass({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user