From 4c25266cf7709d006cbb81fc310f32e6f98a7e4c Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 1 Feb 2024 10:24:44 +0100 Subject: [PATCH] FIX: better supports ipad and hub footer nav (#25518) Since https://github.com/discourse/discourse/pull/25501 this behavior was broken. This PR attempts to fix it by being more fine grain. Also note that this PR is moving `footer-nav-ipad` and `footer-nav-visible` to the `html` element and not the `body`. It makes more sense as we are already adding most of other global state class like `keyboard-visible` to the `html` element. Tested on: - chrome desktop - safari ios - iphone - PWA ios - iphone - PWA ios - ipad - DiscourseHub iphone --- .../discourse/app/components/footer-nav.js | 8 +++--- .../stylesheets/common/base/menu-panel.scss | 4 +-- app/assets/stylesheets/common/base/topic.scss | 2 +- .../common/components/footer-nav.scss | 10 +++---- .../stylesheets/common/loading-slider.scss | 4 +-- .../stylesheets/common/chat-height-mixin.scss | 28 +++++++++---------- .../stylesheets/mobile/chat-footer.scss | 11 ++++++-- 7 files changed, 34 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/footer-nav.js b/app/assets/javascripts/discourse/app/components/footer-nav.js index b67ef518bd8..1464e5c4443 100644 --- a/app/assets/javascripts/discourse/app/components/footer-nav.js +++ b/app/assets/javascripts/discourse/app/components/footer-nav.js @@ -38,13 +38,13 @@ const FooterNavComponent = MountWidget.extend( } if (this.capabilities.isIpadOS) { - document.body.classList.add("footer-nav-ipad"); + document.documentElement.classList.add("footer-nav-ipad"); } else { this.bindScrolling(); window.addEventListener("resize", this.scrolled, false); this.appEvents.on("composer:opened", this, "_composerOpened"); this.appEvents.on("composer:closed", this, "_composerClosed"); - document.body.classList.add("footer-nav-visible"); + document.documentElement.classList.add("footer-nav-visible"); } }, @@ -58,7 +58,7 @@ const FooterNavComponent = MountWidget.extend( } if (this.capabilities.isIpadOS) { - document.body.classList.remove("footer-nav-ipad"); + document.documentElement.classList.remove("footer-nav-ipad"); } else { this.unbindScrolling(); window.removeEventListener("resize", this.scrolled); @@ -94,7 +94,7 @@ const FooterNavComponent = MountWidget.extend( "visible", this.mobileScrollDirection === null ? true : false ); - document.body.classList.toggle( + document.documentElement.classList.toggle( "footer-nav-visible", this.mobileScrollDirection === null ? true : false ); diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index b85235cc364..2ba4d097e44 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/app/assets/stylesheets/common/base/menu-panel.scss @@ -659,7 +659,7 @@ height: var(--base-height); - body.footer-nav-ipad & { - height: calc(var(--base-height) - var(--footer-nav-height, 0px)); + html.footer-nav-ipad & { + height: calc(var(--base-height) - var(--footer-nav-height)); } } diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 510facd7b5f..5bf9be3c922 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -169,7 +169,7 @@ $topic-progress-height: 42px; } } - body:not(.footer-nav-visible) & { + html:not(.footer-nav-visible) & { bottom: env(safe-area-inset-bottom); } diff --git a/app/assets/stylesheets/common/components/footer-nav.scss b/app/assets/stylesheets/common/components/footer-nav.scss index c9bbdbad0fb..90af4195638 100644 --- a/app/assets/stylesheets/common/components/footer-nav.scss +++ b/app/assets/stylesheets/common/components/footer-nav.scss @@ -5,12 +5,10 @@ $footer-nav-height: 49px; :root { - --footer-nav-height: 0px; + --footer-nav-height: #{$footer-nav-height}; } -body.footer-nav-visible { - --footer-nav-height: #{$footer-nav-height}; - +html.footer-nav-visible { #main-outlet { padding-bottom: calc(var(--footer-nav-height) + 15px); } @@ -72,13 +70,13 @@ body.footer-nav-visible { } @supports (-webkit-backdrop-filter: blur(10px)) { - body:not(.footer-nav-ipad) .footer-nav { + html:not(.footer-nav-ipad) .footer-nav { background-color: rgba(var(--header_background-rgb), 0.7); -webkit-backdrop-filter: blur(20px); } } -body.footer-nav-ipad { +html.footer-nav-ipad { padding-top: var(--footer-nav-height); .footer-nav { bottom: auto; diff --git a/app/assets/stylesheets/common/loading-slider.scss b/app/assets/stylesheets/common/loading-slider.scss index 04b8dfdcc37..e8ec89ff589 100644 --- a/app/assets/stylesheets/common/loading-slider.scss +++ b/app/assets/stylesheets/common/loading-slider.scss @@ -53,8 +53,8 @@ top: 1px; } - body.footer-nav-ipad & { - top: var(--footer-nav-height, 0px); + html.footer-nav-ipad & { + top: var(--footer-nav-height); } } diff --git a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss index 8d66b6cf977..0a82deb1783 100644 --- a/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss +++ b/plugins/chat/assets/stylesheets/common/chat-height-mixin.scss @@ -1,26 +1,24 @@ @mixin chat-height($inset: 0px) { // desktop and mobile // -1px is for the bottom border of the chat navbar - - height: calc( - var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - - var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - $inset + $base-height: calc( + var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - 1px - $inset ); + height: calc($base-height - var(--composer-height, 0px)); + // mobile with keyboard opened - .keyboard-visible & { - height: calc( - var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - - var(--footer-nav-height, 0px) - 1px - $inset - ); + html.keyboard-visible & { + height: calc($base-height); } // ipad - .footer-nav-ipad & { - height: calc( - var(--chat-vh, 1vh) * 100 - var(--header-offset, 0px) - - var(--composer-height, 0px) - var(--footer-nav-height, 0px) - 1px - - $inset - ); + html.footer-nav-ipad & { + height: calc($base-height - var(--composer-height, 0px)); + } + + // PWA/HUB without keyboard + html.footer-nav-visible:not(.keyboard-visible) & { + height: calc($base-height - var(--footer-nav-height, 0px)); } } diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss index 1908b31b2d8..cd4ef927e45 100644 --- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss +++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss @@ -20,9 +20,14 @@ position: sticky; bottom: 0; left: 0; - padding-bottom: calc( - env(safe-area-inset-bottom) + var(--footer-nav-height, 0px) - ); + padding-bottom: env(safe-area-inset-bottom); + + html.footer-nav-ipad &, + html.footer-nav-visible & { + padding-bottom: calc( + env(safe-area-inset-bottom) + var(--footer-nav-height, 0px) + ); + } &__item { display: flex;