LT-250: Making toolbar responsive

Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl

@@ -11,6 +11,7 @@ $expandedHeight = 160px
   .brandSection
     height: 30px
     display: inline-block
+    text-decoration: none
 
     img.logoImage
       display: inline-block

Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl

@@ -3,23 +3,23 @@
 $switchSize = 50px
 
 .quickSwitch
-  position: absolute
-  width: 140px
   height: 80px
+  position: absolute
   top: 5px
+  width: 140px
 
   div.switchSection
-    float: left
     display: inline-block
+    float: left
     margin: 0 5px
 
     .label
-      display: block
-      text-transform: uppercase
-      text-align: center
-      font-size: 12px
-      font-weight: 100
       color: $textSecondaryColor
+      display: block
+      font-size: 12px
+      font-weight: 300
+      text-align: center
+      text-transform: uppercase
 
     .studySwitch
       display: block
@@ -75,3 +75,17 @@ $switchSize = 50px
     margin: 0
     width: 33%
     display: inline-block
+
+$switchSizeSmall = 30px
+@media screen and (max-width: 1600px)
+  .quickSwitch div.switchSection
+    .label
+      font-size: 8px
+      font-weight: 400
+      padding: 0
+    .studySwitch
+      border-radius: 7px
+    .studySwitch, .seriesSwitch
+      &, svg
+        width: $switchSizeSmall
+        height: $switchSizeSmall

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html

@@ -4,12 +4,12 @@
             <div class="pull-left m-t-1">
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
-            <div class="toolbarSectionTools pull-left m-t-1">
+            <div class="toolbarSectionTools pull-left m-t-1 rm-l-3">
                 {{ #each toolbarButtons }}
                     {{ >toolbarSectionButton }}
                 {{ /each }}
 
-                <div id="moreTools" class="toolbarSectionButton m-l-3">
+                <div id="moreTools" class="toolbarSectionButton rp-x-1 rm-l-3">
                     <div class="svgContainer">
                         <svg>
                             <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-tools-more"></use>
@@ -24,10 +24,10 @@
             {{ >studySeriesQuickSwitch side="left" viewportIndex=0}}
             {{ >studySeriesQuickSwitch side="right" viewportIndex=1}}
 
-            <div class="toolbarSectionEntry pull-right m-l-1 p-x-1">
+            <div class="toolbarSectionEntry pull-right rm-l-1 p-x-1">
                 {{ >caseProgress }}
             </div>
-            <div class="pull-right m-t-1 m-x-1">
+            <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>
             <!-- <div class="capsule-group pull-right">
@@ -52,7 +52,7 @@
                     </div>
                 </div>
             </div> -->
-            <div id="toggleHUD" class="toolbarSectionButton pull-right m-t-1 m-r-3">
+            <div id="toggleHUD" class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-3">
                 <div class="svgContainer">
                     <svg>
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
@@ -62,7 +62,7 @@
                     HUD
                 </div>
             </div>
-            <div class="toolbarSectionButton pull-right m-t-1 m-x-1" data-toggle="modal" data-target="#optionsModal">
+            <div class="toolbarSectionButton pull-right rp-x-1 m-t-1 rm-r-1" data-toggle="modal" data-target="#optionsModal">
                 <div class="svgContainer">
                     <svg>
                         <use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js

@@ -68,7 +68,7 @@ Template.toolbarSection.helpers({
         buttonData.push({
             id: 'bidirectional',
             title: 'Target',
-            classes: 'imageViewerTool m-l-3',
+            classes: 'imageViewerTool rm-l-3',
             svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
         });
 

Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl

@@ -6,15 +6,11 @@
   width: 100%
   border-bottom: $uiBorderColor $uiBorderThickness solid
 
-  .toolbarSectionTools
-    margin-left: 41px
-
   .toolbarSectionButton
     display: inline-block
     color: $defaultColor
     fill: $defaultColor
     stroke: $defaultColor
-    padding: 0 7px
     min-width: 30px
     cursor: pointer
     text-align: center

Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html

@@ -1,5 +1,5 @@
 <template name="toolbarSectionButton">
-    <div id="{{id}}" class="toolbarSectionButton {{classes}}" title="{{title}}">
+    <div id="{{id}}" class="toolbarSectionButton rp-x-1 {{classes}}" title="{{title}}">
         <div class="svgContainer">
             <svg>
                 <use xlink:href={{svgLink}}></use>
@@ -9,4 +9,4 @@
             {{title}}
         </div>
     </div>
-</template>
+</template>