Fix web site scrolling on mobile browsers

Scrolling pages on the Helm web site is difficult on mobile devices due to nested scrolling containers. This changeset removes the nested scrolling containers. The fix to remove the nested scrolling containers caused pages to start scrolling horizontally because the content of the pages have negative margins, which makes the page wider than 100%. The rest of this changeset addresses the negative margins by removing them and/or offsetting them in each element that was causing the page to horizontal scroll. Fixes helm#741 Fixes helm#1393 Fixes helm#1464 Signed-off-by: Matt Light <[email protected]>
lightster · Dec 9, 2023 · 7bd3411 · 7bd3411
1 parent 4e44191
commit 7bd3411
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 33 deletions.
diff --git a/themes/helm/assets/sass/bulma/sass/components/level.sass b/themes/helm/assets/sass/bulma/sass/components/level.sass
@@ -1,5 +1,9 @@
 $level-item-spacing: ($block-spacing / 2) !default
 
+.columns.level-columns
+  margin-left: 0
+  margin-right: 0
+
 .level
   @extend %block
   align-items: center

diff --git a/themes/helm/assets/sass/docs-responsive.scss b/themes/helm/assets/sass/docs-responsive.scss
@@ -201,14 +201,6 @@
 // mobile adjustments
 */
 @media only screen and (max-width: 768px) {
-  html,
-  body,
-  #helm {
-    width: 100vw !important;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
   // mobile menu
   .navbar-burger {
     position: fixed;
@@ -435,6 +427,11 @@
     }
   }
 
+  .content-columns.columns {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   section.content-docs {
     order: 1;
   }
@@ -450,13 +447,13 @@
     bottom: auto;
     left: auto;
     min-height: 2rem;
-    width: 100vw;
+    width: 100%;
     overflow: visible;
 
     .sidebar {
       position: relative;
       margin-top: 2.5rem;
-      width: 100vw;
+      width: 100%;
       min-height: 2rem;
       padding: 0;
       border: none;
@@ -469,7 +466,7 @@
 
     // toggle docs menu on mobile
     #sidebar-toggle {
-      width: 100vw;
+      width: 100%;
       position: relative;
       text-align: center;
       margin: 0 auto;
@@ -491,11 +488,9 @@
       display: none;
       padding: 1rem 7.5vw;
       border: 12px solid $light2;
-      margin-left: 8px;
       z-index: 940;
 
       .sidebar-nav {
-        width: 80vw;
         position: relative;
         top: auto;
         bottom: auto;
@@ -509,7 +504,6 @@
         display: block;
         left: 0;
         right: 0;
-        width: 96.8%;
         min-height: 100vh;
         z-index: 1850;
         background: url("/img/topography.png") left 100px repeat-x;
@@ -539,7 +533,7 @@
 
   // content sizes
   .content-wrapper {
-    max-width: 90vw !important;
+    max-width: 92vw !important;
     padding: 2rem 5vw 3rem;
 
     h1 {
@@ -548,8 +542,8 @@
     }
 
     article {
-      padding-left: 7.5vw;
-      padding-right: 7.5vw;
+      padding-left: 5vw;
+      padding-right: 5vw;
 
       h1 {
         font-size: 5.35vw;

diff --git a/themes/helm/assets/sass/helm-boat.scss b/themes/helm/assets/sass/helm-boat.scss
@@ -24,7 +24,6 @@
 
 // boat full width default
 .boat {
-  width: 100vw;
   position: absolute;
   top: auto;
   bottom: 8px;
@@ -70,7 +69,7 @@
     margin: 0;
     left: 0;
       // offsets for navy border
-      right: 15px;
+      right: 0;
       bottom: -8px;
     height: 15vw;
     overflow: hidden;
@@ -206,4 +205,4 @@
   h1 {
     font-size:24px;
   }
-}*/
+}*/
diff --git a/themes/helm/layouts/404.html b/themes/helm/layouts/404.html
@@ -5,7 +5,7 @@
 {{ define "main" }}
 {{ $home := site.BaseURL }}
 
-<div id="helm" class="page-wrapper page-home page-404">
+<div class="page-wrapper page-home page-404">
   <header>
     {{ partial "banner.html" . }}
     {{ partial "nav.html" . }}

diff --git a/themes/helm/layouts/blog/list.html b/themes/helm/layouts/blog/list.html
@@ -10,7 +10,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <section class="column content-blog">
       <article class="content-wrapper">
         {{ .Content }}

diff --git a/themes/helm/layouts/blog/single.html b/themes/helm/layouts/blog/single.html
@@ -6,7 +6,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <section class="column content-blog">
       <article class="content-wrapper">
 

diff --git a/themes/helm/layouts/docs/list.html b/themes/helm/layouts/docs/list.html
@@ -12,7 +12,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <aside class="column is-narrow is-gapless sidebar-wrapper">
       {{ partial "sidebar.html" . }}
     </aside>

diff --git a/themes/helm/layouts/docs/single.html b/themes/helm/layouts/docs/single.html
@@ -11,7 +11,7 @@
     {{ partial "nav-fixed.html" . }}
   </header>
 
-  <div class="columns" id="helm">
+  <div class="columns content-columns">
     <aside class="column is-narrow is-gapless sidebar-wrapper">
       {{ partial "sidebar.html" . }}
     </aside>

diff --git a/themes/helm/layouts/index.html b/themes/helm/layouts/index.html
@@ -28,8 +28,8 @@ <h2>
   </section>
 
   <section class="home-overview-wrap">
-    <section class="columns">
-      <div class="column has-text-centered">
+    <section class="">
+      <div class="has-text-centered">
         <img src="/img/helm-pyramid.png" alt="Helm" class="pyramid" />
         <h2>{{ T "main_what_is_helm_title" | markdownify }}</h2>
       </div>
@@ -124,7 +124,7 @@ <h2>{{ T "get_charts_title" }}</h2>
       </div>
     </section>
 
-    <section class="has-text-centered columns">
+    <section class="columns level-columns has-text-centered">
       <nav class="level level-faqs">
         <div class="level-item has-text-centered is-hidden-mobile">
           <div>

diff --git a/themes/helm/layouts/partials/footer.html b/themes/helm/layouts/partials/footer.html
@@ -1,15 +1,14 @@
 <footer>
-  <div class="columns helm-contrib-logos">
-    <div class="column has-centered-text">
+  <div class="helm-contrib-logos">
+    <div class="has-centered-text">
       <img src="/img/helm.svg" style="max-width: 140px;" alt="Helm is supported by and built with a community of over 250 contributors" class="helm-logo">
 
       <hr>
       <p class="contributors">{{ T "footer_support_title" }}</p>
       <hr>
 
-      <div class="contrib-logos columns">
+      <div class="contrib-logos">
 	<!-- Add to list in alphabetical order. -->
-        <div class="column">
           <a target="_blank" href="https://bitnami.com/"><img src="/img/logowall/bitnami.png" alt="Bitnami"></a>
 
           <a target="_blank" href="https://bloodorange.io"><img src="/img/logowall/bloodorange.png" alt="Blood Orange"></a>
@@ -34,7 +33,6 @@
 
           <a target="_blank" href="https://www.weave.works/"><img src="/img/logowall/weaveworks.png" alt="Weaveworks"></a>
 
-        </div>
       </div>
 
       <p><small>{{ T "footer_support_subtitle" | markdownify }}</small></p>