Merge pull request #28 from nebulab/kennyadsl/style-collapsing-sidebar

Collapsing sidebar fixes
solidusio · Oct 30, 2019 · 24c5373 · 24c5373
2 parents 65a017d + ff0f21c
commit 24c5373
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 50 deletions.
diff --git a/backend/app/assets/javascripts/spree/backend/components/admin_nav.js b/backend/app/assets/javascripts/spree/backend/components/admin_nav.js
@@ -1,5 +1,4 @@
 Spree.ready(function() {
-  toggleTooltips();
   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");
@@ -12,23 +11,14 @@ Spree.ready(function() {
     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");
-      toggleTooltips();
       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');
   }
-
-  function toggleTooltips() {
-    $(".tab-with-icon .text:visible").each(function() {
-      $(this.closest(".tab-with-icon")).attr("data-original-title", "").tooltip();
-    });
-    $(".tab-with-icon .text:hidden").each(function() {
-      $(this.closest(".tab-with-icon")).attr("data-original-title", $(this).text()).tooltip();
-    });
-  }
 });
diff --git 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
@@ -14,16 +14,16 @@ $padding-y-navbar-submenu: 9px;
   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;
 
@@ -37,7 +37,7 @@ $padding-y-navbar-submenu: 9px;
       transform: translateX(-50%);
       transition: transform .5s ease-in-out;
     }
-    
+
     &:focus {
       outline: 0;
       box-shadow: none;
@@ -47,15 +47,15 @@ $padding-y-navbar-submenu: 9px;
 
 .admin-nav-hidden {
   padding-left: $width-sidebar-collapsed;
-  
+
   .admin-nav,
   .admin-nav-footer {
     width: $width-sidebar-collapsed;
   }
 
   .text {
     transform: translateX(-50px);
-    opacity: 0;
+    display: none;
   }
 
   .admin-login-nav a {
@@ -64,7 +64,7 @@ $padding-y-navbar-submenu: 9px;
 
   .brand-link {
     overflow: hidden;
-    
+
     img {
       max-width: 125px;
     }
@@ -74,9 +74,8 @@ $padding-y-navbar-submenu: 9px;
     li {
       &.selected:not(:hover) > ul  {
         visibility: hidden;
-        opacity: 0;
       }
-      
+
       &.selected:not(:hover) .admin-subnav {
         display: none;
       }
@@ -120,15 +119,10 @@ nav.menu {
   width: $width-sidebar;
   border-right: $border-sidebar;
   background: $color-sidebar-bg;
-  transition: $sidebar-transition;
 
   @media print {
     display: none
   }
-
-  .text {
-    transition: $sidebar-transition;
-  }
 }
 
 .admin-nav-header {
@@ -176,7 +170,6 @@ nav.menu {
 
     &:not(.selected):not(:hover) > ul {
       visibility: hidden;
-      opacity: 0;
     }
   }
 
@@ -212,8 +205,6 @@ nav.menu {
     margin: 0;
     padding-top:    $padding-y-navbar - $padding-y-navbar-submenu;
     padding-bottom: $padding-y-navbar - $padding-y-navbar-submenu;
-    opacity: 1;
-    transition: all .35s cubic-bezier(.5,.32,.01,1);
 
     li {
       background: $color-navbar-submenu-bg;
@@ -291,7 +282,6 @@ nav.menu {
   background-color: $color-navbar-footer-bg;
   border-top: $border-sidebar;
   border-right: $border-sidebar;
-  transition: $sidebar-transition;
 
   a {
     color: $color-navbar-footer;
@@ -305,19 +295,17 @@ 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;
-    opacity: 0;
-    transition: opacity .4s cubic-bezier(.5,.32,.01,1);
     z-index: -1;
   }
-  
+
   .admin-nav-hidden & {
     .js-locale-selection.custom-select {
       background-color: transparent;
@@ -329,15 +317,11 @@ nav.menu {
       overflow: hidden;
       text-indent: 1rem;
       z-index: 1;
-      
+
       &:focus {
         box-shadow: none;
       }
     }
-
-    &::after {
-      opacity: 1;
-    }
   }
 }
 
@@ -371,7 +355,7 @@ 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
@@ -61,15 +61,6 @@ $color-tab-active:              $color-primary !default;
 $color-tab-active-bg:           $color-white !default;
 $color-tab-active-border:       $color-white !default;
 
-// Sidebar
-//--------------------------------------------------------------
-$width-sidebar:                  200px !default;
-$width-sidebar-flyout:           225px !default;
-$width-sidebar-collapsed:        52px !default;
-$border-sidebar:                 1px solid $color-sidebar-border !default;
-
-$sidebar-transition: opacity .4s cubic-bezier(.5,.32,.01,1), transform .4s cubic-bezier(.5,.32,.01,1), width .4s cubic-bezier(.5,.32,.01,1);
-
 // Basic flash colors
 @include bs-deprecated-variable("color-success", "brand-success");
 $color-success:                 $color-green !default;

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_header.scss b/backend/app/assets/stylesheets/spree/backend/shared/_header.scss
@@ -5,7 +5,7 @@
   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);
   }

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss b/backend/app/assets/stylesheets/spree/backend/shared/_layout.scss
@@ -6,7 +6,6 @@ body {
   position: relative;
   min-height: 100%;
   padding-left: $width-sidebar;
-  transition: padding $sidebar-transition;
 }
 
 .admin {