Skip to content

Commit

Permalink
More Runs page color, structure and table redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaclynperrone
jaclynperrone committed Jun 9, 2015
1 parent f277d4b commit 57afb6a
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 76 deletions.
36 changes: 20 additions & 16 deletions cycledash/static/js/runs/components/RunsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,26 +148,30 @@ var ProjectTable = React.createClass({
<p className='notes'>{this.props.notes}</p>
{this.state.displayRunForm ? newRunForm : null}
{this.state.displayBAMForm ? newBAMForm : null}
<div className='project-stats'>
</div>
<div className='project-stats'>
<div className='project-table-nav'>
<a onClick={() => this.setState({bamsTable: false})} className={this.state.bamsTable ? '' : 'selected-pivot'}>
Runs<span className="count">{numRuns}</span>
{numRuns} Runs
</a>
<a onClick={() => this.setState({bamsTable: true})} className={this.state.bamsTable ? 'selected-pivot' : ''}>
BAMs<span className="count">{numBams}</span>
{numBams} BAMs
</a>
<div className='add'>
<button onClick={() => { this.displayBAMForm(false); this.displayRunForm(!this.state.displayRunForm); }}
type='button' className='btn btn-primary btn-xs'>
Add Run
</button>
<button onClick={() => { this.displayRunForm(false); this.displayBAMForm(!this.state.displayBAMForm); }}
type='button' className='btn btn-primary btn-xs'>
Add BAM
</button>
</div>
</div>
<div className='add'>
<button onClick={() => { this.displayBAMForm(false); this.displayRunForm(!this.state.displayRunForm); }}
type='button' className='btn btn-primary btn-xs'>
Add Run
</button>
<button onClick={() => { this.displayRunForm(false); this.displayBAMForm(!this.state.displayBAMForm); }}
type='button' className='btn btn-primary btn-xs'>
Add BAM
</button>
</div>
</div>
<div className="runs-table-container">
{table}
</div>
{table}
</div>
);
}
Expand Down Expand Up @@ -199,8 +203,8 @@ var RunsTable = React.createClass({
<th className='date'>Submitted On</th>
<th className='num-variants'>Variants</th>
<th>Linked BAMs</th>
<th></th>
<th></th>
<th className='num-comments'></th>
<th className='examine-col'></th>
</tr>
</thead>
<tbody>
Expand Down
17 changes: 14 additions & 3 deletions cycledash/static/scss/examine.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
89 changes: 39 additions & 50 deletions cycledash/static/scss/runs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -59,7 +48,7 @@ form.add-form {

/*------[ Projects ]------*/
.projects-container {
@extend .col-md-9;
@extend .col-md-10;
}
.projects-page-header {
@extend .clearfix;
Expand All @@ -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;
}
Expand All @@ -100,50 +91,42 @@ 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;
}
}
}
}
.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;
Expand Down Expand Up @@ -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;
}
Expand Down
56 changes: 49 additions & 7 deletions cycledash/static/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit 57afb6a

Please sign in to comment.