Simplifying and cleaning up some SCSS rules. Justication for navbars.…

… Trying to unify link styling.
SpeciesFileGroup · Nov 24, 2014 · 7afe390 · 7afe390
1 parent 9f49292
commit 7afe390
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 82 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -13,6 +13,10 @@
  *= require jquery-ui/autocomplete
  */
 
+body {
+  font-size: 100%;
+}
+
 .scrollable_div { height: 80px; overflow: auto;  }
 .hidden {visibility:hidden;}
 .collapsed {visibility: collapse;}

diff --git a/app/assets/stylesheets/hub.css.scss b/app/assets/stylesheets/hub.css.scss
@@ -4,50 +4,47 @@
 @import 'workbench/palette';
 @import 'workbench/whitespace';
 
-#hub_tabs {
-}
-
-.hub_link {
-  @extend .navigation_emphasis;
-  color: white;
+#hub {
   a {
-    color: white;
-    &:visited {
-      color: white;
-    }
+    text-decoration: none;
   }
-}
 
-div.related_links_set {
-  background-color: $background_gray;
-  padding: $pane_padding;
-  border: $pane_border;
-  margin: $pane_margin;
-  width: 260px;
-  float: left;
-  min-height: 200px;
-  h3 {
-    margin: 0px;
-    border-bottom: 1px solid;
-    color: $color-secondary-2-4;
-  }
-  h4 { 
-    margin: 0px;
-    font-weight: bold;
-    color: $color-secondary-2-3;
-  }
-  ul {
+  #navigation_list {
     li {
-      margin: .2em;
-      padding: 0px;
+      padding: .3em;
+      list-style-type: none;
+      border-left: 2px solid $color-secondary-2-2;
+      margin-bottom: 4px;
     }
   }
-  a {
-    &:visited {
-      color: black; 
-    }   
-    &:hover {
-      background-color: $note_yellow;
+
+  #hub_tabs { 
+   justify-content: center; 
+  }
+
+  div.related_links_set {
+    background-color: $background_gray;
+    padding: $pane_padding;
+    border: $pane_border;
+    margin: $pane_margin;
+    width: 260px;
+    float: left;
+    min-height: 200px;
+    h3 {
+      margin: 0px;
+      border-bottom: 1px solid;
+      color: $color-secondary-2-4;
+    }
+    h4 { 
+      margin: 0px;
+      font-weight: bold;
+      color: $color-secondary-2-3;
+    }
+    ul {
+      li {
+        margin-left: .4em;
+        padding: 0px;
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/scaffolds.css.scss b/app/assets/stylesheets/scaffolds.css.scss
@@ -12,16 +12,7 @@ pre {
   font-size: 11px;
 }
 
-a {
-  color: #000;
-  &:visited {
-    color: #666;
-  }
-  &:hover {
-    color: #fff;
-    background-color: #000;
-  }
-}
+// see navigation for a 
 
 div {
   &.field, &.actions {

diff --git a/app/assets/stylesheets/workbench/navigation.css.scss b/app/assets/stylesheets/workbench/navigation.css.scss
@@ -1,31 +1,36 @@
 @import 'palette';
 
+// see navigation_emphasis in palette
+a {
+  color: $color-secondary-2-4;
+  &:visited {
+    color: $color-secondary-2-3;
+  }
+  &:hover {
+    color: $color-secondary-2-0;
+    background-color: $color-secondary-2-2;
+  }
+}
+
+
 /* see http://css-tricks.com/snippets/css/a-guide-to-flexbox/, seems nice */
 .horizontal_navbar {
   list-style: none;
   margin: 0; 
 
-  // background: deepskyblue;
-
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
 
   -webkit-flex-flow: row wrap;
-  justify-content: flex-start;
-}
 
-.horizontal_navbar a {
-  text-decoration: none;
-  display: block;
-  padding: 0 1em; // was 1
- // color: white;
-}
-
-.horizontal_navbar a:hover {
-  background: darken($color-secondary-2-0, 2%);
+  a {
+    text-decoration: none;
+    display: block;
+    padding: 0 1em; // was 1
+  }
 }
 
 @media all and (max-width: 800px) {
@@ -53,6 +58,16 @@
   }
 }
 
+.centered_navbar {
+  @extend .horizontal_navbar;
+  justify-content: center;  
+}
+
+.left_justified_navbar {
+  @extend .horizontal_navbar;
+  justify-content: flex-start;  
+}
+
 #taxonworks_link {
  text-decoration: none;
 }
diff --git a/app/assets/stylesheets/workbench/palette.css.scss.erb b/app/assets/stylesheets/workbench/palette.css.scss.erb
@@ -14,38 +14,36 @@ $color-primary-2: #FFF9F9;
 $color-primary-3: #E5BEBE;
 $color-primary-4: #C38A8A;
 
-// yellow/brown
+// yellow/brown (see)
 $color-secondary-1-0: #FFF5EA;	/* Main Secondary color (1) */
 $color-secondary-1-1: #FFFFFF;
 $color-secondary-1-2: #FFFCF9;
 $color-secondary-1-3: #E5D2BE;
 $color-secondary-1-4: #C3A78A;
 
-// blue-gray
+// blue-gray (go)
 $color-secondary-2-0: #9DA7AB;	/* Main Secondary color (2) */
 $color-secondary-2-1: #FCFCFC;
 $color-secondary-2-2: #D0D3D5;
 $color-secondary-2-3: #788990;
 $color-secondary-2-4: #58717A;
 
-// gray-green
+// gray-green (do)
 $color-complement-0: #C1D2C1;	/* Main Complement color */
 $color-complement-1: #FEFEFE;
 $color-complement-2: #E3E8E3;
 $color-complement-3: #98B798;
 $color-complement-4: #6E9C6E;
 
-
-
 // aliases
 $muted_blue:  $color-secondary-2-0;
 $muted_red: $color-secondary-1-3;
 $background_gray: $color-secondary-2-1;
 $title_gray: $color-secondary-2-4;
 $note_yellow: $color-secondary-1-1; 
 
-$navigation_focus_color: white;
-$navigation_focus_background: $color-complement-4;
+$navigation_focus_color: $color-secondary-2-0;
+$navigation_focus_background: $color-secondary-2-4;
 
 .muted_red {
   background-color: $muted_red

diff --git a/app/views/hub/_navigation_index_bar.html.erb b/app/views/hub/_navigation_index_bar.html.erb
@@ -1,5 +1,5 @@
 <navigation id="hub_tabs">
-  <ul class='horizontal_navbar'>
+  <ul class='centered_navbar'>
     <% @sessions_current_user.hub_tab_order.each do |t| -%>
       <%= content_tag(:li, link_to(t, hub_path(list: t))) -%> 
     <% end -%>

diff --git a/app/views/hub/index.html.erb b/app/views/hub/index.html.erb
@@ -1,14 +1,19 @@
 
-<div>
+<div id="hub">
+
   <h1 class="center_text"> 
-    <span class="subtle">Hub for</span> <%= object_tag(sessions_current_project) -%> 
+    <span class="subtle">Hub for</span> 
+    <%= object_tag(sessions_current_project) -%> 
   </h1> 
-</div>
 
-<%= render(partial: 'navigation_index_bar') -%>
+  <div class="center_text">
+    <%= render(partial: 'navigation_index_bar') -%>
+  </div>
 
-<navigation>
-<ul>
-  <%= render(partial: "hub/navigation_lists/#{@links_to_render}") -%>
-</ul>
-</navigation>
+  <navigation id="navigation_list">
+    <ul>
+      <%= render(partial: "hub/navigation_lists/#{@links_to_render}") -%>
+    </ul>
+  </navigation>
+
+</div>
diff --git a/app/views/shared/data/_show.html.erb b/app/views/shared/data/_show.html.erb
@@ -32,7 +32,6 @@
     <h2> Do </h2> 
     <%= edit_object_link(object) -%> | <%= destroy_object_link(object) -%> <br>
 
-
     <h3> Annotate </h3>
     <%= add_alternate_value_link(object: object, user: sessions_current_user) -%><br>
     <%= add_note_link(object: object, user: sessions_current_user) -%><br>

diff --git a/app/views/taxon_name_relationships/new.html.erb b/app/views/taxon_name_relationships/new.html.erb
@@ -1,4 +1,4 @@
-<h1>New taxon_name_relationship</h1>
+<h1>New taxon name relationship</h1>
 
 <%= render 'form' %>
 

diff --git a/app/views/workbench/navigation/_quick_bar.html.erb b/app/views/workbench/navigation/_quick_bar.html.erb
@@ -1,5 +1,5 @@
-<navigation>
-  <ul class="quick_bar horizontal_navbar">
+<navigation id="quick_bar">
+  <ul class="horizontal_navbar left_justified">
     <%= content_tag(:li, link_to('hub', hub_path, class: :hub_link)) -%>
     <%= content_tag(:li, link_to(controller_name.humanize.downcase, send("#{controller_name}_path"))) -%>
     <% if  !DATA_RELATIONS_FOR_NAVIGATION[controller_name].nil? %>