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; } }