index.html: split input-container into input-container__graph-input, input-container__search

2 files changed, 51 insertions, 15 deletions

diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss
index 589731ee..05c7abd2 100644
--- a/res/client/css/partials/input-bar.scss
+++ b/res/client/css/partials/input-bar.scss
@@ -1,8 +1,7 @@
 @import '../modules/mixins'; // For box-shadow
 
 .input-container {
-  position: fixed;
-  margin: $two-baselines 0 0 $doc-margin;
+  width: 35%;
 
   form {
     display: inline;
@@ -14,7 +13,6 @@
   font-family: $base-font-family;
   color: $mid-grey;
   max-height: $three-baselines;
-  width: 280px;
   padding: 6px 8px 5px 8px;
   border: 1px solid $mid-grey;
   @include rz-box-sizing-border;
@@ -22,28 +20,58 @@
   transition-property: width;
   transition-duration: 200ms;
   transition-timing-function: ease-in;
+  width: 100%;
   &:focus {
     border: 1px solid $mid-grey;
-    width: 520px;
     @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
   }  
 }
 
+#input-container__search {
+  position: absolute;
+  top: 40px;
+  left: 24px;
+}
+
+#input-container__graph-input {
+  position: absolute;
+  top: 100px;
+  left: 24px;
+  &:focus {
+    width: 80%;
+  }
+}
+
 #textanalyser.ui-autocomplete-input {
   font-family: $base-font-family;
   color: $mid-grey;
 }
 
-.add-button {
+#btn_add {
   float: right;
   background: url(../img/plus-button.png);
   background-position: center;
   background-repeat: no-repeat;
-  background-color: $magenta;
-  position:relative;
+  background-color: red;
+  position: absolute;
+  height: 36px;
+  width: 36px;
+  top: 0px;
+  right: 0px;
+  border: 0;
+}
+
+#btn_search {
+  float: right;
+  background: url(../img/search-icon.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: lightgreen;
+  position: absolute;
+  top: 0px;
+  right: 0px;
   height: 36px;
   width: 36px;
-  left: -36px;
   border: 0;
 }
 
@@ -79,7 +107,7 @@
 .suggestion-item.selected, .suggestion-item:hover {
   padding-left: 16px;
   background-color: $light-grey;
-  border-left: 2px solid $cyan;
+  border-left: 5px solid $cyan;
   @include rz-box-sizing-border;
 }
 
diff --git a/res/templates/index.html b/res/templates/index.html
index 5fc64cc7..429643b6 100644
--- a/res/templates/index.html
+++ b/res/templates/index.html
@@ -45,12 +45,20 @@
     </div>
   </div>
   <div class="graph-view">
-    <div class="input-container">
-      <form>
-        <input class="input-bar" id="textanalyser" placeholder="Add nodes and relationships"/>
-        <button class="add-button"></button>
-      </form>
-      <div id="input-suggestion" class="suggestion" style="display: none">
+    <div id="input-box-set-container">
+      <div class="input-container" id="input-container__search">
+        <form>
+          <input class="input-bar" id="search" placeholder="Search for nodes or links"/>
+          <button id="btn_search"></button>
+        </form>
+        <div id="search-suggestion" class="suggestion" style="display: none"></div>
+      </div>
+      <div class="input-container" id="input-container__graph-input">
+        <form>
+          <input class="input-bar" id="textanalyser" placeholder="Add nodes or links"/>
+          <button id="btn_add"></button>
+        </form>
+        <div id="input-suggestion" class="suggestion" style="display: none"></div>
       </div>
     </div>
     <div class="info-container">