Implement initial mobile sidebar

jet/static/jet/css/_base.scss

@@ -20,6 +20,10 @@ body {
   &.non-scrollable {
     overflow: hidden;
   }
+
+  @include for-mobile {
+    padding-top: 60px;
+  }
 }
 
 /* PAGE STRUCTURE */
@@ -81,15 +85,6 @@ body {
   }
 }
 
-.sidebar {
-  position: fixed;
-  width: $sidebar-width;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 3;
-}
-
 .dialog-confirm {
   display: none;
 }

jet/static/jet/css/_header.scss

@@ -13,6 +13,10 @@
   padding: 14px;
   text-align: center;
 
+  @include for-mobile {
+    display: none;
+  }
+
   h1, h2 {
     padding: 0;
     margin: 0;

jet/static/jet/css/_sidebar.scss

@@ -1,17 +1,109 @@
 @import "globals";
 
 .sidebar {
+  position: fixed;
+  width: $sidebar-width;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 3;
   background-color: $sidebar-background-color;
+  color: $sidebar-text-color;
   transition: background-color $transitions-duration;
   padding-bottom: 32px;
 
   @include for-mobile {
+    min-width: 280px;
+    max-width: 360px;
+    width: 80%;
+    padding-bottom: 0;
+    transform: translate3d(-100%, 0, 0);
+    transition: transform $transitions-duration;
+  }
+
+  &.sidebar-opened {
+    @include for-mobile {
+      transform: none;
+      box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  &-header {
     display: none;
+    background-color: $sidebar-background-color;
+    color: $sidebar-text-color;
+    height: 60px;
+    line-height: 60px;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 3;
+    transition: background-color $transitions-duration, transform $transitions-duration;
+
+    @include for-mobile {
+      display: block;
+
+      body.scroll-to-bottom & {
+        transform: translate3d(0, -60px, 0);
+      }
+    }
+
+    &.sidebar-opened {
+      background-color: $sidebar-contrast-background-color;
+      color: $sidebar-contrast-text-color;
+    }
+
+    &-menu {
+      &, &:visited, &:hover {
+        font-size: 14px;
+        text-transform: uppercase;
+        color: $sidebar-link-color;
+      }
+
+      &-icon {
+        font-size: 20px;
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &-close {
+    display: none;
+    position: absolute;
+    top: 12px;
+    right: 18px;
+    padding: 4px;
+    background: $sidebar-contrast-background-color;
+    border-radius: 5px;
+    z-index: 1;
+
+    @include for-mobile {
+      display: inline-block;
+    }
+
+    &.popup {
+      background-color: $sidebar-popup-search-input-background-color;
+    }
+
+    &-icon {
+      color: $sidebar-action-color;
+      font-size: 32px;
+      font-weight: bold;
+      vertical-align: middle;
+    }
+
+    &.popup &-icon {
+      color: $sidebar-popup-search-input-text-color;
+    }
   }
 
   &-wrapper {
     height: 100%;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
   }
 
   &-section {
@@ -19,6 +111,10 @@
     border-bottom: 1px solid $sidebar-contrast-background-color;
     transition: border-bottom-color 0.3s;
 
+    @include for-mobile {
+      padding: 10px 0;
+    }
+
     &:last-child {
       border-bottom: 0;
     }
@@ -37,6 +133,11 @@
     margin-bottom: 10px;
     transition: color $transitions-duration;
 
+    @include for-mobile {
+      padding: 12px 18px 12px 30px;
+      margin-bottom: 0;
+    }
+
     &-link {
       &, &:visited, &:hover {
         color: $sidebar-text-color;
@@ -62,6 +163,10 @@
       transition: color $transitions-duration, background-color $transitions-duration;
       position: relative;
 
+      @include for-mobile {
+        padding: 12px 18px 12px 30px;
+      }
+
       &.icon {
         font-size: 11px;
         text-transform: uppercase;
@@ -107,6 +212,10 @@
     position: absolute;
     left: 4px;
 
+    @include for-mobile {
+      left: 8px;
+    }
+
     &.collapsible {
       display: none;
     }
@@ -118,6 +227,10 @@
         font-size: 14px;
         color: $sidebar-action-color;
         transition: color $transitions-duration;
+
+        @include for-mobile {
+          display: none;
+        }
       }
 
       &:hover {
@@ -144,6 +257,10 @@
 
     &.collapsible {
       display: none;
+
+      @include for-mobile {
+        display: inline;
+      }
     }
 
     &-plus {
@@ -184,6 +301,10 @@
   }
 
   .apps-hide {
+    @include for-mobile {
+      display: none;
+    }
+
     &-label {
       display: none;
     }
@@ -210,17 +331,28 @@
     font-size: 11px;
     font-weight: bold;
     transition: background-color $transitions-duration, color $transitions-duration;
+
+    @include for-mobile {
+      display: none;
+    }
   }
 
   &-popup {
     position: absolute;
     top: 0;
     bottom: 0;
+    left: 0;
     width: $sidebar-width;
     color: $sidebar-popup-text-color;
     background-color: $sidebar-popup-background-color;
     overflow-y: auto;
 
+    @include for-mobile {
+      min-width: 280px;
+      max-width: 360px;
+      width: 80%;
+    }
+
     &-container {
       display: none;
       background-color: transparentize($sidebar-popup-overlay-color, 0.5);
@@ -229,6 +361,11 @@
       left: $sidebar-width;
       bottom: 0;
       right: 0;
+      z-index: 4;
+
+      @include for-mobile {
+        left: 0;
+      }
     }
 
     &-section {
@@ -243,6 +380,12 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      @include for-mobile {
+        padding: 24px 30px;
+        margin-bottom: 0;
+        font-size: 14px;
+      }
     }
 
     &-search {
@@ -256,11 +399,18 @@
       outline: 0;
       padding: 0;
       margin: 0 0 12px 0;
+      border-radius: 0;
 
       //noinspection CssInvalidPseudoSelector
       &::placeholder {
         color: $sidebar-popup-search-input-placeholder-color;
       }
+
+      @include for-mobile {
+        font-size: 14px;
+        height: 40px;
+        text-indent: 30px;
+      }
     }
 
     &-list {
@@ -273,6 +423,13 @@
           color: $sidebar-popup-link-text-color;
           padding: 8px 20px;
           display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          @include for-mobile {
+            padding: 16px 30px;
+          }
         }
 
         &.selected a {

jet/static/jet/css/icons/_variables.scss

@@ -1,3 +1,6 @@
+$icomoon-font-path: "fonts" !default;
+
+$icon-menu: "\e901";
 $icon-reset: "\e61e";
 $icon-search: "\e61d";
 $icon-user: "\e61c";
@@ -29,3 +32,4 @@ $icon-add: "\e603";
 $icon-add3: "\e604";
 $icon-expand: "\e605";
 $icon-checkbox: "\e606";
+

jet/static/jet/css/icons/fonts/jet-icons.svg

@@ -38,4 +38,5 @@
 <glyph unicode="&#xe61c;" glyph-name="user" d="M851.481 250.954c-39.072 50.987-86.335 84.097-154.057 102.883l-63.453-222.157c0-20.464-16.755-37.216-37.216-37.216-20.455 0-37.21 16.753-37.21 37.216v176.765c0 25.674-20.845 46.519-46.519 46.519s-46.516-20.847-46.516-46.519v-176.765c0-20.464-16.755-37.216-37.212-37.216-20.464 0-37.218 16.753-37.218 37.216l-63.453 222.157c-67.723-18.969-114.985-51.895-154.053-102.883-15.446-20.095-23.839-60.471-24.388-82.063 0.185-5.581 0-12.095 0-18.601v-74.435c0-41.12 33.309-74.425 74.43-74.425h576.815c41.12 0 74.435 33.305 74.435 74.425v74.435c0 6.505-0.182 13.019 0 18.601-0.563 21.591-8.946 61.97-24.383 82.063zM317.649 697.706c0-108.665 67.744-268.315 195.375-268.315 125.413 0 195.371 159.65 195.371 268.315 0 108.661-87.454 196.862-195.371 196.862s-195.375-88.201-195.375-196.862z" />
 <glyph unicode="&#xe61d;" glyph-name="search" d="M120.942 128.031l203.291 203.291c-38.651 53.090-61.716 118.249-61.716 188.955 0 177.713 144.047 321.759 321.759 321.759s321.759-144.047 321.759-321.759-144.047-321.759-321.759-321.759c-70.706 0-135.862 23.068-188.955 61.716l-203.291-203.291-71.089 71.089zM584.274 299.065c121.965 0 221.209 99.243 221.209 221.209s-99.243 221.209-221.209 221.209-221.209-99.243-221.209-221.209 99.243-221.209 221.209-221.209z" />
 <glyph unicode="&#xe61e;" glyph-name="reset" horiz-adv-x="1013" d="M1011.457 476.745c-56.408-0.485-112.778-0.784-169.149-1.269 9.482-97.062-22.511-197.371-96.838-271.586-131.966-131.929-345.801-131.929-477.692 0-131.929 131.817-131.929 345.689 0 477.618 112.554 112.591 284.652 128.607 414.714 49.016-44.088-43.566-95.942-95.158-95.942-95.158-37.331-39.646 0.635-65.927 25.759-66.077h329.562c12.618 0 22.772 10.191 22.809 22.809v326.874c1.531 30.798-32.292 59.432-65.554 26.132 0 0-55.81-55.213-94.56-93.664-198.080 144.771-477.244 128.345-656.174-50.547-197.856-197.856-197.856-518.645 0-716.464 197.819-197.782 518.608-197.782 716.427 0 107.664 107.589 156.195 251.614 146.638 392.316z" />
+<glyph unicode="&#xe901;" glyph-name="menu" d="M0 796.16c0 45.243 36.445 81.92 82.067 81.92h859.866c45.324 0 82.067-36.361 82.067-81.92 0-45.243-36.445-81.92-82.067-81.92h-859.866c-45.324 0-82.067 36.361-82.067 81.92v0zM0 468.48c0 45.243 36.445 81.92 82.067 81.92h859.866c45.324 0 82.067-36.361 82.067-81.92 0-45.243-36.445-81.92-82.067-81.92h-859.866c-45.324 0-82.067 36.361-82.067 81.92v0zM0 140.8c0 45.243 36.445 81.92 82.067 81.92h859.866c45.324 0 82.067-36.361 82.067-81.92 0-45.243-36.445-81.92-82.067-81.92h-859.866c-45.324 0-82.067 36.361-82.067 81.92v0z" />
 </font></defs></svg>

jet/static/jet/css/icons/style.css

@@ -1,123 +1,123 @@
 @font-face {
-    font-family: 'jet-icons';
-    src:    url('fonts/jet-icons.eot?2orr6h');
-    src:    url('fonts/jet-icons.eot?2orr6h#iefix') format('embedded-opentype'),
-        url('fonts/jet-icons.ttf?2orr6h') format('truetype'),
-        url('fonts/jet-icons.woff?2orr6h') format('woff'),
-        url('fonts/jet-icons.svg?2orr6h#jet-icons') format('svg');
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'jet-icons';
+  src:  url('fonts/jet-icons.eot?a4nwvn');
+  src:  url('fonts/jet-icons.eot?a4nwvn#iefix') format('embedded-opentype'),
+    url('fonts/jet-icons.ttf?a4nwvn') format('truetype'),
+    url('fonts/jet-icons.woff?a4nwvn') format('woff'),
+    url('fonts/jet-icons.svg?a4nwvn#jet-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
 }
 
 [class^="icon-"], [class*=" icon-"] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'jet-icons' !important;
-    speak: none;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'jet-icons' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-order:before {
-    content: "\e901";
+.icon-menu:before {
+  content: "\e901";
 }
 .icon-reset:before {
-    content: "\e61e";
+  content: "\e61e";
 }
 .icon-search:before {
-    content: "\e61d";
+  content: "\e61d";
 }
 .icon-user:before {
-    content: "\e61c";
+  content: "\e61c";
 }
 .icon-jet:before {
-    content: "\e61b";
+  content: "\e61b";
 }
 .icon-refresh:before {
-    content: "\e61a";
+  content: "\e61a";
 }
 .icon-grid:before {
-    content: "\e619";
+  content: "\e619";
 }
 .icon-star:before {
-    content: "\e618";
+  content: "\e618";
 }
 .icon-pin:before {
-    content: "\e617";
+  content: "\e617";
 }
 .icon-new:before {
-    content: "\e616";
+  content: "\e616";
 }
 .icon-edit:before {
-    content: "\e615";
+  content: "\e615";
 }
 .icon-clock:before {
-    content: "\e611";
+  content: "\e611";
 }
 .icon-calendar:before {
-    content: "\e612";
+  content: "\e612";
 }
 .icon-book:before {
-    content: "\e60d";
+  content: "\e60d";
 }
 .icon-open-external:before {
-    content: "\e60e";
+  content: "\e60e";
 }
 .icon-data:before {
-    content: "\e60f";
+  content: "\e60f";
 }
 .icon-question:before {
-    content: "\e613";
+  content: "\e613";
 }
 .icon-tick:before {
-    content: "\e614";
+  content: "\e614";
 }
 .icon-cross:before {
-    content: "\e610";
+  content: "\e610";
 }
 .icon-key:before {
-    content: "\e60c";
+  content: "\e60c";
 }
 .icon-arrow-right:before {
-    content: "\e60b";
+  content: "\e60b";
 }
 .icon-arrow-left:before {
-    content: "\e60a";
+  content: "\e60a";
 }
 .icon-arrow-down:before {
-    content: "\e608";
+  content: "\e608";
 }
 .icon-arrow-up:before {
-    content: "\e609";
+  content: "\e609";
 }
 .icon-checkbox-outline:before {
-    content: "\e607";
+  content: "\e607";
 }
 .icon-remove:before {
-    content: "\e600";
+  content: "\e600";
 }
 .icon-add2:before {
-    content: "\e601";
+  content: "\e601";
 }
 .icon-exit:before {
-    content: "\e602";
+  content: "\e602";
 }
 .icon-add:before {
-    content: "\e603";
+  content: "\e603";
 }
 .icon-add3:before {
-    content: "\e604";
+  content: "\e604";
 }
 .icon-expand:before {
-    content: "\e605";
+  content: "\e605";
 }
 .icon-checkbox:before {
-    content: "\e606";
+  content: "\e606";
 }
 

jet/static/jet/js/src/features/scroll-to-bottom-detector.js

@@ -0,0 +1,31 @@
+var $ = require('jquery');
+
+var ScrollToBottomDetector = function() { };
+
+ScrollToBottomDetector.prototype = {
+    prevScrollTop: null,
+    initDetector: function() {
+        var self = this;
+
+        $(window).on('scroll', function() {
+            if (self.prevScrollTop != null && $(window).scrollTop() > self.prevScrollTop && $(window).scrollTop() > 60) {
+                $(document.body).addClass('scroll-to-bottom');
+            } else {
+                $(document.body).removeClass('scroll-to-bottom');
+            }
+
+            self.prevScrollTop = $(window).scrollTop();
+        });
+    },
+    run: function() {
+        try {
+            this.initDetector();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+};
+
+$(document).ready(function() {
+    new ScrollToBottomDetector().run();
+});

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

@@ -4,6 +4,8 @@ var SideBarBookmarks = require('./bookmarks');
 var SideBarPopup = require('./popup');
 
 require('perfect-scrollbar/jquery')($);
+require('browsernizr/test/touchevents');
+require('browsernizr');
 
 var SideBar = function($sidebar) {
     this.$sidebar = $sidebar;
@@ -11,7 +13,20 @@ var SideBar = function($sidebar) {
 
 SideBar.prototype = {
     initScrollBars: function($sidebar) {
-        $sidebar.find('.sidebar-wrapper').perfectScrollbar();
+        if (!$(document.documentElement).hasClass('touchevents')) {
+            $sidebar.find('.sidebar-wrapper').perfectScrollbar();
+        }
+    },
+    initSideBarToggle: function() {
+        $('.sidebar-toggle').on('click', function(e) {
+            e.preventDefault();
+
+            var $dependent = $('.sidebar-dependent');
+            var open = !$dependent.hasClass('sidebar-opened');
+
+            $(document.body).toggleClass('non-scrollable', open);
+            $dependent.toggleClass('sidebar-opened', open);
+        });
     },
     run: function() {
         var $sidebar = this.$sidebar;
@@ -22,6 +37,7 @@ SideBar.prototype = {
 
         try {
             this.initScrollBars($sidebar);
+            this.initSideBarToggle();
         } catch (e) {
             console.error(e);
         }

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

@@ -2,6 +2,9 @@ require('./../../utils/jquery-icontains');
 
 var $ = window.jQuery = require('jquery');
 
+require('browsernizr/test/touchevents');
+require('browsernizr');
+
 var SideBarPopup = function($sidebar) {
     this.$sidebar = $sidebar;
 };
@@ -70,7 +73,10 @@ SideBarPopup.prototype = {
             self.$currentSection = null;
 
             $popupContainer.stop().fadeOut(200, 'swing');
+
+            if (!$(document.documentElement).hasClass('touchevents')) {
                 $(document.body).removeClass('non-scrollable');
+            }
         }, delay);
     },
     initSectionsDisplay: function($sidebar) {
@@ -86,6 +92,17 @@ SideBarPopup.prototype = {
             self.openPopup($popupContainer, changingSection ? 500 : null);
         }).on('mouseleave', function() {
             self.closePopup($popupContainer);
+        }).on('click', function(e) {
+            e.preventDefault();
+
+            if (!$(document.documentElement).hasClass('touchevents')) {
+                document.location = $(this).attr('href');
+            }
+        });
+
+        $sidebar.find('.sidebar-back').on('click', function(e) {
+            e.preventDefault();
+            self.closePopup($popupContainer);
         });
 
         $popup.on('mouseenter', function() {

jet/static/jet/js/src/main.js

@@ -28,3 +28,4 @@ require('./features/themes');
 require('./features/siblings');
 require('./features/selects');
 require('./features/related-popups');
+require('./features/scroll-to-bottom-detector');

jet/templates/admin/base.html

@@ -51,8 +51,16 @@
             <span class="icon-refresh loading-indicator"></span>
         </div>
 
-        <div class="sidebar">
+        <div class="sidebar-header sidebar-dependent">
+            <a href="#" class="sidebar-header-menu sidebar-toggle">
+                <span class="sidebar-header-menu-icon icon-menu"></span>
+            </a>
+        </div>
+        <div class="sidebar sidebar-dependent">
             <div class="sidebar-wrapper">
+                <a href="#" class="sidebar-close sidebar-toggle">
+                    <span class="sidebar-close-icon icon-arrow-left"></span>
+                </a>
                 <div id="branding">
                     {% block branding %}{% endblock %}
                 </div>
@@ -220,6 +228,9 @@
             {% if app_list and not SIDE_MENU_COMPACT %}
                 <div class="sidebar-popup-container">
                     <div class="sidebar-popup">
+                        <a href="#" class="sidebar-close popup sidebar-back">
+                            <span class="sidebar-close-icon icon-arrow-left"></span>
+                        </a>
                         {% for app in app_list.apps|add:app_list.pinned_apps %}
                             <div class="sidebar-popup-section sidebar-popup-section-{{ app.app_label }}">
                                 <div class="sidebar-popup-title">

package.json

@@ -2,6 +2,7 @@
   "name": "django-jet",
   "devDependencies": {
     "browserify": "13.0.1",
+    "browsernizr": "2.1.0",
     "es6-promise": "3.2.1",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "3.1.0",