Styling fixes for tabs, collapsible search box, navbar updates
This commit is contained in:
Erik Ziegler committed
1 parent
7f04f96222
commit
56417df385
18 files changed
+197
-110
No files matched your search
@@ -2,7 +2,7 @@
|
||||
<li role="presentation" class="tabTitle">
|
||||
<a data-target="#{{contentid}}" role="tab" data-toggle="tab">
|
||||
{{title}}
|
||||
<button class="close">×</button>
|
||||
</a>
|
||||
<a class="close">x</a>
|
||||
</li>
|
||||
</template>
|
||||
@@ -1,21 +1,17 @@
|
||||
Template.tabTitle.events({
|
||||
'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 tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
|
||||
tabs.remove(tabObjectId);
|
||||
|
||||
var tabIndex = tab.parent('li').index();
|
||||
var newActiveTabIndex = Math.max(tabIndex - 1, 0);
|
||||
var newActiveTab = $(".tabTitle").eq(newActiveTabIndex);
|
||||
var newActiveTabLink = newActiveTab.find("a[data-toggle=tab]");
|
||||
var newContentId = newActiveTabLink.data("target");
|
||||
switchToTab(newContentId);
|
||||
}
|
||||
});
|
||||
|
||||
Template.tabTitle.helpers({
|
||||
'active': function() {
|
||||
return this.active ? "active" : "";
|
||||
switchToTab(newContentId);
|
||||
|
||||
var tabObjectId = tabs.find({contentid: contentId}).fetch()[0]._id;
|
||||
tabs.remove(tabObjectId);
|
||||
}
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
<template name="worklist">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<ul class="nav" role="tablist" id="tablist">
|
||||
<li role="presentation" class="tabTitle active">
|
||||
<a data-target="#worklistTab" role="tab" data-toggle="tab">Study List</a>
|
||||
</li>
|
||||
|
||||
@@ -10,38 +10,60 @@ body
|
||||
|
||||
#tabs
|
||||
width: 100%
|
||||
|
||||
.nav-tabs
|
||||
|
||||
#tablist
|
||||
border-bottom: 1px solid #424242;
|
||||
background-color: #202020
|
||||
|
||||
.tabTitle
|
||||
background-color: #202020
|
||||
border-color: #424242
|
||||
padding: 3px 10px
|
||||
height: 41px
|
||||
|
||||
&:hover
|
||||
color: black
|
||||
|
||||
&.active
|
||||
a:hover
|
||||
background-color: transparent
|
||||
|
||||
.tabTitle
|
||||
background-color: #202020
|
||||
color: white
|
||||
|
||||
a
|
||||
color: #424242
|
||||
padding: 0 5px
|
||||
cursor: pointer
|
||||
border-color: #424242
|
||||
float: left
|
||||
line-height:30px
|
||||
|
||||
&.close
|
||||
font-size: 16pt
|
||||
padding: 0 5px
|
||||
font-weight: normal
|
||||
float: left
|
||||
&:hover
|
||||
color: black
|
||||
background-color: white
|
||||
|
||||
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
|
||||
width: 100%
|
||||
height: calc(100% - 100px)
|
||||
height: calc(100% - 91px)
|
||||
|
||||
.tab-pane
|
||||
width: 100%
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
table#tblStudyList
|
||||
color: #888888
|
||||
border-collapse: collapse;
|
||||
border-color: gray;
|
||||
border-collapse: collapse
|
||||
border-color: gray
|
||||
|
||||
thead
|
||||
background-color: black
|
||||
|
||||
&:hover
|
||||
color: #888888
|
||||
|
||||
tr
|
||||
tbody > tr
|
||||
padding: 4px
|
||||
border: 1px solid #282828
|
||||
border: 1px solid #282828
|
||||
background-color: black
|
||||
|
||||
&:nth-of-type(odd)
|
||||
background-color: #202020
|
||||
|
||||
|
||||
&:hover
|
||||
background-color: #009BD2
|
||||
color: white
|
||||
@@ -1,83 +1,89 @@
|
||||
<template name="worklistSearch">
|
||||
<!--Search Panel-->
|
||||
<div id="worklistSearchPanel" class="panel panel-default">
|
||||
<div class="panel-heading" id="search-panel-head">Search</div>
|
||||
<div class="panel-body">
|
||||
<div style="padding: 10px;">
|
||||
<div class="row">
|
||||
<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 class="panel-heading" id="search-panel-head">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" href="#searchPanel">Search</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="searchPanel" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<div style="padding: 10px;">
|
||||
<div class="row">
|
||||
<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 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 class="row">
|
||||
<div class="col-lg-3 col-md-3 col-xs-10">
|
||||
<!--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 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 class="col-lg-3 col-md-3 col-xs-10">
|
||||
<div class="form-group">
|
||||
<label for="">Study Date(to)</label>
|
||||
<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-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 class="col-lg-3 col-md-3 col-xs-10">
|
||||
<div class="form-group">
|
||||
<label for="referringPhysician">Referring Physician</label>
|
||||
<input type="text" class="form-control" id="referringPhysician" placeholder="Referring Physician">
|
||||
</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="row">
|
||||
<div class="col-lg-3 col-md-3 col-xs-10">
|
||||
<!--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 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="col-lg-3 col-md-3 col-xs-10">
|
||||
<div class="form-group">
|
||||
<label for="">Study Date(to)</label>
|
||||
<p><input type="checkbox" id="checkTo"><input id="studyDateTo" type="date" class="form-control" style="padding-left:30px;"></p>
|
||||
<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>
|
||||
<div class="col-lg-3 col-md-3 col-xs-10">
|
||||
<div class="form-group">
|
||||
<label for="referringPhysician">Referring Physician</label>
|
||||
<input type="text" class="form-control" id="referringPhysician" placeholder="Referring Physician">
|
||||
<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 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>
|
||||
|
||||
Reference in new issue
Block a user