LT-250: Making toolbar responsive

Packages/design/app.styl

@@ -2,5 +2,6 @@
 @import "{design}/styles/variables"
 @import "{design}/styles/mixins"
 @import "{design}/styles/spacings"
+@import "{design}/styles/responsive"
 
 @import "{design}/styles/global"

Packages/design/package.js

@@ -17,6 +17,7 @@ Package.onUse(function(api) {
         'app.styl',
         'styles/global.styl',
         'styles/mixins.styl',
+        'styles/responsive.styl',
         'styles/spacings.styl',
         'styles/variables.styl',
         'styles/webfonts.styl'

Packages/design/styles/responsive.styl

@@ -0,0 +1,23 @@
+@import "./spacings"
+
+
+// MIN WIDTH 1601
+generateSpacings('r', $spacer-x, $spacer-y)
+
+@media screen and (min-width: 1441px) and (max-width: 1600px)
+  generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9))
+
+@media screen and (min-width: 1367px) and (max-width: 1440px)
+  generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8))
+
+@media screen and (min-width: 1281px) and (max-width: 1366px)
+  generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7))
+
+@media screen and (min-width: 1153px) and (max-width: 1280px)
+  generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6))
+
+@media screen and (min-width: 1025px) and (max-width: 1152px)
+  generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5))
+
+@media screen and (max-width: 1024px)
+  generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))

Packages/design/styles/spacings.styl

@@ -3,36 +3,39 @@ $spacer = 1rem
 $spacer-x = $spacer
 $spacer-y = $spacer
 
-$spacerAxis = $spacer-x,
+generateSpacings($prefix, $spacerX, $spacerY)
-              $spacer-y
+  $spacerAxis = $spacerX,
+                $spacerY
 
-$spacings = 0 0,
+  $spacings = 0 0,
-            1 1,
+              1 1,
-            2 1.5,
+              2 1.5,
-            3 3g
+              3 3g
 
-$properties = m margin,
+  $properties = m margin,
-              p padding
+                p padding
 
-$sides = t top 1,
+  $sides = t top 1,
-         r right 0,
+           r right 0,
-         b bottom 1,
+           b bottom 1,
-         l left 0
+           l left 0
 
-$axes = x left right 0,
+  $axes = x left right 0,
-        y top bottom 1
+          y top bottom 1
 
-for $property in $properties
+  for $property in $properties
-  for $spacing in $spacings
+    for $spacing in $spacings
-    .{$property[0]}-a-{$spacing[0]}
+      .{$prefix}{$property[0]}-a-{$spacing[0]}
-      {$property[1]} $spacing[1]*$spacer !important
+        {$property[1]} $spacing[1]*$spacer !important
-    for $side in $sides
+      for $side in $sides
-      .{$property[0]}-{$side[0]}-{$spacing[0]}
+        .{$prefix}{$property[0]}-{$side[0]}-{$spacing[0]}
-        {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
+          {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
-    for $axis in $axes
+      for $axis in $axes
-      .{$property[0]}-{$axis[0]}-{$spacing[0]}
+        .{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]}
-        {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
+          {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
-        {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+          {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+
+generateSpacings('', $spacer-x, $spacer-y)
 
 .m-x-auto
   margin-left: auto !important

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>