Improve demo with two-way binding example.

Glavin001 · May 26, 2014 · b66660a · b66660a
1 parent 9797a5a
commit b66660a
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 31 deletions.
diff --git a/app/index.html b/app/index.html
@@ -11,6 +11,7 @@
 
         <!-- build:css(app) styles/components.css -->
         <link rel="stylesheet" href="bower_components/jsoneditor/jsoneditor.css">
+        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
         <!-- endbuild -->
 
         <!-- build:css(build) styles/lib.css -->
@@ -26,6 +27,7 @@
         <script src="@@ember"></script>
         <script src="@@ember_data"></script>
         <script src="bower_components/jsoneditor/jsoneditor.js"></script>
+        <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
         <!-- endbuild -->
 
         <!-- build:js(build) scripts/lib.js -->

diff --git a/app/styles/style.scss b/app/styles/style.scss
@@ -1,10 +1,5 @@
 // SASS!
 
-.well {
-  background-color: gray;
-  border-radius: 5px;
-
-  li {
-    padding: 5px;
-  }
+.jsoneditor-component {
+    height: 300px;
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,22 +1,47 @@
-<div class="">
-    <h1 class="">Welcome to Ember-JSONEditor</h1>
+<div class="container">
 
-    <h2>Editor</h2>
+    <div class="jumbotron">
+      <h2>Welcome to Ember-JSONEditor</h2>
+      <p>Ember component to view, edit and format JSON.</p>
+      <p><a class="btn btn-primary btn-lg" target="_blank" href="https://github.com/Glavin001/ember-jsoneditor" role="button">Learn more</a></p>
+    </div>
 
-    {{json-editor json=model mode=controller.mode name=controller.name}}
+    <div class="well">
+      <h4>Features</h4>
+      <ul>
+        <li>Two-Way Bindings</li>
+        <li>Set <em>name</em> and <em>mode</em> with component</li>
+      </ul>
+      <hr/>
+      <p>Try it out for yourself!</p>
+    </div>
 
-    <hr/>
+    <div class="row">
+      <div class="col-sm-6">
 
-    <h2>Options</h2>
+        <h3>Editor 1</h3>
 
-    Name: {{input value=controller.name}}
+        {{json-editor json=model mode=controller.mode name=controller.name}}
 
-    <br/>
+        <h2>Options</h2>
 
-    Mode: {{view Ember.Select content=controller.modes value=controller.mode}}
+        Name: {{input value=controller.name}}
 
-    <h2>Raw JSON</h2>
+        <br/>
 
-    <pre>{{pretty-print model undefined 4}}</pre>
+        Mode: {{view Ember.Select content=controller.modes value=controller.mode}}
 
+      </div>
+      <div class="col-sm-6">
+
+        <h3>Editor 2</h3>
+
+        {{json-editor json=model mode="code" name="Two-Way Bindings"}}
+
+        <h2>Raw JSON</h2>
+
+        <pre>{{pretty-print model undefined 4}}</pre>
+
+      </div>
+    </div>
 </div>
diff --git a/bower.json b/bower.json
@@ -8,7 +8,8 @@
     "jsoneditor": "~2.3.6"
   },
   "devDependencies": {
-    "ember-mocha-adapter": "0.1.2"
+    "ember-mocha-adapter": "0.1.2",
+    "bootstrap": "~3.1.1"
   },
   "main": "build/ember-plugin.js"
 }
diff --git a/dist/index.html b/dist/index.html
@@ -5,20 +5,20 @@
         <meta charset="utf-8">
         <title>Ember-JSONEditor</title>
 
-        <link rel="stylesheet" href="styles/2eff5d3b.main.css">
+        <link rel="stylesheet" href="styles/2097fa0f.main.css">
 
-        <link rel="stylesheet" href="styles/f6c048b9.components.css">
+        <link rel="stylesheet" href="styles/5b494039.components.css">
 
         <link rel="stylesheet" href="styles/9b4e8cd5.lib.css">
 
 </head>
     <body>
 
-        <script src="scripts/839dfd23.components.js"></script>
+        <script src="scripts/8578e3f0.components.js"></script>
 
         <script src="scripts/3abcd29b.lib.js"></script>
 
-        <script src="scripts/7acabe46.templates.js"></script>
+        <script src="scripts/eba4f04f.templates.js"></script>
 
         <script src="scripts/aed1d907.main.js"></script>
 

diff --git a/dist/scripts/7acabe46.templates.js b/dist/scripts/7acabe46.templates.js
diff --git a/dist/scripts/839dfd23.components.js → dist/scripts/8578e3f0.components.js b/dist/scripts/839dfd23.components.js → dist/scripts/8578e3f0.components.js
diff --git a/dist/scripts/eba4f04f.templates.js b/dist/scripts/eba4f04f.templates.js
diff --git a/dist/styles/2097fa0f.main.css b/dist/styles/2097fa0f.main.css
diff --git a/dist/styles/2eff5d3b.main.css b/dist/styles/2eff5d3b.main.css
diff --git a/dist/styles/5b494039.components.css b/dist/styles/5b494039.components.css
diff --git a/dist/styles/f6c048b9.components.css b/dist/styles/f6c048b9.components.css