fixed search bar positioning, scroll bug and moved export button to search bar

7 files changed, 86 insertions, 50 deletions

diff --git a/index.html b/index.html
index ae3e3157..7bb10284 100644
--- a/index.html
+++ b/index.html
@@ -29,12 +29,12 @@
     </div>
   </div>
   <div class="search-bar">
-    <img class="search-icon" src="res/img/search-icon.png">
-    <div class="search-input">
-      <form>
-        <input id="search" size=100% placeholder="Search for nodes and relationships"/>
+      <form class="search-input">
+        <input id="search" placeholder="Search for nodes and relationships"/>
       </form>
-    </div>
+      <div class="export">
+        <a href="#">Export</a>
+      </div>
   </div>
   <div id="intro-task" class="task-alert" style="display:none">
     <h3 class="task-desc">Connect between <span>yourself</span> and the  <span> clubs,</span><span> internship proposals,</span><span> skills,</span><span> and</span><span> scientific interests</span></span> you have:
@@ -95,11 +95,6 @@
                 <a href="#">Save</a>
             </div>
         </div>
-        <div class="debug-ui-right">
-            <div class="export">
-                <a href="#">Export</a>
-            </div>
-        </div>
     </div>
     <div class="debug-ui-row">
     <div class="debug-ui-left">
diff --git a/res/css/partials/base.scss b/res/css/partials/base.scss
index 35afb28c..bd9eba9e 100644
--- a/res/css/partials/base.scss
+++ b/res/css/partials/base.scss
@@ -7,6 +7,7 @@
 html, body {
   height: 100%;
   font-family: $base-font-family;
+  overflow-y: hidden;
 }
 
 body {
@@ -22,23 +23,23 @@ body {
 
 a{
   text-decoration: none;
-  font-style: italic;
+  color: $mid-grey;
 }
 
 a:link {
-  color: #FFF;
+  color: $mid-grey;
 }
 
 a:visited {
-  color: #FFF;
+  color: $mid-grey;
 }
 
 a:hover {
-  color: #EDE275;
+  color: $dark-grey;
 }
 
 a:active {
-  color: #FFF;
+  color: $mid-grey;
 }
 
 //input box stuff
diff --git a/res/css/partials/graph-view.scss b/res/css/partials/graph-view.scss
index f4854998..95f7bdbb 100644
--- a/res/css/partials/graph-view.scss
+++ b/res/css/partials/graph-view.scss
@@ -132,6 +132,7 @@
   stroke: #EDE275;
   stroke-width: 2px;
   z-index:1;
+  pointer-events: none;
 }
 
 .link.enter, .link.exit, .link.selected {
@@ -139,6 +140,7 @@
   stroke: #EDE275;
   stroke-width: 4px;
   z-index:1;
+  pointer-events: none;
 }
 
 #editbox input{
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index 1da42796..3fcbe378 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -5,24 +5,44 @@
   -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
   box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
+  z-index: 100;
 }
 
 .search-input{
-  position: absolute;
-  width: 100%;
-  top: $three-baselines+($four-baselines - $icon-height)/2;
+  width: 70%;
   height:$icon-height;
-  left: $doc-margin + 40px;
+  float: left;
+  margin: 8px 12px 12px $doc-margin;
 }
-.search-icon {
-  position:absolute;
-  width:20px;
-  height:$icon-height;
-  left: $doc-margin;
-  top: $three-baselines+($four-baselines - $icon-height)/2;
+
+.search-input:before {
+  content: "";
+  background: url(../img/search-icon.png);
+  padding: 0px 10px 0px 10px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 input {
   font-family: $base-font-family;
   font-size: $h3-size;
+  width: 80%;
+}
+
+.export {
+  cursor: pointer;
+  text-align: right;
+  width: 60px;
+  float: right;
+  color: $dark-grey;
+  font-size: $h5-size;
+  margin: 14px $doc-margin 12px 12px ;
+}
+
+.export:before {
+  content: "";
+  background: url(../img/export.png);
+  padding: 0px 9px 0px 9px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
\ No newline at end of file
diff --git a/res/css/style.css b/res/css/style.css
index 2d9d4701..f5a2985a 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -15,7 +15,8 @@
 /* Horizontal spacing */
 html, body {
   height: 100%;
-  font-family: "Source_Regular", sans-serif; }
+  font-family: "Source_Regular", sans-serif;
+  overflow-y: hidden; }
 
 body {
   overflow-y: hidden;
@@ -29,19 +30,19 @@ body {
 
 a {
   text-decoration: none;
-  font-style: italic; }
+  color: #919095; }
 
 a:link {
-  color: #FFF; }
+  color: #919095; }
 
 a:visited {
-  color: #FFF; }
+  color: #919095; }
 
 a:hover {
-  color: #EDE275; }
+  color: #363636; }
 
 a:active {
-  color: #FFF; }
+  color: #919095; }
 
 input {
   background-color: white;
@@ -246,13 +247,15 @@ table {
   fill: none;
   stroke: #EDE275;
   stroke-width: 2px;
-  z-index: 1; }
+  z-index: 1;
+  pointer-events: none; }
 
 .link.enter, .link.exit, .link.selected {
   fill: none;
   stroke: #EDE275;
   stroke-width: 4px;
-  z-index: 1; }
+  z-index: 1;
+  pointer-events: none; }
 
 #editbox input {
   width: 130px; }
@@ -365,32 +368,49 @@ table {
   background: white;
   -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
+  z-index: 100; }
 
 .search-input {
-  position: absolute;
-  width: 100%;
-  top: 50px;
+  width: 70%;
   height: 20px;
-  left: 110px; }
+  float: left;
+  margin: 8px 12px 12px 70px; }
 
-.search-icon {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  left: 70px;
-  top: 50px; }
+.search-input:before {
+  content: "";
+  background: url(../img/search-icon.png);
+  padding: 0px 10px 0px 10px;
+  background-position: center;
+  background-repeat: no-repeat; }
 
 input {
   font-family: "Source_Regular", sans-serif;
-  font-size: 18px; }
+  font-size: 18px;
+  width: 80%; }
+
+.export {
+  cursor: pointer;
+  text-align: right;
+  width: 60px;
+  float: right;
+  color: #363636;
+  font-size: 12px;
+  margin: 14px 70px 12px 12px; }
+
+.export:before {
+  content: "";
+  background: url(../img/export.png);
+  padding: 0px 9px 0px 9px;
+  background-position: center;
+  background-repeat: no-repeat; }
 
 .task-alert {
   position: relative;
   width: 100%;
   height: 48px;
-  background-color: #D3F2F8;
-  color: #1D6E7F;
+  background-color: #d3f2f8;
+  color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf;
   z-index: 1; }
@@ -479,5 +499,3 @@ h2 {
 
 h1 {
   font-size: 12px; }
-
-/*# sourceMappingURL=style.css.map */
diff --git a/res/img/export.png b/res/img/export.png
new file mode 100644
index 00000000..54bf0535
--- /dev/null
+++ b/res/img/export.png
diff --git a/src/buttons.js b/src/buttons.js
index ad60668e..860c8573 100644
--- a/src/buttons.js
+++ b/src/buttons.js
@@ -12,7 +12,7 @@ $('.save a').click(function(){
     localStorage.setItem(key, json);
 });
 
-$('.export a').click(function() {
+$('.export').click(function() {
     var json = rz_core.graph.save_to_json();
     var filename = 'graph.json';
     var blob = new Blob([json], {type: 'application/json'});