From 27bdef1ff90e0294477e1a3a76ca69cc38de7328 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Mon, 30 Jan 2017 14:18:46 +0100
Subject: [PATCH 01/13] Add new mixin and variables for media queries

---
 .../spree/backend/globals/_mixins.css         |  1 +
 .../spree/backend/globals/_variables.scss     | 10 +++++++
 .../spree/backend/globals/mixins/_media.scss  | 28 +++++++++++++++++++
 .../spree/backend/shared/_skeleton.scss       |  6 ++--
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 backend/app/assets/stylesheets/spree/backend/globals/mixins/_media.scss

diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css b/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
index 599cf81dabb..de1cc1c2808 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
@@ -1,2 +1,3 @@
 @import "mixins/caret";
 @import "mixins/line_through";
+@import "mixins/media";
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index 3ca5bdeb591..d1c8c529f28 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -206,3 +206,13 @@ $z-index-navbar-flyout:          1000 !default;
 // Sidebar
 //--------------------------------------------------------------
 $border-sidebar:                 1px solid $color-sidebar-border !default;
+
+// Media queries
+//--------------------------------------------------------------
+$tablet-width: 959px + $width-sidebar;
+$mobile-portrait-width: 767px + $width-sidebar;
+$mobile-landscape-width: 480px + $width-sidebar;
+
+$tablet: "only screen and (min-width: #{$mobile-portrait-width + 1}) and (max-width: #{$tablet-width})";
+$mobile-portrait: "only screen and (max-width: #{$mobile-portrait-width})";
+$mobile-landscape: "only screen and (min-width: #{$mobile-landscape-width}) and (max-width: #{$mobile-portrait-width})";
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_media.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_media.scss
new file mode 100644
index 00000000000..49ce2bc82d5
--- /dev/null
+++ b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_media.scss
@@ -0,0 +1,28 @@
+/// Outputs a media-query block.
+///
+/// @param {String} $media-query
+///   A string corresponding to the media query to target.
+///
+/// @example scss - Usage
+///   .responsive-element {
+///      color: blue;
+///      @include media("screen and (min-width: 480px)") {
+///        color: red;
+///      }
+///   }
+///
+/// @example css - CSS Output
+///  .responsive-element {
+///    color: blue;
+///  }
+///  @media screen and (min-width: 480px) {
+///    .responsive-element {
+///      color: red;
+///    }
+///  }
+
+@mixin media($media-query) {
+  @media #{$media-query} {
+    @content;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
index 880135bb39a..684cd161a5d 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
@@ -76,7 +76,7 @@
 
     /* Note: Design for a width of 768px */
 
-    @media only screen and (min-width: 768px + $width-sidebar) and (max-width: 959px + $width-sidebar) {
+    @include media($tablet) {
         .container                                  { width: 768px; }
         .container .column,
         .container .columns                         { margin-left: 10px; margin-right: 10px;  }
@@ -129,7 +129,7 @@
 
     /* Note: Design for a width of 320px */
 
-    @media only screen and (max-width: 767px + $width-sidebar) {
+    @include media($mobile-portrait) {
         .container { width: 300px; }
         .container .columns,
         .container .column { margin: 0; }
@@ -179,7 +179,7 @@
 
     /* Note: Design for a width of 480px */
 
-    @media only screen and (min-width: 480px + $width-sidebar) and (max-width: 767px + $width-sidebar) {
+    @include media($mobile-landscape) {
         .container { width: 420px; }
         .container .columns,
         .container .column { margin: 0; }

From 55a168d2ed372858342c991f9e53da0329192f0c Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Tue, 31 Jan 2017 09:57:46 +0100
Subject: [PATCH 02/13] Improve navigation on smaller screens

- reduce navigation width
- hide the subnav on smaller screens and make it appear only on link
  hover
- collapse the left menu only on mobile landscape
---
 .../spree/backend/components/_navigation.scss | 50 +++++++++++++------
 .../spree/backend/globals/_mixins.css         |  1 +
 .../spree/backend/globals/_variables.scss     |  1 +
 .../spree/backend/globals/mixins/_flyout.scss | 16 ++++++
 .../spree/backend/shared/_header.scss         |  3 ++
 .../spree/backend/shared/_layout.scss         |  6 +++
 .../spree/backend/shared/_skeleton.scss       |  2 -
 7 files changed, 63 insertions(+), 16 deletions(-)
 create mode 100644 backend/app/assets/stylesheets/spree/backend/globals/mixins/_flyout.scss

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 91abe39158f..0908394580f 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -30,6 +30,9 @@ nav.menu {
   border-right: $border-sidebar;
   background: $color-sidebar-bg;
   z-index: $z-index-navbar-flyout;
+  @include media($mobile-landscape) {
+    width: $width-sidebar-collapsed;
+  }
 }
 
 .admin-nav-header {
@@ -46,6 +49,9 @@ nav.menu {
 
   img {
     vertical-align: middle;
+    @include media($mobile-landscape) {
+      display: none;
+    }
   }
 }
 
@@ -69,16 +75,32 @@ nav.menu {
 
     &.selected {
       background: $color-navbar-active-bg;
+      @include media($mobile-landscape) {
+        position: relative;
+      }
 
       > a {
         color: $color-navbar-active;
       }
+
+      // flyout nav
+      > ul {
+        @include media($mobile-landscape) {
+          @include flyout;
+        }
+      }
     }
 
     &.selected li {
       padding-left: 2em;
     }
 
+    &.selected:not(:hover) > ul {
+      @include media($mobile-landscape) {
+        display: none;
+      }
+    }
+
     &:not(.selected):not(:hover) > ul {
       display: none;
     }
@@ -88,21 +110,8 @@ nav.menu {
 
       // flyout nav
       > ul {
-        position: absolute;
-        top: 0;
-        left: 100%;
-        width: $width-sidebar-flyout;
-        margin-left: 0;
-        border: $border-sidebar;
-        background: $color-navbar-submenu-bg;
-        box-shadow: $box-shadow;
-        @include caret($direction: left, $color-caret: $color-navbar-submenu-bg);
-
-      &:before {
-        z-index: 1;
-        top: 1.5em;
+        @include flyout;
       }
-     }
     }
   }
 
@@ -115,6 +124,9 @@ nav.menu {
 
   .icon_link {
     text-indent: 2em;
+    @include media($mobile-landscape) {
+      text-indent: 1.5em;
+    }
 
     &:before {
       position: absolute;
@@ -128,6 +140,10 @@ nav.menu {
     font-family: $base-font-family;
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
+    @include media($mobile-landscape) {
+      @include hide-text;
+      display: block;
+    }
   }
 
   .admin-subnav {
@@ -173,6 +189,9 @@ nav.menu {
   width: $width-sidebar;
   border-top: $border-sidebar;
   border-right: $border-sidebar;
+  @include media($mobile-landscape) {
+    width: $width-sidebar-collapsed;
+  }
 }
 
 .admin-login-nav {
@@ -182,6 +201,9 @@ nav.menu {
 
   li {
     padding: 0.3rem 1.2rem;
+    @include media($mobile-landscape) {
+      padding: 0.3rem 0.5rem 0.3rem 1.1rem;
+    }
   }
 
   a {
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css b/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
index de1cc1c2808..7abdb0a598d 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_mixins.css
@@ -1,3 +1,4 @@
 @import "mixins/caret";
+@import "mixins/flyout";
 @import "mixins/line_through";
 @import "mixins/media";
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index d1c8c529f28..c54e751a957 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -198,6 +198,7 @@ $font-weight-normal:             400 !default;
 
 $width-sidebar:                  200px !default;
 $width-sidebar-flyout:           225px !default;
+$width-sidebar-collapsed:        42px !default;
 
 // Stacking
 //--------------------------------------------------------------
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/mixins/_flyout.scss b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_flyout.scss
new file mode 100644
index 00000000000..5867d8b7fd6
--- /dev/null
+++ b/backend/app/assets/stylesheets/spree/backend/globals/mixins/_flyout.scss
@@ -0,0 +1,16 @@
+@mixin flyout {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: $width-sidebar-flyout;
+  margin-left: 0;
+  border: $border-sidebar;
+  background: $color-navbar-submenu-bg;
+  box-shadow: $box-shadow;
+  @include caret($direction: left, $color-caret: $color-navbar-submenu-bg);
+
+  &:before {
+    z-index: 1;
+    top: 1.5em;
+  }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
index 26a61c839db..c01e866f468 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -7,6 +7,9 @@
 
   body:not(.new-layout) & {
     margin-left: $width-sidebar;
+    @include media($mobile-landscape) {
+      margin-left: $width-sidebar-collapsed;
+    }
   }
 
   @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
index 58d7c1a501d..a1b4f1e5d1f 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -8,6 +8,9 @@ body {
 
   &.new-layout {
     padding-left: $width-sidebar;
+    @include media($mobile-landscape) {
+      padding-left: $width-sidebar-collapsed;
+    }
   }
 }
 
@@ -23,6 +26,9 @@ body {
 .content-wrapper {
   body:not(.new-layout) & {
     margin-left: $width-sidebar;
+    @include media($mobile-landscape) {
+      margin-left: $width-sidebar-collapsed;
+    }
     @media print { margin-left: 0 }
   }
 
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
index 684cd161a5d..3528796e3be 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
@@ -130,7 +130,6 @@
     /* Note: Design for a width of 320px */
 
     @include media($mobile-portrait) {
-        .container { width: 300px; }
         .container .columns,
         .container .column { margin: 0; }
 
@@ -180,7 +179,6 @@
     /* Note: Design for a width of 480px */
 
     @include media($mobile-landscape) {
-        .container { width: 420px; }
         .container .columns,
         .container .column { margin: 0; }
 

From 51c589364b58de0ce23221cfaad674faa79934a5 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Tue, 31 Jan 2017 16:41:41 +0100
Subject: [PATCH 03/13] Update admin layout media queries

---
 .../spree/backend/components/_navigation.scss | 55 ++++++++++++++----
 .../spree/backend/globals/_variables.scss     | 12 ++--
 .../spree/backend/shared/_header.scss         |  5 +-
 .../spree/backend/shared/_layout.scss         | 10 +++-
 .../spree/backend/shared/_skeleton.scss       | 56 +------------------
 5 files changed, 64 insertions(+), 74 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 0908394580f..9484476b0fa 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -30,9 +30,12 @@ nav.menu {
   border-right: $border-sidebar;
   background: $color-sidebar-bg;
   z-index: $z-index-navbar-flyout;
-  @include media($mobile-landscape) {
+  @include media($desktop) {
     width: $width-sidebar-collapsed;
   }
+  @include media($tablet) {
+    width: $width-sidebar;
+  }
 }
 
 .admin-nav-header {
@@ -45,13 +48,16 @@ nav.menu {
   a {
     display: inline-block;
     line-height: 58px;
+    @include media($desktop) {
+      display: none;
+    }
+    @include media($tablet) {
+      display: inline-block;
+    }
   }
 
   img {
     vertical-align: middle;
-    @include media($mobile-landscape) {
-      display: none;
-    }
   }
 }
 
@@ -75,7 +81,7 @@ nav.menu {
 
     &.selected {
       background: $color-navbar-active-bg;
-      @include media($mobile-landscape) {
+      @include media($desktop) {
         position: relative;
       }
 
@@ -85,9 +91,16 @@ nav.menu {
 
       // flyout nav
       > ul {
-        @include media($mobile-landscape) {
+        @include media($desktop) {
           @include flyout;
         }
+        @include media($tablet) {
+          position: relative;
+          left: 0;
+          width: $width-sidebar;
+          border-top: 0;
+          border-bottom: 0;
+        }
       }
     }
 
@@ -96,9 +109,12 @@ nav.menu {
     }
 
     &.selected:not(:hover) > ul {
-      @include media($mobile-landscape) {
+      @include media($desktop) {
         display: none;
       }
+      @include media($tablet) {
+        display: block;
+      }
     }
 
     &:not(.selected):not(:hover) > ul {
@@ -111,6 +127,9 @@ nav.menu {
       // flyout nav
       > ul {
         @include flyout;
+        @include media($tablet) {
+          display: none;
+        }
       }
     }
   }
@@ -124,9 +143,12 @@ nav.menu {
 
   .icon_link {
     text-indent: 2em;
-    @include media($mobile-landscape) {
+    @include media($desktop) {
       text-indent: 1.5em;
     }
+    @include media($tablet) {
+      text-indent: 2em;
+    }
 
     &:before {
       position: absolute;
@@ -140,10 +162,13 @@ nav.menu {
     font-family: $base-font-family;
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
-    @include media($mobile-landscape) {
-      @include hide-text;
+    @include media($desktop) {
+      overflow: hidden;
       display: block;
     }
+    @include media($tablet) {
+      overflow: visible;
+    }
   }
 
   .admin-subnav {
@@ -189,9 +214,12 @@ nav.menu {
   width: $width-sidebar;
   border-top: $border-sidebar;
   border-right: $border-sidebar;
-  @include media($mobile-landscape) {
+  @include media($desktop) {
     width: $width-sidebar-collapsed;
   }
+  @include media($tablet) {
+    width: $width-sidebar;
+  }
 }
 
 .admin-login-nav {
@@ -201,9 +229,12 @@ nav.menu {
 
   li {
     padding: 0.3rem 1.2rem;
-    @include media($mobile-landscape) {
+    @include media($desktop) {
       padding: 0.3rem 0.5rem 0.3rem 1.1rem;
     }
+    @include media($tablet) {
+      padding: 0.3rem 1.2rem;
+    }
   }
 
   a {
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index c54e751a957..3f5ea237dc5 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -210,10 +210,10 @@ $border-sidebar:                 1px solid $color-sidebar-border !default;
 
 // Media queries
 //--------------------------------------------------------------
-$tablet-width: 959px + $width-sidebar;
-$mobile-portrait-width: 767px + $width-sidebar;
-$mobile-landscape-width: 480px + $width-sidebar;
+$desktop-width: 959px;
+$tablet-width: 768px;
+$mobile-width: 480px;
 
-$tablet: "only screen and (min-width: #{$mobile-portrait-width + 1}) and (max-width: #{$tablet-width})";
-$mobile-portrait: "only screen and (max-width: #{$mobile-portrait-width})";
-$mobile-landscape: "only screen and (min-width: #{$mobile-landscape-width}) and (max-width: #{$mobile-portrait-width})";
+$desktop: "only screen and (max-width: #{$desktop-width})";
+$tablet: "only screen and (max-width: #{$tablet-width})";
+$mobile: "only screen and (max-width: #{$mobile-width})";
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
index c01e866f468..6eb735f9f76 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -7,9 +7,12 @@
 
   body:not(.new-layout) & {
     margin-left: $width-sidebar;
-    @include media($mobile-landscape) {
+    @include media($desktop) {
       margin-left: $width-sidebar-collapsed;
     }
+    @include media($tablet) {
+      margin-left: 0;
+    }
   }
 
   @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
index a1b4f1e5d1f..f8561f1b6ec 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -8,9 +8,12 @@ body {
 
   &.new-layout {
     padding-left: $width-sidebar;
-    @include media($mobile-landscape) {
+    @include media($desktop) {
       padding-left: $width-sidebar-collapsed;
     }
+    @include media($tablet) {
+      padding-left: 0;
+    }
   }
 }
 
@@ -26,9 +29,12 @@ body {
 .content-wrapper {
   body:not(.new-layout) & {
     margin-left: $width-sidebar;
-    @include media($mobile-landscape) {
+    @include media($desktop) {
       margin-left: $width-sidebar-collapsed;
     }
+    @include media($tablet) {
+      margin-left: 0;
+    }
     @media print { margin-left: 0 }
   }
 
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
index 3528796e3be..b6f12a0cc52 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
@@ -71,7 +71,7 @@
 
 
 
-/* #Tablet (Portrait)
+/* #Tablet
 ================================================== */
 
     /* Note: Design for a width of 768px */
@@ -123,62 +123,12 @@
         .container .offset-by-fifteen               { padding-left: 720px; }
     }
 
-
-/*  #Mobile (Portrait)
-================================================== */
-
-    /* Note: Design for a width of 320px */
-
-    @include media($mobile-portrait) {
-        .container .columns,
-        .container .column { margin: 0; }
-
-        .container .one.column,
-        .container .one.columns,
-        .container .two.columns,
-        .container .three.columns,
-        .container .four.columns,
-        .container .five.columns,
-        .container .six.columns,
-        .container .seven.columns,
-        .container .eight.columns,
-        .container .nine.columns,
-        .container .ten.columns,
-        .container .eleven.columns,
-        .container .twelve.columns,
-        .container .thirteen.columns,
-        .container .fourteen.columns,
-        .container .fifteen.columns,
-        .container .sixteen.columns,
-        .container .one-third.column,
-        .container .two-thirds.column  { width: 300px; }
-
-        /* Offsets */
-        .container .offset-by-one,
-        .container .offset-by-two,
-        .container .offset-by-three,
-        .container .offset-by-four,
-        .container .offset-by-five,
-        .container .offset-by-six,
-        .container .offset-by-seven,
-        .container .offset-by-eight,
-        .container .offset-by-nine,
-        .container .offset-by-ten,
-        .container .offset-by-eleven,
-        .container .offset-by-twelve,
-        .container .offset-by-thirteen,
-        .container .offset-by-fourteen,
-        .container .offset-by-fifteen { padding-left: 0; }
-
-    }
-
-
-/* #Mobile (Landscape)
+/* #Mobile
 ================================================== */
 
     /* Note: Design for a width of 480px */
 
-    @include media($mobile-landscape) {
+    @include media($mobile) {
         .container .columns,
         .container .column { margin: 0; }
 

From 2d112faf03da6e5e49e801453e2114db67e4ab43 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Wed, 1 Feb 2017 17:17:37 +0100
Subject: [PATCH 04/13] Add mobile hamburger menu

---
 .../spree/backend/components/_breadcrumb.scss |  3 ++
 .../spree/backend/components/_navigation.scss | 51 +++++++++++++++++++
 .../spree/backend/globals/_variables.scss     |  1 +
 .../spree/admin/shared/_navigation.html.erb   |  5 ++
 4 files changed, 60 insertions(+)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
index 53b6a25374d..499e553bc7b 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -1,4 +1,7 @@
 .breadcrumb {
   font-size: 16px;
   margin-bottom: 0;
+  @include media($tablet) {
+    padding-left: 65px;
+  }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 9484476b0fa..52d49d67155 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -2,6 +2,55 @@ $padding-x-navbar: 26px;
 $padding-y-navbar: 13px;
 $padding-y-navbar-submenu: 9px;
 
+.menu-button-icon {
+  position: absolute;
+  top: 22px;
+  left: 30px;
+  width: 34px;
+  height: 32px;
+  background: $color-btn-bg;
+  color: $color-btn-text;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+  display: none;
+  z-index: 1;
+  &:hover {
+    background: $color-btn-hover-bg;
+  }
+  @include media($tablet) {
+    display: block;
+  }
+
+  i {
+    padding-top: 7px;
+    color: $color-btn-text;
+    font-size: 18px;
+  }
+}
+
+#menu-button {
+  display: none;
+  &:checked ~ .admin-nav {
+    margin: 0;
+  }
+  &:checked ~ .menu-button-icon  {
+    left: $width-sidebar + 30px;
+  }
+  &:checked ~ .content-wrapper  {
+    transform:translate3d($width-sidebar, 0, 0);
+    @include media($large-device) {
+      transform: none;
+    }
+  }
+  &:checked ~ .main-header  {
+    transform:translate3d($width-sidebar, 0, 0);
+    @include media($large-device) {
+      transform: none;
+    }
+  }
+}
+
 nav.menu {
   ul {
     list-style: none;
@@ -34,6 +83,8 @@ nav.menu {
     width: $width-sidebar-collapsed;
   }
   @include media($tablet) {
+    position: fixed;
+    margin: 0 0 0 -200px;
     width: $width-sidebar;
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
index 3f5ea237dc5..14a9c88ed5a 100644
--- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
+++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss
@@ -214,6 +214,7 @@ $desktop-width: 959px;
 $tablet-width: 768px;
 $mobile-width: 480px;
 
+$large-device: "only screen and (min-width: #{$tablet-width})";
 $desktop: "only screen and (max-width: #{$desktop-width})";
 $tablet: "only screen and (max-width: #{$tablet-width})";
 $mobile: "only screen and (max-width: #{$mobile-width})";
diff --git a/backend/app/views/spree/admin/shared/_navigation.html.erb b/backend/app/views/spree/admin/shared/_navigation.html.erb
index 42390adb71f..d823547f777 100644
--- a/backend/app/views/spree/admin/shared/_navigation.html.erb
+++ b/backend/app/views/spree/admin/shared/_navigation.html.erb
@@ -1,3 +1,8 @@
+<input type="checkbox" id="menu-button" />
+<label for="menu-button" class="menu-button-icon">
+  <i class="fa fa-bars"></i>
+</label>
+
 <div class="admin-nav">
   <%= render partial: 'spree/admin/shared/navigation_header' %>
   <div class="admin-nav-sticky">

From 062380436ab0c11c1c0924c803a5dced7e9c56eb Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Thu, 2 Feb 2017 11:03:45 +0100
Subject: [PATCH 05/13] Truncate breadcrumb text on small screen sizes

in order to avoid multiple lines and to fit right in the app header
---
 .../spree/backend/components/_breadcrumb.scss       | 13 ++++++++++++-
 .../stylesheets/spree/backend/shared/_header.scss   |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
index 499e553bc7b..6934a4026af 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -2,6 +2,17 @@
   font-size: 16px;
   margin-bottom: 0;
   @include media($tablet) {
-    padding-left: 65px;
+    padding-left: 60px;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  li {
+    @include media($tablet) {
+      float: none;
+      display: inline;
+    }
   }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
index 6eb735f9f76..8ae0fb7026a 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -32,6 +32,7 @@
 
 .header-actions {
   flex-grow: 1;
+  padding: 0;
   text-align: right;
   line-height: 38px;
 

From 321cdac1cdeff1146bd3a86a96002f57e25c7e85 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Thu, 2 Feb 2017 13:04:38 +0100
Subject: [PATCH 06/13] Add new div containers to wrap admin content

this is needed to prevent scrolling or scrollbar to appear
when the mobile menu is open
---
 .../spree/backend/components/_breadcrumb.scss |  1 -
 .../spree/backend/components/_navigation.scss | 23 ++-----
 .../views/spree/admin/shared/_header.html.erb |  4 ++
 .../spree/admin/shared/_navigation.html.erb   |  5 --
 .../app/views/spree/layouts/admin.html.erb    | 66 +++++++++++--------
 5 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
index 6934a4026af..291064d0ec5 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss
@@ -2,7 +2,6 @@
   font-size: 16px;
   margin-bottom: 0;
   @include media($tablet) {
-    padding-left: 60px;
     font-size: 14px;
     white-space: nowrap;
     overflow: hidden;
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 52d49d67155..a572d078adf 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -3,18 +3,15 @@ $padding-y-navbar: 13px;
 $padding-y-navbar-submenu: 9px;
 
 .menu-button-icon {
-  position: absolute;
-  top: 22px;
-  left: 30px;
   width: 34px;
   height: 32px;
+  margin-right: 10px;
   background: $color-btn-bg;
   color: $color-btn-text;
   border-radius: 4px;
   text-align: center;
   cursor: pointer;
   display: none;
-  z-index: 1;
   &:hover {
     background: $color-btn-hover-bg;
   }
@@ -31,20 +28,14 @@ $padding-y-navbar-submenu: 9px;
 
 #menu-button {
   display: none;
-  &:checked ~ .admin-nav {
-    margin: 0;
-  }
-  &:checked ~ .menu-button-icon  {
-    left: $width-sidebar + 30px;
+  &:checked ~ .admin-wrapper  {
+    overflow: hidden;
   }
-  &:checked ~ .content-wrapper  {
-    transform:translate3d($width-sidebar, 0, 0);
-    @include media($large-device) {
-      transform: none;
-    }
+  &:checked ~ .admin-wrapper .admin-nav {
+    margin: 0;
   }
-  &:checked ~ .main-header  {
-    transform:translate3d($width-sidebar, 0, 0);
+  &:checked ~ .admin-wrapper .admin-content  {
+    @include transform(translate3d($width-sidebar, 0, 0));
     @include media($large-device) {
       transform: none;
     }
diff --git a/backend/app/views/spree/admin/shared/_header.html.erb b/backend/app/views/spree/admin/shared/_header.html.erb
index e51fd200005..32b6956d66d 100644
--- a/backend/app/views/spree/admin/shared/_header.html.erb
+++ b/backend/app/views/spree/admin/shared/_header.html.erb
@@ -1,4 +1,8 @@
 <div id="content-header" class="main-header" data-hook>
+  <label for="menu-button" class="menu-button-icon">
+    <i class="fa fa-bars"></i>
+  </label>
+  
   <%= render_admin_breadcrumbs %>
 
   <% if content_for?(:page_actions) %>
diff --git a/backend/app/views/spree/admin/shared/_navigation.html.erb b/backend/app/views/spree/admin/shared/_navigation.html.erb
index d823547f777..42390adb71f 100644
--- a/backend/app/views/spree/admin/shared/_navigation.html.erb
+++ b/backend/app/views/spree/admin/shared/_navigation.html.erb
@@ -1,8 +1,3 @@
-<input type="checkbox" id="menu-button" />
-<label for="menu-button" class="menu-button-icon">
-  <i class="fa fa-bars"></i>
-</label>
-
 <div class="admin-nav">
   <%= render partial: 'spree/admin/shared/navigation_header' %>
   <div class="admin-nav-sticky">
diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb
index 7d5611f3720..654419efc13 100644
--- a/backend/app/views/spree/layouts/admin.html.erb
+++ b/backend/app/views/spree/layouts/admin.html.erb
@@ -5,42 +5,50 @@
   </head>
 
   <body class="admin <%= "new-layout" if @admin_layout %>">
-    <%= render "spree/admin/shared/navigation" %>
-    <%= render "spree/admin/shared/header" %>
-    <%= render "spree/admin/shared/flash" %>
-    <%= render "spree/admin/shared/spinner" %>
+    <input type="checkbox" id="menu-button" />
+    
+    <div class="admin-wrapper">
 
-    <div class="content-wrapper <%= @admin_layout.presence %> <%= "has-sidebar" if content_for?(:sidebar) %>" id="wrapper" data-hook>
-      <% if @admin_layout %>
-        <div class="content">
-          <div class="content-main">
-            <%= yield :tabs %>
-            <%= render "spree/admin/shared/table_filter" %>
-            <%= yield %>
-          </div>
+      <%= render "spree/admin/shared/navigation" %>
 
-          <%= render "spree/admin/shared/sidebar" %>
-        </div>
-      <% else %>
-        <% # Legacy layout %>
-        <div class="container">
-          <div class="<%= 'with-sidebar ' if content_for?(:sidebar) %>" id="content" data-hook>
-            <div class="row">
-              <% if content_for?(:tabs) %>
-                <div class="col-xs-12">
-                  <%= yield :tabs %>
-                </div>
-              <% end %>
-              <div class="js-content-below-tabs <%= if content_for?(:sidebar) then 'col-xs-9' else 'col-xs-12' end %>">
-                <%= render :partial => 'spree/admin/shared/table_filter' %>
+      <div class="admin-content">
+        <%= render "spree/admin/shared/header" %>
+        <%= render "spree/admin/shared/flash" %>
+        <%= render "spree/admin/shared/spinner" %>
+
+        <div class="content-wrapper <%= @admin_layout.presence %> <%= "has-sidebar" if content_for?(:sidebar) %>" id="wrapper" data-hook>
+          <% if @admin_layout %>
+            <div class="content">
+              <div class="content-main">
+                <%= yield :tabs %>
+                <%= render "spree/admin/shared/table_filter" %>
                 <%= yield %>
               </div>
 
-              <%= render 'spree/admin/shared/sidebar' %>
+              <%= render "spree/admin/shared/sidebar" %>
+            </div>
+          <% else %>
+            <% # Legacy layout %>
+            <div class="container">
+              <div class="<%= 'with-sidebar ' if content_for?(:sidebar) %>" id="content" data-hook>
+                <div class="row">
+                  <% if content_for?(:tabs) %>
+                    <div class="col-xs-12">
+                      <%= yield :tabs %>
+                    </div>
+                  <% end %>
+                  <div class="js-content-below-tabs <%= if content_for?(:sidebar) then 'col-xs-9' else 'col-xs-12' end %>">
+                    <%= render :partial => 'spree/admin/shared/table_filter' %>
+                    <%= yield %>
+                  </div>
+
+                  <%= render 'spree/admin/shared/sidebar' %>
+                </div>
+              </div>
             </div>
-          </div>
+          <% end %>
         </div>
-      <% end %>
+      </div>
     </div>
 
     <div data-hook="admin_footer_scripts"></div>

From b9d3fd09969bce69d4917dc1262e03ca9df97662 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Mon, 6 Feb 2017 10:30:26 +0100
Subject: [PATCH 07/13] Update admin flash messages layout

---
 .../stylesheets/spree/backend/components/_messages.scss     | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
index 3f084b3f320..d0623e68302 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -28,6 +28,12 @@
 .flash-wrapper {
   @include position(fixed, null 0 0 $width-sidebar);
   z-index: 1000;
+  @include media($desktop) {
+    @include position(fixed, null 0 0 $width-sidebar-collapsed);
+  }
+  @include media($desktop) {
+    @include position(fixed, null 0 0 0);
+  }
 }
 
 .flash {

From 8ecde3132bdad1e80c4350f6b2d4c3b9947ce684 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Mon, 6 Feb 2017 11:11:10 +0100
Subject: [PATCH 08/13] Restore skeleton layout

---
 .../spree/backend/shared/_skeleton.scss       | 60 +++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
index b6f12a0cc52..880135bb39a 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_skeleton.scss
@@ -71,12 +71,12 @@
 
 
 
-/* #Tablet
+/* #Tablet (Portrait)
 ================================================== */
 
     /* Note: Design for a width of 768px */
 
-    @include media($tablet) {
+    @media only screen and (min-width: 768px + $width-sidebar) and (max-width: 959px + $width-sidebar) {
         .container                                  { width: 768px; }
         .container .column,
         .container .columns                         { margin-left: 10px; margin-right: 10px;  }
@@ -123,12 +123,64 @@
         .container .offset-by-fifteen               { padding-left: 720px; }
     }
 
-/* #Mobile
+
+/*  #Mobile (Portrait)
+================================================== */
+
+    /* Note: Design for a width of 320px */
+
+    @media only screen and (max-width: 767px + $width-sidebar) {
+        .container { width: 300px; }
+        .container .columns,
+        .container .column { margin: 0; }
+
+        .container .one.column,
+        .container .one.columns,
+        .container .two.columns,
+        .container .three.columns,
+        .container .four.columns,
+        .container .five.columns,
+        .container .six.columns,
+        .container .seven.columns,
+        .container .eight.columns,
+        .container .nine.columns,
+        .container .ten.columns,
+        .container .eleven.columns,
+        .container .twelve.columns,
+        .container .thirteen.columns,
+        .container .fourteen.columns,
+        .container .fifteen.columns,
+        .container .sixteen.columns,
+        .container .one-third.column,
+        .container .two-thirds.column  { width: 300px; }
+
+        /* Offsets */
+        .container .offset-by-one,
+        .container .offset-by-two,
+        .container .offset-by-three,
+        .container .offset-by-four,
+        .container .offset-by-five,
+        .container .offset-by-six,
+        .container .offset-by-seven,
+        .container .offset-by-eight,
+        .container .offset-by-nine,
+        .container .offset-by-ten,
+        .container .offset-by-eleven,
+        .container .offset-by-twelve,
+        .container .offset-by-thirteen,
+        .container .offset-by-fourteen,
+        .container .offset-by-fifteen { padding-left: 0; }
+
+    }
+
+
+/* #Mobile (Landscape)
 ================================================== */
 
     /* Note: Design for a width of 480px */
 
-    @include media($mobile) {
+    @media only screen and (min-width: 480px + $width-sidebar) and (max-width: 767px + $width-sidebar) {
+        .container { width: 420px; }
         .container .columns,
         .container .column { margin: 0; }
 

From 14f07bc568eb9acf4375fd48abc5c1bbc3e0f66e Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Mon, 6 Feb 2017 12:48:34 +0100
Subject: [PATCH 09/13] Add min-height to admin wrapper to prevent bounce
 effect

while scrolling when window height is small
---
 .../app/assets/stylesheets/spree/backend/shared/_layout.scss  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
index f8561f1b6ec..41b73c8e452 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -17,6 +17,10 @@ body {
   }
 }
 
+.admin-wrapper {
+  min-height: 100vh;
+}
+
 .admin-nav {
   @include position(absolute, 0 null 0 0);
   width: $width-sidebar;

From ed5f03f60845fd6ba4b0a009bac2e15115096ad5 Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Mon, 6 Feb 2017 15:55:20 +0100
Subject: [PATCH 10/13] Fix admin scroll behavior

- prevent jquery Sticky-kit plugin to create unnecessary divs
- prevent admin nav content stick when scrolling on mobile
- disable Sticky-kit on mobile
- make admin nav scrollable on mobile
---
 .../javascripts/spree/backend/navigation.coffee | 17 ++++++++++++++---
 .../spree/backend/components/_navigation.scss   |  6 +++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/backend/app/assets/javascripts/spree/backend/navigation.coffee b/backend/app/assets/javascripts/spree/backend/navigation.coffee
index 79f5113de29..8e1cb25bf08 100644
--- a/backend/app/assets/javascripts/spree/backend/navigation.coffee
+++ b/backend/app/assets/javascripts/spree/backend/navigation.coffee
@@ -4,7 +4,18 @@ navHeight = ->
 checkSideBarFit = ->
   $('.admin-nav').toggleClass('fits', navHeight() < $(window).height())
 
-$ ->
-  $(".admin-nav-sticky, .admin-nav").stick_in_parent()
+checkSticky = ->
+  stickyElements = $('.admin-nav-sticky, .admin-nav')
+
+  if $(window).width() < 768
+    stickyElements.trigger 'sticky_kit:detach'
+  else
+    stickyElements.stick_in_parent(spacer: false)
+
+adjustNavigation = ->
   checkSideBarFit()
-  $(window).on('resize', checkSideBarFit)
+  checkSticky()
+
+$ ->
+  adjustNavigation()
+  $(window).on('resize', adjustNavigation)
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index a572d078adf..fa10fc03889 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -74,9 +74,12 @@ nav.menu {
     width: $width-sidebar-collapsed;
   }
   @include media($tablet) {
+    width: $width-sidebar;
     position: fixed;
     margin: 0 0 0 -200px;
-    width: $width-sidebar;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 }
 
@@ -261,6 +264,7 @@ nav.menu {
   }
   @include media($tablet) {
     width: $width-sidebar;
+    position: relative;
   }
 }
 

From 69eb16a45e649719e9daabad80ccf44b7d4d6b4f Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Tue, 7 Feb 2017 10:43:09 +0100
Subject: [PATCH 11/13] Refactor collapsible menu code

---
 .../spree/backend/components/_messages.scss   |  6 +-
 .../spree/backend/components/_navigation.scss | 57 ++++++++++---------
 .../app/views/spree/layouts/admin.html.erb    |  3 +-
 3 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
index d0623e68302..59a6e0434f6 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss
@@ -29,10 +29,10 @@
   @include position(fixed, null 0 0 $width-sidebar);
   z-index: 1000;
   @include media($desktop) {
-    @include position(fixed, null 0 0 $width-sidebar-collapsed);
+    left: $width-sidebar-collapsed;
   }
-  @include media($desktop) {
-    @include position(fixed, null 0 0 0);
+  @include media($tablet) {
+    left: 0;
   }
 }
 
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index fa10fc03889..0f82deab46e 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -28,16 +28,19 @@ $padding-y-navbar-submenu: 9px;
 
 #menu-button {
   display: none;
-  &:checked ~ .admin-wrapper  {
+
+  &:checked ~ .admin-wrapper {
     overflow: hidden;
-  }
-  &:checked ~ .admin-wrapper .admin-nav {
-    margin: 0;
-  }
-  &:checked ~ .admin-wrapper .admin-content  {
-    @include transform(translate3d($width-sidebar, 0, 0));
-    @include media($large-device) {
-      transform: none;
+
+    .admin-nav {
+      @include transform(translateX(0));
+    }
+
+    .admin-content  {
+      @include transform(translateX($width-sidebar));
+      @include media($large-device) {
+        transform: none;
+      }
     }
   }
 }
@@ -74,9 +77,9 @@ nav.menu {
     width: $width-sidebar-collapsed;
   }
   @include media($tablet) {
+    @include transform(translateX(-$width-sidebar));
     width: $width-sidebar;
     position: fixed;
-    margin: 0 0 0 -200px;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
@@ -130,11 +133,15 @@ nav.menu {
         position: relative;
       }
 
-      > a {
-        color: $color-navbar-active;
+      &:not(:hover) > ul {
+        @include media($desktop) {
+          display: none;
+        }
+        @include media($tablet) {
+          display: block;
+        }
       }
 
-      // flyout nav
       > ul {
         @include media($desktop) {
           @include flyout;
@@ -147,35 +154,29 @@ nav.menu {
           border-bottom: 0;
         }
       }
-    }
-
-    &.selected li {
-      padding-left: 2em;
-    }
 
-    &.selected:not(:hover) > ul {
-      @include media($desktop) {
-        display: none;
-      }
-      @include media($tablet) {
-        display: block;
+      li {
+        padding-left: 2em;
       }
-    }
 
-    &:not(.selected):not(:hover) > ul {
-      display: none;
+      > a {
+        color: $color-navbar-active;
+      }
     }
 
     &:not(.selected) {
       position: relative;
 
-      // flyout nav
       > ul {
         @include flyout;
         @include media($tablet) {
           display: none;
         }
       }
+
+      &:not(:hover) > ul {
+        display: none;
+      }
     }
   }
 
diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb
index 654419efc13..b372a71d24c 100644
--- a/backend/app/views/spree/layouts/admin.html.erb
+++ b/backend/app/views/spree/layouts/admin.html.erb
@@ -6,9 +6,8 @@
 
   <body class="admin <%= "new-layout" if @admin_layout %>">
     <input type="checkbox" id="menu-button" />
-    
-    <div class="admin-wrapper">
 
+    <div class="admin-wrapper">
       <%= render "spree/admin/shared/navigation" %>
 
       <div class="admin-content">

From 9e6ba1ae7c94bebe66082db87f4bc6efbdf3c9eb Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Tue, 7 Feb 2017 11:05:20 +0100
Subject: [PATCH 12/13] Remove Bourbon deprecated mixins

---
 .../stylesheets/spree/backend/components/_navigation.scss   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 0f82deab46e..0aacc9d0f15 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -33,11 +33,11 @@ $padding-y-navbar-submenu: 9px;
     overflow: hidden;
 
     .admin-nav {
-      @include transform(translateX(0));
+      transform: translateX(0);
     }
 
     .admin-content  {
-      @include transform(translateX($width-sidebar));
+      transform: translateX($width-sidebar);
       @include media($large-device) {
         transform: none;
       }
@@ -77,12 +77,12 @@ nav.menu {
     width: $width-sidebar-collapsed;
   }
   @include media($tablet) {
-    @include transform(translateX(-$width-sidebar));
     width: $width-sidebar;
     position: fixed;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
+    transform: translateX(-$width-sidebar)
   }
 }
 

From f43ceb71913611096a45327c5f9d9ecf0061548b Mon Sep 17 00:00:00 2001
From: Davide Di Stefano <davidedistefano4@gmail.com>
Date: Tue, 14 Feb 2017 14:22:57 +0100
Subject: [PATCH 13/13] Update header logo height

---
 .../stylesheets/spree/backend/components/_navigation.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
index 0aacc9d0f15..46f974119ce 100644
--- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
+++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss
@@ -88,19 +88,23 @@ nav.menu {
 
 .admin-nav-header {
   padding: 15px;
-  height: 58px; // height of .page-title
+  height: 47px; // height of .page-title
   box-sizing: content-box;
   background-color: $color-1;
   border-bottom: 1px solid $color-border;
+  @include media($tablet) {
+    height: 44px;
+  }
 
   a {
     display: inline-block;
-    line-height: 58px;
+    line-height: 47px;
     @include media($desktop) {
       display: none;
     }
     @include media($tablet) {
       display: inline-block;
+      line-height: 44px;
     }
   }