Merge pull request #46811 from nextcloud/backport/46784/stable29

[stable29] fix(styles): Make sure footer with legal links is shown correctly
This commit is contained in:
Ferdinand Thiessen 2024-07-30 16:37:59 +02:00 committed by GitHub
commit 239ea110fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 49 additions and 26 deletions

View file

@ -217,7 +217,7 @@ class ThemingDefaults extends \OC_Defaults {
}
}
if ($legalLinks !== '') {
$footer .= '<br/>' . $legalLinks;
$footer .= '<br/><span class="footer__legal-links">' . $legalLinks . '</span>';
}
return $footer;

View file

@ -330,7 +330,7 @@ class ThemingDefaultsTest extends TestCase {
->method('t')
->willReturnArgument(0);
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><a href="https://example.com/imprint" class="legal" target="_blank" rel="noreferrer noopener">Legal notice</a>', $this->template->getShortFooter());
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><span class="footer__legal-links"><a href="https://example.com/imprint" class="legal" target="_blank" rel="noreferrer noopener">Legal notice</a></span>', $this->template->getShortFooter());
}
public function testGetShortFooterPrivacy() {
@ -351,7 +351,7 @@ class ThemingDefaultsTest extends TestCase {
->method('t')
->willReturnArgument(0);
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><a href="https://example.com/privacy" class="legal" target="_blank" rel="noreferrer noopener">Privacy policy</a>', $this->template->getShortFooter());
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><span class="footer__legal-links"><a href="https://example.com/privacy" class="legal" target="_blank" rel="noreferrer noopener">Privacy policy</a></span>', $this->template->getShortFooter());
}
public function testGetShortFooterAllLegalLinks() {
@ -372,7 +372,7 @@ class ThemingDefaultsTest extends TestCase {
->method('t')
->willReturnArgument(0);
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><a href="https://example.com/imprint" class="legal" target="_blank" rel="noreferrer noopener">Legal notice</a> · <a href="https://example.com/privacy" class="legal" target="_blank" rel="noreferrer noopener">Privacy policy</a>', $this->template->getShortFooter());
$this->assertEquals('<a href="url" target="_blank" rel="noreferrer noopener" class="entity-name">Name</a> Slogan<br/><span class="footer__legal-links"><a href="https://example.com/imprint" class="legal" target="_blank" rel="noreferrer noopener">Legal notice</a> · <a href="https://example.com/privacy" class="legal" target="_blank" rel="noreferrer noopener">Privacy policy</a></span>', $this->template->getShortFooter());
}
public function invalidLegalUrlProvider() {

View file

@ -1 +1 @@
#body-public .header-right #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-right #header-secondary-action ul li{min-width:270px}#body-public .header-right #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-right #header-secondary-action #header-actions-toggle:hover,#body-public .header-right #header-secondary-action #header-actions-toggle:focus,#body-public .header-right #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-right #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-right #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-right #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:calc(100% - 65px)}#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;display:flex;align-items:center;justify-content:center;height:65px;flex-direction:column;bottom:0;width:calc(100% - 16px);margin:8px;background-color:var(--color-main-background);border-radius:var(--border-radius-large)}#body-public footer p{text-align:center;color:var(--color-text-lighter)}#body-public footer p a{color:var(--color-text-lighter);font-weight:bold;white-space:nowrap;padding:10px;margin:-10px;line-height:200%}/*# sourceMappingURL=public.css.map */
#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-right #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-right #header-secondary-action ul li{min-width:270px}#body-public .header-right #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-right #header-secondary-action #header-actions-toggle:hover,#body-public .header-right #header-secondary-action #header-actions-toggle:focus,#body-public .header-right #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-right #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-right #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-right #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 */

View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAKE,oDACC,wCAIA,0DACC,gBAED,2EACC,+BACA,2BACA,wCAEA,oPAGC,UAID,mFACC,aAED,sFACC,aAED,mGACC,YAMJ,sBAEC,6BAKD,kCACC,cAGD,oBACC,iBACA,mCACA,sBACA,qBACA,iBAED,+KAIC,kBAID,oBACC,eACA,aACA,mBACA,uBACA,OArEc,KAsEd,sBACA,SACA,wBACA,WACA,8CACA,yCACA,sBACC,kBACA,gCACA,wBACC,gCACA,iBACA,mBAEA,aACA,aACA","file":"public.css"}
{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAAA,aACC,qFAEA,iFAEC,yFAGD,oEACC,yFAKA,oDACC,wCAIA,0DACC,gBAED,2EACC,+BACA,2BACA,wCAEA,oPAGC,UAID,mFACC,aAED,sFACC,aAED,mGACC,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"}

View file

@ -1,6 +1,15 @@
$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 {
@ -37,9 +46,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 */
@ -64,27 +75,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%;
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -113,7 +113,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>