fix: Improve tablet layout for footer - refs #265857

eea · Aug 28, 2024 · 4422ca4 · 4422ca4
1 parent 2a61ed3
commit 4422ca4
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/src/ui/Footer/Contact.jsx b/src/ui/Footer/Contact.jsx
@@ -1,14 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-
+import cx from 'classnames';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
-const Contact = ({ children, contacts }) =>
-  children?.length ? (
+const Contact = ({ children, contacts }) => {
+  return children?.length ? (
     children
   ) : (
-    <div className="contact-wrapper">
+    <div
+      className={cx(
+        'contact-wrapper',
+        contacts?.length > 5 ? 'many-contacts' : '',
+      )}
+    >
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
           {isInternalURL(contact.url) ? (
@@ -50,6 +55,7 @@ const Contact = ({ children, contacts }) =>
       ))}
     </div>
   );
+};
 
 Contact.propTypes = {
   contacts: PropTypes.array,

diff --git a/src/ui/Footer/Footer.stories.js b/src/ui/Footer/Footer.stories.js
@@ -31,7 +31,7 @@ const Template = (args) => (
 
 export const Default = Template.bind({});
 Default.args = {
-  buttonName: 'Explore our Environmental information systems',
+  buttonName: 'Explore our environmental information systems',
   hrefButton: 'https://www.eea.europa.eu/en/information-systems',
   description: '',
   actions: [

diff --git a/src/ui/Footer/SubFooter.jsx b/src/ui/Footer/SubFooter.jsx
@@ -33,12 +33,13 @@ const SubFooter = (props) => {
               </div>
             </Grid.Column>
           ))}
-
-        <Grid.Column mobile={12} tablet={12} computer={4}>
-          <div className="item">
-            <Footer.Contact contacts={props.contacts} />
-          </div>
-        </Grid.Column>
+        {props.contacts?.length > 0 && (
+          <Grid.Column mobile={12} tablet={12} computer={4}>
+            <div className="item">
+              <Footer.Contact contacts={props.contacts} />
+            </div>
+          </Grid.Column>
+        )}
       </Grid>
     </div>
   );

diff --git a/theme/themes/eea/extras/footer.less b/theme/themes/eea/extras/footer.less
@@ -211,7 +211,22 @@ footer .footer-wrapper .menu {
   footer .footer-header {
     font-size: @tabletFooterTitleFontSize;
   }
+  .contact-wrapper {
+    display: flex;
+    padding-top: @tabletContactWrapperPaddingTop;
+    gap: @tabletContactGap;
+  }
 
+  .contact-wrapper .subcontact {
+    display: block;
+  }
+  .many-contacts {
+    display: block;
+    padding-top: 0px;
+  }
+  .many-contacts .subcontact {
+    display: flex;
+  }
   .subfooter .item {
     .logo img {
       max-height: 100px;
@@ -256,6 +271,13 @@ footer .footer-wrapper .menu {
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
+  .contact-wrapper {
+    display: block;
+    padding-top: 0px;
+  }
+  .contact-wrapper .subcontact {
+    display: flex;
+  }
   footer {
     .footer-wrapper {
       padding: @computerWrapperPadding;

diff --git a/theme/themes/eea/extras/footer.variables b/theme/themes/eea/extras/footer.variables
@@ -49,6 +49,7 @@
 @tabletContactBlockMarginBottom     : @space-4;
 @mobileContactMargin                : @space-4 0;
 @tabletContactMargin                : @rem-space-050 0;
+@tabletContactWrapperPaddingTop     : @rem-space-8;
 @contactFontSize                    : @font-size-2;
 @tabletContactFontSize              : @font-size-3;
 @tabletContactGap                   : @rem-space-4;