From 1c496735c77dceacfbf7c50177f4a38232cd2ddf Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sat, 8 Nov 2014 19:16:35 +0900
Subject: [PATCH] More layout changes

---
 client/html/index.html        | 19 +++++++++++--------
 client/scripts/application.js | 15 +++++++++------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/client/html/index.html b/client/html/index.html
index 98bbf8e..67201f6 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -14,17 +14,14 @@
             </div>
 
             <div class="row">
-                <!-- semantic tweaker -->
+                <!-- visualizer -->
                 <div class="col-md-7">
                     <div class="panel panel-default">
                         <div class="panel-heading">
-                            <big>Tweaker</big>
+                            <big>Visualizer</big>
                         </div>
                         <div class="panel-body">
                             <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"></svg>
-                            <div class="text-center" style="display: none;">
-                                <input id="history" style="width: 90%;" type="text" data-slider-reversed="true" data-slider-max="0">
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -37,7 +34,7 @@
                         </div>
                         <div class="panel-body">
                             <div class="form-group">
-                                <label for="searchKeyword">Keywords</label>
+                                <label for="searchKeyword">Keyword</label>
                                 <select id="searchKeyword" class="form-control"></select>
                             </div>
                             <div class="form-group">
@@ -58,15 +55,21 @@
                             <div class="checkbox">
                                 <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
                             </div>
+                            <div id="history" class="form-group" style="display: none;">
+                                <label for="history">History</label>
+                                <div class="text-center">
+                                    <input id="historyIndex" style="width: 90%;" type="text" data-slider-reversed="true" data-slider-max="0">
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- result listing -->
-            <div class="panel panel-default">
+            <div class="panel panel-default" style="display: none;" id="resultPanel">
                 <div class="panel-heading">
-                    <big>Results (<span id="count"></span>)</big>
+                    <big>Results (<span id="resultCount"></span>)</big>
                 </div>
                 <div class="panel-body">
                     <script id="template" type="text/x-handlers-template">
diff --git a/client/scripts/application.js b/client/scripts/application.js
index 0f7ad3b..64c6478 100644
--- a/client/scripts/application.js
+++ b/client/scripts/application.js
@@ -39,7 +39,7 @@
     }
 
     function onReady() {
-        $('#history').slider({
+        $('#historyIndex').slider({
             formatter: function(value) {
                 var delta = _ctx.log.length - (value + 1);
                 switch (delta) {
@@ -65,7 +65,7 @@
                 search();
             });
 
-            $('#history').on('slideStop', onSelectSnapshot);
+            $('#historyIndex').on('slideStop', onSelectSnapshot);
         });
     }
 
@@ -115,7 +115,7 @@
     }
 
     function onSelectSnapshot() {
-        var index = $('#history').slider('getValue');
+        var index = $('#historyIndex').slider('getValue');
         outputSnapshot(_ctx.log[index]);
     }
 
@@ -123,12 +123,12 @@
         _ctx.log.push(results);
 
         var count = _ctx.log.length;
-        var history = $('#history').slider();
+        var history = $('#historyIndex').slider();
         history.slider('setAttribute', 'max', count - 1);
         history.slider('setValue', count - 1);
 
         if (count > 1) {
-            $('#history').parent().slideDown();
+            $('#history').slideDown();
         }
     }
 
@@ -145,8 +145,11 @@
         var searchResultCnt = String(results.length);
         if (results.length < count) {
             searchResultCnt += ' of ' + count;
+
         }
-        $('#count').text(searchResultCnt);
+
+        $('#resultCount').text(searchResultCnt);
+        $('#resultPanel').slideDown();
 
         var template = Handlebars.compile($('#template').html());
         $('#results').empty();