othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-250: Making toolbar responsive

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-06-13 15:51:05 -03:00 committed by Erik Ziegler
parent 350469d52f
commit 26687c579f
10 changed files with 85 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Packages/design/app.styl
View File

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

1
Packages/design/package.js
View File

@ -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'

23
Packages/design/styles/responsive.styl Normal file
View File

@ -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))

53
Packages/design/styles/spacings.styl
View File

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

1
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
View File

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

30
Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
View File

@ -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

12
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
View File

@ -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>

2
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
View File

@ -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'
});

4
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
View File

@ -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

4
Packages/lesiontracker/client/components/toolbarSectionButton/toolbarSectionButton.html
View File

@ -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>