Bug fix for lesion table

Packages/lesiontracker/components/lesionTable/lesionTable.html

@@ -1,6 +1,6 @@
 <template name="lesionTable">
     <div id="lesionTableContainer">
-        <table class="table table-bordered lesionTable" id="tblLesion">
+        <table class="table table-striped noselect lesionTable" id="tblLesion">
             <thead>
                 <tr>
                     <th id="thNumber">Lesion #</th>
@@ -10,7 +10,8 @@
                     {{ #each timepoints }}
                          {{ >lesionTableTimepointHeader }}
                     {{ /each }}
-                    <th id="thSpacer"> </th>
+                    <!--What is this for?-->
+                    <!--<th id="thSpacer"> </th>-->
                 </tr>
             </thead>
             <tbody>

Packages/lesiontracker/components/lesionTable/lesionTable.styl

@@ -1,44 +1,72 @@
-#lesionTableContainer {
+#lesionTableContainer
     width: 100%
     height: 25%
-    overflow: auto;
-}
-
-table.lesionTable > thead > tr > th {
-    font-style: italic;
-    color:white;
-    height: 20px;
-    line-height: 20px;
-    text-align: center
-    margin: 0;
-    padding: 5px;
-    background-color: #424242;
-}
-table.lesionTable > tbody > tr > td {
-    height: 15px;
-    line-height: 15px;
-    margin: 0;
-    padding: 5px;
-}
-
-table.lesionTable tbody tr.lesionTableRow:nth-child(even) {background: #888}
-table.lesionTable tbody tr.lesionTableRow:nth-child(odd) {background: #BBB}
-table.lesionTable tbody tr.lesionTableRow:hover{ background-color: #009BD2; color: white;  }
-
-#thTarget {
-    width: 1%;
-}
-
-#thLocation {
-    text-align: left;
-    width: 15%;
-}
+    
+    .lesionTable
+    
+      td.lesionNumber, th#thNumber
+        width: 70px
+      
+      td.location, th#thLocation
+        width: 250px
+      
+      td.target, th#thTarget
+        width: 70px
+        
+      td.lesionTableTimepointCell
+        width: 70px
 
 
-#thSpacer {
-    width: 61%;
-}
+      thead
+        width: 100%
+        display: block
+        
+        tr
+          width: 100%
+            
+          th
+            border-bottom-width: 0
+            float:left
+            font-weight: normal
+            color:white
+            line-height: 20px
+            text-align: center
+            margin: 0
+            padding: 5px
+            background-color: #424242
+            
+            #thTarget 
+                width: 1%
 
-td.lesionNumber, .target,.lesionTableTimepointCell {
-    text-align: center;
-}
+            #thLocation 
+                text-align: left
+                width: 15%
+
+            #thSpacer 
+                width: 61%
+          
+      tbody
+        display: block
+        height: 200px // Seems like this has to be fixed for overflow to work properly!
+        overflow: auto
+        width: 100%
+        
+        tr.lesionTableRow
+          width: 100%
+          
+          &:nth-child(even)
+              background: #888    
+          &:nth-child(odd)
+              background: #BBB
+          &:hover(odd)
+              background-color: #009BD2
+              color: white
+
+            td
+                border-bottom-width: 0
+                float:left
+                margin: 0
+                padding: 5px
+
+                &.lesionNumber,  &.target, &.lesionTableTimepointCell 
+                    text-align: center