Skip to content

Commit 785c7b4

Browse files
obulatobulat
committed
Update footer to match cccatalog
Footer is renamed to FooterSection, and styles copied from CCCatalog, as Vue Vocabulary doesn't currently have a footer component.
1 parent 37e9016 commit 785c7b4

File tree

3 files changed

+149
-108
lines changed

3 files changed

+149
-108
lines changed

‎src/App.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
</div>
3232
</div>
3333
</div>
34-
<Footer />
34+
<footer-section />
3535
</div>
3636
</template>
3737

@@ -42,7 +42,7 @@ import HelpSection from './components/HelpSection'
4242
import Stepper from './components/Stepper'
4343
import LicenseUseCard from './components/LicenseUseCard'
4444
import HeaderSection from './components/HeaderSection'
45-
import Footer from './components/Footer'
45+
import FooterSection from './components/FooterSection'
4646
import LocaleChooser from './components/LocaleChooser'
4747
import LicenseDetailsCard from './components/LicenseDetailsCard'
4848
@@ -54,7 +54,7 @@ export default {
5454
LicenseDetailsCard,
5555
LicenseUseCard,
5656
HeaderSection,
57-
Footer,
57+
FooterSection,
5858
LocaleChooser
5959
},
6060
data() {

‎src/components/Footer.vue‎

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎src/components/FooterSection.vue‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<template>
2+
<footer class="main-footer">
3+
<div class="container">
4+
<div class="columns">
5+
<div class="column">
6+
<a
7+
href="https://creativecommons.org"
8+
class="main-logo margin-bottom-bigger has-text-white"
9+
>
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
preserveAspectRatio="xMidYMid meet"
13+
viewBox="0 0 304 73"
14+
>
15+
<use href="~@creativecommons/vocabulary/assets/logos/cc/logomark.svg#logomark" />
16+
</svg>
17+
</a>
18+
<address class="margin-bottom-normal">
19+
<span class="is-block">Creative Commons</span>
20+
<span>PO Box 1866, Mountain View CA 94042</span>
21+
</address>
22+
<a
23+
href="mailto:info@creativecommons.org"
24+
class="mail is-block"
25+
>
26+
info@creativecommons.org
27+
</a>
28+
<a
29+
href="tel://+1-415-429-6753"
30+
class="phone"
31+
>+1-415-429-6753</a>
32+
33+
<div class="margin-vertical-large">
34+
<a
35+
href="https://www.instagram.com/creativecommons"
36+
class="social has-text-white"
37+
target="_blank"
38+
rel="noopener"
39+
>
40+
<i class="icon instagram margin-right-small is-size-4" />
41+
</a>
42+
<a
43+
href="https://www.twitter.com/creativecommons"
44+
class="social has-text-white"
45+
target="_blank"
46+
rel="noopener"
47+
>
48+
<i class="icon twitter margin-right-small is-size-4" />
49+
</a>
50+
<a
51+
href="https://www.facebook.com/creativecommons"
52+
class="social has-text-white"
53+
target="_blank"
54+
rel="noopener"
55+
>
56+
<i class="icon facebook margin-right-small is-size-4" />
57+
</a>
58+
<a
59+
href="https://www.linkedin.com/company/creative-commons/"
60+
class="social has-text-white"
61+
target="_blank"
62+
rel="noopener"
63+
>
64+
<i class="icon linkedin margin-right-small is-size-4" />
65+
</a>
66+
</div>
67+
</div>
68+
<div class="column is-half">
69+
<nav class="footer-navigation">
70+
<ul class="menu">
71+
<li>
72+
<a
73+
class="menu-item"
74+
href="https://docs.google.com/forms/d/e/1FAIpQLSfF7MCKxlPsPuMn17v_sLYWMkxBkudQSPXCXoJKjh5GCtx63g/viewform"
75+
>Feedback</a>
76+
</li>
77+
</ul>
78+
</nav>
79+
<div class="attribution margin-top-bigger">
80+
<p class="caption">
81+
Except where otherwise
82+
<a
83+
href="https://creativecommons.org/policies#license"
84+
target="_blank"
85+
rel="noopener"
86+
>noted</a>,
87+
content on this site is licensed under a
88+
<a
89+
href="https://creativecommons.org/licenses/by/4.0/"
90+
target="_blank"
91+
rel="noopener"
92+
>
93+
Creative Commons Attribution 4.0 International license
94+
</a>.
95+
<a
96+
href="https://fontawesome.com/"
97+
target="_blank"
98+
rel="noopener"
99+
class="has-text-white"
100+
>
101+
Icons by Font Awesome.
102+
</a>
103+
</p>
104+
105+
<div class="margin-top-smaller">
106+
<i class="icon cc-logo margin-right-small is-size-4 is-color-white" />
107+
<i class="icon cc-by margin-right-small is-size-4 is-color-white" />
108+
</div>
109+
</div>
110+
</div>
111+
<div class="column">
112+
<aside class="donate-section">
113+
<h5>{{ $t('footer.donation.header') }} </h5>
114+
<p>{{ $t('footer.donation.call') }}</p>
115+
<a
116+
class="button small donate"
117+
href="http://creativecommons.org/donate"
118+
>
119+
<i class="icon cc-letterheart margin-right-small is-size-5 padding-top-smaller" />
120+
Donate now
121+
</a>
122+
</aside>
123+
</div>
124+
</div>
125+
</div>
126+
</footer>
127+
</template>
128+
129+
<script>
130+
export default {
131+
name: 'FooterSection'
132+
}
133+
</script>
134+
135+
<!-- Add "scoped" attribute to limit CSS to this component only -->
136+
<style lang="scss" scoped>
137+
.donate, .social {
138+
&:hover {
139+
text-decoration: none;
140+
}
141+
}
142+
143+
.icon {
144+
vertical-align: middle;
145+
}
146+
</style>

0 commit comments

Comments
 (0)