Skip to content

Commit 4f3ef6d

Browse files
dgadingdgading
authored
Remove footer css and resize middle footer column (#209)
* Remove email gradient and resize middle footer column * Remove react-query and css from loading in footer * Add margin top to dataset list item descriptions
1 parent c12c3e7 commit 4f3ef6d

File tree

5 files changed

+74
-88
lines changed

5 files changed

+74
-88
lines changed

‎package-lock.json

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@civicactions/cmsds-open-data-components",
3-
"version": "3.1.8",
3+
"version": "3.1.9",
44
"description": "Components for the open data catalog frontend using CMS Design System",
55
"main": "dist/main.js",
66
"source": "src/index.ts",

‎src/components/DatasetSearchListItem/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const DatasetSearchListItem = (props: SearchItemProps) => {
4141
</h2>
4242
</div>
4343
<div className="ds-l-row">
44-
<div className="ds-l-col--12 ds-l-md-col--12">{truncateText(description)}</div>
44+
<div className="ds-l-col--12 ds-l-md-col--12 ds-u-margin-top--2">{truncateText(description)}</div>
4545
</div>
4646
<ul className="ds-l-row ds-u-padding--0 ds-u-flex-direction--row ds-u-margin-top--4">
4747
<li className={linkContainerClasses}>

‎src/templates/Footer/footer.scss

+18-18
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,24 @@
88
}
99

1010
.dc-c-footer--middle-container {
11-
background: linear-gradient(90deg, #f6f9fd 50%, #e8f0fa 50%);
11+
background: linear-gradient(#f6f9fd 50%, #e8f0fa 50%);
12+
}
13+
14+
.dc-c-footer__cms-information {
15+
background: none;
16+
}
17+
18+
.dc-c-footer__resources {
19+
background: #f6f9fd;
20+
}
21+
22+
@media only screen and (min-width: 768px) {
23+
.dc-c-footer--middle-container {
24+
background: linear-gradient(90deg, #f6f9fd 50%, #e8f0fa 50%);
25+
}
26+
.dc-c-footer__cms-information {
27+
background: #e8f0fa;
28+
}
1229
}
1330

1431
.dc-c-footer__title {
@@ -19,10 +36,6 @@
1936
}
2037
}
2138

22-
.dc-c-footer__resources {
23-
background: #f6f9fd;
24-
}
25-
2639
.dc-c-footer__utility {
2740
background: #{var(--color-white)};
2841
}
@@ -31,23 +44,10 @@
3144
list-style: none;
3245
}
3346

34-
.dc-c-footer__cms-information {
35-
background: #e8f0fa;
36-
}
37-
3847
.dc-footer--heading {
3948
text-transform: uppercase;
4049
}
4150

42-
.dc-c-emailupdates {
43-
background-image: linear-gradient(
44-
35deg,
45-
#{var(--color-primary-darkest)},
46-
#{var(--color-primary-darker)},
47-
#{var(--color-primary)}
48-
);
49-
color: #{var(--color-white)};
50-
}
5151
.dc-c-footer--svg-icon {
5252
width: 40px;
5353
height: 40px;

‎src/templates/Footer/index.jsx

+52-66
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { useMediaQuery } from 'react-responsive';
43
import { Button } from '@cmsgov/design-system';
54
import NavLink from '../../components/NavLink';
6-
import "./footer.scss";
75

86
const Footer = ({
97
links,
@@ -17,9 +15,6 @@ const Footer = ({
1715
cmsLogo,
1816
trademarkContent,
1917
}) => {
20-
const xs = useMediaQuery({ minWidth: 0, maxWidth: 544 });
21-
const sm = useMediaQuery({ minWidth: 544, maxWidth: 768 });
22-
const md = useMediaQuery({ minWidth: 768 });
2318
const { footerOpenDataToolLinks, footerAdditionalResourcesLinks, footerUtilityLinks } = links;
2419
return (
2520
<footer className="dc-c-footer">
@@ -39,73 +34,66 @@ const Footer = ({
3934
</div>
4035
)}
4136
<div className="dc-c-footer--middle-container">
42-
<div className={`${md ? 'ds-l-container' : ''}`}>
43-
<div className="ds-l-row ds-u-margin--0">
37+
<div className="ds-l-container">
38+
<div className="ds-l-row">
4439
<div
45-
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
46-
${xs ? 'ds-u-padding-x--0' : ''}`}
40+
className="dc-c-footer__resources ds-l-md-col--7 ds-l-sm-col--12 ds-u-padding-top--7 ds-u-padding-bottom--3"
4741
>
48-
<div className="ds-l-lg-col--9 ds-l-md-col--11">
49-
<div
50-
className={`ds-u-display--flex ${
51-
xs ? 'ds-u-flex-direction--column' : 'ds-u-flex-direction--row'
52-
}`}
53-
>
54-
<div className="ds-u-margin-right--6 ds-u-margin-bottom--2">
55-
<h2 className="ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2">
56-
Open data tools
57-
</h2>
58-
<ul className="ds-u-font-size--sm ds-u-margin-bottom--3">
59-
{footerOpenDataToolLinks.map((link) => (
60-
<li className="ds-u-margin-bottom--1" key={link.id}>
61-
<NavLink link={link} className="dc-menu-item" />
62-
</li>
63-
))}
64-
</ul>
65-
</div>
66-
<div>
67-
<h2 className="ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2">
68-
Additional resources
69-
</h2>
70-
<ul className="ds-u-font-size--sm">
71-
{footerAdditionalResourcesLinks
72-
.filter((link) => {
73-
const noOnClick = Object.keys(link).findIndex((l) => l === 'onClick');
74-
if (noOnClick === -1 || (link.onClick && link.dataTag)) {
75-
return link;
76-
}
77-
})
78-
.map((link) => {
79-
if (link.onClick && link.dataTag) {
80-
return (
81-
<li className="ds-u-margin-bottom--1" key={link.id}>
82-
<a
83-
href={link.url}
84-
{...{
85-
['data-' + link.dataTag.name]: link.dataTag.value,
86-
}}
87-
onClick={link.onClick}
88-
>
89-
{link.label}
90-
</a>
91-
</li>
92-
);
93-
}
42+
<div
43+
className="ds-u-display--flex ds-u-display--flex ds-u-sm-flex-direction--row ds-u-flex-direction--column"
44+
>
45+
<div className="ds-u-margin-right--6 ds-u-margin-bottom--3 ds-u-sm-margin-bottom--0">
46+
<h2 className="ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2">
47+
Open data tools
48+
</h2>
49+
<ul className="ds-u-font-size--sm">
50+
{footerOpenDataToolLinks.map((link) => (
51+
<li className="ds-u-margin-bottom--1" key={link.id}>
52+
<NavLink link={link} className="dc-menu-item" />
53+
</li>
54+
))}
55+
</ul>
56+
</div>
57+
<div>
58+
<h2 className="ds-text-heading--sm dc-footer--heading ds-u-margin-bottom--2">
59+
Additional resources
60+
</h2>
61+
<ul className="ds-u-font-size--sm">
62+
{footerAdditionalResourcesLinks
63+
.filter((link) => {
64+
const noOnClick = Object.keys(link).findIndex((l) => l === 'onClick');
65+
if (noOnClick === -1 || (link.onClick && link.dataTag)) {
66+
return link;
67+
}
68+
})
69+
.map((link) => {
70+
if (link.onClick && link.dataTag) {
9471
return (
9572
<li className="ds-u-margin-bottom--1" key={link.id}>
96-
<NavLink link={link} className="dc-menu-item" />
73+
<a
74+
href={link.url}
75+
{...{
76+
['data-' + link.dataTag.name]: link.dataTag.value,
77+
}}
78+
onClick={link.onClick}
79+
>
80+
{link.label}
81+
</a>
9782
</li>
9883
);
99-
})}
100-
</ul>
101-
</div>
84+
}
85+
return (
86+
<li className="ds-u-margin-bottom--1" key={link.id}>
87+
<NavLink link={link} className="dc-menu-item" />
88+
</li>
89+
);
90+
})}
91+
</ul>
10292
</div>
10393
</div>
10494
</div>
10595
<div
106-
className={`dc-c-footer__cms-information ds-l-md-col--5 ds-l-sm-col--12 ${
107-
md ? 'ds-u-padding-left--7' : ''
108-
} ${sm ? ' ds-u-padding-left--4' : ''} ds-u-padding-y--7`}
96+
className="dc-c-footer__cms-information ds-l-md-col--5 ds-l-sm-col--12 ds-u-lg-padding-left--7 ds-u-padding-y--7"
10997
>
11098
<div className="ds-u-font-size--sm">
11199
<div>
@@ -322,12 +310,10 @@ const Footer = ({
322310
</div>
323311
</div>
324312
<div className="dc-c-footer__utility ds-l-container ds-u-padding-y--2 ds-u-font-size--sm">
325-
<div className="ds-l-row ">
313+
<div className="ds-l-row">
326314
<div className="ds-l-col--12 ds-u-padding-y--3">
327315
<ul
328-
className={`ds-u-padding--0 ds-u-display--flex ${
329-
md ? 'ds-u-flex-direction--row' : 'ds-u-flex-direction--column'
330-
} ds-u-flex-wrap--wrap`}
316+
className="ds-u-padding--0 ds-u-display--flex ds-u-lg-flex-direction--row ds-u-flex-direction--column"
331317
>
332318
{footerUtilityLinks.map((link) => (
333319
<li key={link.id}>

0 commit comments

Comments
 (0)