From d8181a1a5ebe9cdcc1971ecf71bf49f296e6e24a Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Thu, 16 Jun 2016 08:57:04 -0300 Subject: [PATCH] LT-251: Making quick switch work according to series; Making quick switch responsive --- Packages/design/styles/responsive.styl | 14 ++-- Packages/design/styles/variables.styl | 1 + .../lesionTrackerViewportOverlay.styl | 2 +- .../studySeriesQuickSwitch.html | 43 ++++++----- .../studySeriesQuickSwitch.styl | 77 +++++++++++++------ Packages/viewerbase/lib/helpers/logical.js | 24 +++++- 6 files changed, 105 insertions(+), 56 deletions(-) diff --git a/Packages/design/styles/responsive.styl b/Packages/design/styles/responsive.styl index 35c5ebb13..a150fb178 100644 --- a/Packages/design/styles/responsive.styl +++ b/Packages/design/styles/responsive.styl @@ -1,23 +1,23 @@ @import "./spacings" -// MIN WIDTH 1601 +// MIN WIDTH 1600 generateSpacings('r', $spacer-x, $spacer-y) -@media screen and (min-width: 1441px) and (max-width: 1600px) +@media screen and (min-width: 1440px) and (max-width: 1599px) generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9)) -@media screen and (min-width: 1367px) and (max-width: 1440px) +@media screen and (min-width: 1360px) and (max-width: 1439px) generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8)) -@media screen and (min-width: 1281px) and (max-width: 1366px) +@media screen and (min-width: 1280px) and (max-width: 1359px) generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7)) -@media screen and (min-width: 1153px) and (max-width: 1280px) +@media screen and (min-width: 1152px) and (max-width: 1279px) generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6)) -@media screen and (min-width: 1025px) and (max-width: 1152px) +@media screen and (min-width: 1024px) and (max-width: 1151px) generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5)) -@media screen and (max-width: 1024px) +@media screen and (max-width: 1023px) generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4)) diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/variables.styl index 1c57db906..ebbf65165 100644 --- a/Packages/design/styles/variables.styl +++ b/Packages/design/styles/variables.styl @@ -7,6 +7,7 @@ $uiBorderColorDark = #3C5D80 $darkUiColor = #16202B $primaryBackgroundColor = #000000 $boxBackgroundColor = #3E5975 +$boxBackgroundColorDark = #22374D // Text Colors $textPrimaryColor = #ffffff diff --git a/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl b/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl index 8d12debf7..2d978e416 100644 --- a/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl +++ b/Packages/lesiontracker/client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.styl @@ -2,7 +2,7 @@ $viewportTagPadding = 20px $imageSliderBorderRadius = 57px -$imageSliderColor = #22374d +$imageSliderColor = $boxBackgroundColorDark $imageSliderTrackColor = rgba(0,0,0,0) $imageSliderBorder = none diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html index 25c9924c8..1c08c7890 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html @@ -1,6 +1,6 @@ diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl index 114b67c42..7a184a906 100644 --- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl +++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl @@ -1,9 +1,10 @@ @import "{design}/app" -$switchSize = 50px +$switchSize = 55px $switchTop = 5px $switchHeight = 70px $switchWrapperWidth = 140px +$seriesSpacing = 2px .quickSwitch height: $switchHeight @@ -38,11 +39,12 @@ $switchWrapperWidth = 140px display: block font-size: 12px font-weight: 300 + padding: 0 text-align: center text-transform: uppercase .studySwitch, .seriesSwitch - transition(all 0.3s ease) + transition(opacity 0.3s ease) .studySwitch background-color: $darkUiColor @@ -55,15 +57,26 @@ $switchWrapperWidth = 140px .seriesSwitch display: block - height: $switchSize - width: $switchSize + height: $switchSize + $seriesSpacing + width: $switchSize + $seriesSpacing - svg - height: $switchSize - width: $switchSize + .seriesItem + background-color: $boxBackgroundColorDark + border-radius: 3px + height: 15px + margin: $seriesSpacing + width: 15px -.mirror-x - transform(scaleX(-1)) + &.count + background-color: transparent + color: $textPrimaryColor + font-size: 12px + font-weight: 500 + line-height: 17px + text-align: center + + &.active + background-color: $activeColor .switchHover background: black @@ -113,28 +126,32 @@ $switchWrapperWidth = 140px transform-origin(0% 0%) // Responsive layout -$switchSizeSmall = 35px +$switchSmallSize = 35px +$seriesSmallSpacing = 1px -@media screen and (max-width: 1024px) +@media screen and (max-width: 1023px) .switchSection:hover .seriesHover transform(scale(0.5)) -@media screen and (min-width: 1025px) and (max-width: 1152px) +@media screen and (min-width: 1024px) and (max-width: 1151px) .switchSection:hover .seriesHover - transform(scale(0.6)) -@media screen and (min-width: 1153px) and (max-width: 1280px) + transform(scale(0.63)) +@media screen and (min-width: 1152px) and (max-width: 1279px) .switchSection:hover .seriesHover - transform(scale(0.7)) -@media screen and (min-width: 1281px) and (max-width: 1440px) + transform(scale(0.72)) +@media screen and (min-width: 1280px) and (max-width: 1359px) .switchSection:hover .seriesHover - transform(scale(0.8)) -@media screen and (min-width: 1441px) and (max-width: 1600px) + transform(scale(0.81)) +@media screen and (min-width: 1360px) and (max-width: 1439px) .switchSection:hover .seriesHover - transform(scale(0.9)) -@media screen and (min-width: 1601px) + transform(scale(0.86)) +@media screen and (min-width: 1440px) and (max-width: 1599px) + .switchSection:hover .seriesHover + transform(scale(0.91)) +@media screen and (min-width: 1600px) .switchSection:hover .seriesHover transform(scale(1)) -@media screen and (max-width: 1600px) +@media screen and (max-width: 1599px) .quickSwitch height: 45px &.left @@ -150,7 +167,17 @@ $switchSizeSmall = 35px padding: 0 .studySwitch border-radius: 7px - .studySwitch, .seriesSwitch - &, svg - height: $switchSizeSmall - width: $switchSizeSmall + height: $switchSmallSize + width: $switchSmallSize + .seriesSwitch + height: $switchSmallSize + $seriesSmallSpacing + width: $switchSmallSize + $seriesSmallSpacing + .seriesItem + border-radius: 2px + height: 10px + margin: $seriesSmallSpacing + width: 10px + &.count + font-size: 10px; + font-weight: 300; + line-height: 10px; diff --git a/Packages/viewerbase/lib/helpers/logical.js b/Packages/viewerbase/lib/helpers/logical.js index ac941f127..a69fec541 100644 --- a/Packages/viewerbase/lib/helpers/logical.js +++ b/Packages/viewerbase/lib/helpers/logical.js @@ -10,10 +10,30 @@ Template.registerHelper('bool', function(value) { return !!value; }); -Template.registerHelper('equals', function(a, b) { +Template.registerHelper('eq', function(a, b) { return a === b; }); +Template.registerHelper('ne', function(a, b) { + return a === b; +}); + +Template.registerHelper('gt', function(a, b) { + return a > b; +}); + +Template.registerHelper('lt', function(a, b) { + return a < b; +}); + +Template.registerHelper('gte', function(a, b) { + return a >= b; +}); + +Template.registerHelper('lte', function(a, b) { + return a <= b; +}); + Template.registerHelper('not', function(value) { return !value; }); @@ -32,4 +52,4 @@ Template.registerHelper('or', function() { return value && (result = true); }); return result; -}); \ No newline at end of file +});