Skip to content

Commit a88228c

Browse files
mansonamansona
authored
Merge pull request #275 from ember-learn/footer-improvements
Footer improvements
2 parents 106e0c6 + f6c8e5e commit a88228c

File tree

11 files changed

+105
-56
lines changed

11 files changed

+105
-56
lines changed

‎addon/constants/es-footer.js

+5
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ const socialLinks = [{
1818

1919

2020
const contributorLinks = [{
21+
name: 'Hosted by:',
22+
title: "Netlify",
23+
href: 'https://www.netlify.com/',
24+
class: 'netlify-logo',
25+
}, {
2126
name: 'Hosted by:',
2227
title: "Heroku",
2328
href: 'https://www.heroku.com/emberjs',

‎addon/styles/addon.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@
55
@import 'global.css';
66
@import 'typography.css';
77

8-
/* Helpers */
9-
@import 'helpers/index.css';
10-
118
/* Modules */
129
@import 'colors.css';
1310
@import 'container.css';
@@ -17,6 +14,9 @@
1714
@import 'well.css';
1815
@import 'background-shapes.css';
1916

17+
/* Helpers */
18+
@import 'helpers/index.css';
19+
2020
/* Components */
2121
@import 'components/es-button.css';
2222
@import 'components/es-card.css';

‎addon/styles/components/es-footer.css

+56-18
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
} */
44

55
.es-footer {
6+
background-color: var(--color-white);
7+
68
& a,
79
&:link,
810
&:visited {
@@ -19,17 +21,33 @@
1921

2022
& .footer-info {
2123
display: flex;
22-
padding: var(--spacing-2) 0;
24+
justify-content: space-between;
2325

24-
& .footer-logo {
25-
height: 3rem;
26+
& .logo-wrapper {
27+
grid-row: 1 / 4;
2628
}
2729
}
2830

2931
& .footer-info-links {
3032
display: grid;
31-
grid-template-columns: repeat(2, 1fr);
3233
grid-gap: 0.5rem;
34+
grid-template-columns: repeat(3, 1fr);
35+
}
36+
37+
& .footer-social {
38+
display: grid;
39+
grid-gap: 0.5rem;
40+
41+
& a {
42+
align-items: center;
43+
display: flex;
44+
}
45+
46+
& svg {
47+
fill: var(--color-gray-600);
48+
margin-right: var(--spacing-1);
49+
width: 1rem;
50+
}
3351
}
3452

3553
& .footer-hr {
@@ -39,40 +57,60 @@
3957
}
4058

4159
& .footer-statement {
42-
padding: var(--spacing-2) 0;
43-
display: flex;
4460
justify-content: space-between;
61+
background-color: var(--color-gray-100);
4562
}
4663

4764
& .footer-copyright {
4865
color: var(--color-gray-600);
4966
}
5067

51-
& .footer-social {
52-
display: flex;
53-
align-items: center;
54-
55-
& svg {
56-
fill: var(--color-gray-600);
57-
}
58-
}
59-
6068
& .footer-contributions-wrapper {
6169
background-color: var(--color-white);
6270
}
6371

6472
& .footer-contributions {
73+
align-items: center;
6574
color: var(--color-gray-600);
66-
padding: 0;
6775
display: flex;
6876
justify-content: space-between;
69-
align-items: center;
7077
}
7178

72-
& .footer-contributor-logo {
79+
& .footer-contributor-logo,
80+
& .footer-contributor-logo-link {
7381
height: 1.6875rem;
82+
line-height: 1.6875rem;
7483
max-width: 4rem;
7584
}
85+
86+
@media (max-width: 1007px) {
87+
& .footer-info {
88+
flex-direction: column;
89+
90+
& .footer-logo {
91+
margin-bottom: var(--spacing-1);
92+
width: 5rem;
93+
}
94+
}
95+
96+
& .footer-info-links {
97+
display: flex;
98+
flex-wrap: wrap;
99+
100+
& > a {
101+
margin-right: var(--spacing-2);
102+
}
103+
104+
& .logo-wrapper {
105+
width: 100%;
106+
}
107+
}
108+
109+
& .footer-contributions {
110+
align-items: start;
111+
flex-direction: column;
112+
}
113+
}
76114
}
77115

78116
footer.es-footer {

‎addon/styles/helpers/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
@import 'unstyled.css';
12
@import 'embed.css';
23
@import 'flex.css';
34
@import 'margin.css';
45
@import 'padding.css';
56
@import 'rounded.css';
6-
@import 'unstyled.css';
77

88
.img-fluid {
99
width: 100%;

‎addon/templates/components/es-footer.hbs

+2-6
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,9 @@
33
Pass footer properties to support
44
<EsFooter @infoLinks={{someOtherLinks}} />
55
--}}
6-
<EsFooter::EsInfo @infoLinks={{this.infoLinks}} />
6+
<EsFooter::EsInfo @infoLinks={{this.infoLinks}} @socialLinks={{socialLinks}} />
77

8-
<hr class="footer-hr">
9-
10-
<EsFooter::EsStatement @tagline={{tagline}} @socialLinks={{socialLinks}} />
11-
12-
<hr class="footer-hr">
8+
<EsFooter::EsStatement @tagline={{tagline}} />
139

1410
<EsFooter::EsContributions @contributorLinks={{contributorLinks}} />
1511
</footer>

‎addon/templates/components/es-footer/es-contributions.hbs

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<div class="footer-contributions-wrapper">
2-
<div class="footer-contributions container">
1+
<div class="footer-contributions-wrapper container py-3">
2+
<div class="footer-contributions">
33
<span>Ember is generously supported by</span>
4-
<div>
4+
<div class="mt-1">
55
{{#each args.contributorLinks as |link|}}
6-
<a href={{link.href}} title={{link.title}} aria-label={{link.title}} class="ml-1">
7-
{{svg-jar link.class class="footer-contributor-logo my-4"}}
6+
<a href={{link.href}} title={{link.title}} aria-label={{link.title}} class="mr-2">
7+
{{svg-jar link.class class="footer-contributor-logo"}}
88
</a>
99
{{/each}}
1010
</div>
1111
</div>
12-
</div>
12+
</div>

‎addon/templates/components/es-footer/es-info.hbs

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
1-
<div class="footer-info container">
2-
<img src="/images/ember-logo.svg" alt="Ember Logo" class="footer-logo mr-1">
3-
1+
<div class="footer-info container py-2 text-sm">
42
<div class="footer-info-links">
3+
<div class="logo-wrapper">
4+
<img src="/images/ember-logo.svg" alt="Ember Logo" class="footer-logo">
5+
</div>
56
{{#each args.infoLinks as |link|}}
6-
<a href={{link.href}} class="text-sm mb-1 ml-1">{{link.name}}</a>
7+
<a href={{link.href}}>{{link.name}}</a>
78
{{/each}}
89
</div>
9-
</div>
10+
<div class="footer-social hide-on-mobile">
11+
{{#each args.socialLinks as |link|}}
12+
<a href={{link.href}} title={{link.title}} aria-label={{link.label}}>
13+
{{svg-jar link.class}} {{link.title}}
14+
</a>
15+
{{/each}}
16+
</div>
17+
</div>

‎addon/templates/components/es-footer/es-statement.hbs

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
1-
<div class="footer-statement container">
2-
<div>
3-
<p class="footer-copyright">
4-
&copy; Copyright {{currentYear}} - <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a>
5-
</p>
6-
<p class="footer-tagline">{{args.tagline}}</p>
7-
</div>
8-
<div class="footer-social">
9-
{{#each args.socialLinks as |link|}}
10-
<a href={{link.href}} title={{link.title}} aria-label={{link.label}} class="icon-wrapper m-1 text-sm">
11-
{{svg-jar link.class class="icon" }}
12-
</a>
13-
{{/each}}
14-
</div>
15-
</div>
1+
<div class="footer-statement">
2+
<p class="footer-copyright container py-3">
3+
&copy; Copyright {{currentYear}} - <a href="https://www.tilde.io/" class="footer-copyright">Tilde Inc.</a>
4+
<br>
5+
{{args.tagline}}
6+
</p>
7+
</div>

‎docs/components/footer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Footer
22

33
```handlebars
4-
{{es-footer}}
4+
<EsFooter />
55
```

‎public/images/icons/netlify-logo.svg

+10
Loading

‎tests/integration/components/es-footer-test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ module('Integration | Component | es footer', function(hooks) {
1313
const footerContribtuionsLinks = this.element.querySelectorAll('.footer-contributions a');
1414

1515
assert.equal(footerSocialLinks.length, 3, 'social links are loading');
16-
assert.equal(footerContribtuionsLinks.length, 4, 'contributors links are loading');
16+
assert.equal(footerContribtuionsLinks.length, 5, 'contributors links are loading');
1717
});
1818
});

0 commit comments

Comments
 (0)