Update footer with some responsive bug fixes (#20)

GetDKAN · May 5, 2021 · f37dd2e · f37dd2e
1 parent 55b3685
commit f37dd2e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/templates/Footer/index.jsx b/src/templates/Footer/index.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useMediaQuery } from 'react-responsive'
 import { Button } from '@cmsgov/design-system';
 import { Link } from "@reach/router";
 
@@ -14,6 +15,9 @@ const Footer = ({
   hhsLogo,
   cmsLogo
 }) => {
+  const xs = useMediaQuery({ minWidth: 0, maxWidth: 544});
+  const sm = useMediaQuery({ minWidth: 544, maxWidth: 768});
+  const md = useMediaQuery({ minWidth: 768});
   const {footerOpenDataToolLinks, footerAdditionalResourcesLinks, footerUtilityLinks} = links;
   return (
     <footer className="dc-c-footer">
@@ -35,14 +39,14 @@ const Footer = ({
         )
       }
       <div className="dc-c-footer--middle-container">
-        <div className="ds-l-container">
+        <div className={`${md ? 'ds-l-container' : ''}`}>
           <div className="ds-l-row ds-u-margin--0">
-            <div className="dc-c-footer__resources ds-l-md-col--7 ds-l-sm-col--12 ds-u-padding-y--7">
-              <div className="ds-l-lg-col--9 ds-l-md-col--11">
-                <div className="ds-u-display--flex ds-u-flex-direction--row">
-                  <div className="ds-u-margin-right--6">
+            <div className={`dc-c-footer__resources ds-l-md-col--7 ds-l-sm-col--12 ds-u-padding-top--7 ds-u-padding-bottom--4 ${md ? 'ds-u-padding-x--0' : ''} ${sm ? 'ds-u-padding-x--4' : ''}`}>
+              <div className="ds-l-lg-col--9 ds-l-md-col--11 ds-u-padding-x--0">
+                <div className={`ds-u-display--flex ${xs ? 'ds-u-flex-direction--column' : 'ds-u-flex-direction--row'}`}>
+                  <div className="ds-u-margin-right--6 ds-u-margin-bottom--2">
                     <h3 className="ds-h6 dc-footer--heading ds-u-margin-bottom--2">Open data tools</h3>
-                    <ul className="ds-u-font-size--small">
+                    <ul className="ds-u-font-size--small ds-u-margin-bottom--3">
                       {footerOpenDataToolLinks.map((link) => (
                         <li className="ds-u-margin-bottom--1" key={link.id}>
                           <Link 
@@ -73,7 +77,7 @@ const Footer = ({
                 </div>
               </div>
             </div>
-            <div className="dc-c-footer__cms-information ds-l-md-col--5 ds-l-sm-col--12 ds-u-padding-left--7 ds-u-padding-y--7">
+            <div className={`dc-c-footer__cms-information ds-l-md-col--5 ds-l-sm-col--12 ${md ? 'ds-u-padding-left--7' : ''} ${sm ? ' ds-u-padding-left--4' : ''} ds-u-padding-y--7`}>
             <div className="ds-u-font-size--small">
               <div>
                 <a href="http://www.hhs.gov/" target="_blank" title="U.S. Department of Health &amp; Human Services">
@@ -164,7 +168,7 @@ const Footer = ({
       <div className="dc-c-footer__utility ds-l-container ds-u-padding-y--2 ds-u-font-size--small">
         <div className="ds-l-row ">
           <div className="ds-l-col--12 ds-u-padding-y--3">
-            <ul className="ds-u-padding--0 ds-u-display--flex ds-u-flex-direction--row">
+            <ul className={`ds-u-padding--0 ds-u-display--flex ${md ? 'ds-u-flex-direction--row' : 'ds-u-flex-direction--column'} ds-u-flex-wrap--wrap`} >
               {footerUtilityLinks.map((link) => (
                 <li key={link.id}>
                   <a href={link.url} className="ds-u-margin-right--2">