vertical

playground/main.js

@@ -118,5 +118,25 @@ var Playground = React.createClass({
     }
 });
 
-var elem = React.createElement(Playground, {direction: 'horizontal'}); //vertical
-React.render(elem, document.getElementById('playground'));
+window.playground = React.render(Playground({"direction":'vertical'}), document.getElementById('playground'));
+/*
+function generateRandomId() {
+    var d = new Date().getTime();
+    var uuid = 'xxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = _.random(0,15);
+        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
+    });
+    return uuid;
+};
+
+
+if (window.location.hash) {
+    var firebase = new Firebase('https://co5qowu8b6k.firebaseio-demo.com/'+window.location.hash);
+    firebase.on('value',function (snapshot) {
+        window.playground.setState(snapshot.val());
+        firebase.goOffline();
+    });
+}*/
+
+
+

playground/playground.css

@@ -16,12 +16,28 @@ body {
     margin: 10px;
 }
 
-.code-area {
+.code-area.horizontal {
     width: 50%;
     /*height: 620px;*/
     float: left;
 }
 
+.code-area.vertical {
+    width: 100%;
+    /*height: 620px;*/
+    float: none;
+}
+
+.result-area.horizontal {
+    width: 50%;
+    float: left;
+}
+
+.result-area.vertical {
+    width: 100%;
+    float: none;
+}
+
 .result-area {
     width: 50%;
     /*height: 620px;*/

playground/playground.rt

@@ -1,6 +1,6 @@
 <!DOCTYPE rt CodeEditor="./aceEditor">
 <div>
-    <div id="myTab" role="tabpanel" class="code-area" style="float: {this.props.direction === 'horizontal' ? 'left' : 'none'}">
+    <div id="myTab" role="tabpanel" class="code-area {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}">
         <!-- Nav tabs -->
         <ul class="nav nav-pills" role="tablist">
             <li role="presentation" class="active"><a href="#template" aria-controls="template" role="tab" data-toggle="tab">Template</a></li>
@@ -32,7 +32,7 @@
             </div>
         </div>
     </div>
-    <div key="result-area" class="result-area well" style="float: {this.props.direction === 'horizontal' ? 'left' : 'none'}; margin-top: 48px;">
+    <div key="result-area" class="result-area well {(this.props.direction === 'horizontal' && 'horizontal') ||'vertical'}" style="margin-top: 48px;">
         <h2>Preview:</h2>
         <form class="sample-view" onSubmit="(e) => e.preventDefault();">
             <this.sample key="sample">

playground/playground.rt.js

@@ -15,8 +15,7 @@ module.exports = function () {
     return React.DOM.div({}, React.DOM.div({
         'id': 'myTab',
         'role': 'tabpanel',
-        'className': 'code-area',
-        'style': { float: this.props.direction === 'horizontal' ? 'left' : 'none' }
+        'className': 'code-area ' + (this.props.direction || 'vertical')
     }    /*  Nav tabs  */, React.DOM.ul({
         'className': 'nav nav-pills',
         'role': 'tablist'
@@ -70,11 +69,8 @@ module.exports = function () {
         'readOnly': true
     })))), React.DOM.div({
         'key': 'result-area',
-        'className': 'result-area well',
-        'style': {
-            float: this.props.direction === 'horizontal' ? 'left' : 'none',
-            marginTop: '48px'
-        }
+        'className': 'result-area well ' + (this.props.direction || 'vertical'),
+        'style': { marginTop: '48px' }
     }, React.DOM.h2({}, 'Preview:'), React.DOM.form({
         'className': 'sample-view',
         'onSubmit': onSubmit3.bind(this)