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

Styling fixes for tabs, collapsible search box, navbar updates

Browse Source
This commit is contained in:
Erik Ziegler 2015-10-22 17:01:00 +02:00
parent 7f04f96222
commit 56417df385
18 changed files with 197 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
LesionTracker/client/components/layout/layout.html
View File

@ -8,12 +8,15 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/">Lesion Tracker</a> <a class="navbar-brand" href="/">
<img height="30px" src="/images/logo.png">
<h4 class="name">OHIF Lesion Tracker</h4>
</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li> <li>
<a href="www.tumormetrics.org">About</a> <a href="http://www.tumormetrics.org">About</a>
</li> </li>
</ul> </ul>
</div> </div>

19
LesionTracker/client/components/layout/layout.styl
View File

@ -4,11 +4,30 @@
color: #888888 color: #888888
background-color: #060606 background-color: #060606
border: none border: none
font-family: "Sanchez"
color: #C1C1C1
.navbar-form, .navbar-default .navbar-nav > li > a
color: #C1C1C1
font-weight: bold
font-size: 12pt
.navbar-form .navbar-form
margin: 0 margin: 0
padding: 15px 3px padding: 15px 3px
.navbar-brand
img
float: left
margin-right: 10px
margin-top: -8px
h4.name
float: left
margin: 0
font-family: "Sanchez"
color: #C1C1C1
@media (min-width: 768px) @media (min-width: 768px)
.navbar .navbar
border-radius: 0px border-radius: 0px

6
LesionTracker/client/components/lesionTableContainer/lesionTableContainer.styl
View File

@ -1,7 +1,7 @@
.lesionTableContainer .lesionTableContainer
background-color: pink
height: 25% height: 25%
max-height: 200px max-height: 200px
background-color: white color: #A0A0A0
border: 8px solid pink background-color: #2F2F2F
border: 8px solid #484848

1
LesionTracker/client/head.html
View File

@ -9,4 +9,5 @@
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head> </head>

0
LesionTracker/client/images/logo.png → LesionTracker/public/images/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

1
OHIFViewer/client/head.html
View File

@ -8,4 +8,5 @@
<meta name="MobileOptimized" content="320"> <meta name="MobileOptimized" content="320">
<meta name="HandheldFriendly" content="True"> <meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<link href='http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head> </head>

BIN
OHIFViewer/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
OHIFViewer/public/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

5
Packages/viewerbase/components/basic/layout/layout.html
View File

@ -8,7 +8,10 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="/">OHIF Viewer</a> <a class="navbar-brand" href="/">
<img height="30px" src="/images/logo.png">
<h4 class="name">Open Health Imaging Foundation</h4>
</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">

25
Packages/viewerbase/components/basic/layout/layout.styl
View File

@ -4,10 +4,35 @@
color: #888888 color: #888888
background-color: #060606 background-color: #060606
border: none border: none
font-family: "Sanchez"
color: #C1C1C1
.navbar-default .navbar-nav > li > a
color: #C1C1C1
font-weight: bold
font-size: 12pt
.navbar-form .navbar-form
height: 50px
margin: 0 margin: 0
padding: 15px 3px padding: 15px 3px
font-weight: bold
font-size: 12pt
line-height: 20px
.navbar-brand
display: inline-block
img
float: left
margin-right: 10px
margin-top: -5px
h4.name
float: left
margin: 0
font-family: "Sanchez"
color: #C1C1C1
@media (min-width: 768px) @media (min-width: 768px)
.navbar .navbar

3
Packages/viewerbase/components/studyBrowser/studyBrowser/studyBrowser.styl
View File

@ -3,6 +3,7 @@
height: 100% height: 100%
width: 100% width: 100%
min-width: 120px min-width: 120px
overflow: auto overflow-y: auto
overflow-x: hidden
background-color: black background-color: black
padding-bottom: 20px padding-bottom: 20px

3
Packages/viewerbase/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
View File

@ -4,6 +4,9 @@
background-color: black background-color: black
border: 1px solid #424242 border: 1px solid #424242
margin: 0 auto margin: 0 auto
cursor: copy
cursor: -webkit-grab
cursor: -moz-grab
.seriesDescription .seriesDescription
text-align: center text-align: center

2
Packages/worklist/components/tabTitle/tabTitle.html
View File

@ -2,7 +2,7 @@
<li role="presentation" class="tabTitle"> <li role="presentation" class="tabTitle">
<a data-target="#{{contentid}}" role="tab" data-toggle="tab"> <a data-target="#{{contentid}}" role="tab" data-toggle="tab">
{{title}} {{title}}
<button class="close">&times;</button>
</a> </a>
<a class="close">x</a>
</li> </li>
</template> </template>

14
Packages/worklist/components/tabTitle/tabTitle.js
View File

@ -1,21 +1,17 @@
Template.tabTitle.events({ Template.tabTitle.events({
'click .close': function(e) { 'click .close': function(e) {
var tab = $(e.currentTarget).siblings('a[data-toggle="tab"]').eq(0); var tab = $(e.currentTarget).parents('a[data-toggle="tab"]').eq(0);
var contentId = tab.data("target").replace("#", ""); var contentId = tab.data("target").replace("#", "");
var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
tabs.remove(tabObjectId);
var tabIndex = tab.parent('li').index(); var tabIndex = tab.parent('li').index();
var newActiveTabIndex = Math.max(tabIndex - 1, 0); var newActiveTabIndex = Math.max(tabIndex - 1, 0);
var newActiveTab = $(".tabTitle").eq(newActiveTabIndex); var newActiveTab = $(".tabTitle").eq(newActiveTabIndex);
var newActiveTabLink = newActiveTab.find("a[data-toggle=tab]"); var newActiveTabLink = newActiveTab.find("a[data-toggle=tab]");
var newContentId = newActiveTabLink.data("target"); var newContentId = newActiveTabLink.data("target");
switchToTab(newContentId);
}
});
Template.tabTitle.helpers({ switchToTab(newContentId);
'active': function() {
return this.active ? "active" : ""; var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
tabs.remove(tabObjectId);
} }
}); });

2
Packages/worklist/components/worklist.html
View File

@ -1,5 +1,5 @@
<template name="worklist"> <template name="worklist">
<ul class="nav nav-tabs" role="tablist"> <ul class="nav" role="tablist" id="tablist">
<li role="presentation" class="tabTitle active"> <li role="presentation" class="tabTitle active">
<a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a> <a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
</li> </li>

68
Packages/worklist/components/worklist.styl
View File

@ -10,38 +10,60 @@ body
#tabs #tabs
width: 100% width: 100%
.nav-tabs #tablist
border-bottom: 1px solid #424242; border-bottom: 1px solid #424242;
background-color: #202020 background-color: #202020
height: 41px
.tabTitle
background-color: #202020
border-color: #424242
padding: 3px 10px
&:hover a:hover
color: black background-color: transparent
&.active .tabTitle
background-color: #202020 background-color: #202020
color: white border-color: #424242
a
color: #424242
padding: 0 5px
cursor: pointer
float: left float: left
line-height:30px
&.close &:hover
font-size: 16pt color: black
padding: 0 5px background-color: white
font-weight: normal
float: left button.close
color: black
&.active
background-color: #424242
border-color: #424242
&:hover
background-color: #424242
a
color: white
button.close
color: white
a
padding: 5px 15px
cursor: pointer
color: #424242
text-decoration: none
button.close
margin: 4px 0 4px 8px
text-shadow: none
color: white
text-decoration: none
&:hover
color: red
.tab-content .tab-content
width: 100% width: 100%
height: calc(100% - 100px) height: calc(100% - 91px)
.tab-pane .tab-pane
width: 100% width: 100%

17
Packages/worklist/components/worklistResult/worklistResult.styl
View File

@ -1,15 +1,22 @@
table#tblStudyList table#tblStudyList
color: #888888 color: #888888
border-collapse: collapse; border-collapse: collapse
border-color: gray; border-color: gray
thead
background-color: black
&:hover
color: #888888
tr tbody > tr
padding: 4px padding: 4px
border: 1px solid #282828 border: 1px solid #282828
background-color: black
&:nth-of-type(odd) &:nth-of-type(odd)
background-color: #202020 background-color: #202020
&:hover &:hover
background-color: #009BD2 background-color: #009BD2
color: white color: white

134
Packages/worklist/components/worklistSearch/worklistSearch.html
View File

@ -1,83 +1,89 @@
<template name="worklistSearch"> <template name="worklistSearch">
<!--Search Panel--> <!--Search Panel-->
<div id="worklistSearchPanel" class="panel panel-default"> <div id="worklistSearchPanel" class="panel panel-default">
<div class="panel-heading" id="search-panel-head">Search</div> <div class="panel-heading" id="search-panel-head">
<div class="panel-body"> <h4 class="panel-title">
<div style="padding: 10px;"> <a data-toggle="collapse" href="#searchPanel">Search</a>
<div class="row"> </h4>
<div class="col-lg-8 col-md-8 col-xs-12"> </div>
<div class="row"> <div id="searchPanel" class="panel-collapse collapse">
<div class="col-lg-3 col-md-3 col-xs-10"> <div class="panel-body">
<div class="form-group"> <div style="padding: 10px;">
<label for="patientId">Patient ID</label> <div class="row">
<input type="text" class="form-control" id="patientId" placeholder="Patient ID"> <div class="col-lg-8 col-md-8 col-xs-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientId">Patient ID</label>
<input type="text" class="form-control" id="patientId" placeholder="Patient ID">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientName">Name</label>
<input type="text" class="form-control" id="patientName" placeholder="Name">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="patientAccessionNumber">Accession #</label>
<input type="text" class="form-control" id="patientAccessionNumber" placeholder="Accession #">
</div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="studyDescription">Study Description</label>
<input type="text" class="form-control" id="studyDescription" placeholder="Study Description">
</div>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group"> <div class="row">
<label for="patientName">Name</label> <div class="col-lg-3 col-md-3 col-xs-10">
<input type="text" class="form-control" id="patientName" placeholder="Name"> <!--Add calendar ui-->
<div class="form-group">
<label for="">Study Date(from)</label>
<p><input type="checkbox" id="checkFrom"><input id="studyDateFrom" type="date" class="form-control" style="padding-left: 30px;"></p>
</div>
</div> </div>
</div> <div class="col-lg-3 col-md-3 col-xs-10">
<div class="col-lg-3 col-md-3 col-xs-10"> <div class="form-group">
<div class="form-group"> <label for="">Study Date(to)</label>
<label for="patientAccessionNumber">Accession #</label> <p><input type="checkbox" id="checkTo"><input id="studyDateTo" type="date" class="form-control" style="padding-left:30px;"></p>
<input type="text" class="form-control" id="patientAccessionNumber" placeholder="Accession #"> </div>
</div> </div>
</div> <div class="col-lg-3 col-md-3 col-xs-10">
<div class="col-lg-3 col-md-3 col-xs-10"> <div class="form-group">
<div class="form-group"> <label for="referringPhysician">Referring Physician</label>
<label for="studyDescription">Study Description</label> <input type="text" class="form-control" id="referringPhysician" placeholder="Referring Physician">
<input type="text" class="form-control" id="studyDescription" placeholder="Study Description"> </div>
</div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="modality">Modality</label>
<input type="text" class="form-control" id="modality" placeholder="Modality">
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="col-lg-4 col-md-4 col-xs-12">
<div class="col-lg-3 col-md-3 col-xs-10"> <div class="row" style="margin-top: 25px;margin-bottom: 25px;">
<!--Add calendar ui--> <div class="col-lg-4 col-md-6 col-xs-6">
<div class="form-group"> <button class="btn btn-primary" id="btnSearch">Search</button>
<label for="">Study Date(from)</label> </div>
<p><input type="checkbox" id="checkFrom"><input id="studyDateFrom" type="date" class="form-control" style="padding-left: 30px;"></p> <div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnToday">Today</button>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-3 col-xs-10"> <div class="row">
<div class="form-group"> <div class="col-lg-4 col-md-6 col-xs-6">
<label for="">Study Date(to)</label> <button class="btn btn-primary" id="btnClear">Clear</button>
<p><input type="checkbox" id="checkTo"><input id="studyDateTo" type="date" class="form-control" style="padding-left:30px;"></p>
</div> </div>
</div> <div class="col-lg-4 col-md-6 col-xs-6">
<div class="col-lg-3 col-md-3 col-xs-10"> <button class="btn btn-primary" id="btnLastSevenDays">Last 7 Days</button>
<div class="form-group">
<label for="referringPhysician">Referring Physician</label>
<input type="text" class="form-control" id="referringPhysician" placeholder="Referring Physician">
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-3 col-xs-10">
<div class="form-group">
<label for="modality">Modality</label>
<input type="text" class="form-control" id="modality" placeholder="Modality">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="row" style="margin-top: 25px;margin-bottom: 25px;">
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnSearch">Search</button>
</div>
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnToday">Today</button>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnClear">Clear</button>
</div>
<div class="col-lg-4 col-md-6 col-xs-6">
<button class="btn btn-primary" id="btnLastSevenDays">Last 7 Days</button>
</div>
</div> </div>
</div> </div>
</div> </div>