Some UI change

csw11004 · Sep 18, 2015 · 3b56814 · 3b56814
1 parent 874ec65
commit 3b56814
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js
@@ -111,8 +111,8 @@ function VQI_GenomeBrowser(id, serviceURL) {
 
     this.makeNavMenu = function () {
         var menu = "<ul class='nav nav-tabs' style='font-size: 16'>"+
-                    "<li class='active'><a data-toggle='tab' href='#home'>Home</a></li>"+
-                    "<li><a data-toggle='tab' href='#traks'>Track</a></li>"+
+                    //"<li class='active'><a data-toggle='tab' href='#home'>Home</a></li>"+
+                    "<li class='active'><a data-toggle='tab' href='#traks'>Track</a></li>"+
                     "<li><a data-toggle='tab' href='#analysis'>Analysis</a></li>"+
                     "<li><a data-toggle='tab' href='#other'>Other</a></li>"+
                     "</ul>"
@@ -134,9 +134,9 @@ function VQI_GenomeBrowser(id, serviceURL) {
                         "</table>"
 
         var menuContent =  "<div class='tab-content'>"+
-                            "<div id='home' class='tab-pane fade in active' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+homeTable+"</div>"+
-                            "<div id='traks' class='tab-pane fade ' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+tackMenuTable+"</div>"+
-                            "<div id='analysis' class='tab-pane fade' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+analysisMenuTable+"</div>"+
+                            //"<div id='home' class='tab-pane fade in active' style='height: 130px; width: 800px; background-color:#F0F0F0'>"+homeTable+"</div>"+
+                            "<div id='traks' class='tab-pane fade in active ' >"+tackMenuTable+"</div>"+
+                            "<div id='analysis' class='tab-pane fade' >"+analysisMenuTable+"</div>"+
                             "<div id='other' class='tab-pane fade'></div>"+  
                             "</div>"
 
@@ -150,7 +150,7 @@ function VQI_GenomeBrowser(id, serviceURL) {
     this.makeNavigationForm = function () {
         var navigateBox = "<input type='text' name='navigate' id='navigate' size='30'>";
         var navigateButton = "<input type='button' id='navigatebutton' value='Go To'>";
-        var form = "<form id='navigation_form'>" + navigateBox + navigateButton + "</form>";
+        var form = "<form id='navigation_form' style='margin: 10px 0px;'>" + navigateBox + navigateButton + "</form>";
         $("#" + divId).append(form);
         $("#" + divId + " #navigatebutton").on("click", navigateToRegion.bind(this));
     };

diff --git a/VQI_GenomeBrowserDemo.html b/VQI_GenomeBrowserDemo.html
@@ -12,6 +12,7 @@
         <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
 
         <link rel="stylesheet" href="bootstrap.min.css">
+        <link rel="stylesheet" href="menu.css">
 
         <!-- Latest compiled and minified JavaScript -->
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

diff --git a/menu.css b/menu.css
@@ -0,0 +1,18 @@
+ .tab-content {
+    width:1098px;
+    height: 100px;
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    padding: 1px;
+}
+
+.nav-tabs {
+    margin-bottom: 0;
+    width:1102px;
+}
+
+.container-fluid {
+    padding-left: 0px;
+
+}