More color and design changes/refactors.

hammerlab · Jun 10, 2015 · 9d0b8e0 · 9d0b8e0
1 parent 57afb6a
commit 9d0b8e0
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 51 deletions.
diff --git a/cycledash/static/js/runs/components/RunsPage.js b/cycledash/static/js/runs/components/RunsPage.js
@@ -202,7 +202,7 @@ var RunsTable = React.createClass({
             <th className='caller-name'>Caller Name</th>
             <th className='date'>Submitted On</th>
             <th className='num-variants'>Variants</th>
-            <th>Linked BAMs</th>
+            <th className='bam-info'>Linked BAMs</th>
             <th className='num-comments'></th>
             <th className='examine-col'></th>
           </tr>

diff --git 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;
diff --git 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
@@ -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
@@ -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;
+        }
       }
     }
   }