From 65ced2dd40412047a304de8d311e644ad91f5557 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Thu, 5 Sep 2024 16:19:22 -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 e3533f1c6ce52..4ce892664e9c2 100644 --- a/core/Listener/BeforeTemplateRenderedListener.php +++ b/core/Listener/BeforeTemplateRenderedListener.php @@ -33,6 +33,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 79f406b44d5d9..80743246876e4 100644 --- a/core/css/public.scss +++ b/core/css/public.scss @@ -3,19 +3,9 @@ * SPDX-License-Identifier: AGPL-3.0-or-later */ #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-end { - #header-primary-action a { color: var(--color-primary-element-text); } @@ -51,6 +41,7 @@ #content { min-height: var(--body-height, calc(100% - var(--footer-height))); + padding-block-end: var(--footer-height); } #app-content-vue { @@ -89,7 +80,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', //