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} -
+
+
+
this.setState({bamsTable: false})} className={this.state.bamsTable ? '' : 'selected-pivot'}> - Runs{numRuns} + {numRuns} Runs this.setState({bamsTable: true})} className={this.state.bamsTable ? 'selected-pivot' : ''}> - BAMs{numBams} + {numBams} BAMs -
- - -
+
+ + +
+
+
+ {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;