Skip to content

Integrate Vocabulary styles into Chooser #169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 25, 2020
Merged

Integrate Vocabulary styles into Chooser #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c92d4c
Update vocabulary to v.1, import vocabulary styles
obulat May 24, 2020
37e9016
Replace app title with new logo image, update header styles
obulat May 24, 2020
785c7b4
Update footer to match cccatalog
obulat May 24, 2020
7c4c122
Use styles from vocabulary package for headings
obulat May 24, 2020
9986666
Remove temporary ha class from heading in App.vue
obulat May 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"i18n:report": "vue-cli-service i18n:report -v --src src/**/*.vue --locales src/locales/**.json -o output.json"
},
"dependencies": {
"@creativecommons/vocabulary": "0.0.0-alpha.30",
"@creativecommons/vocabulary": "^1.0.0-beta.14",
"@creativecommons/vue-vocabulary": "0.0.0-alpha.30",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-brands-svg-icons": "^5.12.0",
Expand Down
15 changes: 8 additions & 7 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<div id="app">
<Header :title="$t('app.title')" />
<header-section />
<div
id="site-container"
class="container"
>
<div class="page-head">
<div class="select-license-column">
<h2 class="vocab h2a ha">
<h2 class="vocab">
{{ $t('select-license.heading') }}
</h2>
<p class="stepper-instructions vocab-body body-bigger">
Expand All @@ -31,7 +31,7 @@
</div>
</div>
</div>
<Footer />
<footer-section />
</div>
</template>

Expand All @@ -41,8 +41,8 @@
import HelpSection from './components/HelpSection'
import Stepper from './components/Stepper'
import LicenseUseCard from './components/LicenseUseCard'
import Header from './components/Header.vue'
import Footer from './components/Footer'
import HeaderSection from './components/HeaderSection'
import FooterSection from './components/FooterSection'
import LocaleChooser from './components/LocaleChooser'
import LicenseDetailsCard from './components/LicenseDetailsCard'

Expand All @@ -53,8 +53,8 @@ export default {
Stepper,
LicenseDetailsCard,
LicenseUseCard,
Header,
Footer,
HeaderSection,
FooterSection,
LocaleChooser
},
data() {
Expand Down Expand Up @@ -104,6 +104,7 @@ export default {
@import '~buefy/src/scss/components/_icon.scss';

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A%20400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");
@import "@creativecommons/vocabulary/scss/vocabulary.scss";

#app {
-webkit-font-smoothing: antialiased;
Expand Down
15 changes: 15 additions & 0 deletions src/assets/chooser.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 0 additions & 105 deletions src/components/Footer.vue
View file
Open in desktop

This file was deleted.

146 changes: 146 additions & 0 deletions src/components/FooterSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<template>
<footer class="main-footer">
<div class="container">
<div class="columns">
<div class="column">
<a
href="https://creativecommons.org"
class="main-logo margin-bottom-bigger has-text-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 304 73"
>
<use href="~@creativecommons/vocabulary/assets/logos/cc/logomark.svg#logomark" />
</svg>
</a>
<address class="margin-bottom-normal">
<span class="is-block">Creative Commons</span>
<span>PO Box 1866, Mountain View CA 94042</span>
</address>
<a
href="mailto:info@creativecommons.org"
class="mail is-block"
>
info@creativecommons.org
</a>
<a
href="tel://+1-415-429-6753"
class="phone"
>+1-415-429-6753</a>

<div class="margin-vertical-large">
<a
href="https://www.instagram.com/creativecommons"
class="social has-text-white"
target="_blank"
rel="noopener"
>
<i class="icon instagram margin-right-small is-size-4" />
</a>
<a
href="https://www.twitter.com/creativecommons"
class="social has-text-white"
target="_blank"
rel="noopener"
>
<i class="icon twitter margin-right-small is-size-4" />
</a>
<a
href="https://www.facebook.com/creativecommons"
class="social has-text-white"
target="_blank"
rel="noopener"
>
<i class="icon facebook margin-right-small is-size-4" />
</a>
<a
href="https://www.linkedin.com/company/creative-commons/"
class="social has-text-white"
target="_blank"
rel="noopener"
>
<i class="icon linkedin margin-right-small is-size-4" />
</a>
</div>
</div>
<div class="column is-half">
<nav class="footer-navigation">
<ul class="menu">
<li>
<a
class="menu-item"
href="https://docs.google.com/forms/d/e/1FAIpQLSfF7MCKxlPsPuMn17v_sLYWMkxBkudQSPXCXoJKjh5GCtx63g/viewform"
>Feedback</a>
</li>
</ul>
</nav>
<div class="attribution margin-top-bigger">
<p class="caption">
Except where otherwise
<a
href="https://creativecommons.org/policies#license"
target="_blank"
rel="noopener"
>noted</a>,
content on this site is licensed under a
<a
href="https://creativecommons.org/licenses/by/4.0/"
target="_blank"
rel="noopener"
>
Creative Commons Attribution 4.0 International license
</a>.
<a
href="https://fontawesome.com/"
target="_blank"
rel="noopener"
class="has-text-white"
>
Icons by Font Awesome.
</a>
</p>

<div class="margin-top-smaller">
<i class="icon cc-logo margin-right-small is-size-4 is-color-white" />
<i class="icon cc-by margin-right-small is-size-4 is-color-white" />
</div>
</div>
</div>
<div class="column">
<aside class="donate-section">
<h5>{{ $t('footer.donation.header') }} </h5>
<p>{{ $t('footer.donation.call') }}</p>
<a
class="button small donate"
href="http://creativecommons.org/donate"
>
<i class="icon cc-letterheart margin-right-small is-size-5 padding-top-smaller" />
Donate now
</a>
</aside>
</div>
</div>
</div>
</footer>
</template>

<script>
export default {
name: 'FooterSection'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.donate, .social {
&:hover {
text-decoration: none;
}
}

.icon {
vertical-align: middle;
}
</style>
Loading