Galaxy |

Changeset 8:beb83da5a6b7 (2014-05-08)

Previous changeset 7:9e7927673089 (2014-05-08) Next changeset 9:bbdc8fb0de2b (2014-05-08)

Commit message:
div-ified graphics

modified:
visualise.html.jinja

diff -r 9e7927673089 -r beb83da5a6b7 visualise.html.jinja
--- a/visualise.html.jinja Thu May 08 16:51:52 2014 +0200
+++ b/visualise.html.jinja Thu May 08 17:33:41 2014 +0200

[

@@ -63,6 +63,15 @@
       padding: 1em;
       }

+      .graphicrow {
+      clear: left;
+      width: 100%;
+      }
+
+      .graphicitem {
+      float: left;
+      }
+
       .graphic {
       background-color: white;
       border: 2px solid black;
@@ -75,7 +84,7 @@
       text-align: center;
       }

-      .centered, #defline, div.legendwrapper, table.legend, div.tablewrapper {
+      .centered, #defline, div.legend, div.tablewrapper {
       align: center;
       margin-left: auto;
       margin-right: auto;
@@ -93,17 +102,16 @@
       overflow-y: hidden;
       }

-      div.legendwrapper {
+      div.legend {
       max-width: 40em;
       }
-
-      table.legend {
+      div.legend div {
+      width: 100%;
       color: white;
       font-weight: bold;
-      width: 100%;
       border-spacing: 0;
       }
-      table.legend td {
+      div.legend div .graphicitem {
       width: 20%;
       padding: 0;
       margin: 0;
@@ -132,40 +140,28 @@
       color: red;
       text-align: left;
       }
-      .scale table {
-      width: 100%;
-      height: 1.3em;
-      margin-top: 0;
+      .scale .graphicrow {
+      margin: .5em 0 .5em 0;
       color: white;
-      table-layout: fixed;
-      border-collapse: collapse;
       }
-      .scale td {
-      margin 0;
-      padding 0;
-      }
-      .scale td div {
-      margin: 1px 0;
+      .scale .graphicitem div {
+      margin: 0 1px;
+      padding: 0 2px;
       text-align: right;
       background-color: red;
       color: white;
       }
-
-      table.matchresult {
-      width: 100%;
-      margin-top: 3px;
-      margin-bottom: 0;
-      border-collapse: collapse;
+
+      a.matchresult {
+      display: block;
+      margin: 0;
+      padding: 0;
       }
-      table.matchresult, table.matchresult tr, table.matchresult td, a.matchlink {
-      height: 3px;
-      margin-left: 0;
-      margin-right: 0;
-      padding-left: 0;
-      padding-right: 0;
+      div.matchrow {
+      margin-top: 4px;
       }
-      a.matchlink {
-      display: block;
+      div.matchrow, div.matchitem {
+      height: 4px;
       }

       table.descriptiontable {
@@ -211,35 +207,42 @@

           <div class=graphic>
             <h4 class=blackHeader>Color key for alignment scores</h4>
-            <div class=legendwrapper><table class=legend><tr>
-                  <td style="background-color: {{colors[0]}}"><40</td>
-                  <td style="background-color: {{colors[1]}}">40-50</td>
-                  <td style="background-color: {{colors[2]}}">50-80</td>
-                  <td style="background-color: {{colors[3]}}">80-200</td>
-                  <td style="background-color: {{colors[4]}}">200≤</td>
-            </tr></table></div>
+     <div class=legend><div class=graphicrow>
+ <div class=graphicitem style="background-color: {{colors[0]}}"><40</div>
+ <div class=graphicitem style="background-color: {{colors[1]}}">40-50</div>
+ <div class=graphicitem style="background-color: {{colors[2]}}">50-80</div>
+ <div class=graphicitem style="background-color: {{colors[3]}}">80-200</div>
+ <div class=graphicitem style="background-color: {{colors[4]}}">200≤</div>
+            </div></div>
+     <div style="clear: left"></div>

             <div class=tablewrapper>

               <div class=scale>
                 <div>query:</div>
-                <table><tr>
+ <div class=graphicrow>
                     {% for s in queryscale %}
-                    <td width={{s.width|safe}}%><div>{{s.label|safe}}</div></td>
+                    <div class=graphicitem
+ style="width: {{s.width|safe}}%">
+       <div style="{{'margin-left: 0px' if loop.first else 'margin-right: 0px' if loop.last}}">{{s.label|safe}}</div>
+     </div>
                     {% endfor %}
-                </tr></table>
+ </div>
+ <div style="clear: left"></div>
               </div>

               {% for line in match_colors %}
-              <a href="{{line.link}}"
+              <a class=matchresult
+ href="{{line.link}}"
                  onmouseover='document.getElementById("defline").innerHTML="{{line.defline}}"'
                  onmouseout='document.getElementById("defline").innerHTML="Mouse-over to show defline and scores, click to show alignments"'
                  title="{{line.defline}}">
-                <table class=matchresult><tr>
+                <div class="matchrow graphicrow">
                     {% for match in line.colors %}
-                    <td width={{match[0]}}% style="background-color: {{match[1]}}" />
+                    <div class="matchitem graphicitem"
+ style="background-color: {{match[1]}}; width: {{match[0]}}%"></div>
                     {% endfor %}
-                </tr></table>
+                </div>
               </a>

               {% endfor %}