LT-342: Study List style issues
This commit is contained in:
Leonardo Campos
parent
5272cc234a
commit
bda7e6df8c
@ -1,13 +1,15 @@
|
||||
<template name="studyAssociationTable">
|
||||
<div id="studyAssociationTable">
|
||||
<div class="row">
|
||||
<div id="associationInstructions" class="row">
|
||||
<div class="col-md-12">
|
||||
<h4>Instructions</h4>
|
||||
<p>Associate the selected studies with timepoints in the clinical trial. Only 1 follow-up time point can be associated at the same time.</p>
|
||||
<p>Select the studies you would like to associate to a time point. Only one follow-up time point can be associated at the same time.</p>
|
||||
<p>We have automatically retrieved all studies within 14 days (<strong>{{formatDA this.earliestDate}}</strong> to <strong>{{formatDA latestDate}}</strong>) of your selected studies, in case you forgot to select a study.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tableHeaderBackground">
|
||||
</div>
|
||||
<table class="table table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -1,18 +1,65 @@
|
||||
@import "{design}/app"
|
||||
|
||||
$tableHoverColor = #2c363f
|
||||
$tableTextPrimaryColor = white
|
||||
$tableHeaderHeight = 50px
|
||||
$bodyCellHeight = 30px
|
||||
|
||||
#studyAssociationTable
|
||||
color: #fff;
|
||||
|
||||
.header
|
||||
text-align: center
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
|
||||
#associationInstructions
|
||||
theme('background', '$uiGrayDarker')
|
||||
margin-bottom: 2px
|
||||
padding: 0 15px
|
||||
|
||||
.tableHeaderBackground
|
||||
theme('background-color', '$uiGrayDarker')
|
||||
position: absolute
|
||||
height: $tableHeaderHeight + 1px
|
||||
left: 0
|
||||
width: 100%
|
||||
z-index: 1
|
||||
border-bottom: solid 1px;
|
||||
theme('border-bottom-color', '$largeNumbersColor')
|
||||
|
||||
table
|
||||
z-index: 2
|
||||
position: relative
|
||||
|
||||
thead
|
||||
tr
|
||||
th
|
||||
padding: 0
|
||||
border-bottom: solid 1px #6fbde2
|
||||
height: $tableHeaderHeight
|
||||
tbody
|
||||
tr
|
||||
padding: 5px
|
||||
background-color: black
|
||||
|
||||
&:nth-child(even)
|
||||
theme('background-color', '$uiGrayDarker')
|
||||
|
||||
td
|
||||
position: relative
|
||||
height: $bodyCellHeight
|
||||
line-height: $bodyCellHeight
|
||||
color: $tableTextPrimaryColor
|
||||
border-top: 1px solid #436270
|
||||
border-bottom: 1px solid #436270
|
||||
vertical-align: middle;
|
||||
transition(all 0.1s ease)
|
||||
|
||||
p
|
||||
margin: 0;
|
||||
|
||||
&.timepointOptions
|
||||
input
|
||||
margin: 0 3px
|
||||
@ -61,11 +108,16 @@
|
||||
padding-left: 20px
|
||||
display: inline-block
|
||||
position: relative
|
||||
line-height: initial;
|
||||
|
||||
&.disabled
|
||||
opacity: 0.2
|
||||
|
||||
&.checkboxWrapper
|
||||
label
|
||||
display: block
|
||||
margin: 0
|
||||
|
||||
input
|
||||
margin: 0 3px
|
||||
|
||||
@ -81,25 +133,22 @@
|
||||
|
||||
& + span
|
||||
display: block
|
||||
position: absolute
|
||||
border: 1px solid #b6b6b6
|
||||
background-color: white
|
||||
border-radius: 2px
|
||||
height: 16px
|
||||
width: 16px
|
||||
top: 10px
|
||||
left: calc((100% - 16px)/2)
|
||||
margin: 0 auto
|
||||
z-index: 5
|
||||
transition: border .25s linear
|
||||
-webkit-transition: border .25s linear
|
||||
|
||||
& + span:before
|
||||
display: block
|
||||
position: absolute
|
||||
position: relative
|
||||
content: ''
|
||||
font-size: 9px
|
||||
left: 3px
|
||||
top: 1px
|
||||
top: -7px
|
||||
color: white
|
||||
background-color: transparent
|
||||
transition: background 0.25s linear
|
||||
@ -109,4 +158,14 @@
|
||||
theme('background-color', '$activeColor')
|
||||
|
||||
&:before
|
||||
content: '\2713'
|
||||
content: '\2713'
|
||||
|
||||
&:hover, &:active, &.active
|
||||
background-color: $tableHoverColor
|
||||
color: white
|
||||
|
||||
td
|
||||
// This selector is necessary to override bootstrap's 'table' class
|
||||
border-top: 1px solid #436270
|
||||
border-bottom: 1px solid #436270
|
||||
background-color: $tableHoverColor
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
{{/if}}
|
||||
{{#if progressComplete}}
|
||||
<div class="caseProgressStatus">
|
||||
<button class="btn js-finish-case">Enter response</button>
|
||||
<button class="btn js-finish-case">Save</button>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
@ -53,3 +53,7 @@
|
||||
|
||||
&.disabled a
|
||||
theme('color', '$uiGrayLight')
|
||||
|
||||
@media only screen and (max-width: 1069px)
|
||||
.studylistPagination > .row
|
||||
margin-right: 0;
|
||||
@ -1,7 +1,7 @@
|
||||
<template name="studylistResult">
|
||||
<div class="studyListToolbar clearfix">
|
||||
<div class="header pull-left">
|
||||
Study list
|
||||
Study List
|
||||
</div>
|
||||
<div class="studyCount pull-right">
|
||||
{{numberOfStudies}}
|
||||
@ -71,13 +71,6 @@
|
||||
class="form-control studylist-search"
|
||||
id="studyDescription">
|
||||
</th>
|
||||
<th class="numberOfStudyRelatedInstances">
|
||||
<div id="_numberOfStudyRelatedInstances" class="sortingCell">
|
||||
<span># Images</span>
|
||||
<i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}"> </i>
|
||||
</div>
|
||||
<input type="text" class="form-control studylist-search invisible"/>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="studyListData">
|
||||
|
||||
@ -204,8 +204,7 @@ Template.studylistResult.onCreated(() => {
|
||||
patientId: 0,
|
||||
accessionNumber: 0,
|
||||
studyDescription: 0,
|
||||
modality: 0,
|
||||
numberOfStudyRelatedInstances: 0
|
||||
modality: 0
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -209,6 +209,9 @@ $bodyCellHeight = 40px
|
||||
@media only screen and (max-width: 1069px)
|
||||
$tablePaddingMediumScreen = 5px
|
||||
|
||||
.theadBackground
|
||||
height: 101px
|
||||
|
||||
.studyListToolbar
|
||||
padding: 0 $tablePaddingMediumScreen
|
||||
|
||||
@ -229,7 +232,6 @@ $bodyCellHeight = 40px
|
||||
|
||||
div.sortingCell
|
||||
padding: 10px 5px
|
||||
min-width: auto
|
||||
|
||||
i
|
||||
width: auto
|
||||
|
||||
@ -18,8 +18,5 @@
|
||||
<td class="studyDescription">
|
||||
{{studyDescription}}
|
||||
</td>
|
||||
<td class="numberOfStudyRelatedInstances">
|
||||
{{numberOfStudyRelatedInstances}}
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
Loading…
Reference in New Issue
Block a user