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

Some styling changes

Browse Source 
Styling changes for lesionTable, move logo&header in same row with tabs
This commit is contained in:
Evren Ozkan 2015-11-03 19:20:17 -05:00
parent 1ad2b92704
commit ac45654772
6 changed files with 59 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
LesionTracker/client/body.styl
View File

@ -1,6 +1,10 @@
body body
background-color: #202020 background-color: #202020
.tab-content {
height: calc(100% - 40px);
}
table#tblStudyList thead > tr { table#tblStudyList thead > tr {
background-color: #424242; background-color: #424242;
color: white; color: white;

17
LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html
View File

@ -1,16 +1,9 @@
<template name="layoutLesionTracker"> <template name="layoutLesionTracker">
<nav class="navbar navbar-default" role="navigation"> <div class="logoContainer">
<div class="container-fluid"> <a class="navbar-brand" href="/">
<div class="navbar-header"> <img src="/images/logo.png">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <h4 class="name">Open Health Imaging Foundation</h4>
<span class="sr-only">Toggle navigation</span> </a>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Lesion Tracker</a>
</div> </div>
</div>
</nav>
{{> yield}} {{> yield}}
</template> </template>

35
LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl
View File

@ -1,18 +1,23 @@
.navbar .logoContainer
margin-bottom: 0 position: absolute;
border-radius: 0px height: 40px;
top: 0;
right: 0;
color: white;
.navbar-form .navbar-brand
margin: 0 display: inline-block
padding: 15px 3px padding: 0;
margin-right: 5px;
.navbar-default img
-webkit-transition: background-color 200ms linear height: 30px
-moz-transition: background-color 200ms linear float: left
-o-transition: background-color 200ms linear margin-right: 10px
-ms-transition: background-color 200ms linear margin-top: 5px;
transition: background-color 200ms linear
@media (min-width: 768px) h4.name
.navbar float: left
border-radius: 0px margin: 10px 0;
font-family: "Sanchez"
color: #C1C1C1

6
LesionTracker/client/routes.js
View File

@ -12,8 +12,8 @@ Object.keys(ViewerData).forEach(function(contentId) {
}); });
Router.configure({ Router.configure({
layoutTemplate: 'layout', layoutTemplate: 'layoutLesionTracker',
loadingTemplate: 'layout', loadingTemplate: 'layoutLesionTracker',
notFoundTemplate: 'notFound' notFoundTemplate: 'notFound'
}); });
@ -25,7 +25,7 @@ Router.route('/', function () {
Router.route('/viewer/:_id', { Router.route('/viewer/:_id', {
layoutTemplate: 'layout', layoutTemplate: 'layoutLesionTracker',
name: 'viewer', name: 'viewer',
onBeforeAction: function() { onBeforeAction: function() {
log.info('Router GetStudyMetadata'); log.info('Router GetStudyMetadata');

4
Packages/lesiontracker/components/lesionTable/lesionTable.js
View File

@ -61,7 +61,7 @@ Template.lesionTable.onRendered(function() {
}); });
// Activate selected lesions when lesion table row is clicked // Activate selected lesions when lesion table row is clicked
function activateLesions (e) { function updateLesions (e) {
// lesionNumber of measurement = id of row // lesionNumber of measurement = id of row
var lesionNumber = parseInt($(e.currentTarget).attr("id")); var lesionNumber = parseInt($(e.currentTarget).attr("id"));
@ -97,7 +97,7 @@ function activateLesions (e) {
Template.lesionTable.events({ Template.lesionTable.events({
'click table#tblLesion tbody tr': function(e) { 'click table#tblLesion tbody tr': function(e) {
activateLesions(e); updateLesions(e);
} }
}); });

83
Packages/lesiontracker/components/lesionTable/lesionTable.styl
View File

@ -1,83 +1,44 @@
#lesionTableContainer #lesionTableContainer {
width: 100% width: 100%
height: 25% height: 25%
overflow: auto overflow: auto;
}
table.lesionTable
thead
th
background-color: #424242
font-style: italic
color:white
text-align: center
height: 15px
width: 20px
table.lesionTable > thead > tr > th { table.lesionTable > thead > tr > th {
padding: 4px; font-style: italic;
color:white;
height: 20px;
line-height: 20px;
text-align: center
margin: 0; margin: 0;
height: 25px; padding: 5px;
line-height: 15px; background-color: #424242;
} }
table.lesionTable > tbody > tr > td { table.lesionTable > tbody > tr > td {
padding: 4px; height: 15px;
line-height: 15px;
margin: 0; margin: 0;
height: 25px; padding: 5px;
line-height: 10px;
}
table.lesionTable tbody tr{
background-color: #b3b3b3;
color: #424242;
line-height: 14px;
} }
table.lesionTable tbody tr.lesionTableRow:nth-child(even) {background: #CCC} table.lesionTable tbody tr.lesionTableRow:nth-child(even) {background: #CCC}
table.lesionTable tbody tr.lesionTableRow:nth-child(odd) {background: #DDD} table.lesionTable tbody tr.lesionTableRow:nth-child(odd) {background: #DDD}
table.lesionTable tbody tr.lesionTableRow:hover{ background-color: #009BD2; color: white; }
table.lesionTable tbody tr.lesionTableRow:hover{ #thTarget {
background-color: #009BD2 width: 1%;
color: white
} }
#thLocation {
th#thNumber { text-align: left;
width: 4%;
}
th#thTarget {
width: 4%;
}
th#thLocation {
width: 15%; width: 15%;
text-align: left;
} }
th#thSpacer {
width: 50%; #thSpacer {
width: 61%;
} }
td.location { td.lesionNumber, .target,.lesionTableTimepointCell {
text-align: left;
}
td.lesionNumber {
text-align: center; text-align: center;
} }
td.target {
text-align: center;
}
td.lesionTableTimepointCell {
width: 4%;
text-align: center;
}
.btnRemove{
border: none;
outline:none;
background-color: transparent;
}