LT-342: Study List style issues

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.html

@@ -1,13 +1,15 @@
 <template name="studyAssociationTable">
     <div id="studyAssociationTable">
-        <div class="row">
+        <div id="associationInstructions" class="row">
             <div class="col-md-12">
                 <h4>Instructions</h4>
-                <p>Associate the selected studies with timepoints in the clinical trial. Only 1 follow-up time point can be associated at the same time.</p>
+                <p>Select the studies you would like to associate to a time point. Only one follow-up time point can be associated at the same time.</p>
                 <p>We have automatically retrieved all studies within 14 days (<strong>{{formatDA this.earliestDate}}</strong> to <strong>{{formatDA latestDate}}</strong>) of your selected studies, in case you forgot to select a study.</p>
             </div>
         </div>
 
+        <div class="tableHeaderBackground">
+        </div>
         <table class="table table-responsive">
             <thead>
                 <tr>

Packages/ohif-measurements/client/components/association/associationModal/studyAssociationTable/studyAssociationTable.styl

@@ -1,18 +1,65 @@
 @import "{design}/app"
 
+$tableHoverColor = #2c363f
+$tableTextPrimaryColor = white
+$tableHeaderHeight = 50px
+$bodyCellHeight = 30px
+
 #studyAssociationTable
+  color: #fff;
+  
   .header
     text-align: center
 
   .center
     text-align: center
-
+  
+  #associationInstructions
+    theme('background', '$uiGrayDarker')
+    margin-bottom: 2px
+    padding: 0 15px
+    
+  .tableHeaderBackground
+    theme('background-color', '$uiGrayDarker')
+    position: absolute
+    height: $tableHeaderHeight + 1px
+    left: 0
+    width: 100%
+    z-index: 1
+    border-bottom: solid 1px;
+    theme('border-bottom-color', '$largeNumbersColor')
+  
   table
+    z-index: 2
+    position: relative
+    
+    thead
+      tr
+        th
+          padding: 0
+          border-bottom: solid 1px #6fbde2
+          height: $tableHeaderHeight
     tbody
       tr
+        padding: 5px
+        background-color: black
+
+        &:nth-child(even)
+          theme('background-color', '$uiGrayDarker')
+
         td
           position: relative
+          height: $bodyCellHeight
+          line-height: $bodyCellHeight
+          color: $tableTextPrimaryColor
+          border-top: 1px solid #436270
+          border-bottom: 1px solid #436270
+          vertical-align: middle;
+          transition(all 0.1s ease)
           
+          p
+            margin: 0;
+
           &.timepointOptions
             input
               margin: 0 3px
@@ -61,11 +108,16 @@
               padding-left: 20px
               display: inline-block
               position: relative
+              line-height: initial;
 
           &.disabled
             opacity: 0.2
             
           &.checkboxWrapper
+            label
+              display: block
+              margin: 0
+
             input
               margin: 0 3px
               
@@ -81,25 +133,22 @@
                 
               & + span
                 display: block
-                position: absolute
                 border: 1px solid #b6b6b6
                 background-color: white
                 border-radius: 2px
                 height: 16px
                 width: 16px
-                top: 10px
+                margin: 0 auto
-                left: calc((100% - 16px)/2)
                 z-index: 5
                 transition: border .25s linear
                 -webkit-transition: border .25s linear
                 
               & + span:before
                 display: block
-                position: absolute
+                position: relative
                 content: ''
                 font-size: 9px
-                left: 3px
+                top: -7px
-                top: 1px
                 color: white
                 background-color: transparent
                 transition: background 0.25s linear
@@ -109,4 +158,14 @@
                 theme('background-color', '$activeColor')
                 
                 &:before
-                  content: '\2713'
+                  content: '\2713'
+
+        &:hover, &:active, &.active
+          background-color: $tableHoverColor
+          color: white
+
+          td
+            // This selector is necessary to override bootstrap's 'table' class
+            border-top: 1px solid #436270
+            border-bottom: 1px solid #436270
+            background-color: $tableHoverColor

Packages/ohif-measurements/client/components/caseProgress/caseProgress.html

@@ -10,7 +10,7 @@
         {{/if}}
         {{#if progressComplete}}
             <div class="caseProgressStatus">
-                <button class="btn js-finish-case">Enter response</button>
+                <button class="btn js-finish-case">Save</button>
             </div>
         {{/if}}
     </div>

Packages/ohif-study-list/client/components/studylist/studylistPagination/studylistPagination.styl

@@ -53,3 +53,7 @@
 
           &.disabled a
             theme('color', '$uiGrayLight')
+
+@media only screen and (max-width: 1069px)
+  .studylistPagination > .row
+    margin-right: 0;

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.html

@@ -1,7 +1,7 @@
 <template name="studylistResult">
     <div class="studyListToolbar clearfix">
         <div class="header pull-left">
-            Study list
+            Study List
         </div>
         <div class="studyCount pull-right">
             {{numberOfStudies}}
@@ -71,13 +71,6 @@
                                class="form-control studylist-search"
                                id="studyDescription">
                     </th>
-                    <th class="numberOfStudyRelatedInstances">
-                        <div id="_numberOfStudyRelatedInstances" class="sortingCell">
-                            <span># Images</span>
-                            <i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
-                        </div>
-                        <input type="text" class="form-control studylist-search invisible"/>
-                    </th>
                 </tr>
             </thead>
             <tbody id="studyListData">

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.js

@@ -204,8 +204,7 @@ Template.studylistResult.onCreated(() => {
             patientId: 0,
             accessionNumber: 0,
             studyDescription: 0,
-            modality: 0,
+            modality: 0
-            numberOfStudyRelatedInstances: 0
         });
     }
 });

Packages/ohif-study-list/client/components/studylist/studylistResult/studylistResult.styl

@@ -209,6 +209,9 @@ $bodyCellHeight = 40px
 @media only screen and (max-width: 1069px)
   $tablePaddingMediumScreen = 5px
   
+  .theadBackground
+    height: 101px
+
   .studyListToolbar
     padding: 0 $tablePaddingMediumScreen
     
@@ -229,7 +232,6 @@ $bodyCellHeight = 40px
           
         div.sortingCell
           padding: 10px 5px
-          min-width: auto
           
           i
             width: auto

Packages/ohif-study-list/client/components/studylist/studylistStudy/studylistStudy.html

@@ -18,8 +18,5 @@
         <td class="studyDescription">
             {{studyDescription}}
         </td>
-        <td class="numberOfStudyRelatedInstances">
-            {{numberOfStudyRelatedInstances}}
-        </td>
     </tr>
 </template>