Merge pull request #47649 from nextcloud/fix/footer-overlap

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

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) {

core/css/public.css

@@ -1,4 +1,4 @@
 /*!
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
- */#body-public{--footer-height: calc(var(--default-line-height) + 2 * var(--default-grid-baseline))}#body-public:has(.footer__legal-links),#body-public:has(.footer__simple-sign-up){--footer-height: calc(2 * var(--default-line-height) + 3 * var(--default-grid-baseline))}#body-public:has(.footer__legal-links):has(.footer__simple-sign-up){--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline))}#body-public .header-end #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-end #header-secondary-action ul li{min-width:270px}#body-public .header-end #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-end #header-secondary-action #header-actions-toggle:hover,#body-public .header-end #header-secondary-action #header-actions-toggle:focus,#body-public .header-end #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-end #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-end #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-end #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:var(--body-height, calc(100% - var(--footer-height)))}#body-public #app-content-vue{padding-block-end:var(--footer-height)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;bottom:var(--body-container-margin);background-color:var(--color-main-background);border-radius:var(--body-container-radius);box-sizing:border-box;display:flex;flex-direction:column;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)}#body-public footer .footer__legal-links{margin-block-end:var(--default-grid-baseline)}#body-public footer p{text-align:center;color:var(--color-text-maxcontrast);margin-block:0 var(--default-grid-baseline);width:100%}#body-public footer p a{display:inline-block;font-size:var(--default-font-size);font-weight:bold;line-height:var(--default-line-height);height:var(--default-line-height);color:var(--color-text-maxcontrast);white-space:nowrap}/*# sourceMappingURL=public.css.map */
+ */#body-public{--footer-height: calc(2lh + 2 * var(--default-grid-baseline))}#body-public .header-end #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-end #header-secondary-action ul li{min-width:270px}#body-public .header-end #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-end #header-secondary-action #header-actions-toggle:hover,#body-public .header-end #header-secondary-action #header-actions-toggle:focus,#body-public .header-end #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-end #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-end #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-end #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:var(--body-height, calc(100% - var(--footer-height)));padding-block-end:var(--footer-height)}#body-public #app-content-vue{padding-block-end:var(--footer-height)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;bottom:var(--body-container-margin);background-color:var(--color-main-background);border-radius:var(--body-container-radius);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(100% - 2*var(--body-container-margin));margin-inline:var(--body-container-margin);padding-block:var(--default-grid-baseline)}#body-public footer .footer__legal-links{margin-block-end:var(--default-grid-baseline)}#body-public footer p{text-align:center;color:var(--color-text-maxcontrast);margin-block:0 var(--default-grid-baseline);width:100%}#body-public footer p a{display:inline-block;font-size:var(--default-font-size);font-weight:bold;line-height:var(--default-line-height);height:var(--default-line-height);color:var(--color-text-maxcontrast);white-space:nowrap}/*# sourceMappingURL=public.css.map */

core/css/public.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAIA,aACC,qFAEA,iFAEC,yFAGD,oEACC,yFAKA,kDACC,wCAIA,wDACC,gBAED,yEACC,+BACA,2BACA,wCAEA,8OAGC,UAID,iFACC,aAED,oFACC,aAED,iGACC,YAMJ,sBACC,iEAGD,8BACC,uCAID,kCACC,cAGD,oBACC,iBACA,mCACA,sBACA,qBACA,iBAED,+KAIC,kBAID,oBACC,eACA,oCACA,8CACA,2CACA,sBAEA,aACA,sBACA,mBACA,uBAEA,4BACA,kDACA,2CACA,2CAEA,yCACC,8CAGD,sBACC,kBACA,oCACA,4CACA,WAEA,wBACC,qBACA,mCACA,iBACA,uCACA,kCACA,oCACA","file":"public.css"}
+{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GAIA,aACC,8DAGC,kDACC,wCAIA,wDACC,gBAED,yEACC,+BACA,2BACA,wCAEA,8OAGC,UAID,iFACC,aAED,oFACC,aAED,iGACC,YAMJ,sBACC,iEACA,uCAGD,8BACC,uCAID,kCACC,cAGD,oBACC,iBACA,mCACA,sBACA,qBACA,iBAED,+KAIC,kBAID,oBACC,eACA,oCACA,8CACA,2CACA,sBAEA,aACA,sBACA,mBACA,uBAEA,kDACA,2CACA,2CAEA,yCACC,8CAGD,sBACC,kBACA,oCACA,4CACA,WAEA,wBACC,qBACA,mCACA,iBACA,uCACA,kCACA,oCACA","file":"public.css"}

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);

core/css/server.css

@@ -73,4 +73,4 @@
 */tr.file-picker__row[data-v-cb12dccb]{height:var(--row-height, 50px)}tr.file-picker__row td[data-v-cb12dccb]{cursor:pointer;overflow:hidden;text-overflow:ellipsis;border-bottom:none}tr.file-picker__row td.row-checkbox[data-v-cb12dccb]{padding:0 2px}tr.file-picker__row td[data-v-cb12dccb]:not(.row-checkbox){padding-inline:14px 0}tr.file-picker__row td.row-size[data-v-cb12dccb]{text-align:end;padding-inline:0 14px}tr.file-picker__row td.row-name[data-v-cb12dccb]{padding-inline:2px 0}.file-picker__row--selected[data-v-cb12dccb]{background-color:var(--color-background-dark)}.file-picker__row[data-v-cb12dccb]:hover{background-color:var(--color-background-hover)}.file-picker__name-container[data-v-cb12dccb]{display:flex;justify-content:start;align-items:center;height:100%}.file-picker__file-name[data-v-cb12dccb]{padding-inline-start:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}.file-picker__file-extension[data-v-cb12dccb]{color:var(--color-text-maxcontrast);min-width:fit-content}.file-picker__header-preview[data-v-006fdbd0]{width:22px;height:32px;flex:0 0 auto}.file-picker__files[data-v-006fdbd0]{margin:2px;margin-inline-start:12px;overflow:scroll auto}.file-picker__files table[data-v-006fdbd0]{width:100%;max-height:100%;table-layout:fixed}.file-picker__files th[data-v-006fdbd0]{position:sticky;z-index:1;top:0;background-color:var(--color-main-background);padding:2px}.file-picker__files th .header-wrapper[data-v-006fdbd0]{display:flex}.file-picker__files th.row-checkbox[data-v-006fdbd0]{width:44px}.file-picker__files th.row-name[data-v-006fdbd0]{width:230px}.file-picker__files th.row-size[data-v-006fdbd0]{width:100px}.file-picker__files th.row-modified[data-v-006fdbd0]{width:120px}.file-picker__files th[data-v-006fdbd0]:not(.row-size) .button-vue__wrapper{justify-content:start;flex-direction:row-reverse}.file-picker__files th[data-v-006fdbd0]:not(.row-size) .button-vue{padding-inline:16px 4px}.file-picker__files th.row-size[data-v-006fdbd0] .button-vue__wrapper{justify-content:end}.file-picker__files th[data-v-006fdbd0] .button-vue__wrapper{color:var(--color-text-maxcontrast)}.file-picker__files th[data-v-006fdbd0] .button-vue__wrapper .button-vue__text{font-weight:normal}.file-picker__breadcrumbs[data-v-b357227a]{flex-grow:0 !important}.file-picker__side[data-v-b42054b8]{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;min-width:200px;padding:2px;margin-block-start:7px;overflow:auto}.file-picker__side[data-v-b42054b8] .button-vue__wrapper{justify-content:start}.file-picker__filter-input[data-v-b42054b8]{margin-block:7px;max-width:260px}@media(max-width: 736px){.file-picker__side[data-v-b42054b8]{flex-direction:row;min-width:unset}}@media(max-width: 512px){.file-picker__side[data-v-b42054b8]{flex-direction:row;min-width:unset}.file-picker__filter-input[data-v-b42054b8]{max-width:unset}}.file-picker__navigation{padding-inline:8px 2px}.file-picker__navigation,.file-picker__navigation *{box-sizing:border-box}.file-picker__navigation .v-select.select{min-width:220px}@media(min-width: 513px)and (max-width: 736px){.file-picker__navigation{gap:11px}}@media(max-width: 512px){.file-picker__navigation{flex-direction:column-reverse !important}}.file-picker__view[data-v-20b719ba]{height:50px;display:flex;justify-content:start;align-items:center}.file-picker__view h3[data-v-20b719ba]{font-weight:bold;height:fit-content;margin:0}.file-picker__main[data-v-20b719ba]{box-sizing:border-box;width:100%;display:flex;flex-direction:column;min-height:0;flex:1;padding-inline:2px}.file-picker__main *[data-v-20b719ba]{box-sizing:border-box}[data-v-20b719ba] .file-picker{height:min(80vh,800px) !important}@media(max-width: 512px){[data-v-20b719ba] .file-picker{height:calc(100% - 16px - var(--default-clickable-area)) !important}}[data-v-20b719ba] .file-picker__content{display:flex;flex-direction:column;overflow:hidden}/*!
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
- */#body-public{--footer-height: calc(var(--default-line-height) + 2 * var(--default-grid-baseline))}#body-public:has(.footer__legal-links),#body-public:has(.footer__simple-sign-up){--footer-height: calc(2 * var(--default-line-height) + 3 * var(--default-grid-baseline))}#body-public:has(.footer__legal-links):has(.footer__simple-sign-up){--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline))}#body-public .header-end #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-end #header-secondary-action ul li{min-width:270px}#body-public .header-end #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-end #header-secondary-action #header-actions-toggle:hover,#body-public .header-end #header-secondary-action #header-actions-toggle:focus,#body-public .header-end #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-end #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-end #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-end #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:var(--body-height, calc(100% - var(--footer-height)))}#body-public #app-content-vue{padding-block-end:var(--footer-height)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;bottom:var(--body-container-margin);background-color:var(--color-main-background);border-radius:var(--body-container-radius);box-sizing:border-box;display:flex;flex-direction:column;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)}#body-public footer .footer__legal-links{margin-block-end:var(--default-grid-baseline)}#body-public footer p{text-align:center;color:var(--color-text-maxcontrast);margin-block:0 var(--default-grid-baseline);width:100%}#body-public footer p a{display:inline-block;font-size:var(--default-font-size);font-weight:bold;line-height:var(--default-line-height);height:var(--default-line-height);color:var(--color-text-maxcontrast);white-space:nowrap}/*# sourceMappingURL=server.css.map */
+ */#body-public{--footer-height: calc(2lh + 2 * var(--default-grid-baseline))}#body-public .header-end #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-end #header-secondary-action ul li{min-width:270px}#body-public .header-end #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-end #header-secondary-action #header-actions-toggle:hover,#body-public .header-end #header-secondary-action #header-actions-toggle:focus,#body-public .header-end #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-end #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-end #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-end #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:var(--body-height, calc(100% - var(--footer-height)));padding-block-end:var(--footer-height)}#body-public #app-content-vue{padding-block-end:var(--footer-height)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;bottom:var(--body-container-margin);background-color:var(--color-main-background);border-radius:var(--body-container-radius);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width:calc(100% - 2*var(--body-container-margin));margin-inline:var(--body-container-margin);padding-block:var(--default-grid-baseline)}#body-public footer .footer__legal-links{margin-block-end:var(--default-grid-baseline)}#body-public footer p{text-align:center;color:var(--color-text-maxcontrast);margin-block:0 var(--default-grid-baseline);width:100%}#body-public footer p a{display:inline-block;font-size:var(--default-font-size);font-weight:bold;line-height:var(--default-line-height);height:var(--default-line-height);color:var(--color-text-maxcontrast);white-space:nowrap}/*# sourceMappingURL=server.css.map */

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
+		})
+}

dist/core-public.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";const e=document.body,t=document.querySelector("footer");let o=t?.offsetHeight;t&&new ResizeObserver((t=>{for(const r of t){const t=r.contentRect.height;if(t===o)return;o=t,e.style.setProperty("--footer-height",`${t}px`)}})).observe(t,{box:"border-box"})})();
+//# sourceMappingURL=core-public.js.map?v=1e9c4c24dedb41c45e0c

dist/core-public.js.license

@@ -0,0 +1,8 @@
+SPDX-License-Identifier: AGPL-3.0-or-later
+SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+
+
+This file is generated from multiple sources. Included packages:
+- nextcloud
+	- version: 1.0.0
+	- license: AGPL-3.0-or-later

dist/core-public.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-public.js?v=1e9c4c24dedb41c45e0c","mappings":"mBAKA,MAAMA,EAAOC,SAASD,KAChBE,EAASD,SAASE,cAAc,UACtC,IAAIC,EAAaF,GAAQG,aAWrBH,GACA,IAAII,gBAXUC,IACd,IAAK,MAAMC,KAASD,EAAS,CACzB,MAAME,EAASD,EAAME,YAAYD,OACjC,GAAIA,IAAWL,EACX,OAEJA,EAAaK,EACbT,EAAKW,MAAMC,YAAY,kBAAmB,GAAGH,MACjD,KAIKI,QAAQX,EAAQ,CACjBY,IAAK,c","sources":["webpack:///nextcloud/core/src/public.ts"],"sourcesContent":["\"use strict\";\n/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\nconst body = document.body;\nconst footer = document.querySelector('footer');\nlet prevHeight = footer?.offsetHeight;\nconst onResize = (entries) => {\n    for (const entry of entries) {\n        const height = entry.contentRect.height;\n        if (height === prevHeight) {\n            return;\n        }\n        prevHeight = height;\n        body.style.setProperty('--footer-height', `${height}px`);\n    }\n};\nif (footer) {\n    new ResizeObserver(onResize)\n        .observe(footer, {\n        box: 'border-box', // <footer> is border-box\n    });\n}\n"],"names":["body","document","footer","querySelector","prevHeight","offsetHeight","ResizeObserver","entries","entry","height","contentRect","style","setProperty","observe","box"],"sourceRoot":""}

dist/core-public.js.map.license

@@ -0,0 +1 @@
+core-public.js.license

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'),