diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
index 68375a6..af2fbee 100644
--- a/cycledash/static/js/runs/components/RunsPage.js
+++ b/cycledash/static/js/runs/components/RunsPage.js
@@ -148,26 +148,30 @@ var ProjectTable = React.createClass({
{this.props.notes}
{this.state.displayRunForm ? newRunForm : null}
{this.state.displayBAMForm ? newBAMForm : null}
-
+
+
+
+
+
+
+
+
+
+ {table}
- {table}
);
}
@@ -199,8 +203,8 @@ var RunsTable = React.createClass({
Submitted On |
Variants |
Linked BAMs |
- |
- |
+ |
+ |
diff --git a/cycledash/static/scss/examine.scss b/cycledash/static/scss/examine.scss
index 9b83f06..8c493a8 100644
--- a/cycledash/static/scss/examine.scss
+++ b/cycledash/static/scss/examine.scss
@@ -16,18 +16,29 @@ a, a:hover {
/*------[ VCF Table ]------*/
.vcf-table {
@extend .table, .table-striped, .table-condensed;
- background-color: $color-white;
}
.vcf-table thead {
background-color: $color-bg-body;
+ tr:first-child{
+ th {
+ border-left: 1px solid $color-border-light;
+ color: $color-text;
+ background-color: darken($color-bg-body, 5%);
+ }
+ }
tr:last-child{
th {
- background-color: darken($color-bg-body, 5%);
+ background-color: darken($color-bg-body, 3%);
+ &:first-child {
+ border-top-left-radius: 0;
+ }
+ &:last-child {
+ border-top-right-radius: 0;
+ }
}
}
}
.vcf-table th {
- text-transform: capitalize;
position: relative;
white-space: nowrap;
}
diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
index f41037b..11301ff 100644
--- a/cycledash/static/scss/runs.scss
+++ b/cycledash/static/scss/runs.scss
@@ -10,28 +10,17 @@
/*------[ Recent Comments ]------*/
.recent-comments-container {
- @extend .col-md-3;
+ @extend .col-md-2;
+ font-size: 0.875em;
h4 {
- margin-top: 0;
+ font-size: 1rem;
+ margin: 0;
}
padding: 1em;
}
-.recent-comments-list {
- @extend .clearfix;
- padding: 0;
- list-style: none;
- li {
- padding: 1em;
- margin: 0.5em 0;
- border-top: 1px solid $color-border-light;
- &:first-child {
- border-top: none;
- }
- }
-}
+
a.all-comments {
- font-size: 0.875em;
- color: $color-text-dim;
+ font-size: 0.75em;
padding-left: 0.5em;
}
@@ -59,7 +48,7 @@ form.add-form {
/*------[ Projects ]------*/
.projects-container {
- @extend .col-md-9;
+ @extend .col-md-10;
}
.projects-page-header {
@extend .clearfix;
@@ -70,28 +59,30 @@ form.add-form {
}
}
.projects-table {
- @extend .col-md-9;
- padding: 1em;
+ @extend .col-md-10;
border-right: 1px solid $color-border-light;
+ padding: 1em;
}
div.project-header h2 {
margin: 0;
}
div.project-header .notes {
- margin-top: 1em;
+ margin: 0;
}
-div.project-header .add button {
+.project-stats .add button {
margin-left: 1em;
}
-div.project-header .add {
+.project-stats .add {
float: right;
}
+.project-header {
+ padding: 1em;
+}
div.project {
background-color: $color-white-smoke;
margin: 2em 0;
- padding: 1em;
border-radius: $radius;
- box-shadow: 1px 1px 1px 0px $color-border-light;
+ box-shadow: 1px 1px 1px 0px $color-bg-body;
&:last-child {
margin-bottom: 0;
}
@@ -100,25 +91,21 @@ div.project a {
cursor: pointer;
}
.project-stats {
- margin-top: 1em;
+ @extend .clearfix;
font-size: 1.125rem;
+ border-top: 1px solid darken($color-white-smoke, 10%);
+ padding: 1em 1em 0 1em;
a {
- padding: 0.25rem 0.5rem;
+ margin: 0 1rem 0 0;
display: inline-block;
- border-top: 1px solid transparent;
- border-right: 1px solid transparent;
- border-left: 1px solid transparent;
+ font-family: helvetica;
+ font-size: 0.875em;
&:hover {
text-decoration: none;
}
&.selected-pivot {
- background-color: $color-white-smoke;
- border-top-left-radius: $radius;
- border-top-right-radius: $radius;
- border-top: 1px solid darken($color-white-smoke, 10%);
- border-right: 1px solid darken($color-white-smoke, 10%);
- border-left: 1px solid darken($color-white-smoke, 10%);
- color: $color-text;
+ border-bottom: 2px solid $color-text-dim;
+ color: #666;
cursor: default;
&:hover {
text-decoration: none;
@@ -126,24 +113,20 @@ div.project a {
}
}
}
-.count {
- display: inline-block;
- font-family: helvetica, arial, sans-serif;
- padding-left: 1em;
- font-size: 0.75rem;
+.project-table-nav {
+ float:left;
+}
+.add {
+ float:right;
}
/*------[ Runs Table ]------*/
+.runs-table-container {
+ padding: 1em;
+}
.runs-table, .bams-table {
@extend .table;
- border: 1px solid darken($color-white-smoke, 10%);
- margin-top: -1px;
table-layout: fixed;
- td {
- word-wrap: break-word;
- }
- thead {
- font-size:0.75rem;
- }
+ margin: 0;
}
main#runs .runs-table tr.info > td {
background-color: $color-bg-expanded;
@@ -176,6 +159,12 @@ span.comment-bubble {
display: inline-block;
margin-left: 2px;
}
+.examine-col {
+ width: 5rem;
+}
+.num-comments {
+ width: 3rem;
+}
.no-comment > span {
opacity: 0.3;
}
diff --git a/cycledash/static/scss/style.scss b/cycledash/static/scss/style.scss
index 21bd1d0..10e8f55 100644
--- a/cycledash/static/scss/style.scss
+++ b/cycledash/static/scss/style.scss
@@ -38,23 +38,36 @@ label {
&:hover, &:active, &:focus {
background-color: darken($color-fuchsia-sinai, 5%);
border-color: darken($color-fuchsia-sinai, 10%);
- color: $color-white-smoke;
+ color: $color-white;
}
}
.btn-default {
- background-color: $color-blue-sinai;
- border-color: darken($color-blue-sinai, 10%);
- color: $color-white;
+ background-color: $color-white;
+ border-color: $color-blue-sinai;
+ color: $color-blue-sinai;
&:hover, &:active, &:focus {
- background-color: darken($color-blue-sinai, 5%);
- border-color: darken($color-blue-sinai, 10%);
- color: $color-white-smoke;
+ background-color: darken($color-white, 5%);
+ border-color: $color-blue-sinai;
+ color: $color-blue-sinai;
}
}
.btn-add-file {
@extend .btn, .btn-primary, .btn-xs;
}
/*------[ Comments ]------*/
+.recent-comments-list {
+ @extend .clearfix;
+ list-style: none;
+ padding: 0;
+ li {
+ padding: 1em 0;
+ margin: 0.5em 0;
+ border-top: 1px solid $color-border-light;
+ &:first-child {
+ border-top: none;
+ }
+ }
+}
.author-name {
font-weight: bold;
}
@@ -93,6 +106,35 @@ section#api-docs > section {
/*------[ Table Styling ]------*/
.table {
font-size: 0.875em; /* 14/16 */
+ color: #666;
+ border-collapse: separate;
+ background-color: $color-white;
+ border-bottom: 1px solid darken($color-white-smoke, 10%);
+ td {
+ word-wrap: break-word;
+ &:first-child {
+ border-left: 1px solid darken($color-white-smoke, 10%);
+ }
+ &:last-child {
+ border-right: 1px solid darken($color-white-smoke, 10%);
+ }
+ }
+ 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;
+ }
+ }
+ }
}
.table tbody tr {
cursor: pointer;