From dceffdca5bb65ee6c28c0e324b56dd1277d70df6 Mon Sep 17 00:00:00 2001
From: thomas <tp456@hotmail.fr>
Date: Mon, 2 Mar 2020 20:25:29 +0100
Subject: [PATCH] policy pages added

---
 assets/bulma.scss                             |  4 +-
 components/PolicyPage.vue                     | 24 ++++++++
 components/ProductCardList.vue                | 12 ++--
 components/TheFooter.vue                      | 10 ++++
 nuxt.config.js                                |  4 +-
 .../_handle/article/_articleHandle/index.vue  | 14 +++--
 pages/blog/_handle/index.vue                  | 16 +++--
 pages/collection/_handle/index.vue            | 32 ++++++----
 pages/index.vue                               | 59 +++++++++----------
 pages/policy/privacy-policy/index.vue         | 29 ++++++++-
 pages/policy/refund-policy/index.vue          | 40 +++++++++++++
 pages/policy/terms-of-service/index.vue       | 40 +++++++++++++
 pages/products/_handle/index.vue              |  5 +-
 13 files changed, 227 insertions(+), 62 deletions(-)
 create mode 100644 components/PolicyPage.vue
 create mode 100644 pages/policy/refund-policy/index.vue
 create mode 100644 pages/policy/terms-of-service/index.vue

diff --git a/assets/bulma.scss b/assets/bulma.scss
index 3fb2bd4..be7b87f 100644
--- a/assets/bulma.scss
+++ b/assets/bulma.scss
@@ -40,7 +40,9 @@ p.footer-link > a:hover {
 @import "~bulma";
 @import "~buefy/src/scss/buefy";
 
-
+.is-shadow {
+  text-shadow: 2px 2px 4px #000000;
+}
 
 // My custom theme
 .nuxt-link-exact-active {
diff --git a/components/PolicyPage.vue b/components/PolicyPage.vue
new file mode 100644
index 0000000..076a7e4
--- /dev/null
+++ b/components/PolicyPage.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <h1>{{ policy.title }}</h1>
+      <div v-html="policy.body" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PolicyPage',
+  props: {
+    policy: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/ProductCardList.vue b/components/ProductCardList.vue
index a0d4ade..bc4c48e 100644
--- a/components/ProductCardList.vue
+++ b/components/ProductCardList.vue
@@ -4,9 +4,15 @@
       <nuxt-link :to="`/products/${product.handle}`">
         <div class="card">
           <div class="card-image">
-            <figure class="image is-4by3">
+            <figure class="image is-4by3" v-if="product.images[0].src !== null">
               <img :src="product.images[0].src" :alt="product.images[0].altText">
             </figure>
+            <figure v-else class="is-flex">
+              <img
+                src="/img/no-image.jpg"
+                alt="image-not-found"
+              >
+            </figure>
           </div>
           <div class="card-content">
             <div class="media">
@@ -51,7 +57,5 @@ export default {
 </script>
 
 <style scoped>
-.card-image {
-  height: 22rem;
-}
+
 </style>
diff --git a/components/TheFooter.vue b/components/TheFooter.vue
index 271cbbf..44922ef 100644
--- a/components/TheFooter.vue
+++ b/components/TheFooter.vue
@@ -23,6 +23,16 @@
               Privacy Policy
             </nuxt-link>
           </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/refund-policy">
+              Refund Policy
+            </nuxt-link>
+          </p>
+          <p class="footer-link">
+            <nuxt-link to="/policy/terms-of-service">
+              Terms of service
+            </nuxt-link>
+          </p>
         </div>
         <div class="column is-4">
           <p class="is-size-5">
diff --git a/nuxt.config.js b/nuxt.config.js
index 1349e04..735841e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -104,12 +104,10 @@ export default {
                   }`
         }
       }).then((response) => {
+        const res = []
         const blogRoutes = response.data.data.blogs.edges
         const productRoutes = response.data.data.products.edges
         const CollectionRoutes = response.data.data.collections.edges
-        // eslint-disable-next-line no-console
-        console.log(blogRoutes)
-        const res = []
         blogRoutes.forEach((blog) => {
           blog.node.articles.edges.forEach((article) => {
             res.push('/blog/' + blog.node.handle + '/article/' + article.node.handle)
diff --git a/pages/blog/_handle/article/_articleHandle/index.vue b/pages/blog/_handle/article/_articleHandle/index.vue
index bc98e5d..c0cd9c3 100644
--- a/pages/blog/_handle/article/_articleHandle/index.vue
+++ b/pages/blog/_handle/article/_articleHandle/index.vue
@@ -10,8 +10,8 @@
         }"
       />
     </section>
-    <div class="container">
-      <section class="articles">
+    <section class="articles section">
+      <div class="container">
         <div class="card article">
           <div class="card-content">
             <div class="media">
@@ -28,8 +28,8 @@
             </div>
           </div>
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -81,9 +81,13 @@ export default {
   .article {
     margin-top: 6rem;
   }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
   .article-body {
     line-height: 1.4;
-    margin: 0 6rem;
   }
   .hero-body {
     height: 500px;
diff --git a/pages/blog/_handle/index.vue b/pages/blog/_handle/index.vue
index 4657bb2..6593df3 100644
--- a/pages/blog/_handle/index.vue
+++ b/pages/blog/_handle/index.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="container">
-    <h1>{{ blog.title }}</h1>
-    <blog-card-list
-      :blog="blog"
-    />
+    <div class="columns">
+      <div class="column">
+        <h1>{{ blog.title }}</h1>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column">
+        <blog-card-list
+          :blog="blog"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/pages/collection/_handle/index.vue b/pages/collection/_handle/index.vue
index 5bda09d..2daabbb 100644
--- a/pages/collection/_handle/index.vue
+++ b/pages/collection/_handle/index.vue
@@ -1,23 +1,23 @@
 <template>
   <div>
-    <section class="hero is-medium is-primary" style="margin-bottom: 2rem">
+    <section class="hero is-medium is-info" style="margin-bottom: 2rem">
       <div
         class="hero-body"
         :style="{
-          backgroundImage: `url(${collection.image.src})`,
+          backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
           backgroundPosition: 'center',
           backgroundSize: 'cover'
         }"
       >
         <div class="container has-text-centered">
-          <h1 class="title">
+          <h1 class="title is-shadow">
             {{ collection.title }}
           </h1>
         </div>
       </div>
     </section>
     <div class="container">
-      <section class="articles">
+      <section class="articles section">
         <div class="card article">
           <div class="card-content">
             <div class="content article-body">
@@ -26,14 +26,18 @@
           </div>
         </div>
       </section>
-      <div class="columns">
-        <div class="column">
-          <h2 class="is-size-4">Products in this collection</h2>
+      <section class="section">
+        <div class="container">
+          <div class="columns">
+            <div class="column">
+              <h2 class="is-size-4">Products in this collection</h2>
+            </div>
+          </div>
+          <product-card-list
+            :products="collection.products"
+          />
         </div>
-      </div>
-      <product-card-list
-        :products="collection.products"
-      />
+      </section>
     </div>
   </div>
 </template>
@@ -72,9 +76,13 @@ export default {
   .article {
     margin-top: 6rem;
   }
+  @media screen and (min-width: 768px) {
+    .article-body {
+      margin: 0 6rem;
+    }
+  }
   .article-body {
     line-height: 1.4;
-    margin: 0 6rem;
   }
   .hero-body {
     height: 500px;
diff --git a/pages/index.vue b/pages/index.vue
index 052c7c2..caae0a4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,41 +1,39 @@
 <template>
   <div class="full-width">
-    <div class="container">
-      <div class="columns">
-        <div class="column">
-          <h1 class="is-size-2">My home page</h1>
-          <p>This website is for developpement purpose, please don't try to buy something here.</p>
+    <section class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column">
+            <h1 class="is-size-2">My home page</h1>
+            <p>This website is for developpement purpose, please don't try to buy something here.</p>
+          </div>
         </div>
       </div>
-    </div>
+    </section>
     <div
       v-for="collection in collections"
       :key="collection.id"
-      class="columns"
+      class="columns collection-banner"
     >
       <div class="column">
-        <section class="hero is-large is-primary">
-          <div
-            class="hero-body"
-            :style="{
-              backgroundImage: `url(${collection.image.src})`,
-              backgroundPosition: 'center',
-              backgroundSize: 'cover'
-            }"
-          >
-            <div class="container">
-              <h1 class="title">
-                {{ collection.title }}
-              </h1>
-              <h2 class="subtitle">
-                {{ collection.description }}
-              </h2>
-              <nuxt-link :to="`/collection/${collection.handle}`" class="button is-primary">
-                <span>See</span>
-              </nuxt-link>
+        <nuxt-link :to="`/collection/${collection.handle}`">
+          <section class="hero is-large is-info">
+            <div
+              class="hero-body"
+              :style="{
+                backgroundImage: (collection.image === null) ? '' : `url(${collection.image.src})`,
+                backgroundPosition: 'center',
+                backgroundSize: 'cover'
+              }"
+            >
+              <div class="container">
+                <h1 class="title is-shadow">
+                  {{ collection.title }}
+                </h1>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </nuxt-link>
       </div>
     </div>
   </div>
@@ -102,7 +100,8 @@ export default {
 </script>
 
 <style>
-.card-image {
-  height: 20rem;
+.collection-banner {
+  margin-bottom: 2rem;
+  margin-top: 2rem !important;
 }
 </style>
diff --git a/pages/policy/privacy-policy/index.vue b/pages/policy/privacy-policy/index.vue
index 1e47437..7102531 100644
--- a/pages/policy/privacy-policy/index.vue
+++ b/pages/policy/privacy-policy/index.vue
@@ -1,12 +1,37 @@
 <template>
   <div class="container">
-    <h1>Privacy Policy</h1>
+    <policy-page
+      :policy="policy"
+    />
   </div>
 </template>
 
 <script>
+import PolicyPage from '../../../components/PolicyPage'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    privacyPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.privacyPolicy
+      }
+    })
+  }
 }
 </script>
 
diff --git a/pages/policy/refund-policy/index.vue b/pages/policy/refund-policy/index.vue
new file mode 100644
index 0000000..033fcd2
--- /dev/null
+++ b/pages/policy/refund-policy/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    refundPolicy {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.refundPolicy
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/policy/terms-of-service/index.vue b/pages/policy/terms-of-service/index.vue
new file mode 100644
index 0000000..03f53c7
--- /dev/null
+++ b/pages/policy/terms-of-service/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <policy-page
+      :policy="policy"
+    />
+  </div>
+</template>
+
+<script>
+import PolicyPage from '../../../components/PolicyPage'
+export default {
+  name: 'Index',
+  components: {
+    PolicyPage
+  },
+  asyncData ({ app }) {
+    return app.$axios({
+      method: 'POST',
+      data: {
+        query: `query {
+                  shop {
+                    termsOfService {
+                      title,
+                      body
+                    }
+                  }
+                }`
+      }
+    }).then((response) => {
+      return {
+        policy: response.data.data.shop.termsOfService
+      }
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/products/_handle/index.vue b/pages/products/_handle/index.vue
index 0233739..0003513 100644
--- a/pages/products/_handle/index.vue
+++ b/pages/products/_handle/index.vue
@@ -51,7 +51,7 @@
                 </p>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns is-flex">
               <div class="column is-1">
                 <p>Quantity</p>
               </div>
@@ -105,4 +105,7 @@ export default {
   .al img {
     filter: grayscale(100%);
   }
+  .columns.is-flex {
+    align-items: center;
+  }
 </style>