From 7bd3411adfe5915782fcb6052e637094a3c4bc04 Mon Sep 17 00:00:00 2001 From: Matt Light Date: Sat, 9 Dec 2023 15:04:52 -0800 Subject: [PATCH 1/2] 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 #741 Fixes #1393 Fixes #1464 Signed-off-by: Matt Light --- .../sass/bulma/sass/components/level.sass | 4 +++ themes/helm/assets/sass/docs-responsive.scss | 28 ++++++++----------- themes/helm/assets/sass/helm-boat.scss | 5 ++-- themes/helm/layouts/404.html | 2 +- themes/helm/layouts/blog/list.html | 2 +- themes/helm/layouts/blog/single.html | 2 +- themes/helm/layouts/docs/list.html | 2 +- themes/helm/layouts/docs/single.html | 2 +- themes/helm/layouts/index.html | 6 ++-- themes/helm/layouts/partials/footer.html | 8 ++---- 10 files changed, 28 insertions(+), 33 deletions(-) diff --git a/themes/helm/assets/sass/bulma/sass/components/level.sass b/themes/helm/assets/sass/bulma/sass/components/level.sass index 608f291e7..ea91407b6 100644 --- 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 index 1c5dc066f..7d2eaa3d0 100755 --- 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 index 5a525526d..afd776ec5 100644 --- 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; } -}*/ \ No newline at end of file +}*/ diff --git a/themes/helm/layouts/404.html b/themes/helm/layouts/404.html index a01fbd577..5965bcc65 100755 --- a/themes/helm/layouts/404.html +++ b/themes/helm/layouts/404.html @@ -5,7 +5,7 @@ {{ define "main" }} {{ $home := site.BaseURL }} -
+
{{ partial "banner.html" . }} {{ partial "nav.html" . }} diff --git a/themes/helm/layouts/blog/list.html b/themes/helm/layouts/blog/list.html index 15e954d80..10f6105bc 100755 --- a/themes/helm/layouts/blog/list.html +++ b/themes/helm/layouts/blog/list.html @@ -10,7 +10,7 @@ {{ partial "nav-fixed.html" . }}
-
+
{{ .Content }} diff --git a/themes/helm/layouts/blog/single.html b/themes/helm/layouts/blog/single.html index 753f53f52..c2f98eade 100755 --- a/themes/helm/layouts/blog/single.html +++ b/themes/helm/layouts/blog/single.html @@ -6,7 +6,7 @@ {{ partial "nav-fixed.html" . }} -
+
diff --git a/themes/helm/layouts/docs/list.html b/themes/helm/layouts/docs/list.html index d066dc41e..1fd0b0729 100755 --- a/themes/helm/layouts/docs/list.html +++ b/themes/helm/layouts/docs/list.html @@ -12,7 +12,7 @@ {{ partial "nav-fixed.html" . }} -
+
diff --git a/themes/helm/layouts/docs/single.html b/themes/helm/layouts/docs/single.html index 19264c397..4bf8c9aee 100644 --- a/themes/helm/layouts/docs/single.html +++ b/themes/helm/layouts/docs/single.html @@ -11,7 +11,7 @@ {{ partial "nav-fixed.html" . }} -
+
diff --git a/themes/helm/layouts/index.html b/themes/helm/layouts/index.html index 36c9b9fbf..e424ae963 100755 --- a/themes/helm/layouts/index.html +++ b/themes/helm/layouts/index.html @@ -28,8 +28,8 @@

-
-
+
+
Helm

{{ T "main_what_is_helm_title" | markdownify }}

@@ -124,7 +124,7 @@

{{ T "get_charts_title" }}

-
+
-
-
- Helm -

{{ T "main_what_is_helm_title" | markdownify }}

-
-
+
+ Helm +

{{ T "main_what_is_helm_title" | markdownify }}

+