Merge pull request #2179 from merenlab/ui-improvements

UI improvements

.gitmodules

@@ -37,3 +37,9 @@
 [submodule "anvio/data/interactive/lib/JavaScript-MD5"]
 	path = anvio/data/interactive/lib/JavaScript-MD5
 	url = https://github.com/blueimp/JavaScript-MD5.git
+[submodule "anvio/data/interactive/lib/bootstrap-icons"]
+	path = anvio/data/interactive/lib/bootstrap-icons
+	url = https://github.com/twbs/icons.git
+[submodule "anvio/data/interactive/lib/roboto"]
+	path = anvio/data/interactive/lib/roboto
+	url = https://github.com/googlefonts/roboto.git

anvio/data/interactive/contigs.html

@@ -7,8 +7,8 @@
     <script type='text/javascript' src='js/utils.js'></script>
     <script type='text/javascript' src='lib/d3.js/d3.min.js'></script>
     <script type='text/javascript' src='js/contigs-plot.js'></script>
-    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
-    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
+    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
     <link rel="stylesheet" type="text/css" href="css/contigs-plot.css" />
     <script type="text/javascript">
         var contigs_stats;

anvio/data/interactive/css/charts.css

@@ -1,7 +1,12 @@
 @import url('normalize.css');
+@import url('variable.css');
+
+.main-container{
+    display: contents;
+}
 
 #display-container {
-    width: 1200px; //this is being overwritten though.
+    width: 1200px;
     margin: 0 auto 20px auto;
     background: rgba(255,255,255,0.5);
     box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
@@ -78,8 +83,8 @@
     position: fixed;
     height: 100px;
     width: 15px;
-    background-color: #EEEEEE;
-    border: solid 1px #DDDDDD;
+    background-color: var(--bg-color);
+    border: solid 1px var(--bg-color-hover);
     top: calc(40%);
     border-radius: 10px 0px 0px 10px;
     cursor: pointer;
@@ -95,15 +100,15 @@
     right: 0px;
     position: fixed;
     height: 100%;
-    background: url('../images/fractal.jpg') center center scroll;
     border-left: 1px solid #D3D3D3;
     opacity: 0.9;
     width: 420px;
     padding: 20px;
-    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     overflow-y: scroll;
     z-index: 999;
     color: black;
+    background: var(--solid-white);
 }
 
 .settings-header {
@@ -155,7 +160,7 @@
 }
 
 svg {
-    font-family: 'Lato', Arial, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     font-size: 10px;
     font-weight: 700;
     text-shadow: 0 1px 1px rgba(255,255,255,0.8);
@@ -199,7 +204,7 @@ g.context rect.background{
 
 /* General Demo Style */
 body{
-    font-family: 'Lato', Arial, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     font-weight: 300;
     font-size: 14px;
     color: #888;
@@ -257,7 +262,7 @@ a{
     text-transform: uppercase;
     z-index: 9999;
     position: relative;
-    font-family: Cambria, Georgia, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 }
 .codrops-top a{
@@ -349,3 +354,17 @@ a{
 .sidebar-footer > .btn {
     width: 50%;
 }
+
+.input-xs {
+    height: 22px;
+    padding: 0px 5px;
+    margin-left: 3px;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 3px;
+}
+
+#gc_overlay_color{
+    background-color: #008000; 
+    margin-left: 3px;
+}

anvio/data/interactive/css/error.css

@@ -1,5 +1,5 @@
 * {
-    font-family: 'PT Serif',serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
 }
 
 #body {

anvio/data/interactive/css/geneclusters.css

@@ -1,7 +1,7 @@
 @import url('normalize.css');
 
 #chart-container {
-    width: 1200px; //this is being overwritten though.
+    width: 1200px;
     margin: 0 auto 20px auto;
     background: rgba(255,255,255,0.5);
     box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
@@ -35,7 +35,7 @@
 }
 
 svg {
-    font-family: 'Lato', Arial, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     font-size: 10px;
     font-weight: 700;
     text-shadow: 0 1px 1px rgba(255,255,255,0.8);
@@ -78,7 +78,7 @@ g.context rect.background{
 
 /* General Demo Style */
 body{
-    font-family: 'Lato', Arial, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     font-weight: 300;
     font-size: 14px;
     color: #888;
@@ -136,7 +136,7 @@ a{
     text-transform: uppercase;
     z-index: 9999;
     position: relative;
-    font-family: Cambria, Georgia, serif;
+    font-family: 'Roboto',Helvetica,Arial,sans-serif;
     box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
 }
 .codrops-top a{
@@ -166,7 +166,7 @@ a{
   max-width: 900px;
   padding: 1px;
   color: black;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Roboto',Helvetica,Arial,sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: normal;
@@ -295,7 +295,7 @@ a{
 
 table {
   color: #333; /* Lighten up font color */
-  font-family: Helvetica, Arial, sans-serif; /* Nicer font */
+  font-family: 'Roboto',Helvetica,Arial,sans-serif; /* Nicer font */
   border-collapse: separate;
   border-spacing: 0;
 }
@@ -319,4 +319,6 @@ td {
   text-align: center;
   padding-bottom: 15px;
 }
-
+.main-container{
+  display: contents;
+}

anvio/data/interactive/css/glowing-button.css

@@ -4,6 +4,6 @@
   100% { box-shadow: 0 0 3px #B20000; }
 }
 
-.glowing-button {
+.glowingbutton {
   animation: glowing 1500ms infinite;
 }

anvio/data/interactive/css/inspection.css

@@ -1,6 +1,4 @@
-.gene-section{
-  max-width: 50px;
-}
+@import url('variable.css');
 
 .fa-ul {
     --icon-size: 12px;
@@ -27,11 +25,15 @@
     position: relative;
   }
 
+  .dropdown-submenu:hover {
+    background: var(--secondary-100);
+  }
+
   .dropdown-submenu>.dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -2px;
-    margin-left: 5px;
+    margin-left: 10px;
     -webkit-border-radius: 0 6px 6px 6px;
     -moz-border-radius: 0 6px 6px;
     border-radius: 0 6px 6px 6px;
@@ -53,12 +55,16 @@
     border-left-color: #ccc;
     margin-top: 5px;
     margin-right: -10px;
+  }  
+
+  .dropdown-submenu>a:hover {
+    background: var(--secondary-100);
   }
 
   .dropdown-submenu:hover>a:after {
     border-left-color: #fff;
-    transition: all .9s ease;
-    -webkit-transition: all .9s ease;
+    transition: all .12s ease;
+    -webkit-transition: all .12s ease;
   }
 
   .dropdown-submenu.pull-left {
@@ -75,4 +81,13 @@
 
   .multi-level{
     margin-left: 5px;
+  }
+
+  .blast-dropdown-btn a{
+    color: var(--primart-text);
+  }
+
+  .dropdown-menu{
+    min-width: 17rem;
+    font-size: 12px;
   }