Closes activeadmin#505 Fixed bug where having no breadcrumbs in the t…

…itlebar would cause the actions buttons to not be vertically centred.
mattvague · Sep 21, 2011 · 8407b15 · 8407b15
1 parent 061b769
commit 8407b15
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 8 deletions.
diff --git a/app/assets/stylesheets/active_admin/_base.css.scss b/app/assets/stylesheets/active_admin/_base.css.scss
@@ -25,36 +25,52 @@ body {
 // ----------------------------------- Page Title Bar 
 #title_bar {
   @include section-header;
+  @include clearfix;
+  @include box-sizing(border-box);
+  display: table;
+  width: 100%;
   position: relative; 
   margin: 0; 
   padding: 10px $horizontal-page-margin; 
 
+  #titlebar_left, #titlebar_right {
+    height: 50px;
+    vertical-align: middle;
+    display: table-cell;
+  }
+
+  #titlebar_right {
+    text-align: right;
+  }
+
   h2 { 
-    margin: 12px 0 5px 0; 
+    margin: 0;
     padding: 0; 
     font-size: 2.6em;
     font-weight: bold;
   }
 
   .action_items { 
-    position: absolute; 
-    right: $horizontal-page-margin; 
-    top: 28px;
-
     a { 
       @include light-button; 
       @include icon(#777, 0.8em); 
       @include gradient(#f9f9f9, #dddbdb);
+      display: inline-block;
       padding: .8em 1.5em .7em 1.5em;
       border: 1px solid #f8f8f8;
       span.icon { vertical-align: bottom; margin-right: 4px;} 
       &:hover{ @include icon-color(#000); }
-      &:active { border: inherit; }
     }
   }
 }
 
-// ----------------------------------- Main Structure 
+// ----------------------------------- Main Structure
+
+#wrapper {
+  display: table;
+  width: 100%;
+}
+
 #active_admin_content { 
   margin: 0; 
   padding: 25px $horizontal-page-margin; 
@@ -111,9 +127,12 @@ a.button, input[type=submit] { @include dark-button; }
 
 // ----------------------------------- Breadcrumbs 
 .breadcrumb {
-  text-transform: uppercase;
+  display: block;
   font-size: 0.9em;
   font-weight: normal;
+  line-height: 1.0em;
+  margin-bottom: 12px;
+  text-transform: uppercase;
 
   a, a:link {
     color: #8a949e ;

diff --git a/app/assets/stylesheets/active_admin/mixins/_all.css.scss b/app/assets/stylesheets/active_admin/mixins/_all.css.scss
@@ -6,3 +6,5 @@
 @import "active_admin/mixins/rounded";
 @import "active_admin/mixins/buttons";
 @import "active_admin/mixins/sections";
+@import "active_admin/mixins/utilities";
+
diff --git a/app/assets/stylesheets/active_admin/mixins/_utilities.scss b/app/assets/stylesheets/active_admin/mixins/_utilities.scss
@@ -0,0 +1,17 @@
+@mixin clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    content: "";
+    clear: both;
+    height: 0;
+  }
+}
+
+@mixin box-sizing($value: border-box) {
+  -moz-box-sizing: $value;
+  -webkit-box-sizing: $value;
+  -o-box-sizing: $value;
+  -ms-box-sizing: $value;
+  box-sizing: $value;
+}
diff --git a/lib/active_admin/views/pages/base.rb b/lib/active_admin/views/pages/base.rb
@@ -52,8 +52,20 @@ def build_header
 
         def build_title_bar
           div :id => "title_bar" do
+            build_titlebar_left
+            build_titlebar_right
+          end
+        end
+
+        def build_titlebar_left
+          div :id => "titlebar_left" do
             build_breadcrumb
             build_title_tag
+          end
+        end
+
+        def build_titlebar_right
+          div :id => "titlebar_right" do
             build_action_items
           end
         end