studyDateList template is moved inside hidingPanel

LesionTracker/client/body.styl

@@ -27,42 +27,4 @@ table#tblStudyList tbody > tr > td{
 }
 
 
-/* Toolbar Styles */
-
-/* iphone6 Portrait */
-
-  @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
-
-    table#tblStudyList {
-      table-layout: fixed
-      font-size: 0.4em
-    }
-
-
-    #tablist {
-      width: 84%;
-      overflow-x: auto;
-
-    }
-    #toolbar .btn-group button {
-      width: 35px;
-      height: 35px;
-    }
-
-  }
-
-/* iphone6 Plus Portrait */
-
-@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
-  #tablist {
-    width: 84%;
-    overflow-x: auto;
-  }
-
-  #toolbar .btn-group button {
-    width: 40px;
-    height: 40px;
-  }
-
-}
 

LesionTracker/client/components/viewer.html

@@ -1,13 +1,11 @@
 <template name="viewer">
     <div id="viewer">
-        {{ >lesionLocationDialog }}
-        {{ >nonTargetLesionDialog}}
-        {{ >studyDateList}}
-
-        {{ >hidingPanel }}
+        {{>lesionLocationDialog}}
+        {{>nonTargetLesionDialog}}
+        {{>hidingPanel}}
         <div id="viewportAndLesionTable">
-            {{ >viewerMain }}
-            {{ >lesionTable }}
+            {{>viewerMain }}
+            {{>lesionTable }}
         </div>
     </div>
 </template>

LesionTracker/client/components/viewer.js

@@ -16,6 +16,11 @@ function resizeViewports() {
     }, 1);
 }
 
+Template.viewer.helpers({
+    'studyDateIsShown':function(){
+        return {studyDateIsShown: true};
+    }
+});
 Template.viewer.onCreated(function() {
     log.info("viewer onCreated");
 

LesionTracker/client/mobileStyles.css

@@ -0,0 +1,27 @@
+
+/* Mobile devices */
+
+@media only screen and (min-device-width : 375px) and (max-device-width : 768px) and (orientation : portrait) {
+
+    table#tblStudyList {
+        table-layout: fixed;
+        font-size: 0.7em;
+    }
+
+    #tablist {
+        width: 84%;
+        overflow-x: auto;
+
+    }
+    #toolbar .btn-group button {
+        width: 40px;
+        height: 40px;
+    }
+}
+
+@media (max-device-width: 667px) {
+    #toolbar .btn-group button {
+        width: 35px;
+        height: 35px;
+    }
+}

Packages/lesiontracker/components/studyDateList/studyDateList.css

@@ -0,0 +1,12 @@
+.studyDateList {
+    margin: 0px auto;
+    text-align: left;
+    width: 100%;
+    float: none;
+    border-top: 2px solid #777;
+    padding: 10px;
+}
+
+.studyDateList label {
+    color: white;
+}

Packages/lesiontracker/components/studyDateList/studyDateList.html

@@ -1,7 +1,11 @@
 <template name="studyDateList">
-    <select id="selectStudyDate">
-        {{#each patientStudies}}
-            <option value="{{studyInstanceUid}}">{{studyDate}}</option>
-        {{/each}}
-    </select>
+    <div class="studyDateList">
+        <label>Study Date:</label>
+        <select id="selectStudyDate">
+            {{#each patientStudies}}
+                <option value="{{studyInstanceUid}}">{{studyDate}}</option>
+            {{/each}}
+        </select>
+    </div>
+
 </template>

Packages/lesiontracker/components/studyDateList/studyDateList.js

@@ -8,6 +8,7 @@ Template.studyDateList.onCreated(function(){
 
 
 Template.studyDateList.onRendered(function(){
+
     // Add Study dates to Timepoints
     this.patientStudies.forEach(function(study) {
         Timepoints.insert({
@@ -16,8 +17,13 @@ Template.studyDateList.onRendered(function(){
         });
     });
 
-    // Selected date option
-    $('#selectStudyDate option[value="'+this.selectedDate+'"]').prop('selected', true);
+    // Selected date option in combobox
+    var self = this;
+    $('#selectStudyDate option').filter(function () {
+        if ($(this).html() === self.selectedDate) {
+            $(this).prop('selected', true);
+        }
+    });
 
 });
 

Packages/lesiontracker/package.js

@@ -40,6 +40,7 @@ Package.onUse(function (api) {
     api.addFiles('components/nonTargetLesionDialog/nonTargetLesionDialog.js', 'client');
 
     api.addFiles('components/studyDateList/studyDateList.html', 'client');
+    api.addFiles('components/studyDateList/studyDateList.css', 'client');
     api.addFiles('components/studyDateList/studyDateList.js', 'client');
 
 

Packages/viewerbase/components/basic/hidingPanel/hidingPanel.html

@@ -6,6 +6,9 @@
             </button>
         </div>
         <div class="studyBrowserContainer">
+            {{#if studyDateIsShown}}
+                {{> studyDateList}}
+            {{/if}}
             {{> studyBrowser}}
         </div>
     </div>

Packages/viewerbase/components/basic/hidingPanel/hidingPanel.js

@@ -39,6 +39,12 @@ Template.hidingPanel.events({
     }
 });
 
+Template.hidingPanel.helpers({
+    'studyDateIsShown': function() {
+        return true;
+    }
+});
+
 Template.hidingPanel.onCreated(function() {
     this.hidingPanelOpen =  new ReactiveVar(true);
     this.hidingPanelWidth = new ReactiveVar(0);