doc(styles): Scroll menu and main content separately (#1685)

* doc(styles): Scroll menu and main content separately Signed-off-by: thisisommore <[email protected]> * Remove element `<a class="exit-off-canvas"></a>` Signed-off-by: thisisommore <[email protected]> * Update CONTRIBUTORS.md file Signed-off-by: thisisommore <[email protected]> * Use % for heights instead of vh Signed-off-by: thisisommore <[email protected]> * height should be 100% irrespective of width of device Signed-off-by: thisisommore <[email protected]> * Allow overflowing vertically Signed-off-by: thisisommore <[email protected]>
getporter · Jul 28, 2021 · 9253596 · 9253596
1 parent 007c52c
commit 9253596
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 6 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -54,3 +54,4 @@ and we will add you. **All** contributors belong here. 💯
 * [Divyam Bhasin](https://github.com/divbhasin)
 * [Ritesh Yadav](https://github.com/DARK-art108)
 * [Jérémy Audiger](https://github.com/jaudiger)
+* [Om More](https://github.com/thisisommore)
diff --git a/docs/themes/porter/assets/sass/docs-layout.scss b/docs/themes/porter/assets/sass/docs-layout.scss
@@ -27,6 +27,7 @@ body {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 100%;
+  height:100%;
   overflow-y: scroll;
   overflow-x: hidden;
   padding-left: 300px;

diff --git a/docs/themes/porter/assets/sass/docs-responsive.scss b/docs/themes/porter/assets/sass/docs-responsive.scss
@@ -3,6 +3,7 @@
 @media only screen and (max-width: 64.063em) {
   .container-full {
     padding-left: 0;
+    overflow-y: auto;
   }
 
   .left-off-canvas-toggle .fa {
@@ -155,6 +156,8 @@
   }
 
   aside.left-off-canvas-menu {
+    height: calc(100vh - calc(100vh - 100%));
+    overflow-y: auto;
     ul {
       background: $blue2 !important;
 

diff --git a/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss b/docs/themes/porter/assets/sass/foundation/components/_offcanvas.scss
@@ -90,6 +90,7 @@ $menu-slide: "transform 500ms ease" !default;
 @mixin wrap-base {
   position: relative;
   width: 100%;
+  height:100%;
 }
 
 @mixin translate3d($tx, $ty, $tz) {
@@ -141,11 +142,12 @@ $menu-slide: "transform 500ms ease" !default;
 }
 
 // OFF CANVAS WRAP
-// Wrap visible content and prevent scroll bars
+// Wrap visible content and prevent horizontal scroll bars
 @mixin off-canvas-wrap {
   @include kill-flicker;
   @include wrap-base;
-  overflow: hidden;
+  overflow-y: visible;
+  overflow-x: clip;
   &.move-right,
   &.move-left,
   &.move-bottom,

diff --git a/docs/themes/porter/assets/sass/helm-home.scss b/docs/themes/porter/assets/sass/helm-home.scss
@@ -1,7 +1,7 @@
 body.home {
   @include helvetica;
   overflow-x: hidden;
-
+  
   .row {
   max-width: 72rem;
   }
@@ -26,7 +26,9 @@ body.home {
     }
   }
 }
-
+html,body {
+  height: 100%;
+}
 nav.home-nav {
   position: absolute;
   min-height: 300px;
@@ -902,6 +904,9 @@ nav.home-nav {
     display: none;
   }
 
+  .off-canvas-wrap {
+    height:100%;
+  }
 
   // required to enforce "sticky" menu items when hamburger is clicked
   .off-canvas-wrap.move-left {

diff --git a/docs/themes/porter/layouts/partials/footer.html b/docs/themes/porter/layouts/partials/footer.html
@@ -1,8 +1,6 @@
 
     </div> <!-- /container-full-->
 
-    <a class="exit-off-canvas"></a>
-
     </div> <!-- /inner-wrap -->
   </div> <!-- /off-canvas-wrap -->