ui-tweaks (#960)

examples/demo.css

@@ -18,11 +18,19 @@ body {
   background: #f8f8fa;
 }
 
+footer {
+  margin-top: 40px;
+}
+
 h1 {
   font-family: 'League Spartan';
   color: #445;
 }
 
+body > .container,
+body > .container-fluid {
+}
+
 .center-align {
   display: flex;
   justify-content: center;
@@ -71,16 +79,6 @@ h1 {
   margin-bottom: 20px;
 }
 
-.details {
-  padding-left: 6px;
-}
-
-.details h3 {
-  font-family: monospace;
-  margin-top: 12px;
-  font-size: 1.3em;
-}
-
 .det {
   padding: 10px 16px;
   text-decoration: italic;
@@ -99,11 +97,6 @@ h1 {
   color: #444;
 }
 
-.load-spin{
-  position: absolute;
-  right: 0px;
-}
-
 #addStep {
   max-width: 500px;
   margin: 20px auto;
@@ -259,21 +252,3 @@ a.name-header{
 .trash-container button.btn-xs {
   margin-top: -5px !important;
 }
-
-/*
-.panel-footer .insert-step{
-  margin-left:10px;
-  border-radius:6px;
-  background-color:#fff;
-  border:solid #bababa 1.1px;
-}
-.col-md-4{
-  padding-left: 30px;
-}
-.panel-heading{
-  height:45px;
-}
-.panel-footer{
-  height: 45px;
-}
-*/

examples/index.html

@@ -200,19 +200,17 @@
       <div class="col-md-6">
         <h2>Need Help?</h2>
         <p>
-          Post a link to this and ask help from other community members on Gitter
+          <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer/issues">Ask a question</a>
-        </p>
+          <a class="btn btn-default" href="https://publiclab.org/chat">Ask in our chatroom</a>
-        <p>
-          <a class="btn btn-primary" href="https://gitter.im/publiclab/publiclab">Ask a question on Gitter</a>
         </p>
       </div>
       <div class="col-md-6">
         <h2>Improve this tool</h2>
         <p>
-          This is an open source toolkit which you can help add to and improve on Github
+          This is an open source toolkit which you can help improve on Github
         </p>
         <p>
-          <a class="btn btn-primary" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a>
+          <a class="btn btn-default" href="https://github.com/publiclab/image-sequencer">View the code &raquo;</a>
         </p>
       </div>
     </div>

examples/lib/defaultHtmlStepUi.js

@@ -25,26 +25,25 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     step.ui =
       '\
-      <div class="main">\
+      <div class="container-fluid step-container">\
         <form class="input-form">\
           <div class="panel panel-default">\
             <div class="panel-heading">\
               <div class="trash-container pull-right"></div>\
               <h3 class="panel-title">' +  
                 '<span class="toggle">' +step.name + ' <span class="caret"></span>\
+                 <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
               </h3>\
             </div>\
             <div class="panel-body cal collapse in">\
               <div class="row step">\
-                <div class="col-md-4 details">\
+                <div class="col-md-4 details container-fluid">\
-                  <h3>\
+                  <div class="cal collapse in"><p>' +
-                    <span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span>' +
+                    '<i>' + (step.description || "") + '</i>' +
-                      '</h3><div class="cal collapse in"><p><i>'+
+                 '</p></div>\
-                        (step.description || "") +
-                      '</i></p></div>\
                 </div>\
                 <div class="col-md-8 cal collapse in step-column">\
-                <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
+                  <div class="load load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
                   <div class="step-image">\
                     <a class="cal collapse in"><img class="img-thumbnail step-thumbnail"/></a>\
                   </div>\
@@ -67,9 +66,9 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var parser = new DOMParser();
     step.ui = parser.parseFromString(step.ui, "text/html");
-    step.ui = step.ui.querySelector("div.main");
+    step.ui = step.ui.querySelector("div.container-fluid");
     step.linkElements = step.ui.querySelectorAll("a");
-    step.imgElement = step.ui.querySelector("a img");
+    step.imgElement = step.ui.querySelector("a img.img-thumbnail");
 
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
       var inputs = _sequencer.modulesInfo(step.name).inputs;
@@ -135,7 +134,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       );
       $(step.ui.querySelector("div.panel-footer")).prepend(
         '<button class="pull-right btn btn-default btn-sm insert-step" >\
-      <i class="fa fa-plus"></i> Insert Module\
+      <i class="fa fa-plus"></i> Insert Step\
       </button>'
       );  
     }
@@ -231,16 +230,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
   function onDraw(step) {
     $(step.ui.querySelector(".load")).show();
     $(step.ui.querySelector("img")).hide();
-    if( $(step.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down") )
+    $(step.ui.querySelectorAll(".load-spin")).show();
-    {
-      $(step.ui.querySelector(".load-spin")).show();
-    }
   }
 
   function onComplete(step) {
-    $(step.ui.querySelector(".load")).hide();
     $(step.ui.querySelector("img")).show();
-    $(step.ui.querySelector(".load-spin")).hide();
+    $(step.ui.querySelectorAll(".load-spin")).hide();
+    $(step.ui.querySelector(".load")).hide();
 
     step.imgElement.src = (step.name == "load-image") ? step.output.src : step.output;
     var imgthumbnail = step.ui.querySelector(".img-thumbnail");