Merge pull request #1012 from graygilmore/content_layout

Prepare for new layouts
solidusio · Mar 29, 2016 · 8b4ccd9 · 8b4ccd9
2 parents 60ee1df + 6fe6d6a
commit 8b4ccd9
Show file tree

Hide file tree

Showing 13 changed files with 130 additions and 167 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -33,6 +33,23 @@ nav.menu {
   z-index: $z-index-navbar-flyout;
 }
 
+.admin-nav-header {
+  padding: 15px;
+  height: 58px; // height of .page-title
+  box-sizing: content-box;
+  background-color: $color-1;
+  border-bottom: 1px solid $color-border;
+
+  a {
+    display: inline-block;
+    line-height: 58px;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+}
+
 .admin-nav-menu {
   ul {
     margin: 0;

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_progress.scss b/backend/app/assets/stylesheets/spree/backend/components/_progress.scss
@@ -2,6 +2,7 @@
   display: none;
   position: fixed;
   top: 0;
+  right: 0;
   z-index: 1000;
   opacity: 0.8;
   @include calc(width, "100% - #{$width-sidebar}");

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -0,0 +1,30 @@
+.main-header {
+  @include display(flex);
+  @include align-items(center);
+  margin-left: $width-sidebar;
+  padding: 15px 14px;
+  background-color: very-light($color-3, 4);
+  border-bottom: 1px solid $color-border;
+}
+
+.page-title {
+  font-size: 20px;
+  margin: 0.67em 0;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  i {
+    color: $color-2;
+  }
+}
+
+.header-actions {
+  @include flex-grow(1);
+  text-align: right;
+  line-height: 38px;
+
+  form {
+    display: inline-block;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -1,51 +1,3 @@
-// Basics
-//---------------------------------------------------
-* {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-// Helpers
-.block-table {
-  display: table;
-  width: 100%;
-
-  .table-cell {
-    display: table-cell;
-    vertical-align: middle;
-    padding: 0 10px;
-
-    &:first-child {
-      padding-left: 0;
-    }
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-.hidden {
-  display: none;
-}
-
-// For block grids
-.frameless {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-
-.container .column,
-.container .columns {
-  // Float container right instead of left.
-  .right {
-    float: right;
-  }
-}
-
-// Page Layout
-//---------------------------------------------------
-
 html {
   height: 100%;
 }
@@ -65,68 +17,10 @@ body {
   @include clearfix;
 }
 
-// Header
-//---------------------------------------------------
-.admin-nav-header {
-  padding: 15px;
-  height: 58px; // height of .page-title
-  box-sizing: content-box;
-  background-color: $color-1;
-  border-bottom: 1px solid $color-border;
-
-  a {
-    display: inline-block;
-    line-height: 58px;
-  }
-
-  img {
-    vertical-align: middle;
-  }
-}
-
-[data-hook="admin-title"] { font-size: 14px }
-
-.page-title {
-  i {
-    color: $color-2;
-  }
-}
-
-// Content
-//---------------------------------------------------
 #content {
   background-color: $color-1;
   position: relative;
   z-index: 0;
   padding: 0;
   margin-top: 15px;
 }
-
-#content-header {
-  padding: 15px 0;
-  background-color: very-light($color-3, 4);
-  border-bottom: 1px solid $color-border;
-
-  .page-title {
-    font-size: 20px;
-    margin: 0.67em 0;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  .page-actions {
-    text-align: right;
-    line-height: 38px;
-    form {
-      display: inline-block;
-    }
-  }
-}
-
-// Footer
-//---------------------------------------------------
-#footer {
-  margin-top: 15px;
-  border-top: 1px solid $color-border;
-  padding: 10px 0;
-}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_utilities.scss b/backend/app/assets/stylesheets/spree/backend/shared/_utilities.scss
@@ -0,0 +1,35 @@
+.block-table {
+  display: table;
+  width: 100%;
+
+  .table-cell {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 0 10px;
+
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+// For block grids
+.frameless {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+
+.container .column,
+.container .columns {
+  // Float container right instead of left.
+  .right {
+    float: right;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/spree_admin.scss b/backend/app/assets/stylesheets/spree/backend/spree_admin.scss
@@ -15,6 +15,8 @@
 @import 'spree/backend/shared/icons';
 @import 'spree/backend/shared/forms';
 @import 'spree/backend/shared/layout';
+@import 'spree/backend/shared/header';
+@import 'spree/backend/shared/utilities';
 
 @import 'spree/backend/components/states';
 @import 'spree/backend/components/actions';

diff --git a/backend/app/views/spree/admin/shared/_content_header.html.erb b/backend/app/views/spree/admin/shared/_content_header.html.erb
diff --git a/backend/app/views/spree/admin/shared/_flash.html.erb b/backend/app/views/spree/admin/shared/_flash.html.erb
@@ -0,0 +1,11 @@
+<div class="flash-wrapper js-flash-wrapper">
+  <% if flash[:error] %>
+    <div class="flash error"><%= flash[:error] %></div>
+  <% end %>
+  <% if notice %>
+    <div class="flash notice"><%= notice %></div>
+  <% end %>
+  <% if flash[:success] %>
+    <div class="flash success"><%= flash[:success] %></div>
+  <% end %>
+</div>
diff --git a/backend/app/views/spree/admin/shared/_header.html.erb b/backend/app/views/spree/admin/shared/_header.html.erb
@@ -1,5 +1,13 @@
-<header class="admin-nav-header">
-  <%= link_to spree.admin_path, class: 'brand-link' do %>
-    <%= image_tag(Spree::Config[:admin_interface_logo]) %>
-  <%- end %>
-</header>
+<% if content_for?(:page_title) || content_for?(:page_actions) %>
+  <div id="content-header" class="main-header" data-hook>
+    <% if content_for?(:page_title) %>
+      <h1 class="page-title"><%= yield :page_title %></h1>
+    <% end %>
+
+    <% if content_for?(:page_actions) %>
+      <ul class="header-actions page-actions inline-menu" data-hook="toolbar">
+        <%= yield :page_actions %>
+      </ul>
+    <% end %>
+  </div>
+<% end %>
diff --git a/backend/app/views/spree/admin/shared/_navigation.html.erb b/backend/app/views/spree/admin/shared/_navigation.html.erb
@@ -1,5 +1,5 @@
 <div class="admin-nav">
-  <%= render partial: 'spree/admin/shared/header' %>
+  <%= render partial: 'spree/admin/shared/navigation_header' %>
   <div class="admin-nav-sticky">
     <%= render partial: 'spree/admin/shared/menu' %>
     <div class="admin-nav-footer">

diff --git a/backend/app/views/spree/admin/shared/_navigation_header.html.erb b/backend/app/views/spree/admin/shared/_navigation_header.html.erb
@@ -0,0 +1,5 @@
+<header class="admin-nav-header">
+  <%= link_to spree.admin_path, class: 'brand-link' do %>
+    <%= image_tag(Spree::Config[:admin_interface_logo]) %>
+  <%- end %>
+</header>
diff --git a/backend/app/views/spree/admin/shared/_spinner.html.erb b/backend/app/views/spree/admin/shared/_spinner.html.erb
@@ -0,0 +1,6 @@
+<div id="progress">
+  <div class="wrapper">
+    <div id="spinner" class="spinner"></div>
+    <div class="progress-message"><%= Spree.t(:loading) %>...</div>
+  </div>
+</div>
diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb
@@ -1,39 +1,16 @@
 <!doctype html>
-<!--[if lt IE 7 ]> <html class="ie ie6" lang="<%= I18n.locale %>"> <![endif]-->
-<!--[if IE 7 ]>    <html class="ie ie7" lang="<%= I18n.locale %>"> <![endif]-->
-<!--[if IE 8 ]>    <html class="ie ie8" lang="<%= I18n.locale %>"> <![endif]-->
-<!--[if IE 9 ]>    <html class="ie ie9" lang="<%= I18n.locale %>"> <![endif]-->
-<!--[if gt IE 9]><!--><html lang="<%= I18n.locale %>"><!--<![endif]-->
+<html lang="<%= I18n.locale %>">
   <head data-hook="admin_inside_head">
-    <%= render :partial => 'spree/admin/shared/head' %>
+    <%= render 'spree/admin/shared/head' %>
   </head>
 
-  <body class='admin'>
-    <%= render partial: 'spree/admin/shared/navigation' %>
-
-    <div class='main-content' id='wrapper' data-hook>
-
-      <div class="flash-wrapper js-flash-wrapper">
-        <% if flash[:error] %>
-          <div class="flash error"><%= flash[:error] %></div>
-        <% end %>
-        <% if notice %>
-          <div class="flash notice"><%= notice %></div>
-        <% end %>
-        <% if flash[:success] %>
-          <div class="flash success"><%= flash[:success] %></div>
-        <% end %>
-      </div>
-
-      <div id="progress">
-        <div class="wrapper">
-          <div id="spinner" class="spinner"></div>
-          <div class="progress-message"><%= Spree.t(:loading) %>...</div>
-        </div>
-      </div>
-
-      <%= render :partial => 'spree/admin/shared/content_header' %>
+  <body class="admin">
+    <%= render "spree/admin/shared/navigation" %>
+    <%= render "spree/admin/shared/header" %>
+    <%= render "spree/admin/shared/flash" %>
+    <%= render "spree/admin/shared/spinner" %>
 
+    <div class="main-content" id="wrapper" data-hook>
       <div class="container">
         <div class="row">
           <div class="<%= 'with-sidebar ' if content_for?(:sidebar) %>" id="content" data-hook>
@@ -47,7 +24,7 @@
               <%= yield %>
             </div>
 
-            <%= render :partial => 'spree/admin/shared/sidebar' %>
+            <%= render 'spree/admin/shared/sidebar' %>
           </div>
         </div>
       </div>