]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 83742c0)
Add inner wrapper to off-canvas to fix overflow and jitter issues
authorGeoff Kimball <geoff@zurb.com>
Wed, 18 Nov 2015 00:54:46 +0000 (16:54 -0800)
committerGeoff Kimball <geoff@zurb.com>
Wed, 18 Nov 2015 00:54:59 +0000 (16:54 -0800)
docs/layout/default.html patch | blob | blame | history
docs/pages/off-canvas.md patch | blob | blame | history
docs/partials/off-canvi.html patch | blob | blame | history
js/foundation.offcanvas.js patch | blob | blame | history
scss/components/_off-canvas.scss patch | blob | blame | history

diff --git a/docs/layout/default.html b/docs/layout/default.html
index e7fed08d400d7733327f8f01421cd4e361c47de5..4956a0708c987e9f747f51f307e18d169bf86830 100644 (file)
--- a/docs/layout/default.html
+++ b/docs/layout/default.html
@@ -14,6 +14,8 @@
   </head>
   <body>
 
+    <div class="off-canvas-wrapper" data-off-canvas-wrapper>
+
     {{> off-canvi}}
 
     <div class="main-content" data-off-canvas-content>
@@ -44,6 +46,8 @@
       {{> footer}}
     </div>
 
+    </div>
+
     <script src="assets/js/vendor.js"></script>
     <script src="assets/js/foundation.js"></script>
     <script src="assets/js/docs.js"></script>
diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 205e66054a0d00f956369426b738f3c596a28fc1..f686373262eb918f8c3f2c0a3aa289294ee41815 100644 (file)
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -19,14 +19,24 @@ tags:
 
 ## Setup
 
-Create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Make sure the off-cavnas also has a unique ID so it can be targeted.
+To start, create a wrapper to house your entire page. It has the class `.off-canvas-wrapper` and the attribute `data-off-canvas-wrapper`.
+
+```html
+<body>
+  <div class="off-canvas-wrapper" data-off-canvas-wrapper></div>
+</body>
+```
+
+Inside this wrapper, create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Make sure the off-cavnas also has a unique ID so it can be targeted.
 
 Along with the menu, the main content of your page will be housed in its own container with the class `.main-content` and attribute `data-off-canvas`.
 
 ```html
 <body>
-  <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-position="left"></div>
-  <div class="main-content" data-off-canvas-content></div>
+  <div class="off-canvas-wrapper" data-off-canvas-wrapper>
+    <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-position="left"></div>
+    <div class="main-content" data-off-canvas-content></div>
+  </div>
 </body>
 ```
 
@@ -46,9 +56,11 @@ A design can have two menus: one on the left, and one on the right. Be sure that
 
 ```html
 <body>
-  <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
-  <div class="off-canvas position-right" id="offCanvas" data-off-canvas></div>
-  <div class="main-content" data-off-canvas-content></div>
+  <div class="off-canvas-wrapper" data-off-canvas-wrapper>
+    <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
+    <div class="off-canvas position-right" id="offCanvas" data-off-canvas></div>
+    <div class="main-content" data-off-canvas-content></div>
+  </div>
 </body>
 ```
 
diff --git a/docs/partials/off-canvi.html b/docs/partials/off-canvi.html
index e5f62c54d71c717a690e1861a6abfe4b7f59225b..965895f62429f820c22a3efb7bcf0f38decaf961 100644 (file)
--- a/docs/partials/off-canvi.html
+++ b/docs/partials/off-canvi.html
@@ -25,17 +25,3 @@
     <li><a href="#">Sites</a></li>
   </ul>
 </div>
-
-<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
-  <button class="close-button" aria-label="Close menu" type="button" data-close>
-    <span aria-hidden="true">&times;</span>
-  </button>
-  <ul class="vertical menu">
-    <li><a href="#">Foundation</a></li>
-    <li><a href="#">Dot</a></li>
-    <li><a href="#">ZURB</a></li>
-    <li><a href="#">Com</a></li>
-    <li><a href="#">Slash</a></li>
-    <li><a href="#">Sites</a></li>
-  </ul>
-</div>
diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 872df780dd5b92adf9d8ab0a9a596d2394495553..aa9b13c48a943d4b6f65a46fcf0cf43aa53cd720 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -121,7 +121,7 @@ OffCanvas.prototype._init = function() {
     this._setMQChecker();
   }
   if(!this.options.transitionTime){
-    this.options.transitionTime = parseFloat(window.getComputedStyle(document.body).transitionDuration) * 1000;
+    this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
   }
 };
 
@@ -211,7 +211,7 @@ OffCanvas.prototype.open = function(event, trigger) {
    * @event OffCanvas#opened
    */
   Foundation.Move(this.options.transitionTime, this.$element, function(){
-    $body.addClass('is-off-canvas-open is-open-'+ _this.options.position);
+    $('[data-off-canvas-wrapper]').addClass('is-off-canvas-open is-open-'+ _this.options.position);
 
     _this.$element
       .addClass('is-open')
@@ -261,7 +261,7 @@ OffCanvas.prototype.close = function() {
   var _this = this;
 
    Foundation.Move(this.options.transitionTime, this.$element, function(){
-    $('body').removeClass('is-off-canvas-open is-open-'+_this.options.position);
+    $('[data-off-canvas-wrapper]').removeClass('is-off-canvas-open is-open-'+_this.options.position);
 
     _this.$element.removeClass('is-open');
     // Foundation._reflow();
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 71d342cf3a8f88e598f8acfc8e8b042a181a4f76..8795e20a763ff7893f0b66cf4f67ad185240d137 100644 (file)
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -12,7 +12,7 @@ $offcanvas-size: 250px;
 
 /// Background color of an off-canvas menu.
 /// @type Color
-$offcanvas-background: $white;
+$offcanvas-background: $light-gray;
 
 /// Z-index of an off-canvas menu.
 /// @type Number
@@ -44,28 +44,40 @@ $maincontent-prevent-scroll: true !default;
 /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
 @mixin off-canvas-basics {
   // Extra properties needed on <html> and <body> to make off-canvas work
-
   html,
   body {
     height: 100%;
   }
 
+  html {
+    position: relative;
+    overflow: hidden;
+    backface-visibility: hidden;
+    width: 100%;
+  }
+
   body {
+    width: 100%;
     overflow-x: hidden;
-    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+    position: relative;
     backface-visibility: hidden;
+
     @if $maincontent-prevent-scroll == true {
       &.is-off-canvas-open {
-        overflow-y: hidden;//proposed change to prevent scroll on offcanvas open.
+        overflow-y: hidden;
       }
     }
   }
 
+  .off-canvas-wrapper {
+    position: relative;
+    width: 100%;
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+
   // Click-to-exit overlay (generated by JavaScript)
   .js-off-canvas-exit {
     display: none;
-    //chris
-    // position: fixed;
     position: absolute;
     top: 0;
     left: 0;
@@ -87,6 +99,8 @@ $maincontent-prevent-scroll: true !default;
   position: absolute;
   background: $offcanvas-background;
   z-index: $offcanvas-zindex;
+  min-height: 100%;
+  transform: translateX(0px);
 }
 
 @mixin off-canvas-position(
@@ -124,6 +138,7 @@ $maincontent-prevent-scroll: true !default;
   background: $body-background;
   transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
   backface-visibility: hidden;
+  z-index: 1;
 
   @if hasvalue($maincontent-shadow) {
     box-shadow: $maincontent-shadow;
Mirror of https://github.com/foundation/foundation-sites.git