References #24 - Refactored the navigation bar to have its own, globa…

…l styling, regardless of the theme applied to the rest of the page.
jefflunt · Jun 14, 2012 · 3e174a8 · 3e174a8
1 parent 5aa0da7
commit 3e174a8
Show file tree

Hide file tree

Showing 17 changed files with 35 additions and 33 deletions.
diff --git a/app/assets/stylesheets/_variables.sass b/app/assets/stylesheets/_variables.sass
@@ -1,3 +1,6 @@
+$color-light-grey: #ebebeb
+$color-light-medium-grey: #cbcbcb
+
 $dark-theme-light-grey: #ebebeb
 $dark-theme-dark-grey:  #1b1b1b
 $dark-theme-dim-grey: #222

diff --git a/app/assets/stylesheets/controls.css b/app/assets/stylesheets/controls.css
diff --git a/app/assets/stylesheets/controls.sass b/app/assets/stylesheets/controls.sass
@@ -0,0 +1,26 @@
+@import "variables"
+
+#control-bar
+  position: relative
+  top: -8px
+  left: -8px
+  height: 30px
+  margin-right: -16px
+  background-color: $dark-theme-dark-grey
+  a
+    color: $color-light-grey
+    &:hover
+      color: $color-light-medium-grey
+  #control-links
+    position: absolute
+    top: 5px
+    left: 20px
+    color: $color-light-grey
+  #recent-thought-walls
+    background-color: $dark-theme-dark-grey
+    opacity: 0.0
+    position: absolute
+    left: 20px
+    top: 25px
+    padding: 10px
+    z-index: $layer-menu
diff --git a/app/assets/stylesheets/layout-standard.sass b/app/assets/stylesheets/layout-standard.sass
@@ -8,21 +8,6 @@ body.layout-standard
 
   a
     text-decoration: none
-
-  #nav-bar
-    position: relative
-    height: 25px
-    border-bottom: 1px solid
-    #nav-links
-      position: absolute
-      left: 20px
-    #recent-thought-walls
-      opacity: 0.0
-      position: absolute
-      left: 20px
-      top: 25px
-      padding: 10px
-      z-index: $layer-menu
 
   #content
     position: absolute

diff --git a/app/assets/stylesheets/theme-canvas.sass b/app/assets/stylesheets/theme-canvas.sass
@@ -12,12 +12,6 @@ body.theme-canvas
     &:hover
       color: $canvas-theme-color-links-hover
 
-  #nav-bar
-    #nav-links
-    #recent-thought-walls
-      border: solid 1px $canvas-theme-dark-brown
-      background-color: $canvas-theme-light-brown
-
   #content
 
   #overlay

diff --git a/app/assets/stylesheets/theme-dark.sass b/app/assets/stylesheets/theme-dark.sass
@@ -13,12 +13,6 @@ body.theme-dark
     &:hover
       color: $dark-theme-color-links-hover
 
-  #nav-bar
-    #nav-links
-    #recent-thought-walls
-      border: solid 1px $dark-theme-light-grey
-      background-color: $dark-theme-dark-grey
-
   #content
 
   #overlay

diff --git a/app/views/navigation/_nav_bar.haml → app/views/controls/_control_bar.haml b/app/views/navigation/_nav_bar.haml → app/views/controls/_control_bar.haml
@@ -1,5 +1,5 @@
-#nav-bar
-  #nav-links
+#control-bar
+  #control-links
     =link_to "recent lists", "javascript:;", id: "recent-thought-walls-link"
     |
     =link_to "new brainstorm", "/"

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -13,7 +13,7 @@
   <div id="thought-wall-code" class="hidden"><%= @thought_wall.code if defined?(@thought_wall) %></div>
   <div id="safe-to-alter-layout" class="hidden">true</div>
 
-  <%= render :partial => 'navigation/nav_bar' %>
+  <%= render :partial => 'controls/control_bar' %>
   <div id="content">
     <%= yield %>
   </div>

diff --git a/public/assets/application-55787a5221a995c5d39f3acf5b60418f.js.gz b/public/assets/application-55787a5221a995c5d39f3acf5b60418f.js.gz
diff --git a/public/assets/application-f94608ba3ebf1b25f7b63077a04ae24f.css b/public/assets/application-f94608ba3ebf1b25f7b63077a04ae24f.css
diff --git a/public/assets/application-f94608ba3ebf1b25f7b63077a04ae24f.css.gz b/public/assets/application-f94608ba3ebf1b25f7b63077a04ae24f.css.gz
diff --git a/public/assets/application-fd90f0c1f0c19b695bd760efc960f243.css b/public/assets/application-fd90f0c1f0c19b695bd760efc960f243.css
diff --git a/public/assets/application-fd90f0c1f0c19b695bd760efc960f243.css.gz b/public/assets/application-fd90f0c1f0c19b695bd760efc960f243.css.gz