Add logo to nav, more color changes.

hammerlab · Jun 5, 2015 · 1fd0c0a · 1fd0c0a
1 parent f8ac82a
commit 1fd0c0a
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 32 deletions.
diff --git a/cycledash/static/img/cycle-dash.png b/cycledash/static/img/cycle-dash.png
diff --git a/cycledash/static/js/examine/components/CommentBox.js b/cycledash/static/js/examine/components/CommentBox.js
@@ -356,15 +356,15 @@ var VCFCommentEditor = React.createClass({
     var buttons = [];
     if (this.props.cancelable) {
       buttons.push(
-        <button className='btn btn-link comment-button btn-default comment-cancel'
+        <button className='btn btn-link comment-button comment-cancel'
                 key='cancel'
                 onClick={this.handleCancelConfirm}>
           Cancel
         </button>
       );
     }
     buttons.push(
-      <button className='btn comment-button btn-success comment-save'
+      <button className='btn comment-button btn-primary comment-save'
               key='save'
               onClick={this.handleSaveText}>
         Save

diff --git a/cycledash/static/scss/_variables.scss b/cycledash/static/scss/_variables.scss
@@ -9,14 +9,16 @@ $color-red: #f32d2d;
 $color-white: #fff;
 $color-white-smoke: #f5f5f5;
 $color-yellow-light: #feffcf;
-$color-fuchsia-sinai: #C3167B;
+// $color-fuchsia-sinai: #C3167B;
+$color-fuchsia-sinai: #AE387E;
+
 
 ////////////////////////////////
 
-$color-bg-body: $color-blue-medium;
+$color-bg-body: #E4E2E1;
 
-$color-bg-hover: $color-blue-light;
-$color-bg-expanded: $color-blue-light;
+$color-bg-hover: lighten($color-blue-sinai, 45%);
+$color-bg-expanded: lighten($color-blue-sinai, 45%);
 
 $color-status-success: $color-green;
 $color-status-error: $color-red;
@@ -28,5 +30,4 @@ $color-link: $color-blue-sinai;
 
 $color-border-light: darken($color-bg-body, 15%);
 
-
 $radius: 4px;
diff --git a/cycledash/static/scss/examine.scss b/cycledash/static/scss/examine.scss
@@ -16,6 +16,15 @@ 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:last-child{
+    th {
+      background-color: darken($color-bg-body, 10%);
+    }
+  }
 }
 .vcf-table th {
   text-transform: capitalize;
@@ -184,7 +193,9 @@ a, a:hover {
 }
 .vcf-table .dalliance-open {
   @extend .btn, .btn-default;
-  background: $color-white url(/static/img/magnifying-glass-noun_907.svg) no-repeat 8px 8px;
+  background-image: url(/static/img/magnifying-glass-noun_907.svg);
+  background-repeat: no-repeat;
+  background-position: 8px 8px;
   cursor: pointer;
   background-size: 15px 15px;
   padding-left: 2.25em;
@@ -458,6 +469,8 @@ a.download-vcf {
   @extend .btn, .btn-default, .btn-xs;
   margin-left: 180px; /* from .dl-horizontal dd */
   padding-left: 2.25em;
-  background: url(/static/img/download-noun_4501.svg) no-repeat 5px 2px;
+  background-image: url(/static/img/download-noun_4501.svg);
+  background-repeat: no-repeat;
+  background-position: 5px 2px;
   background-size: 15px 15px;
 }
diff --git a/cycledash/static/scss/header.scss b/cycledash/static/scss/header.scss
@@ -1,17 +1,26 @@
 @import 'variables';
 
+.header-logo {
+  text-indent: -9999px;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-image: url('../img/cycle-dash.png');
+  background-size: 22px;
+}
 nav.navigation {
   padding: 0.25em 0;
   background: $color-white-smoke;
   border-bottom: 1px solid $color-border-light;
 }
 nav.navigation ul {
-  @extend .container;
   margin-bottom: 0;
+  padding-left: 0;
+  display: inline-block;
 }
 nav.navigation li {
   display: inline-block;
-  padding: 0 1em 0 0;
+  padding: 0 0 0 1em;
 }
 nav.navigation a {
   color: black;

diff --git a/cycledash/static/scss/runs.scss b/cycledash/static/scss/runs.scss
@@ -104,8 +104,7 @@ div.project-header div.project-stats div {
   width: 100%;
 }
 div.project {
-  background-color: #fefefe;
-  background-color: $color-blue-light;
+  background-color: $color-white-smoke;
   margin: 2em 0;
   padding: 1em;
   border-radius: $radius;
@@ -121,6 +120,10 @@ div.project a {
 /*------[ Runs Table ]------*/
 .runs-table {
   @extend .table;
+  table-layout: fixed;
+  td {
+    word-wrap: break-word;
+  }
 }
 main#runs .runs-table tr.info > td {
   background-color: $color-bg-expanded;

diff --git a/cycledash/static/scss/style.scss b/cycledash/static/scss/style.scss
@@ -22,25 +22,39 @@ img.cycle { float: right; }
 dd, dt {
   margin-bottom: 0.25em;
 }
-a {
+a, .btn-link {
   color: $color-link;
+  &:hover {
+    color: darken($color-link, 15%);
+  }
 }
 label {
   font-weight: normal;
 }
 .btn-primary {
-  background-color: darken($color-fuchsia-sinai, 5%);
+  // background-color: darken($color-fuchsia-sinai, 5%);
+  // border-color: darken($color-fuchsia-sinai, 25%);
   color: $color-white;
-  border-color: $color-black;
+  background-color: $color-fuchsia-sinai;
+  border-color: darken($color-fuchsia-sinai, 20%);
   &:hover, &:active, &:focus {
-    background-color: darken($color-fuchsia-sinai, 15%);
+    background-color: darken($color-fuchsia-sinai, 5%);
+    border-color: darken($color-fuchsia-sinai, 20%);
     color: $color-white-smoke;
   }
 }
 .btn-default {
-  background-color: lighten($color-blue-sinai, 43%);
+  // background-color: darken($color-bg-body, 5%);
+  // border-color: darken($color-bg-body, 25%);
+  background-color: $color-blue-sinai;
+  border-color: darken($color-blue-sinai, 20%);
+  color: $color-white;
   &:hover, &:active, &:focus {
-    background-color: lighten($color-blue-sinai, 35%);
+    // background-color: darken($color-bg-body, 10%);
+    // border-color: darken($color-bg-body, 25%);
+    background-color: darken($color-blue-sinai, 5%);
+    border-color: darken($color-blue-sinai, 20%);
+    color: $color-white-smoke;
   }
 }
 .btn-add-file {

diff --git a/cycledash/templates/macros/nav.html b/cycledash/templates/macros/nav.html
@@ -1,17 +1,20 @@
 {% macro nav(active) -%}
 <nav class="navigation">
-  <ul>
-    <li class="{{ 'active' if active == 'runs' else '' }}">
-      <a href="/">Runs</a>
-      {% if active == 'examine' %} &raquo;
-      <span class="{{ 'active' if active == 'examine' else '' }}">Examine</span>
-      {% elif active == 'comments' %} &raquo;
-      <span class="{{ 'active' if active == 'comments' else '' }}">Comments</span>
-      {% endif %}
-    </li>
-    <li class="{{ 'active' if active == 'about' else '' }}">
-      <a href="/about">About</a>
-    </li>
-  </ul>
+  <div class="container">
+    <a class="header-logo" href="/">Home</a>
+    <ul>
+      <li class="{{ 'active' if active == 'runs' else '' }}">
+        <a href="/">Runs</a>
+        {% if active == 'examine' %} &raquo;
+        <span class="{{ 'active' if active == 'examine' else '' }}">Examine</span>
+        {% elif active == 'comments' %} &raquo;
+        <span class="{{ 'active' if active == 'comments' else '' }}">Comments</span>
+        {% endif %}
+      </li>
+      <li class="{{ 'active' if active == 'about' else '' }}">
+        <a href="/about">About</a>
+      </li>
+    </ul>
+  </div>
 </nav>
 {%- endmacro %}