simplified demo ui (#224)

* simplified demo ui

* show description

* smaller, labelled example image

examples/demo.js

@@ -165,40 +165,12 @@ window.onload = function() {
 
   });
 
-
-  // File handling
-
   $('#addStep select').on('change', selectNewStepUI);
 
   function selectNewStepUI() {
-    $('#options').html('');
     var m = $('#addStep select').val();
-    for(var input in modulesInfo[m].inputs) {
-      var inputUI = "";
-      var inputDesc = modulesInfo[m].inputs[input];
-      if (inputDesc.type.toLowerCase() == "select") {
-        inputUI += "<select class=\"form-control\" name=\""+input+"\">";
-        for (var option in inputDesc.values) {
-          inputUI += "<option>"+inputDesc.values[option]+"</option>";
+    $('#addStep .info').html(sequencer.modulesInfo(m).description);
   }
-        inputUI += "</select>";
-      }
-      else {
-        inputUI = "<input class=\"form-control\" type=\""+inputDesc.type+"\" name=\""+input+"\">";
-      }
-      $('#options').append(
-        '<div class="row">\
-           <div class="col-md-5 labels">\
-             '+input+':\
-           </div>\
-           <div class="col-md-5">\
-             '+inputUI+'\
-           </div>\
-         </div>'
-      );
-    }
-  }
-
 
   function addStepUI() {
     var options = {};

examples/index.html

@@ -48,19 +48,21 @@
 
       <section id="steps" class="row"></section>
 
-      <section id="addStep">
-        <div class="row">
-          <select class="form-control">
+      <hr />
+
+      <section id="addStep" class="panel panel-primary">
+        <div class="form-inline">
+          <div class="panel-body">
+            <div style="text-align:center;">
+              <select class="form-control input-lg">
                 <option value="none" disabled selected>Select a new step...</option>
               </select>
-        </div>
-        <hr />
-        <div class="row">
-          <div id="options"></div>
-        </div>
-        <div class="row add">
               <button class="btn btn-success btn-lg" name="add">Add Step</button>
             </div>
+            <br />
+	    <p class="info" style="padding:8px;">Select a new module to add to your sequence.</p>
+	  </div>
+        </div>
       </section>
 
     </div>
@@ -69,7 +71,6 @@
 
       var sequencer;
 
-
     </script>
 
   </body>