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

PWV-1: Fixing studylist and viewer links styles

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-10-03 11:33:01 -03:00 committed by Erik Ziegler
parent 597386f391
commit 710499c10b
7 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LesionTracker/client/components/app/app.html
View File

@ -12,7 +12,7 @@
</div> </div>
</a> </a>
{{ #if studyListToggleText }} {{ #if studyListToggleText }}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList"> <a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}} {{studyListToggleText}}
</a> </a>
{{ /if }} {{ /if }}

21
LesionTracker/client/components/app/app.styl
View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar .topBar
height: $topBarHeight height: $topBarHeight
overflow: hidden padding: 10px 10px 0
padding: 1rem $studyListPadding 0
theme('color', '$textPrimaryColor') theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor') theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease) transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection .brandSection
height: 30px height: 30px
display: inline-block display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection .studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn .btn
theme('color', '$textSecondaryColor') theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px font-size: 13px
font-weight: 500 font-weight: 500
line-height: 26px line-height: 26px
margin-top: 3px
&:hover &:hover
theme('color', '$hoverColor') theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList &.studyList
background-color: rgba(21, 25, 30, 0.7) background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection .brandSection
height: 100% height: 100%
width: 80% width: 80%
line-height: $expandedHeight line-height: $expandedHeight - 10px
.logoImage .logoImage
width: 50px width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px font-size: 30px
.studyListLinkSection .studyListLinkSection
position: absolute
border: none border: none
top: 5px left: 0
left: 5px margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs #studylistTabs
height: "calc(100% - %s)" % $topBarHeight height: "calc(100% - %s)" % $topBarHeight

2
OHIFViewer/client/components/ohifViewer/ohifViewer.html
View File

@ -12,7 +12,7 @@
</div> </div>
</a> </a>
{{#if studyListToggleText}} {{#if studyListToggleText}}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList"> <a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}} {{studyListToggleText}}
</a> </a>
{{/if}} {{/if}}

21
OHIFViewer/client/components/ohifViewer/ohifViewer.styl
View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar .topBar
height: $topBarHeight height: $topBarHeight
overflow: hidden padding: 10px 10px 0
padding: 1rem $studyListPadding 0
theme('color', '$textPrimaryColor') theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor') theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease) transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection .brandSection
height: 30px height: 30px
display: inline-block display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection .studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn .btn
theme('color', '$textSecondaryColor') theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px font-size: 13px
font-weight: 500 font-weight: 500
line-height: 26px line-height: 26px
margin-top: 3px
&:hover &:hover
theme('color', '$hoverColor') theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList &.studyList
background-color: rgba(21, 25, 30, 0.7) background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection .brandSection
height: 100% height: 100%
width: 80% width: 80%
line-height: $expandedHeight line-height: $expandedHeight - 10px
.logoImage .logoImage
width: 50px width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px font-size: 30px
.studyListLinkSection .studyListLinkSection
position: absolute
border: none border: none
top: 5px left: 0
left: 5px margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs #studylistTabs
height: "calc(100% - %s)" % $topBarHeight height: "calc(100% - %s)" % $topBarHeight

2
PETSUVMeasurements/client/components/app/app.html
View File

@ -12,7 +12,7 @@
</div> </div>
</a> </a>
{{ #if studyListToggleText }} {{ #if studyListToggleText }}
<a class="btn studyListLinkSection pull-left m-x-1 p-x-2 p-y-0 js-toggle-studyList"> <a class="btn studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}} {{studyListToggleText}}
</a> </a>
{{ /if }} {{ /if }}

21
PETSUVMeasurements/client/components/app/app.styl
View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar .topBar
height: $topBarHeight height: $topBarHeight
overflow: hidden padding: 10px 10px 0
padding: 1rem $studyListPadding 0
theme('color', '$textPrimaryColor') theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor') theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease) transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection .brandSection
height: 30px height: 30px
display: inline-block display: inline-block
@ -33,6 +35,8 @@ $expandedHeight = 160px
.studyListLinkSection .studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness) theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn .btn
theme('color', '$textSecondaryColor') theme('color', '$textSecondaryColor')
@ -40,7 +44,6 @@ $expandedHeight = 160px
font-size: 13px font-size: 13px
font-weight: 500 font-weight: 500
line-height: 26px line-height: 26px
margin-top: 3px
&:hover &:hover
theme('color', '$hoverColor') theme('color', '$hoverColor')
@ -51,11 +54,13 @@ $expandedHeight = 160px
&.studyList &.studyList
background-color: rgba(21, 25, 30, 0.7) background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection .brandSection
height: 100% height: 100%
width: 80% width: 80%
line-height: $expandedHeight line-height: $expandedHeight - 10px
.logoImage .logoImage
width: 50px width: 50px
@ -65,10 +70,12 @@ $expandedHeight = 160px
font-size: 30px font-size: 30px
.studyListLinkSection .studyListLinkSection
position: absolute
border: none border: none
top: 5px left: 0
left: 5px margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs #studylistTabs
height: "calc(100% - %s)" % $topBarHeight height: "calc(100% - %s)" % $topBarHeight

24
StandaloneViewer/StandaloneViewer/client/components/standaloneViewer/standaloneViewer.styl
View File

@ -9,12 +9,14 @@ $expandedHeight = 160px
.topBar .topBar
height: $topBarHeight height: $topBarHeight
overflow: hidden padding: 10px 10px 0
padding: 1rem $studyListPadding 0
theme('color', '$textPrimaryColor') theme('color', '$textPrimaryColor')
theme('background-color', '$primaryBackgroundColor') theme('background-color', '$primaryBackgroundColor')
transition(all 0.5s ease) transition(all 0.5s ease)
&>.clearfix
position: relative
.brandSection .brandSection
height: 30px height: 30px
display: inline-block display: inline-block
@ -31,13 +33,17 @@ $expandedHeight = 160px
theme('color', '$textPrimaryColor') theme('color', '$textPrimaryColor')
line-height: 30px line-height: 30px
.studyListLinkSection
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
margin: 3px 0 0 10px
padding: 0 0 0 10px
.btn .btn
theme('color', '$textSecondaryColor') theme('color', '$textSecondaryColor')
cursor: pointer cursor: pointer
font-size: 13px font-size: 13px
font-weight: 500 font-weight: 500
line-height: 26px line-height: 26px
margin-top: 3px
&:hover &:hover
theme('color', '$hoverColor') theme('color', '$hoverColor')
@ -48,11 +54,13 @@ $expandedHeight = 160px
&.studyList &.studyList
background-color: rgba(21, 25, 30, 0.7) background-color: rgba(21, 25, 30, 0.7)
height: $expandedHeight height: $expandedHeight
padding-left: $studyListPadding
padding-right: $studyListPadding
.brandSection .brandSection
height: 100% height: 100%
width: 80% width: 80%
line-height: $expandedHeight line-height: $expandedHeight - 10px
.logoImage .logoImage
width: 50px width: 50px
@ -61,6 +69,14 @@ $expandedHeight = 160px
.logoText .logoText
font-size: 30px font-size: 30px
.studyListLinkSection
border: none
left: 0
margin: 0
padding: 0
position: absolute
top: 0
#studylistTabs #studylistTabs
height: "calc(100% - %s)" % $topBarHeight height: "calc(100% - %s)" % $topBarHeight