Attempting to fix overflow issues with sidebar

server/documents/modules/sidebar.html.eco

@@ -31,6 +31,9 @@ themes      : ['Default']
     <div class="animation example">
       <h4 class="ui header">Animation</h4>
       <p>A sidebar can use different animations to change contexts</p>
+      <div class="ui button" data-animation="safe">
+        Safe
+      </div>
       <div class="ui button" data-animation="overlay">
         Overlay
       </div>
@@ -52,9 +55,6 @@ themes      : ['Default']
       <div class="ui button" data-animation="scale up">
         Scale Up
       </div>
-      <div class="ui button" data-animation="recede">
-        Recede
-      </div>
       <div class="ui button" data-animation="open door">
         Open Door
       </div>

server/files/javascript/semantic.js

@@ -59,7 +59,7 @@ semantic.ready = function() {
     $overview         = $('.overview.item, .overview.button'),
     $designer         = $('.designer.item'),
 
-    $sidebarButton    = $('.attached.launch.button'),
+    $sidebarButton    = $('.fixed.launch.button'),
     $code             = $('div.code').not('.existing'),
     $existingCode     = $('.existing.code'),
 

server/files/stylesheets/semantic.css

@@ -217,9 +217,9 @@ a:hover {
 
 #example .main.menu {
   top: 0px;
-  left: -1px;
+  left: auto;
   min-width: 320px;
-  width: calc(100% - 15px);
+  width: 100%;
   z-index: 900;
 
   -webkit-box-sizing: border-box;
@@ -253,24 +253,6 @@ a:hover {
   margin-left: 2em;
 }
 
-/*--------------
-     Pushed
----------------*/
-
-/*#example.show .main.menu,
-#example.pushed .main.menu,
-#example.hide .main.menu {
-  left: -1px;
-  top: -1px;
-  width: calc(100% + 2px);
-}
-*/
-#example.hide .attached.launch.button,
-#example.show .attached.launch.button {
-  transition: none !important;
-  pointer-events: none !important;
-  animation: none !important;
-}
 
 /*--------------
      Intro
@@ -582,10 +564,10 @@ body#example.index {
 #example .stripe .message {
   margin: 2em 0em;
 }
-#example .attached.launch.button {
+#example .fixed.launch.button {
   position: fixed;
   top: 63px;
-  left: -1px;
+  left: auto;
   z-index: 500;
   width: 55px;
   height: 50px;
@@ -606,7 +588,7 @@ body#example.index {
     0.3s width ease
   ;
 }
-#example .attached.launch.button .text {
+#example .fixed.launch.button .text {
   position: absolute;
   top: 15px;
   left: 54px;
@@ -627,12 +609,16 @@ body#example.index {
     0.3s opacity 0.3s
   ;
 }
-#example .attached.launch.button:hover {
+#example .fixed.launch.button:hover {
   width: 130px;
 }
-#example .attached.launch.button:hover .text {
+#example .fixed.launch.button:hover .text {
   opacity: 1;
 }
+#example.index .fixed.launch.button {
+  top: 96px;
+}
+
 
 #example .shortcuts {
   float: right;
@@ -647,10 +633,6 @@ body#example.index {
 #example.index pre.console {
   height: 120px;
 }
-#example.index .attached.launch.button {
-  top: 96px;
-}
-
 #example .main.container {
   position: relative;
   padding-bottom: 2em;
@@ -1416,7 +1398,7 @@ body.progress .ui.progress .bar {
     margin: 0px auto;
     max-width: 9999px;
   }
-  #example .attached.launch.button {
+  #example .fixed.launch.button {
     display: none;
   }
   #example .fixed .launch {

server/layouts/default.html.eco

@@ -247,7 +247,7 @@
           </div>
         </div>
       </div>
-      <div class="ui black huge launch right attached button">
+      <div class="ui black huge launch right attached fixed button">
         <i class="content icon"></i>
         <span class="text">Menu</span>
       </div>

src/definitions/modules/sidebar.js

@@ -58,6 +58,7 @@ $.fn.sidebar = function(parameters) {
         $sidebars       = $context.children(selector.sidebar),
         $pusher         = $context.children(selector.pusher),
         $page           = $pusher.children(selector.page),
+        $fixed          = $pusher.find(selector.fixed),
 
         element         = this,
         instance        = $module.data(moduleNamespace),
@@ -110,6 +111,7 @@ $.fn.sidebar = function(parameters) {
         bind: {
           clickaway: function() {
             $context
+              .on('scroll' + eventNamespace, module.event.preventScroll)
               .on('click' + eventNamespace, module.event.clickaway)
               .on('touchend' + eventNamespace, module.event.clickaway)
             ;
@@ -118,8 +120,7 @@ $.fn.sidebar = function(parameters) {
         unbind: {
           clickaway: function() {
             $context
-              .off('click' + eventNamespace)
-              .off('touchend' + eventNamespace)
+              .off(eventNamespace)
             ;
           }
         },
@@ -131,6 +132,32 @@ $.fn.sidebar = function(parameters) {
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $page     = $pusher.children(selector.page);
+          $fixed    = $pusher.find(selector.fixed);
+        },
+
+        convert: {
+          toAbsolute: function() {
+           /* var
+              scrollTop = $(document).scrollTop()
+            ;
+            $fixed
+              .each(function() {
+                console.log('translate3d(0, ' + scrollTop + 'px, 0px)');
+                $(this)
+                  .css({
+                    transform: 'translate3d(0, ' + scrollTop + 'px, 0px)'
+                  })
+                ;
+              })
+            ;*/
+          },
+          toFixed: function() {
+          /*  $fixed
+              .css({
+                transform: 'translate3d(0, 0px, 0px)'
+              })
+            ;*/
+          }
         },
 
         setup: {
@@ -147,10 +174,15 @@ $.fn.sidebar = function(parameters) {
                   .wrapAll($pusher)
               ;
             }
-            if($module.parent()[0] !== $context[0]) {
+            if($module.prevAll($page)[0] !== $page[0]) {
               module.debug('Moved sidebar to correct parent element');
-              $module.detach().appendTo($context);
+              $module.detach().prependTo($context);
             }
+            $fixed
+              .css({
+                transform: 'translate3d(0, 0px, 0px)'
+              })
+            ;
             module.refresh();
           },
           context: function() {
@@ -192,6 +224,7 @@ $.fn.sidebar = function(parameters) {
             if(settings.animation !== 'overlay') {
               module.hideAll();
             }
+            module.convert.toAbsolute();
             module.pushPage(function() {
               $.proxy(callback, element)();
               $.proxy(settings.onShow, element)();
@@ -212,6 +245,7 @@ $.fn.sidebar = function(parameters) {
           module.debug('Hiding sidebar', callback);
           if(module.is.visible()) {
             module.pullPage(function() {
+              module.convert.toFixed();
               $.proxy(callback, element)();
               $.proxy(settings.onHidden, element)();
             });
@@ -241,16 +275,18 @@ $.fn.sidebar = function(parameters) {
 
         pushPage: function(callback) {
           var
-            $transition = (settings.animation == 'overlay')
-              ? $module
-              : $pusher
+            $transition = (settings.animation == 'safe')
+              ? $context
+              : (settings.animation == 'overlay')
+                ? $module
+                : $pusher
           ;
           callback = $.isFunction(callback)
             ? callback
             : function(){}
           ;
           module.verbose('Adding context push state', $context);
-          if(settings.animation != 'overlay') {
+          if(settings.animation !== 'overlay') {
             module.remove.allVisible();
           }
           $transition
@@ -267,17 +303,19 @@ $.fn.sidebar = function(parameters) {
           module.set.visible();
           module.set.animation();
           module.set.direction();
-          setTimeout(function() {
+          requestAnimationFrame(function() {
             module.set.inward();
             module.set.pushed();
-          }, 500);
+          });
         },
 
         pullPage: function(callback) {
           var
-            $transition = (settings.animation == 'overlay')
-              ? $module
-              : $pusher
+            $transition = (settings.animation == 'safe')
+              ? $context
+              : (settings.animation == 'overlay')
+                ? $module
+                : $pusher
           ;
           callback = $.isFunction(callback)
             ? callback
@@ -648,8 +686,8 @@ $.fn.sidebar.settings = {
   verbose         : false,
   performance     : false,
 
-  animation       : 'scale down',
-  mobileAnimation : 'reveal',
+  animation       : 'safe',
+  mobileAnimation : 'safe',
 
   context         : 'body',
   useCSS          : true,
@@ -677,6 +715,7 @@ $.fn.sidebar.settings = {
 
   selector: {
     sidebar : '.ui.sidebar',
+    fixed   : '.ui.fixed',
     pusher  : '.pusher',
     page    : '.page',
     omitted : 'script, link, style, .ui.modal, .ui.nag'

src/definitions/modules/sidebar.less

@@ -26,7 +26,7 @@
 
 /* Sidebar Menu */
 .ui.sidebar {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   visibility: hidden;
@@ -53,7 +53,7 @@
   background: @canvasBackground !important;
   position: relative;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 /*--------------
@@ -61,14 +61,10 @@
 ---------------*/
 
 .pushable > .pusher {
-  position: relative;
   background: @canvasBackground;
-  left: 0;
   height: 100%;
-  z-index: 2;
-  transform: translate3d(0px, 0, 0);
+  z-index: 1002;
   transition: transform @duration @easing;
-  will-change: transform;
 }
 
 /*--------------
@@ -76,10 +72,8 @@
 ---------------*/
 
 .pushable > .pusher > .page {
+  position: relative;
   background: @bodyBackground;
-  overflow-y: auto;
-  height: 100%;
-  -webkit-overflow-scrolling: touch;
 }
 
 /*--------------
@@ -87,7 +81,7 @@
 ---------------*/
 
 .pushable > .pusher > .page:after {
-  position: fixed;
+  position: absolute;
   top: 0px;
   right: 0px;
   content: '';
@@ -96,7 +90,7 @@
   height: 0px;
   overflow: hidden;
   opacity: 0;
-  z-index: 999;
+  z-index: @dimmerLayer;
   transition: opacity @duration;
   will-change: opacity;
 }
@@ -110,6 +104,10 @@
      Pushed
 ---------------*/
 
+.pushable.pushed {
+  overflow-x: hidden;
+}
+
 /* Show Dimmer */
 .pushable.pushed > .pusher > .page:after {
   width: 100% !important;
@@ -157,7 +155,7 @@
 /* Set-up */
 .pushable.overlay > .visible.ui.sidebar {
   transform: translate3d(-100%, 0, 0);
-  z-index: 3;
+  z-index: @topLayer;
 }
 
 /* Pushed */
@@ -196,6 +194,32 @@
   transition: transform @duration @easing;
 }
 
+/*--------------
+    Safe Mode
+---------------*/
+
+/* Set-Up */
+.pushable.safe > .pusher {
+  position: relative;
+  transform: none !important;
+  transition: none !important;
+}
+.pushable.safe > .pusher {
+  transform: none !important;
+  transition: none !important;
+}
+
+/* Pushed */
+.pushable.safe.pushed  {
+  margin-left: @sidebarWidth !important;
+}
+
+.pushable.safe.show,
+.pushable.safe.hide {
+  transition: margin @duration @easing !important;
+}
+
+
 
 /*--------------
      Reveal
@@ -204,10 +228,9 @@
 /* Set-up */
 .pushable.reveal > .pusher {
   transform: translate3d(0px, 0, 0);
-  z-index: 2;
+  z-index: @bottomLayer;
 }
 .pushable.reveal > .visible.ui.sidebar {
-  z-index: 1;
   transition: none;
 }
 
@@ -224,12 +247,10 @@
 /* Set-up */
 .pushable.slide.along > .pusher {
   transform: translate3d(0px, 0, 0);
-  z-index: 3;
+  z-index: @bottomLayer;
 }
 .pushable.slide.along > .visible.ui.sidebar {
-  z-index: 2;
   transform: translate3d(-50%, 0, 0);
-  transition: transform @duration @easing;
 }
 
 /* Pushed */
@@ -240,6 +261,11 @@
   transform: translate3d(0%, 0, 0);
 }
 
+.pushable.slide.along.show > .visible.ui.sidebar,
+.pushable.slide.along.hide > .visible.ui.sidebar {
+  transition: transform @duration @easing;
+}
+
 
 /*--------------
    Slide Out
@@ -251,7 +277,6 @@
 }
 .pushable.slide.out > .visible.ui.sidebar {
   transform: translate3d(50%, 0, 0);
-  transition: transform @duration @easing;
 }
 
 /* Pushed */
@@ -262,6 +287,12 @@
   transform: translate3d(0%, 0, 0);
 }
 
+.pushable.slide.out.show > .visible.ui.sidebar,
+.pushable.slide.out.hide > .visible.ui.sidebar {
+  transition: transform @duration @easing;
+}
+
+
 
 /*--------------
    Scale Down
@@ -269,20 +300,22 @@
 
 /* Set-up */
 .pushable.scale.down {
-  perspective: 1500px;
+  perspective: @perspective;
 }
 .pushable.scale.down > .pusher {
   transform-style: preserve-3d;
-  z-index: 2;
+  z-index: @bottomLayer;
+  transform-origin: 75% 50%;
+  overflow: hidden;
 }
 .pushable.scale.down > .visible.ui.sidebar {
   transform: translate3d(-100%, 0, 0);
-  z-index: 3;
+  z-index: @topLayer;
 }
 
 /* Pushed */
 .pushable.scale.down.pushed > .pusher {
-  transform: translate3d(210px, 0px, -500px);
+  transform: scale(0.75);
 }
 .pushable.scale.down.pushed > .visible.ui.sidebar {
   transform: translate3d(0, 0, 0);
@@ -301,16 +334,12 @@
 
 /* Set-up */
 .pushable.scale.up {
-  perspective: 1500px;
+  perspective: @perspective;
   perspective-origin: 0% 50%;
 }
 .pushable.scale.up > .ui.sidebar {
-  z-index: 1;
   transform: translate3d(0, 0, -@sidebarWidth);
 }
-.pushable.scale.up > .pusher {
-  z-index: 2;
-}
 
 /* Pushed */
 .pushable.scale.up.pushed > .pusher {
@@ -327,55 +356,22 @@
 }
 
 
-/*--------------
-     Recede
----------------*/
-
-/* Set-up */
-.pushable.recede {
-  perspective: 1500px;
-}
-.pushable.recede > .ui.sidebar {
-  opacity: 1;
-  transform: translate3d(-100%, 0, 0);
-  z-index: 3;
-}
-.pushable.recede > .pusher {
-  transform: translate3d(0%, 0px, 0px) rotateY(0deg);
-  z-index: 2;
-}
-
-/* Pushed */
-.pushable.recede.pushed > .pusher {
-  transform: translate3d(15%, 0px, -400px) rotateY(-15deg);
-}
-.pushable.recede.pushed > .visible.ui.sidebar {
-  transform: translate3d(0, 0, 0);
-}
-
-/* Animation */
-.pushable.recede.show > .ui.sidebar,
-.pushable.recede.hide > .ui.sidebar {
-  transition: transform @duration @easing;
-}
-
 /*--------------
    Open Door
 ---------------*/
 
 /* Set-up */
 .pushable.open.door {
-  perspective: 1500px;
+  perspective: @perspective;
 }
 .pushable.open.door > .ui.sidebar {
   opacity: 1;
   transform: translate3d(-100%, 0, 0);
-  z-index: 3;
+  z-index: @topLayer;
 }
 .pushable.open.door > .pusher {
   transform-origin: 100% 50%;
   transform: rotateY(0deg);
-  z-index: 2;
 }
 
 
@@ -399,11 +395,11 @@
 
 /* Set-up */
 .pushable.rotate.in {
-  perspective: 1500px;
+  perspective: @perspective;
   perspective-origin: 0% 50%;
 }
 .pushable.rotate.in > .pusher {
-  transform-style: preserve-3d;
+  perspective: none;
 }
 .pushable.rotate.in > .ui.sidebar {
   transform: translate3d(-100%, 0, 0) rotateY(90deg);

src/themes/packages/default/modules/sidebar.variables

@@ -10,6 +10,12 @@
 
 @canvasBackground: @lightBlack;
 @pageBackground: @bodyBackground;
+@perspective: 1500px;
 
 @duration: 0.5s;
-@easing: ease;
+@easing: ease;
+
+@bottomLayer: 1001;
+@middleLayer: 1002;
+@dimmerLayer: 1003;
+@topLayer: 1004;