fix: Fix inaccessible content on public pages due to overlapping footer

Signed-off-by: Christopher Ng <chrng8@gmail.com>

diff --git a/core/Listener/BeforeTemplateRenderedListener.php b/core/Listener/BeforeTemplateRenderedListener.php
index e3533f1c6ce5272a301d3a63d4b3514dcd4ba73a..4ce892664e9c2a2fcc16f88de60efc96a291e864 100644 (file)
--- a/core/Listener/BeforeTemplateRenderedListener.php
+++ b/core/Listener/BeforeTemplateRenderedListener.php
@@ -33,6 +33,10 @@ class BeforeTemplateRenderedListener implements IEventListener {
                        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 79f406b44d5d9e35cdf4e4e6848aba6fec189860..80743246876e423fd5befaab6703a9a213cca557 100644 (file)
--- 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 (file)
index 0000000..ce4af8a
--- /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', // <footer> is border-box
+               })
+}

diff --git a/webpack.modules.js b/webpack.modules.js
index 577f6f4a852af3115b27995d7213dbf58c7fc967..305bb4bafcd25c1f652ffb2a655756f4ed532650 100644 (file)
--- a/webpack.modules.js
+++ b/webpack.modules.js
@@ -26,6 +26,7 @@ module.exports = {
                'legacy-unified-search': path.join(__dirname, 'core/src', 'legacy-unified-search.js'),
                'unsupported-browser': path.join(__dirname, 'core/src', 'unsupported-browser.js'),
                'unsupported-browser-redirect': path.join(__dirname, 'core/src', 'unsupported-browser-redirect.js'),
+               public: path.join(__dirname, 'core/src', 'public.ts'),
        },
        dashboard: {
                main: path.join(__dirname, 'apps/dashboard/src', 'main.js'),