Some styling changes

Styling changes for lesionTable, move logo&header in same row with tabs

LesionTracker/client/body.styl

@@ -1,6 +1,10 @@
 body
   background-color: #202020
 
+.tab-content {
+  height: calc(100% - 40px);
+}
+
 table#tblStudyList thead > tr {
  background-color: #424242;
   color: white;

LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html

@@ -1,16 +1,9 @@
 <template name="layoutLesionTracker">
-    <nav class="navbar navbar-default" role="navigation">
+    <div class="logoContainer">
-        <div class="container-fluid">
+        <a class="navbar-brand" href="/">
-            <div class="navbar-header">
+            <img src="/images/logo.png">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <h4 class="name">Open Health Imaging Foundation</h4>
-                  <span class="sr-only">Toggle navigation</span>
+        </a>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="/">Lesion Tracker</a>
     </div>
-        </div>
-    </nav>
     {{> yield}}
 </template>

LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl

@@ -1,18 +1,23 @@
-.navbar
+.logoContainer
-  margin-bottom: 0
+  position: absolute;
-  border-radius: 0px
+  height: 40px;
+  top: 0;
+  right: 0;
+  color: white;
 
-.navbar-form
+.navbar-brand
-  margin: 0
+    display: inline-block
-  padding: 15px 3px
+    padding: 0;
+    margin-right: 5px;
 
-.navbar-default
+    img
-  -webkit-transition: background-color 200ms linear
+      height: 30px
-  -moz-transition: background-color 200ms linear
+      float: left
-  -o-transition: background-color 200ms linear
+      margin-right: 10px
-  -ms-transition: background-color 200ms linear
+      margin-top: 5px;
-  transition: background-color 200ms linear
 
-@media (min-width: 768px)
+    h4.name
-  .navbar
+      float: left
-    border-radius: 0px
+      margin: 10px 0;
+      font-family: "Sanchez"
+      color: #C1C1C1

LesionTracker/client/routes.js

@@ -12,8 +12,8 @@ Object.keys(ViewerData).forEach(function(contentId) {
 });
 
 Router.configure({
-    layoutTemplate: 'layout',
+    layoutTemplate: 'layoutLesionTracker',
-    loadingTemplate: 'layout',
+    loadingTemplate: 'layoutLesionTracker',
     notFoundTemplate: 'notFound'
 });
 
@@ -25,7 +25,7 @@ Router.route('/', function () {
 
 
 Router.route('/viewer/:_id', {
-    layoutTemplate: 'layout',
+    layoutTemplate: 'layoutLesionTracker',
     name: 'viewer',
     onBeforeAction: function() {
         log.info('Router GetStudyMetadata');

Packages/lesiontracker/components/lesionTable/lesionTable.js

@@ -61,7 +61,7 @@ Template.lesionTable.onRendered(function() {
 });
 
 // Activate selected lesions when lesion table row is clicked
-function activateLesions (e) {
+function updateLesions (e) {
 
     // lesionNumber of measurement = id of row
     var lesionNumber = parseInt($(e.currentTarget).attr("id"));
@@ -97,7 +97,7 @@ function activateLesions (e) {
 
 Template.lesionTable.events({
     'click table#tblLesion tbody tr': function(e) {
-        activateLesions(e);
+        updateLesions(e);
     }
 });
 

Packages/lesiontracker/components/lesionTable/lesionTable.styl

@@ -1,83 +1,44 @@
-#lesionTableContainer
+#lesionTableContainer {
     width: 100%
     height: 25%
-    overflow: auto
+    overflow: auto;
-
+}
-table.lesionTable
-    thead
-        th
-            background-color: #424242
-            font-style: italic
-            color:white
-            text-align: center
-            height: 15px
-            width: 20px
 
 table.lesionTable > thead > tr > th {
-    padding: 4px;
+    font-style: italic;
+    color:white;
+    height: 20px;
+    line-height: 20px;
+    text-align: center
     margin: 0;
-    height: 25px;
+    padding: 5px;
-    line-height: 15px;
+    background-color: #424242;
 }
-
 table.lesionTable > tbody > tr > td {
-    padding: 4px;
+    height: 15px;
+    line-height: 15px;
     margin: 0;
-    height: 25px;
+    padding: 5px;
-    line-height: 10px;
-}
-
-table.lesionTable tbody tr{
-    background-color: #b3b3b3;
-    color: #424242;
-    line-height: 14px;
 }
 
 table.lesionTable tbody tr.lesionTableRow:nth-child(even) {background: #CCC}
 table.lesionTable tbody tr.lesionTableRow:nth-child(odd) {background: #DDD}
+table.lesionTable tbody tr.lesionTableRow:hover{ background-color: #009BD2; color: white;  }
 
-table.lesionTable tbody tr.lesionTableRow:hover{
+#thTarget {
-        background-color: #009BD2
+    width: 1%;
-        color: white
 }
 
-
+#thLocation {
-th#thNumber {
+    text-align: left;
-    width: 4%;
-}
-
-th#thTarget {
-    width: 4%;
-}
-
-th#thLocation {
     width: 15%;
-    text-align: left;
 }
 
-th#thSpacer {
+
-    width: 50%;
+#thSpacer {
+    width: 61%;
 }
 
-td.location {
+td.lesionNumber, .target,.lesionTableTimepointCell {
-    text-align: left;
-}
-
-td.lesionNumber {
     text-align: center;
 }
-
-td.target {
-    text-align: center;
-}
-
-td.lesionTableTimepointCell {
-    width: 4%;
-    text-align: center;
-}
-
-.btnRemove{
-    border: none;
-    outline:none;
-    background-color: transparent;
-}