Demo styling tweaks (#105)

* html demo tweaks

* in-progress demo styling

* merge fies

* old demo cleanup

examples/demo.css

@@ -1,119 +1,92 @@
-/*@font-face {
+/* https://github.com/theleagueof/league-spartan */
-  font-family: "Poiret One";
+@font-face {
-  src: url("Poiret One.woff2");
+    font-family: 'League Spartan';
+    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot');
+    src: url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.eot?#iefix') format('embedded-opentype'),
+         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff2') format('woff2'),
+         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.woff') format('woff'),
+         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.ttf') format('truetype'),
+         url('https://raw.githubusercontent.com/theleagueof/league-spartan/master/_webfonts/leaguespartan-bold.svg#league_spartanbold') format('svg');
+    font-weight: bold;
+    font-style: normal;
 }
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: "Poiret One";
-}
-html, body {
-  min-height: 100vh;
-  width: 100vw;
-}
-body {
-  background: #fff;
-}
-.wrapper {
-  width: 100vw;
-  max-width: 1000px;
-  height: 100%;
-  min-height: 100vh;
-  margin: auto;
-  position: relative;
-}
-header {
-  position: relative;
-  height: 150px;
-  font-size: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-around;
-  padding: 10px 0;
-  font-size: 20px;
-}
-section {
-  position: relative;
-  width: 100%;
-  min-height: 100px;
-  padding: 10px 15px;
-  font-size: 25px;
-  margin-bottom: 50px;
-}
-.rh {
-  display: flex;
-  flex-direction: column;
-}
-section .r {
-  display: flex;
-  flex-direction: row;
-  flex: auto;
-  align-items: center;
-  justify-content: space-around;
-  margin: 10px;
-}
-section .c {
-  flex: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-section span {
-  margin: 0 5px;
-}*/
 
-#addStep select, button, #addStep input {
+body {
-  font-family: sans-serif;
+  padding: 20px;
-  font-size: 18px !important;
+  margin: 0 auto 200px;
-  height: 30px !important;
+  max-width: 1000px;
+  background: #f8f8fa;
 }
+
+h1 {
+  font-family: 'League Spartan';
+  color: #445;
+}
+
+.header {
+  text-align: center;
+}
+
 .nomargin {
   margin: 0 !important;
 }
-.details {
+
-  display: flex;
+#imageSelect {
-  align-items: center;
+  padding: 30px;
-  justify-content: center;
+  margin: 0 20% 30px;
-  flex-direction: column;
+  border: 4px dashed #ccc;
-  height: 100%;
+  border-radius: 8px;
+  text-align: center;
+  color: #444;
 }
-#steps .row {
+
-  display: flex;
+.step {
-  flex-direction: row;
+  margin-bottom: 20px;
-  flex: auto;
+}
-  align-items: center;
+
-  justify-content: space-around;
+.step .img-thumbnail {
+  margin-bottom: 20px;
+}
+
+.details {
+  border-top: 3px solid #444;
+  padding-left: 6px;
+}
+
+.details h3 {
+  font-family: monospace;
+  margin-top: 12px;
+  font-size: 1.3em;
+}
+
+.det {
+  padding: 10px 16px;
+  text-decoration: italic;
+}
+
+.tools {
+  margin: 10px 0;
+}
+
+#addStep {
+  max-width: 500px;
+  margin: 20px auto;
+}
+
+#addStep .labels {
+  text-align: right;
+  padding: 6px;
+  margin: 2px;
+  font-weight: bold;
+}
+
+@media (max-width:768px) {
+  #addStep .labels {
+    text-align: left;
+  }
+}
+
+#addStep .add {
+  text-align: center;
   margin: 10px;
 }
-.jumbotron {
-  background: transparent;
-}
-.form-horizontal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.btn {
-  line-height: 1.2
-}
-.btn-lg {
-  line-height: 0.7
-}
-body {
-  /*background: #f8f8fa;*/
-}
-.det {
-  font-size: 1.7rem;
-}

examples/index.html

@@ -23,32 +23,33 @@
 
   <body>
 
-    <div class="container">
+    <div class="container-fluid">
 
-      <header class="jumbotron text-center">
+      <header class="text-center">
         <h1>Image Sequencer</h1>
-        <p><h3>Select an image to start with!</h3></p>
+        <h3>
-        <center><input type="file" id="file" value=""></center>
+          <a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
+        </h3>
       </header>
 
-      <section id="steps" class="row">
+      <div id="imageSelect">
-      </section>
+        <p><i>Select an image to start with!</i></p>
+        <center><input type="file" id="file" value=""></center>
+      </div>
 
-      <section id="addStep" class="jumbotron text-center">
+      <section id="steps" class="row"></section>
+
+      <section id="addStep">
         <div class="row">
-          <h4>Add Step :</h4>
+          <select class="form-control">
-          <select style="font-family: sans-serif; height: 30px">
+            <option value="none" disabled selected>Select a new step...</option>
-            <option value="none" disabled selected>Please Select</option>
           </select>
         </div>
+        <hr />
         <div class="row">
-          <div>
+          <div id="options"></div>
-            <h4>Options:</h4>
-          </div>
-          <div id="options" class="form-horizontal">
-          </div>
         </div>
-        <div class="row" style="margin: 5px">
+        <div class="row add">
           <button class="btn btn-success btn-lg" name="add">Add Step</button>
         </div>
       </section>
@@ -92,18 +93,23 @@
           onSetup: function(step) {
 
             step.ui = '\
-            <div class="row">\
+            <div class="row step">\
-              <div>\
+              <div class="col-md-4 details">\
-                <img alt="" class="img-thumbnail"/>\
+                <h3>'+step.name+'</h3>\
+                <p><i>'+(step.description || '')+'</i></p>\
               </div>\
-              <div class="details">\
+              <div class="col-md-8">\
-                <h2>'+step.name+'&nbsp;</h2>\
+                <img alt="" class="img-thumbnail"/>\
               </div>\
             </div>\
             ';
 
-            var removebutton =
+            var tools =
-            '<button class="remove btn btn-danger">X</button>';
+            '<div class="tools btn-group">\
+               <button confirm="Are you sure?" class="remove btn btn-xs btn-default">\
+                 <i class="fa fa-trash"></i>\
+               </button>\
+            </div>';
 
             step.ui = parser.parseFromString(step.ui,'text/html');
             step.ui = step.ui.querySelector('div.row');
@@ -123,9 +129,9 @@
             }
 
             if(step.name != "load-image")
-              step.ui.querySelector('div.details h2').appendChild(
+              step.ui.querySelector('div.details').appendChild(
-                parser.parseFromString(removebutton,'text/html')
+                parser.parseFromString(tools,'text/html')
-                  .querySelector('button')
+                      .querySelector('div')
               );
 
             steps.appendChild(step.ui);
@@ -166,11 +172,11 @@
           for(var input in modulesInfo[m].inputs) {
             $('#options').append(
               '<div class="row">\
-                 <div class="col-md-2">\
+                 <div class="col-md-5 labels">\
                    '+input+':\
                  </div>\
-                 <div class="col-md-2">\
+                 <div class="col-md-5">\
-                   <input type="text" name="'+input+'" value="" placeholder="'+
+                   <input class="form-control" type="text" name="'+input+'" value="" placeholder="'+
                    modulesInfo[m].inputs[input].default+'"/>\
                  </div>\
                </div>'

examples/replace.html

@@ -9,7 +9,7 @@
 
     <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-    <link href="../dist/image-sequencer.css" rel="stylesheet">
+    <link href="demo-old.css" rel="stylesheet">
 
     <script src="../node_modules/jquery/dist/jquery.min.js"></script>
     <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

src/modules/Crop/info.json

@@ -1,5 +1,7 @@
 {
   "name": "Crop",
+  "description": "Crop image to given x, y, w, h",
+  "url": "https://github.com/publiclab/image-sequencer/tree/master/MODULES.md",
   "inputs": {
     "x": {
       "type": "integer",