moving buttons around

1 files changed, 16 insertions, 13 deletions

diff --git a/shader-gif.html b/shader-gif.html
index c705770..1e5fc3d 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -13,11 +13,11 @@
 .ui-sortable-helper { cursor: -webkit-grabbing !important; }
 #frames canvas { display: block }
 #frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
-.paused { background: black; color: white; border-width: 1px; padding: 2px 7px; }
+.paused { background: black; color: white; border-width: 1px; padding: 1px 3px 2px 4px; }
 .paused { outline: 0 !important; }
 div { display: inline-block; padding: 10px;}
 #controls,#workspace,#rendered{ float: left; }
-#rendered { display: none; }
+#rendered { min-width: 500px; }
 #render,#save { font-weight: bold; }
 #render { float: right; }
 #instructions { position: absolute;top:20px;right:20px; width:190px;height:465px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:rgba(255,255,255,0.8); display: none; cursor: -webkit-grab; }
@@ -31,12 +31,6 @@ div { display: inline-block; padding: 10px;}
 
 <div id="controls">
 
-  frame delay <input type="text" id="framedelay" value="0.1s">
-  background <input type="text" id="background" value="#fff">
-  <button id="reset">reset</button>
-  <button id="pause">pause</button>
-  <button id="step-forward">&gt;&gt;</button>
-  <br>
   <input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
   <br>
   <br>
@@ -56,18 +50,25 @@ div { display: inline-block; padding: 10px;}
   <br>
   <br>
 
+  gif delay <input type="text" id="framedelay" value="0.1s">
+  background <input type="text" id="background" value="#fff">
+  <br>
+  <br>
   <button id="help">help</button>
   <button id="demo">demo</button>
   <button id="dither-demo">dither</button>
   <br>
-  <span id="status"></span>
-  <button id="save" disabled>save</button>
-  <br>
 </div>
 
 <div id="workspace"></div>
 
 <div id="rendered">
+  <button id="reset">reset</button>
+  <button id="pause">pause</button>
+  <button id="step-forward">&gt;&gt;</button>
+  <span id="status"></span>
+  <button id="save" disabled>save</button>
+  <br>
 </div>
 
 <div id="instructions"><iframe src="instructions.html"></iframe><button class="close">x</button></div>
@@ -153,11 +154,11 @@ function load(){
 function reset(){
   start_t = old_t
   pause_t = 0
-  $("#rendered").hide()
+  $("#rendered img").remove()
   draw(0)
 }
 function pause(state){
-  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused)
+  $("#pause").toggleClass("paused", paused = typeof state == "boolean" ? state : ! paused).html(paused ? "paused" : "pause")
 }
 function step_forward(){
   var step = $("#framedelay").float() * 1000 || 100
@@ -326,6 +327,7 @@ function render (){
     status(e)
     throw e
   }
+  $("#render").html("rendering")
 }
 
 function status(s){
@@ -353,6 +355,7 @@ encoder.on("rendered-url", function(url){
   $("#rendered").append(image)
   $("#save,#rendered").show()
   $("#pause,#render,#add-frame,#save").enable()
+  $("#render").html("render")
   rendering = false
   pause(true)
 })