diff --git a/backend/app/assets/javascripts/spree/backend.js b/backend/app/assets/javascripts/spree/backend.js index 45ad23734ae..bad500fdd51 100644 --- a/backend/app/assets/javascripts/spree/backend.js +++ b/backend/app/assets/javascripts/spree/backend.js @@ -30,6 +30,7 @@ //= require spree/backend/components/tooltips //= require spree/backend/components/editable_table //= require spree/backend/components/sortable_table +//= require spree/backend/components/admin_nav //= require spree/backend/datepicker //= require spree/backend/flash //= require spree/backend/gateway diff --git a/backend/app/assets/javascripts/spree/backend/components/admin_nav.js b/backend/app/assets/javascripts/spree/backend/components/admin_nav.js new file mode 100644 index 00000000000..5ad9ebf14b2 --- /dev/null +++ b/backend/app/assets/javascripts/spree/backend/components/admin_nav.js @@ -0,0 +1,24 @@ +Spree.ready(function() { + if (window.screen.width <= 1024 && !document.cookie.includes("admin_nav_hidden")) { + // Set default nav to collapse on small screens - but don't override user preference + document.body.classList.add("admin-nav-hidden"); + document.cookie = "admin_nav_hidden=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } + + var adminNavToggle = document.querySelector("#admin-nav-toggle"); + + if (adminNavToggle) { + adminNavToggle.addEventListener("click", function(e) { + e.preventDefault(); + document.body.classList.toggle("admin-nav-hidden"); + $(document.body).trigger("sticky_kit:recalc"); + adminNavToggle.classList.toggle("fa-chevron-circle-left"); + adminNavToggle.classList.toggle("fa-chevron-circle-right"); + document.cookie = "admin_nav_hidden=" + document.body.classList.contains("admin-nav-hidden") + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + }); + } + + if (document.body.classList.contains('admin-nav-hidden')) { + $(adminNavToggle).removeClass('fa-chevron-circle-left').addClass('fa-chevron-circle-right'); + } +}); diff --git a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss index b0d5411213d..ccc69f81db7 100644 --- a/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss +++ b/backend/app/assets/stylesheets/spree/backend/_bootstrap_custom.scss @@ -85,6 +85,8 @@ $dropdown-link-hover-bg: $color-primary !default; $breadcrumb-bg: transparent !default; $breadcrumb-active-color: $color-primary !default; +$breadcrumb-padding-y: .75rem !default; +$breadcrumb-padding-x: 0 !default; // Popover diff --git a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss index b284db6be78..af2ee29be7b 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_breadcrumb.scss @@ -1,15 +1,15 @@ .breadcrumb { font-size: 16px; margin-bottom: 0; - + a { color: $breadcrumb-color; - + &:hover { color: $breadcrumb-active-color; } } - + .active { font-weight: $font-weight-bold; } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss index 2ec1a44c48a..d3b2a79faa1 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_messages.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_messages.scss @@ -30,6 +30,10 @@ left: $width-sidebar; right: 0; z-index: 1000; + + .admin-nav-hidden & { + left: $width-sidebar-collapsed; + } } .flash { diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss index 1de36743468..e7501afeedc 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation.scss @@ -2,6 +2,91 @@ $padding-x-navbar: 26px; $padding-y-navbar: 13px; $padding-y-navbar-submenu: 9px; +#admin-nav-toggle { + border-bottom: $border-sidebar; + padding: ($padding-y-navbar/ 2) $padding-x-navbar; + width: 100%; + text-align: left; + color: $color-navbar; + font-weight: $font-weight-bold; + position: relative; + overflow: hidden; + display: block; + height: 39px; + z-index: 1; + + span { + font-size: $font-size-sm; + font-weight: $font-weight-bold; + } + + &.btn { + background-color: transparent; + } + + &.fa { + text-indent: 2em; + + &:before { + color: $color-icon-navbar; + font-weight: $font-weight-normal; + position: absolute; + left: 1em; + top: 0; + line-height: 39px; + transform: translateX(-50%); + transition: transform .5s ease-in-out; + } + + &:focus { + outline: 0; + box-shadow: none; + } + } +} + +.admin-nav-hidden { + padding-left: $width-sidebar-collapsed; + + .admin-nav, + .admin-nav-footer { + width: $width-sidebar-collapsed; + } + + .text { + transform: translateX(-50px); + display: none; + } + + .admin-login-nav a { + text-overflow: clip; + } + + .brand-link { + overflow: hidden; + + img { + max-width: 125px; + } + } + + .admin-nav-menu { + li { + &.selected:not(:hover) > ul { + visibility: hidden; + } + + &.selected:not(:hover) .admin-subnav { + display: none; + } + } + } + + .admin-nav-menu .selected li { + padding-left: 0; + } +} + nav.menu { ul { list-style: none; @@ -26,16 +111,27 @@ nav.menu { } .admin-nav { + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: $zindex-sticky; + width: $width-sidebar; border-right: $border-sidebar; background: $color-sidebar-bg; - z-index: $zindex-sticky; + + @media print { + display: none + } } .admin-nav-header { background-color: $color-white; border-bottom: 1px solid $color-border; + border-right: 1px solid $color-border; text-align: center; padding: 0 1.25em; + width: $width-sidebar; // Using line height for proper vertical centering. // As line height does not take the border width into account we need to subtract it. line-height: $main-header-height - 1px; @@ -73,56 +169,13 @@ nav.menu { } &:not(.selected):not(:hover) > ul { - display: none; - } - - &:not(.selected) { - position: relative; - - // flyout nav - > ul { - position: absolute; - top: 0; - left: 100%; - width: $width-sidebar-flyout; - margin-left: 0; - background: $color-white; - box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1); - border-radius: 0 4px 4px 4px; - border: 1px solid $color-border; - @include caret($direction: left, $color-caret: $color-white); - - &:before { - z-index: 1; - top: 1.5em; - } - - &:after { - content: ''; - display: block; - position: absolute; - border-width: 1em 1em; - border-style: solid; - border-color: transparent; - border-right-color: $color-border; - left: -2.1em; - top: 1.5em; - margin-top: -1em; - } - - > li { - background: $color-white; - - a { - font-weight: $font-weight-bold; - } - } - } + visibility: hidden; } } a { display: block; + min-height: 39px; padding: $padding-y-navbar $padding-x-navbar; color: $color-navbar; font-weight: $font-weight-bold; @@ -177,8 +230,58 @@ nav.menu { } } +.admin-nav-menu li:not(.selected), +.admin-nav-hidden .admin-nav-menu li.selected:hover { + position: relative; + + // flyout nav + > ul { + position: absolute; + top: 0; + left: 100%; + width: $width-sidebar-flyout; + margin-left: 0; + background: $color-white; + box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1); + border-radius: 0 4px 4px 4px; + border: 1px solid $color-border; + @include caret($direction: left, $color-caret: $color-white); + + &:before { + z-index: 1; + top: 1.5em; + pointer-events: none; + } + + &:after { + content: ''; + display: block; + position: absolute; + border-width: 1em 1em; + border-style: solid; + border-color: transparent; + border-right-color: $color-border; + left: -2.1em; + top: 1.5em; + margin-top: -1em; + pointer-events: none; + } + + > li { + background: $color-white; + + a { + font-weight: $font-weight-bold; + } + } + } +} + .admin-nav-footer { + width: $width-sidebar; background-color: $color-navbar-footer-bg; + border-top: $border-sidebar; + border-right: $border-sidebar; a { color: $color-navbar-footer; @@ -191,14 +294,40 @@ nav.menu { .admin-locale-selection { margin: 1em; + position: relative; + + &::after { + content: "\f0ac"; + font-family: "FontAwesome"; + position: absolute; + top: 0; + left: 0; + padding: .5rem 0 .5rem .25rem; + z-index: -1; + } + + .admin-nav-hidden & { + .js-locale-selection.custom-select { + background-color: transparent; + background-position: 1.5rem center; + background-size: 8px 9px; + border: 0; + opacity: .6; + position: relative; + overflow: hidden; + text-indent: 1rem; + z-index: 1; + + &:focus { + box-shadow: none; + } + } + } } .admin-nav.fits .admin-nav-footer { position: fixed; bottom: 0; - width: $width-sidebar; - border-top: $border-sidebar; - border-right: $border-sidebar; } .admin-login-nav { @@ -226,4 +355,8 @@ nav.menu { .brand-link { display: block; + + img { + max-width: 125px; + } } diff --git a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss index 00cc0c4c08e..52b81650bf1 100644 --- a/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/globals/_variables.scss @@ -169,6 +169,8 @@ $actions-brd-colors: $color-action-edit-brd, $color-action-clone-brd, $color-act //-------------------------------------------------------------- $width-sidebar: 200px !default; $width-sidebar-flyout: 225px !default; +$width-sidebar-collapsed: 52px !default; +$sidebar-transition: 250ms ease-in !default; $border-sidebar: 1px solid $color-sidebar-border !default; // Main diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss index 1c0725a8135..2a40c0191d0 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss @@ -1,11 +1,15 @@ .main-header { display: flex; align-items: center; - padding: 15px $grid-gutter-width; background-color: $color-header-bg; + padding: ($grid-gutter-width / 2) $grid-gutter-width; border-bottom: 1px solid $color-border; height: $main-header-height; + .admin-nav-hidden & { + margin-left: ($width-sidebar - $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 f73a986546c..8c280a8c7c7 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss @@ -12,15 +12,6 @@ body { background-color: $admin-body-bg; } -.admin-nav { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: $width-sidebar; - @media print { display: none } -} - .content-wrapper { background-color: $content-wrapper-bg; padding-top: 1rem; diff --git a/backend/app/views/spree/admin/shared/_navigation.html.erb b/backend/app/views/spree/admin/shared/_navigation.html.erb index 7f4bbc018e4..14cd73f72b8 100644 --- a/backend/app/views/spree/admin/shared/_navigation.html.erb +++ b/backend/app/views/spree/admin/shared/_navigation.html.erb @@ -3,6 +3,9 @@
<%= render partial: 'spree/admin/shared/menu' %>
+ <%= button_tag class: 'btn fa fa-chevron-circle-left', id: 'admin-nav-toggle', type: :button do %> + <%= t('spree.minimize_menu') %> + <% end %> <%= render partial: 'spree/admin/shared/locale_selection' %> <%= render partial: 'spree/admin/shared/navigation_footer' %>
diff --git a/backend/app/views/spree/layouts/admin.html.erb b/backend/app/views/spree/layouts/admin.html.erb index 36c8a6fab9a..a7e5fc11bfc 100644 --- a/backend/app/views/spree/layouts/admin.html.erb +++ b/backend/app/views/spree/layouts/admin.html.erb @@ -3,8 +3,7 @@ <%= render 'spree/admin/shared/head' %> - - + "> <%= render "spree/admin/shared/navigation" %> <%= render "spree/admin/shared/header" %> <%= render "spree/admin/shared/flash" %> diff --git a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_variables.scss b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_variables.scss index be580deb334..a10d7c9370f 100644 --- a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_variables.scss +++ b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/_variables.scss @@ -834,7 +834,7 @@ $figure-caption-color: $gray-600 !default; // Breadcrumbs $breadcrumb-padding-y: .75rem !default; -$breadcrumb-padding-x: 1rem !default; +$breadcrumb-padding-x: 3rem !default; $breadcrumb-item-padding: .5rem !default; $breadcrumb-margin-bottom: 1rem !default; diff --git a/core/config/locales/en.yml b/core/config/locales/en.yml index bc92b20bd43..85440667db8 100644 --- a/core/config/locales/en.yml +++ b/core/config/locales/en.yml @@ -1548,6 +1548,7 @@ en: meta_title: Meta Title metadata: Metadata minimal_amount: Minimal Amount + minimize_menu: Minimize Menu modify_stock_count: Modify (+/-) month: Month more: More