Skip to content

Commit 3b1d491

Browse files
VitalyyPVitalyyP
committed
dynamic-footer-implementation
1 parent f77f83b commit 3b1d491

3 files changed

Lines changed: 81 additions & 77 deletions

File tree

‎website/modules/@apostrophecms/global/index.js‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ module.exports = {
7272
},
7373
},
7474
},
75-
comAddress: {
76-
label: 'Company Address',
75+
companyMission: {
76+
label: 'Company Mission',
7777
type: 'area',
7878
options: {
7979
max: 1,
@@ -84,19 +84,6 @@ module.exports = {
8484
},
8585
},
8686
},
87-
footerLinks: {
88-
label: 'Footer Links',
89-
type: 'array',
90-
titleField: 'footerLink.linkTitle',
91-
fields: {
92-
add: {
93-
footerLink: {
94-
label: 'Link',
95-
...linkSchema,
96-
},
97-
},
98-
},
99-
},
10087
socialMediaLinks: {
10188
label: 'Social Media Links',
10289
type: 'array',
@@ -110,16 +97,20 @@ module.exports = {
11097
},
11198
},
11299
},
113-
footerForm: {
114-
label: 'Footer Form',
115-
type: 'area',
116-
options: {
117-
max: 1,
118-
widgets: {
119-
'@apostrophecms/form': {},
100+
footerLinks: {
101+
label: 'Footer Links',
102+
type: 'array',
103+
titleField: 'footerLink.linkTitle',
104+
fields: {
105+
add: {
106+
footerLink: {
107+
label: 'Link',
108+
...linkSchema,
109+
},
120110
},
121111
},
122112
},
113+
123114
// SEO fields
124115
seoGoogleTagManager: {
125116
label: 'Google Tag Manager ID',
@@ -134,7 +125,7 @@ module.exports = {
134125
},
135126
footer: {
136127
label: 'Footer',
137-
fields: ['comAddress', 'footerLinks', 'socialMediaLinks', 'footerForm'],
128+
fields: ['companyMission', 'footerLinks', 'socialMediaLinks'],
138129
},
139130
seo: {
140131
label: 'SEO & Analytics',

‎website/modules/asset/ui/src/scss/_footer.scss‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
.sf-footer {
22
background-color: $white;
33
margin-top: auto;
4-
4+
55
.sf-footer__content {
66
max-width: 1200px;
77
margin: 0 auto;
88
padding-bottom: 16px;
9-
9+
1010
@include breakpoint-medium {
1111
padding-bottom: 24px;
1212
}
1313
}
14-
15-
.sf-footer__top {
14+
15+
.sf-footer__mission {
1616
text-align: center;
1717
margin-bottom: 32px;
1818
display: block;
@@ -22,82 +22,85 @@
2222
margin-left: auto;
2323
margin-right: auto;
2424
}
25-
}
26-
27-
.sf-footer__tagline {
28-
font-size: $font-size-footer-mobile;
29-
font-weight: $font-weight-300;
30-
color: $gray-300;
31-
margin: 0;
32-
line-height: 120%;
33-
display: block;
34-
35-
&:first-child {
36-
display: block;
37-
}
38-
39-
&:not(:first-child) {
25+
26+
p {
27+
font-size: $font-size-footer-mobile;
28+
font-weight: $font-weight-300;
29+
color: $gray-300;
30+
margin: 0;
31+
line-height: 120%;
4032
display: block;
41-
@include breakpoint-medium {
42-
display: inline-block;
33+
margin-right: 4px;
34+
text-wrap: balance;
35+
36+
&:first-child {
37+
display: block;
38+
}
39+
40+
&:not(:first-child) {
41+
display: block;
42+
@include breakpoint-medium {
43+
display: inline-block;
44+
}
4345
}
4446
}
4547
}
46-
48+
4749
.sf-footer__links {
4850
display: flex;
4951
flex-direction: column;
5052
align-items: flex-start;
5153
font-size: $font-size-footer-mobile;
5254
font-weight: $font-weight-300;
5355
line-height: 120%;
54-
56+
gap: 44px;
57+
5558
@include breakpoint-medium {
5659
flex-direction: row;
5760
justify-content: space-between;
5861
gap: 32px;
5962
text-align: left;
6063
}
6164
}
62-
65+
6366
.sf-footer__links-group {
6467
display: flex;
6568
flex-direction: column;
6669
gap: 12px;
67-
70+
6871
@include breakpoint-medium {
6972
flex-direction: row;
7073
align-items: center;
7174
gap: 32px;
7275
}
7376
}
74-
77+
7578
.sf-footer__links-item {
7679
font-size: $font-size-footer-mobile;
7780
font-weight: $font-weight-normal;
7881
color: $gray-500;
7982
text-decoration: none;
8083
transition: color 0.2s ease;
81-
84+
8285
&:hover,
8386
&:focus {
8487
color: $gray-400;
8588
text-decoration: underline;
8689
}
8790
}
88-
91+
8992
.sf-footer__links-item--policy {
9093
margin-top: 44px;
9194
@include breakpoint-medium {
9295
margin-top: 0;
9396
}
9497
}
95-
98+
9699
.sf-footer__bottom {
97100
text-align: center;
98101
padding-top: 32px;
99102
}
100-
103+
101104
.sf-copy {
102105
margin: 0;
103106
}

‎website/views/fragments/fragments.html‎

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -30,40 +30,50 @@
3030
{% endfragment %} {% fragment footer() %}
3131
<footer class="sf-footer sf-container">
3232
<div class="sf-footer__content">
33-
<div class="sf-footer__top">
34-
<p class="sf-footer__tagline">
35-
A Deliberately Developmental Organization.
36-
</p>
37-
<p class="sf-footer__tagline">Built by real people, for real impact.</p>
38-
<p class="sf-footer__tagline">
39-
Let's grow something meaningful together.
40-
</p>
33+
34+
{% if data.global.companyMission and data.global.companyMission.items and data.global.companyMission.items.length > 0 %}
35+
<div class="sf-footer__mission">
36+
<div class="sf-footer__mission-content">
37+
{% area data.global, 'companyMission' %}
38+
</div>
4139
</div>
40+
{% endif %}
4241

4342
<div class="sf-footer__links">
44-
<div class="sf-footer__links-group">
45-
<a
46-
href="https://www.linkedin.com/company/speed-and-function/"
47-
class="sf-footer__links-item"
48-
target="_blank"
49-
rel="noopener noreferrer"
50-
>
51-
linkedin
43+
{% if data.global.socialMediaLinks and data.global.socialMediaLinks.length > 0 %}
44+
<div class="sf-footer__links-group">
45+
{% for item in data.global.socialMediaLinks %}
46+
<a
47+
href="{% if item.SMLink.linkType == 'page' and item.SMLink._page %}{{ item.SMLink._page._url }}{% else %}{{ item.SMLink.customUrl }}{% endif %}"
48+
class="sf-footer__links-item"
49+
{% if item.SMLink.target and item.SMLink.target.includes('_blank') %}target="_blank" rel="noopener noreferrer"{% endif %}
50+
>
51+
{{ item.SMLink.linkTitle }}
5252
</a>
53+
{% endfor %}
54+
</div>
55+
{% endif %}
56+
57+
{% if data.global.footerLinks and data.global.footerLinks.length > 0 %}
58+
<div class="sf-footer__links-group">
59+
{% for item in data.global.footerLinks %}
5360
<a
54-
href="mailto:connect@speedandfunction.com"
61+
href="{% if item.footerLink.linkType == 'page' and item.footerLink._page %}{{ item.footerLink._page._url }}{% else %}{{ item.footerLink.customUrl }}{% endif %}"
5562
class="sf-footer__links-item"
63+
{% if item.footerLink.target and item.footerLink.target.includes('_blank') %}target="_blank" rel="noopener noreferrer"{% endif %}
5664
>
57-
connect@speedandfunction.com
65+
{{ item.footerLink.linkTitle }}
5866
</a>
67+
{% endfor %}
5968
</div>
60-
<a
61-
href="/privacy-policy"
62-
class="sf-footer__links-item sf-footer__links-item--policy"
63-
>
64-
privacy policy
65-
</a>
69+
{% endif %}
70+
</div>
71+
72+
{% if data.global.footerForm and data.global.footerForm.items and data.global.footerForm.items.length > 0 %}
73+
<div class="sf-footer__form">
74+
{% area data.global, 'footerForm' %}
6675
</div>
76+
{% endif %}
6777

6878
<div class="sf-footer__bottom">
6979
<p class="sf-copy">&#169; {{ data.currentYear or '2025' }} S&amp;F</p>

0 commit comments

Comments
 (0)