fixed a long standing bug with the width of the cytoscape window

proost · Feb 15, 2017 · d5b40c0 · d5b40c0
1 parent c5f55b8
commit d5b40c0
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/planet/static/css/main.css b/planet/static/css/main.css
@@ -76,10 +76,18 @@ textarea.form-control {
   Cytoscape
 */
 
+@media (min-width: 992px) {
+    #cy {
+      min-height: 800px;
+      margin-left: 280px;
+      width: calc(100vw - 280px);
+    }
+}
+
 #cy {
   min-height: 800px;
-  min-width: 100%;
-  position: absolute;
+  margin-left: 0px;
+  width: 100vw;
 }
 
 #info {
@@ -93,7 +101,7 @@ textarea.form-control {
 
 #legend {
     display:none;
-    margin-top:800px;
+    margin-top:10px;
 }
 
 
@@ -154,7 +162,7 @@ textarea.form-control {
 .sidebar {
   display: none;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .sidebar {
     position: fixed;
     top: 51px;
@@ -167,12 +175,7 @@ textarea.form-control {
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
     background-color: #f5f5f5;
     border-right: 1px solid #eee;
-  }
-}
-
-@media (min-width: 992px) {
-  .sidebar {
-    min-width: 260px;
+    width: 280px;
   }
 }
 

diff --git a/planet/templates/expression_graph.html b/planet/templates/expression_graph.html
@@ -182,27 +182,42 @@
         <div class="col-lg-10 col-lg-offset-2 col-sm-8 col-sm-offset-4 col-md-8 col-md-offset-4 main" id="main">
             {% if node %}
             <h1>Expression Graph: <strong>{{ node.probe }}</strong><br /><small>({{ node.method.description }})</small><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
-
-            <div class="row">
-            <div id="cy" json="{{ url_for('expression_network.expression_network_json', node_id=node.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
             {% elif cluster %}
             <h1>Coexpression cluster: <strong>{{ cluster.name }}</strong><br /><small>{{ cluster.method.method }}</small><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
 
             <a href="{{ url_for('expression_cluster.expression_cluster_view', cluster_id=cluster.id) }}">View table</a>
-            <div id="cy" json="{{ url_for('expression_cluster.expression_cluster_json', cluster_id=cluster.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
             {% elif cluster_one %}
             <h1>Comparing clusters: <strong>{{ cluster_one.name }}</strong> vs <strong>{{ cluster_two.name }}</strong><br /><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
+            {% elif sequence %}
+            <h1><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='ecc') }}" data-target="#helpModal">ECC</abbr> network: <strong>{{ sequence.name }}</strong><br /><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
+            {% elif graph_data %}
+            <h1>Custom network <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
+            {% elif ecc_pair %}
+            <h1>ECC pair <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
+            {% endif %}
+
+        </div>
+    </div>
+</div>
+</div>
+            {% if node %}
+            <div id="cy" json="{{ url_for('expression_network.expression_network_json', node_id=node.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
+            {% elif cluster %}
+            <div id="cy" json="{{ url_for('expression_cluster.expression_cluster_json', cluster_id=cluster.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
+            {% elif cluster_one %}
             <div id="cy" json="{{ url_for('graph_comparison.graph_comparison_cluster_json', one=cluster_one.id, two=cluster_two.id, family_method_id=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif sequence %}
-            <h1><abbr title="Click to show help" href="{{ url_for('help.help_topic', topic='ecc') }}" data-target="#helpModal">ECC</abbr> network: <strong>{{ sequence.name }}</strong><br /><button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
             <div id="cy" json="{{ url_for('ecc.ecc_graph_json', sequence=sequence.id, network=network_method_id, family=family_method_id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif graph_data %}
-            <h1>Custom network <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
             <div id="cy" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
            {% elif ecc_pair %}
-            <h1>ECC pair <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrows-h"></i></button></h1>
             <div id="cy" json="{{ url_for('ecc.ecc_graph_pair_json', ecc_id = ecc_pair.id) }}" cycss="{{ url_for('static', filename='js/cytoscape.cycss') }}"></div>
             {% endif %}
+
+<div class=container">
+<div class=container-fluid">
+<div class="col-lg-10 col-lg-offset-2 col-sm-8 col-sm-offset-4 col-md-8 col-md-offset-4 main" id="main">
+    <div class="row">
             <div id="loading">
                 <svg id="svg2" xmlns="http://www.w3.org/2000/svg" height="150" width="150" version="1.1">
                  <defs id="defs4">
@@ -249,6 +264,7 @@ <h1>ECC pair <button id="cy-reset" class="btn btn-default"><i class="fa fa-arrow
 
                 </svg>
             </div>
+
             <div id="legend" url="{{ url_for('static', filename='svg/legend.svg') }}"></div>
             </div>
         </div>