Make the admin header sticky

Currently the page title and action buttons are scrollable with the rest of the page content. Placing these items in a sticky header so that the user can always see what page they’re on and have easy access to functions like adding new items to lists. Closes solidusio#630
tvdeyen · Oct 5, 2017 · ade08c9 · ade08c9
1 parent 8c8a483
commit ade08c9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -1,10 +1,14 @@
 .main-header {
   display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: $main-header-height;
   align-items: center;
-  padding: 15px $grid-gutter-width;
+  padding: 15px $grid-gutter-width 15px $width-sidebar + $grid-gutter-width;
   background-color: very-light($color-3, 4);
   border-bottom: 1px solid $color-border;
-  height: $main-header-height;
 
   @media print { display: none }
 }

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -15,7 +15,7 @@ body {
 }
 
 .content-wrapper {
-  @include padding(1rem $grid-gutter-width null);
+  @include padding($main-header-height + $font-size-root $grid-gutter-width null);
 
   &:not(.full-width) {
     @include margin(null auto);

diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb
@@ -6,7 +6,6 @@
 
   <body class="admin">
     <%= render "spree/admin/shared/navigation" %>
-    <%= render "spree/admin/shared/header" %>
     <%= render "spree/admin/shared/flash" %>
     <%= render "spree/admin/shared/spinner" %>
 
@@ -21,6 +20,8 @@
         <%= render "spree/admin/shared/sidebar" %>
       </div>
     </div>
+    <%# Has to be here because it's sticky, should sit on top of the content and using z-index is lame %>
+    <%= render "spree/admin/shared/header" %>
 
     <div data-hook="admin_footer_scripts"></div>
   </body>