From 121dde6d23a1df8b3df7b8228448416b87e4ec32 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Sat, 8 Nov 2014 18:54:39 +0900
Subject: [PATCH] Big layout changes

---
 client/html/index.html | 68 +++++++++++++++++-------------------------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/client/html/index.html b/client/html/index.html
index c44136d..98bbf8e 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -13,14 +13,33 @@
                 <h1><img id="spinner" alt="loading" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1>
             </div>
 
-            <!-- options dialog -->
-            <div class="modal fade" id="optionsDialog" tabindex="-1">
-                <div class="modal-dialog modal-sm">
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <big>Options</big>
+            <div class="row">
+                <!-- semantic tweaker -->
+                <div class="col-md-7">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <big>Tweaker</big>
                         </div>
-                        <div class="modal-body">
+                        <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>
+
+                <!-- query -->
+                <div class="col-md-5">
+                    <div class="panel panel-default">
+                        <div class="panel-heading">
+                            <big>Query</big>
+                        </div>
+                        <div class="panel-body">
+                            <div class="form-group">
+                                <label for="searchKeyword">Keywords</label>
+                                <select id="searchKeyword" class="form-control"></select>
+                            </div>
                             <div class="form-group">
                                 <label for="minScore">Minimum score</label>
                                 <input class="form-control" type="number" step="any" value="0.25" id="minScore">
@@ -40,38 +59,6 @@
                                 <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label>
                             </div>
                         </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- query input -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <big>Query</big>
-                    <div class="btn-group pull-right">
-                        <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#optionsDialog">Options</button>
-                    </div>
-                </div>
-                <div class="panel-body">
-                    <div class="form-group">
-                        <label for="searchKeyword">Keywords</label>
-                        <select id="searchKeyword" class="form-control"></select>
-                    </div>
-                </div>
-            </div>
-
-            <!-- semantic tweaker -->
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <big>Semantic tweaker</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>
@@ -79,7 +66,7 @@
             <!-- result listing -->
             <div class="panel panel-default">
                 <div class="panel-heading">
-                    <big>Query results (<span id="count"></span>)</big>
+                    <big>Results (<span id="count"></span>)</big>
                 </div>
                 <div class="panel-body">
                     <script id="template" type="text/x-handlers-template">
@@ -105,6 +92,7 @@
                     <div id="results"></div>
                 </div>
             </div>
+
         </div>
         <!-- inject:js -->
         <!-- endinject -->