diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
index af2fbee..35944a7 100644
--- a/cycledash/static/js/runs/components/RunsPage.js
+++ b/cycledash/static/js/runs/components/RunsPage.js
@@ -202,7 +202,7 @@ var RunsTable = React.createClass({
Caller Name |
Submitted On |
Variants |
- Linked BAMs |
+ Linked BAMs |
|
|
diff --git a/cycledash/static/scss/_variables.scss b/cycledash/static/scss/_variables.scss
index b7804cd..61ee8b9 100644
--- a/cycledash/static/scss/_variables.scss
+++ b/cycledash/static/scss/_variables.scss
@@ -1,20 +1,20 @@
$color-black: #333;
$color-blue-sinai: #1CABE1;
-$color-blue-light: #eff6f7;
-$color-blue-medium: #E0E7E8;
$color-gray-light: #ccc;
$color-gray-medium: #adadad;
+$color-gray-dark: #666;
+$color-beige-light: #E4E2E1;
$color-green: #5cb85c;
$color-red: #f32d2d;
$color-white: #fff;
$color-white-smoke: #f5f5f5;
-$color-yellow-light: #feffcf;
$color-fuchsia-sinai: #AE387E;
////////////////////////////////
-$color-bg-body: #E4E2E1;
+$color-bg-body: $color-beige-light;
+$color-bg-body-dark: darken($color-bg-body, 5%);
$color-bg-hover: lighten($color-blue-sinai, 45%);
$color-bg-expanded: lighten($color-blue-sinai, 45%);
@@ -23,10 +23,11 @@ $color-status-success: $color-green;
$color-status-error: $color-red;
$color-text: $color-black;
+$color-text-soft: $color-gray-dark;
$color-text-dim: $color-gray-medium;
$color-link: $color-blue-sinai;
-$color-border-light: darken($color-bg-body, 15%);
+$color-border-light: $color-gray-light;
$radius: 4px;
\ No newline at end of file
diff --git a/cycledash/static/scss/examine.scss b/cycledash/static/scss/examine.scss
index 8c493a8..1583ea2 100644
--- a/cycledash/static/scss/examine.scss
+++ b/cycledash/static/scss/examine.scss
@@ -15,19 +15,20 @@ a, a:hover {
/*------[ VCF Table ]------*/
.vcf-table {
- @extend .table, .table-striped, .table-condensed;
+ @extend .table, .table-striped;
}
.vcf-table thead {
background-color: $color-bg-body;
tr:first-child{
th {
+ font-weight: bold;
border-left: 1px solid $color-border-light;
- color: $color-text;
- background-color: darken($color-bg-body, 5%);
+ background-color: $color-bg-body-dark;
}
}
tr:last-child{
th {
+ cursor: default;
background-color: darken($color-bg-body, 3%);
&:first-child {
border-top-left-radius: 0;
@@ -68,23 +69,22 @@ a, a:hover {
border-radius: $radius;
position: absolute;
top: 110%;
- right: -72px;
+ left: 0;
background: $color-white;
+ background-color: $color-bg-hover;
border: 1px solid $color-border-light;
- width: 250px;
- font-size: 12px;
- font-color: $color-text;
+ min-width: 200px;
+ font-size: 0.75rem;
+ color: $color-text;
z-index: 1000;
opacity: 100; /* This is needed to override Bootstrap. */
- line-height: 1; /* This is needed to override Bootstrap. */
- font-size: 12px; /* This is needed to override Bootstrap. */
+ text-transform: none;
+ padding: 0 1em;
}
.vcf-table .tooltip p {
- font-weight: 500;
text-align: left;
- margin-top: 12px; /* This is needed to override Bootstrap. */
- margin-bottom: 12px; /* This is needed to override Bootstrap. */
- padding: 2px 13px;
+ margin-top: 1em; /* This is needed to override Bootstrap. */
+ margin-bottom: 1em; /* This is needed to override Bootstrap. */
}
.vcf-table .tooltip p strong {
font-weight: bold;
@@ -94,7 +94,7 @@ a, a:hover {
}
.vcf-table .tooltip:after, .tooltip:before {
bottom: 100%;
- left: 50%;
+ left: 10%;
border: solid transparent;
content: " ";
height: 0;
@@ -103,8 +103,8 @@ a, a:hover {
pointer-events: none;
}
.vcf-table .tooltip:after {
- border-color: rgba(255, 255, 255, 0);
- border-bottom-color: $color-white;
+ border-color: rgba(231, 246, 252, 0);
+ border-bottom-color: $color-bg-hover;
border-width: 10px;
margin-left: -10px;
}
@@ -139,7 +139,7 @@ a, a:hover {
background-color: $color-white-smoke;
border: 1px solid $color-border-light;
border-radius: $radius $radius 0px 0px;
- color: #666;
+ color: $color-text-soft;
}
.vcf-table .comment-text {
background-color: $color-white;
diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
index 11301ff..8c52f57 100644
--- a/cycledash/static/scss/runs.scss
+++ b/cycledash/static/scss/runs.scss
@@ -16,7 +16,7 @@
font-size: 1rem;
margin: 0;
}
- padding: 1em;
+ padding: 1rem;
}
a.all-comments {
@@ -27,7 +27,7 @@ a.all-comments {
/*------[ Add Form ]------*/
form.add-form {
@extend .col-md-12;
- background: darken($color-bg-body, 5%);
+ background: $color-bg-body-dark;
border: 1px solid $color-border-light;
border-radius: $radius;
margin: 1em 0;
@@ -82,7 +82,7 @@ div.project {
background-color: $color-white-smoke;
margin: 2em 0;
border-radius: $radius;
- box-shadow: 1px 1px 1px 0px $color-bg-body;
+ box-shadow: 1px 1px 1px 0px $color-bg-body-dark;
&:last-child {
margin-bottom: 0;
}
@@ -93,8 +93,8 @@ div.project a {
.project-stats {
@extend .clearfix;
font-size: 1.125rem;
- border-top: 1px solid darken($color-white-smoke, 10%);
- padding: 1em 1em 0 1em;
+ border-top: 1px solid $color-bg-body;
+ padding: 1rem 1rem 0 1rem;
a {
margin: 0 1rem 0 0;
display: inline-block;
@@ -105,7 +105,7 @@ div.project a {
}
&.selected-pivot {
border-bottom: 2px solid $color-text-dim;
- color: #666;
+ color: $color-text-soft;
cursor: default;
&:hover {
text-decoration: none;
@@ -159,14 +159,8 @@ span.comment-bubble {
display: inline-block;
margin-left: 2px;
}
-.examine-col {
- width: 5rem;
-}
-.num-comments {
- width: 3rem;
-}
.no-comment > span {
- opacity: 0.3;
+ opacity: 0.2;
}
td.comments {
text-align: right;
@@ -178,13 +172,31 @@ td.comments {
.runs-table .run-id {
text-align: right;
}
+.runs-table .caller-name {
+ width: 30%;
+}
+.runs-table .date {
+ width: 15%;
+}
+.runs-table .num-variants {
+ width: 15%;
+}
+.runs-table .bam-info {
+ width: 20%;
+}
+.runs-table .num-comments {
+ width: 10%;
+}
+.runs-table .examine-col {
+ width: 10%;
+}
.linked-bam {
display: inline-block;
}
/*------[ Drag and Drop File Upload ]------*/
main#runs .receiving-drag.uploadable {
- background: $color-blue-light;
+ background: $color-bg-hover;
}
main#runs .dragging-over .uploadable {
border: 2px dashed $color-blue-sinai;
diff --git a/cycledash/static/scss/style.scss b/cycledash/static/scss/style.scss
index 10e8f55..eabbd76 100644
--- a/cycledash/static/scss/style.scss
+++ b/cycledash/static/scss/style.scss
@@ -106,32 +106,34 @@ section#api-docs > section {
/*------[ Table Styling ]------*/
.table {
font-size: 0.875em; /* 14/16 */
- color: #666;
+ color: $color-text-soft;
border-collapse: separate;
background-color: $color-white;
- border-bottom: 1px solid darken($color-white-smoke, 10%);
+ border-bottom: 1px solid $color-bg-body;
td {
word-wrap: break-word;
&:first-child {
- border-left: 1px solid darken($color-white-smoke, 10%);
+ border-left: 1px solid $color-bg-body;
}
&:last-child {
- border-right: 1px solid darken($color-white-smoke, 10%);
+ border-right: 1px solid $color-bg-body;
}
}
thead {
font-size:0.75rem;
text-transform: uppercase;
- th {
- background-color: darken($color-bg-body, 15%);
- background-color: $color-bg-body;
- font-weight: normal;
- letter-spacing: 1px;
- &:first-child {
- border-top-left-radius: $radius;
- }
- &:last-child {
- border-top-right-radius: $radius;
+ tr {
+ th {
+ background-color: $color-bg-body;
+ font-weight: normal;
+ letter-spacing: 1px;
+ border-bottom: 0;
+ &:first-child {
+ border-top-left-radius: $radius;
+ }
+ &:last-child {
+ border-top-right-radius: $radius;
+ }
}
}
}