fix(styles): Make sure footer with legal links is shown correctly

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index b34173d2228862017f9bbf7552507c88088bf31e..f43e96a883051c69dd114a37b0b6de1aba15028e 100644 (file)
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -158,7 +158,7 @@ class ThemingDefaults extends \OC_Defaults {
                        }
                }
                if ($legalLinks !== '') {
-                       $footer .= '<br/>' . $legalLinks;
+                       $footer .= '<br/><span class="footer__legal-links">' . $legalLinks . '</span>';
                }
 
                return $footer;

diff --git a/core/css/public.scss b/core/css/public.scss
index 66173ceb2e15abb593b3c8915e5dc5c98344ab10..98a24d12fe1e2a07585d2368853b23c033aadba5 100644 (file)
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -2,9 +2,18 @@
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-$footer-height: 65px;
-
 #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));
+       }
+
        .header-right {
 
                #header-primary-action a {
@@ -41,9 +50,11 @@ $footer-height: 65px;
        }
 
        #content {
-               // 100% - footer
-               min-height: calc(100% - #{$footer-height});
+               min-height: var(--body-height, calc(100% - var(--footer-height)));
+       }
 
+       #app-content-vue {
+               padding-block-end: var(--footer-height);
        }
 
        /** don't apply content header padding on the base layout */
@@ -68,27 +79,39 @@ $footer-height: 65px;
        /* public footer */
        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: $footer-height;
-               flex-direction: column;
-               bottom: 0;
-               width: calc(100% - 16px);
-               margin: 8px;
-               background-color: var(--color-main-background);
-               border-radius: var(--border-radius-large);
+
+               height: var(--footer-height);
+               width: calc(100% - 2 * var(--body-container-margin));
+               margin-inline: var(--body-container-margin);
+               padding-block: var(--default-grid-baseline);
+
+               .footer__legal-links {
+                       margin-block-end: var(--default-grid-baseline);
+               }
+
                p {
                        text-align: center;
-                       color: var(--color-text-lighter);
+                       color: var(--color-text-maxcontrast);
+                       margin-block: 0 var(--default-grid-baseline);
+                       width: 100%;
+
                        a {
-                               color: var(--color-text-lighter);
+                               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;
-                               /* increasing clickability to more than the text height */
-                               padding: 10px;
-                               margin: -10px;
-                               line-height: 200%;
                        }
                }
        }

diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 3ce34ece9f5fcc696aae47973c5f8ff287e11c62..350bfee244dd0142cdaa6fed3627c0d1d477ca6f 100644 (file)
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -119,7 +119,7 @@ if (isset($template) && $template->getActionCount() !== 0) {
                <?php
 if ($_['showSimpleSignUpLink']) {
        ?>
-                       <p>
+                       <p class="footer__simple-sign-up">
                                <a href="<?php p($_['signUpLink']); ?>" target="_blank" rel="noreferrer noopener">
                                        <?php p($l->t('Get your own free account')); ?>
                                </a>