From 709b3f6244c04c8d7a246f85657377b879be050a Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Fri, 6 Sep 2024 16:01:44 -0700 Subject: [PATCH 1/3] fix: Fix inaccessible content on public pages due to overlapping footer Signed-off-by: Christopher Ng --- .../BeforeTemplateRenderedListener.php | 4 +++ core/css/public.scss | 14 ++-------- core/src/public.ts | 26 +++++++++++++++++++ webpack.modules.js | 1 + 4 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 core/src/public.ts diff --git a/core/Listener/BeforeTemplateRenderedListener.php b/core/Listener/BeforeTemplateRenderedListener.php index 5f3fb6d967e7a..62f403d800250 100644 --- a/core/Listener/BeforeTemplateRenderedListener.php +++ b/core/Listener/BeforeTemplateRenderedListener.php @@ -47,6 +47,10 @@ public function handle(Event $event): void { Util::addScript('core', 'unsupported-browser-redirect'); } + if ($event->getResponse()->getRenderAs() === TemplateResponse::RENDER_AS_PUBLIC) { + Util::addScript('core', 'public'); + } + \OC_Util::addStyle('server', null, true); if ($event instanceof BeforeLoginTemplateRenderedEvent) { diff --git a/core/css/public.scss b/core/css/public.scss index 7001a4ca6dac5..ebf187f0db522 100644 --- a/core/css/public.scss +++ b/core/css/public.scss @@ -1,17 +1,7 @@ #body-public { - --footer-height: calc(var(--default-line-height) + 2 * var(--default-grid-baseline));; - - &:has(.footer__legal-links), - &:has(.footer__simple-sign-up) { - --footer-height: calc(2 * var(--default-line-height) + 3 * var(--default-grid-baseline));; - } - - &:has(.footer__legal-links):has(.footer__simple-sign-up) { - --footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline)); - } + --footer-height: calc(2lh + 2 * var(--default-grid-baseline)); // Set the initial value, will be updated programmatically to match the actual height .header-right { - #header-primary-action a { color: var(--color-primary-element-text); } @@ -47,6 +37,7 @@ #content { min-height: var(--body-height, calc(100% - var(--footer-height))); + padding-block-end: var(--footer-height); } #app-content-vue { @@ -85,7 +76,6 @@ align-items: center; justify-content: center; - height: var(--footer-height); width: calc(100% - 2 * var(--body-container-margin)); margin-inline: var(--body-container-margin); padding-block: var(--default-grid-baseline); diff --git a/core/src/public.ts b/core/src/public.ts new file mode 100644 index 0000000000000..ce4af8aa2ac0e --- /dev/null +++ b/core/src/public.ts @@ -0,0 +1,26 @@ +/** + * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +const body = document.body +const footer = document.querySelector('footer') +let prevHeight = footer?.offsetHeight + +const onResize: ResizeObserverCallback = (entries) => { + for (const entry of entries) { + const height = entry.contentRect.height + if (height === prevHeight) { + return + } + prevHeight = height + body.style.setProperty('--footer-height', `${height}px`) + } +} + +if (footer) { + new ResizeObserver(onResize) + .observe(footer, { + box: 'border-box', //