Integrate CC Vocabulary components into CC Search

build/vue-loader.conf.js

@@ -7,10 +7,15 @@ const sourceMapEnabled = isProduction
   : config.dev.cssSourceMap
 
 module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction
-  }),
+  loaders: Object.assign({},
+    utils.cssLoaders({
+      sourceMap: sourceMapEnabled,
+      extract: isProduction
+    }),
+    {
+      i18n: '@kazupon/vue-i18n-loader'
+    }
+  ),
   cssSourceMap: sourceMapEnabled,
   cacheBusting: config.dev.cacheBusting,
   transformToRequire: {

index.html

@@ -16,7 +16,6 @@
         <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
       <% } %>
       <title>CC Search</title>
-      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
       <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-150x150.png" sizes="32x32">
       <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192">
       <link rel="apple-touch-icon-precomposed" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png">

package.json

@@ -19,6 +19,10 @@
     "build-server": "webpack -p --config build/webpack-server-conf.js --progress"
   },
   "dependencies": {
+    "@creativecommons/vocabulary": "0.0.0-alpha.21",
+    "@fortawesome/fontawesome-svg-core": "^1.2.21",
+    "@fortawesome/free-solid-svg-icons": "^5.10.1",
+    "@fortawesome/vue-fontawesome": "^0.1.6",
     "@sentry/browser": "^5.6.0",
     "@sentry/node": "^5.6.0",
     "axios": "^0.18.0",
@@ -44,6 +48,7 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@kazupon/vue-i18n-loader": "^0.4.1",
     "@vue/test-utils": "^1.0.0-beta.29",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
@@ -97,6 +102,7 @@
     "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.8",
+    "vue-i18n": "^8.14.0",
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.7.3",
     "vue-style-loader": "^3.0.1",

src/App.vue

@@ -5,6 +5,9 @@
 </template>
 
 <script>
+import '@creativecommons/vocabulary/root.css';
+import '@creativecommons/vocabulary/vocabulary.css';
+
 import { FETCH_IMAGE_PROVIDERS } from '@/store/action-types';
 
 export default {
@@ -24,18 +27,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-@import './styles/app';
-
-body {
-  margin: 0;
-}
-
-#app {
-  font-family: source sans pro,sans-serif !important;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-</style>

src/components/CollectionItem.vue

@@ -1,25 +1,35 @@
 <template>
-  <div class="card provider-card cell small">
-    <div class="card-divider">
-      <span class="provider-name">{{ provider.display_name }}</span>
-    </div>
-    <div class="provider-logo">
-      <a :href="'/collections/'+provider.provider_name">
-        <img :alt="provider.display_name"
-            :src="getProviderLogo(provider.provider_name)">
-      </a>
-    </div>
-    <div class="card-section">
-      <span>Collection size: {{ getProviderImageCount(provider.image_count) }} images</span>
-    </div>
-  </div>
+  <Card class="individual"
+        :heading="provider.display_name"
+        is-decked
+        is-raised
+        @click.native="goToProvider(provider.provider_name)">
+    <template #feature>
+      <div class="featured-content">
+        <img class="provider-logo"
+             :alt="provider.display_name"
+             :src="getProviderLogo(provider.provider_name)">
+      </div>
+    </template>
+    <template #default>
+      <div class="body-content">&nbsp;</div>
+    </template>
+    <template #foot>
+      {{ $t('count') }}: {{ getProviderImageCount(provider.image_count) }} {{ $t('images') }}
+    </template>
+  </Card>
 </template>
 
 <script>
+import { Card } from '@creativecommons/vocabulary';
+
 import ImageProviderService from '@/api/ImageProviderService';
 
-export default {
+const CollectionItem = {
   name: 'collection-item',
+  components: {
+    Card,
+  },
   props: ['provider'],
   methods: {
     getProviderImageCount(imageCount) {
@@ -29,43 +39,60 @@ export default {
       const provider = ImageProviderService.getProviderInfo(providerName);
       if (provider) {
         const logo = provider.logo;
-        const logoUrl = require(`@/assets/${logo}`); // eslint-disable-line global-require, import/no-dynamic-require
-
-        return logoUrl;
+        return require(`@/assets/${logo}`); // eslint-disable-line global-require, import/no-dynamic-require
       }
 
       return '';
     },
+    goToProvider(url) {
+      window.location.href = `/collections/${url}`;
+    },
   },
 };
+
+export default CollectionItem;
 </script>
 
 <style lang="scss" scoped>
-  .provider-card {
-    width: 18em;
-    background-color: #dedede;
-    margin: 0.5em;
-  }
+  @import "~@creativecommons/vocabulary/tokens";
+
+  .individual {
+    cursor: pointer;
 
-  .provider-name {
-    font-weight: 800;
+    --card-foot-background-color: var(--card-body-background-color);
   }
 
-  .provider-logo {
-    height: 10em;
-    line-height: 10em;
-    white-space: nowrap;
-    position: relative;
-
-    a {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
+  .featured-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    height: 6em;
 
-    img {
-      width: 100%;
+    padding: 1em;
+
+    .provider-logo {
+      max-width: 100%;
+      max-height: 6em;
+
+      a {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      img {
+        max-width: 100%;
+      }
     }
   }
+
+  .body-content {
+    height: 0;
+    overflow: hidden;
+  }
 </style>
+
+<i18n src="../locales/components/CollectionItem.json">
+</i18n>

src/components/CopyAttributionButtons.vue

@@ -106,9 +106,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-  @import '../styles/photodetails.scss';
-
-
-</style>