Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prepare for new layouts #1012

Merged
merged 11 commits into from
Mar 29, 2016
Merged

Prepare for new layouts #1012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b5d418c
Move utility classes into their own file
graygilmore Mar 29, 2016
4b144dd
Remove our box-sizing declaration
graygilmore Mar 29, 2016
2a27482
Remove IE conditionals from the layout
graygilmore Mar 29, 2016
ab5eb71
Move header texts out of 16 column skeleton
Murph33 Mar 3, 2016
f1b2ac1
Remove toolbar div
Murph33 Mar 4, 2016
0bd9511
Remove yield page_title_classes
Murph33 Mar 4, 2016
be0d1e5
Rename header partial to navigation header
graygilmore Mar 29, 2016
b958860
Move content header outside of the content wrapper
graygilmore Mar 29, 2016
54eaa4b
Move flashes and the spinner outside of the content
graygilmore Mar 29, 2016
5af15b8
Move admin nav styles into the proper file
graygilmore Mar 29, 2016
6fe6d6a
Remove unused footer styles from the admin
graygilmore Mar 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions backend/app/assets/stylesheets/spree/backend/components/_progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 1000;
opacity: 0.8;
@include calc(width, "100% - #{$width-sidebar}");
Expand Down
30 changes: 30 additions & 0 deletions backend/app/assets/stylesheets/spree/backend/shared/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
106 changes: 0 additions & 106 deletions backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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%;
}
Expand All @@ -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;
}
35 changes: 35 additions & 0 deletions backend/app/assets/stylesheets/spree/backend/shared/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 2 additions & 0 deletions backend/app/assets/stylesheets/spree/backend/spree_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
23 changes: 0 additions & 23 deletions backend/app/views/spree/admin/shared/_content_header.html.erb
View file
Open in desktop

This file was deleted.

11 changes: 11 additions & 0 deletions backend/app/views/spree/admin/shared/_flash.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 13 additions & 5 deletions backend/app/views/spree/admin/shared/_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %>
2 changes: 1 addition & 1 deletion backend/app/views/spree/admin/shared/_navigation.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
5 changes: 5 additions & 0 deletions backend/app/views/spree/admin/shared/_navigation_header.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 6 additions & 0 deletions backend/app/views/spree/admin/shared/_spinner.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
41 changes: 9 additions & 32 deletions backend/app/views/spree/layouts/admin.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -47,7 +24,7 @@
<%= yield %>
</div>

<%= render :partial => 'spree/admin/shared/sidebar' %>
<%= render 'spree/admin/shared/sidebar' %>
</div>
</div>
</div>
Expand Down