Merge branch 'from-hide-pin-menu' into dev

jet/static/jet/css/_base.scss

@@ -42,13 +42,24 @@ body {
 /* PAGE STRUCTURE */
 
 #container {
-  padding: 0 0 0 $sidebar-width;
+  padding: 0;
   min-height: 100%;
+  transition: padding-left 0.3s;
 
-  @include for-mobile {
+  body.menu-pinned & {
+    padding-left: $sidebar-width;
+  }
+
+  body.menu-pinned.popup & {
     padding-left: 0;
   }
 
+  @include for-mobile {
+    &, body.menu-pinned & {
+      padding-left: 0;
+    }
+  }
+
   .popup & {
     padding-left: 0;
   }

jet/static/jet/css/_breadcrumbs.scss

@@ -8,11 +8,12 @@ div.breadcrumbs {
   text-transform: uppercase;
   line-height: $top-height;
   color: $top-text-color;
-  padding: 20px 175px + 20px + 20px 20px 20px;
+  padding: 10px 175px + 20px + 20px 10px 20px;
   visibility: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  min-height: 32px;
 
   @include for-mobile {
     padding: 20px 20px 10px 20px;
@@ -40,10 +41,49 @@ div.breadcrumbs {
   }
 }
 
-.breadcrumbs-separator {
-  color: $top-separator-color;
-  margin: 0 6px 0 6px;
-  font-weight: bold !important;
-  font-size: 15px;
-  vertical-align: middle;
+.breadcrumbs {
+  &-separator {
+    color: $top-separator-color;
+    margin: 0 6px 0 6px;
+    font-weight: bold !important;
+    font-size: 15px;
+    vertical-align: middle;
+  }
+
+  &-menu {
+    float: left;
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    line-height: 31px;
+    padding: 10px 0 10px 20px;
+
+    &:hover {
+      color: $hover-link-color;
+    }
+
+    body.menu-pinned & {
+      display: none;
+    }
+
+    @include for-mobile {
+      display: none;
+    }
+  }
 }
+
+.breadcrumbs-container {
+  position: relative;
+  min-height: 31px;
+  padding: 10px 175px + 20px + 20px 10px 20px;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);
+
+  @include for-mobile {
+    padding: 20px 20px 10px 20px;
+  }
+
+  @include for-phone {
+    padding-left: 10px;
+  }
+}
+

jet/static/jet/css/_changelist.scss

@@ -307,7 +307,7 @@
     }
   }
 
-  .label  {
+  .label {
     padding: 8px 0;
   }
 
@@ -437,12 +437,17 @@
 
   &.fixed {
     position: fixed;
-    left: $sidebar-width + 20px;
+    left: 20px;
     right: 20px;
     bottom: 0;
     border-top: 2px solid $content-border2-color;
+    transition: left 0.3s;
+
+    body.menu-pinned & {
+      left: $sidebar-width + 20px;
+    }
 
-    body.popup & {
+    body.menu-pinned.popup & {
       left: 20px;
     }
 
@@ -452,6 +457,7 @@
       right: auto;
       bottom: auto;
       border-top: 0;
+      padding: 20px 0;
     }
   }
 

jet/static/jet/css/_dashboard.scss

@@ -108,7 +108,7 @@ ul.actionlist li {
 
   &-tools {
     position: absolute;
-    top: 20px;
+    top: ($top-height + 10px * 2) / 2 - 30px / 2;
     right: 20px + 175px + 20px;
 
     @include for-mobile {

jet/static/jet/css/_header.scss

@@ -8,6 +8,13 @@
   color: $sidebar-contrast-text-color;
   padding: 14px;
   text-align: center;
+  position: relative;
+  min-height: 52px;
+  box-sizing: border-box;
+
+  @include for-mobile {
+    min-height: 0;
+  }
 
   &.initialized {
     display: block;
@@ -17,11 +24,20 @@
     display: none;
   }
 
+  &:after {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+  }
+
   h1, h2 {
-    padding: 0;
+    display: inline-block;
+    padding: 0 20px;
     margin: 0;
     text-transform: uppercase;
     font-size: 11px;
+    vertical-align: middle;
   }
 
   a, a:visited, a:hover {
@@ -31,6 +47,48 @@
   a:hover {
     color: $sidebar-hover-action-color;
   }
+
+  &-pin {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    margin-top: -11px;
+    display: inline-block;
+    font-size: 22px;
+    cursor: pointer;
+    transition: transform 0.3s;
+    transform: rotate(-45deg);
+
+    body.menu-pinned & {
+      transform: rotate(45deg);
+    }
+
+    &:hover {
+      color: #fff;
+    }
+
+    @include for-mobile {
+      display: none;
+    }
+  }
+
+  &-menu {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    margin-top: -8px;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+
+    @include for-mobile() {
+      display: none;
+    }
+  }
 }
 
 #user-tools {
@@ -44,7 +102,7 @@
 .user-tools {
   ul {
     position: absolute;
-    top: $top-height - 12px;
+    top: ($top-height + 10px * 2) / 2 - 30px / 2;
     right: 20px;
     border: 1px solid $top-border-color;
     border-radius: 4px;

jet/static/jet/css/_helpers.scss

@@ -53,6 +53,12 @@
   }
 }
 
+@mixin for-desktop {
+  @media only screen and (min-width: $mobile-max-width) {
+    @content;
+  }
+}
+
 @mixin for-mobile {
   @include for-width($mobile-max-width) {
     @content;

jet/static/jet/css/_relatedpopup.scss

@@ -35,7 +35,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: 5;
+    z-index: 15;
 
     .loading-indicator {
       display: none;

jet/static/jet/css/_sidebar.scss

@@ -6,15 +6,15 @@
   top: 0;
   left: 0;
   bottom: 0;
-  z-index: 4;
+  z-index: 6;
   background-color: $sidebar-background-color;
   color: $sidebar-text-color;
-  transition: background-color $transitions-duration;
+  transition: background-color $transitions-duration, transform $transitions-duration;
+  transform: translate3d(-100%, 0, 0);
 
   @include for-mobile {
     width: 360px;
     padding-bottom: 0;
-    transform: translate3d(-100%, 0, 0);
     transition: transform $transitions-duration cubic-bezier(0, 0.5, 0.5, 1);
   }
 
@@ -23,12 +23,30 @@
   }
 
   &.sidebar-opened {
+    transform: none;
+
     @include for-mobile {
-      transform: none;
       box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
     }
   }
 
+  body.menu-pinned & {
+    @include for-desktop {
+      transform: none;
+    }
+  }
+
+  &-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0;
+    z-index: 5;
+  }
+
   &-header {
     height: $sidebar-header-height;
     line-height: $sidebar-header-height;
@@ -52,7 +70,7 @@
       top: 0;
       right: 0;
       left: 0;
-      z-index: 3;
+      z-index: 6;
       transition: background-color $transitions-duration, transform $transitions-duration;
 
       @include for-mobile {
@@ -183,7 +201,7 @@
     &, &:visited, &:hover {
       display: block;
       color: $sidebar-link-color;
-      padding: 8px 12px 8px 24px;
+      padding: 8px 12px 8px 20px;
       vertical-align: middle;
       transition: color $transitions-duration, background-color $transitions-duration;
       position: relative;
@@ -433,7 +451,6 @@
 
     &-container {
       display: none;
-      background-color: transparentize($sidebar-popup-overlay-color, 0.5);
       position: fixed;
       top: 0;
       left: $sidebar-width;
@@ -441,6 +458,10 @@
       right: 0;
       z-index: 5;
 
+      body.menu-pinned & {
+        background-color: transparentize($sidebar-popup-overlay-color, 0.5);
+      }
+
       @include for-mobile {
         left: 0;
       }

jet/static/jet/css/_tables.scss

@@ -17,12 +17,16 @@ table {
     z-index: 2;
     top: 0;
     right: 20px;
-    left: $sidebar-width + 20px;
+    left: 20px;
     width: auto;
     border-radius: 0;
     box-shadow: none;
 
-    body.popup & {
+    body.menu-pinned & {
+      left: $sidebar-width + 20px;
+    }
+
+    body.menu-pinned.popup & {
       left: 20px;
     }
 

jet/static/jet/js/src/features/changelist.js

@@ -6,11 +6,8 @@ var ChangeList = function($changelist) {
 
 ChangeList.prototype = {
     updateFixedHeaderVisibility: function($fixedTable, $originalHeader) {
-        if ($(window).scrollTop() > $originalHeader.offset().top) {
-            $fixedTable.closest('table').show();
-        } else {
-            $fixedTable.closest('table').hide();
-        }
+        var show = $(window).scrollTop() > $originalHeader.offset().top;
+        $fixedTable.closest('table').toggle(show);
     },
     updateFixedHeaderWidth: function($fixedHeader, $originalHeader) {
         var $originalColumns = $originalHeader.find('th');

jet/static/jet/js/src/features/sidebar/main.js

@@ -6,6 +6,7 @@ var SideBarPopup = require('./popup');
 require('perfect-scrollbar/jquery')($);
 require('browsernizr/test/touchevents');
 require('browsernizr');
+require('jquery.cookie');
 
 var SideBar = function($sidebar) {
     this.$sidebar = $sidebar;
@@ -18,15 +19,57 @@ SideBar.prototype = {
         }
     },
     initSideBarToggle: function() {
-        $('.sidebar-toggle').on('click', function(e) {
+        var toggle = function (e) {
             e.preventDefault();
+            this.sideBarToggle();
+        };
 
+        $('.sidebar-toggle, #branding-menu').on('click', toggle.bind(this));
+        $(document.body).on('click', '.sidebar-backdrop', toggle.bind(this));
+    },
+    sideBarToggle: function() {
+        var $dependent = $('.sidebar-dependent');
+        var open = !$dependent.hasClass('sidebar-opened') && !$(document.body).hasClass('menu-pinned');
+
+        $(document.body).toggleClass('non-scrollable', open).removeClass('menu-pinned');
+        $dependent.toggleClass('sidebar-opened', open);
+
+        this.storePinStatus(false);
+        this.toggleBackdrop(open);
+    },
+    toggleBackdrop: function(open) {
+        if (open) {
+            var backdrop = $('<div/>', {class: 'sidebar-backdrop'});
+            $(document.body).append(backdrop);
+            backdrop.animate({opacity: 0.5}, 300);
+        } else {
+            $('.sidebar-backdrop').animate({opacity: 0}, 300, function () {
+                $(this).remove();
+            });
+        }
+    },
+    initPinSideBar: function($sidebar) {
+        $sidebar.on('click', '#branding-pin', (function () {
             var $dependent = $('.sidebar-dependent');
-            var open = !$dependent.hasClass('sidebar-opened');
 
-            $(document.body).toggleClass('non-scrollable', open);
-            $dependent.toggleClass('sidebar-opened', open);
-        });
+            if ($(document.body).hasClass('menu-pinned')) {
+                $dependent.removeClass('sidebar-opened');
+                $(document.body).removeClass('menu-pinned');
+                this.storePinStatus(false);
+            } else {
+                this.storePinStatus(true);
+                $(document.body).addClass('menu-pinned').removeClass('non-scrollable');
+            }
+
+            this.toggleBackdrop(false);
+
+            setTimeout(function() {
+                $(window).trigger('resize');
+            }, 500);
+        }).bind(this));
+    },
+    storePinStatus: function(status) {
+        $.cookie('sidebar_pinned', status, { expires: 365, path: '/' });
     },
     run: function() {
         var $sidebar = this.$sidebar;
@@ -38,6 +81,7 @@ SideBar.prototype = {
         try {
             this.initScrollBars($sidebar);
             this.initSideBarToggle();
+            this.initPinSideBar($sidebar);
         } catch (e) {
             console.error(e, e.stack);
         }
@@ -51,3 +95,5 @@ $(document).ready(function() {
         new SideBar($(this)).run();
     });
 });
+
+module.exports = new SideBar();

jet/static/jet/js/src/layout-updaters/branding.js

@@ -6,7 +6,7 @@ var BrandingUpdater = function($branding) {
 
 BrandingUpdater.prototype = {
     move: function($branding) {
-        $branding.detach().prependTo($('.sidebar-wrapper'));
+        $branding.detach().prependTo($('.sidebar-wrapper')).css('height', $branding.outerHeight());
     },
     run: function() {
         var $branding = this.$branding;

jet/static/jet/js/src/layout-updaters/breadcrumbs.js

@@ -1,4 +1,5 @@
 var $ = require('jquery');
+var sidebar = require('../features/sidebar/main.js');
 
 var BreadcrumbsUpdater = function($breadcrumbs) {
     this.$breadcrumbs = $breadcrumbs;
@@ -15,12 +16,18 @@ BreadcrumbsUpdater.prototype = {
     scrollToEnd: function($breadcrumbs) {
         $breadcrumbs.scrollLeft($breadcrumbs[0].scrollWidth - $breadcrumbs.width());
     },
+    initOpenSideBar: function ($breadcrumbs) {
+        if (sidebar) {
+            $breadcrumbs.siblings('.breadcrumbs-menu').on('click', sidebar.sideBarToggle.bind(sidebar))
+        }
+    },
     run: function() {
         var $breadcrumbs = this.$breadcrumbs;
 
         try {
             this.replaceSeparators($breadcrumbs);
             this.scrollToEnd($breadcrumbs);
+            this.initOpenSideBar($breadcrumbs);
         } catch (e) {
             console.error(e, e.stack);
         }

jet/templates/admin/base.html

@@ -36,7 +36,7 @@
 </head>
 {% load i18n %}
 
-<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
+<body class="{% if request.COOKIES.sidebar_pinned == 'true' %}menu-pinned {% endif %}{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
   data-admin-utc-offset="{% now "Z" %}">
 
 <!-- Container -->
@@ -45,7 +45,11 @@
     {% if not is_popup %}
     <!-- Header -->
     <div id="header">
-        <div id="branding">{% block branding %}{% endblock %}</div>
+        <div id="branding">
+            <span id="branding-menu" class="sidebar-header-menu-icon icon-menu"></span>
+            <span id="branding-pin" class="sidebar-link-icon icon-pin"></span>
+            {% block branding %}{% endblock %}
+        </div>
         {% block usertools %}
         {% if user.is_active and user.is_staff or has_permission %}
         <div id="user-tools">
@@ -73,6 +77,7 @@
         {% endblock %}
     </div>
     <!-- END Header -->
+    <span class="breadcrumbs-menu sidebar-header-menu-icon icon-menu"></span>
     {% block breadcrumbs %}
     <div class="breadcrumbs">
     <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>