From fe5403014267b81142581f54c38e4576a391ea6f Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 16 Nov 2020 19:55:48 -0500
Subject: Thumbnails and shortened descriptions.

---
 iridescence/src/components/ProductCard.vue | 32 ++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 11 deletions(-)

(limited to 'iridescence/src')

diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 36c7be5..4ff6c80 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -2,24 +2,21 @@
   <div id="productCard">
     <div class="card">
       <div class="card-image">
-        <figure class="image is-4by3">
-          <img
-            src="https://bulma.io/images/placeholders/1280x960.png"
-            :alt="name"
-          />
+        <figure class="image is-square">
+          <img :src="thumbnail" :alt="name" title="Click to expand." />
         </figure>
       </div>
       <div class="card-content">
         <div class="content">
           <p class="title is-4">{{ name }}</p>
           <p class="subtitle is-4">
-            {{ dollars(cents) }}
+            {{ dollars }}
           </p>
           <p class="subtitle is-6">{{ stock }}</p>
         </div>
 
         <div class="content">
-          {{ description }}
+          {{ shortDescription }}
         </div>
       </div>
     </div>
@@ -34,7 +31,9 @@ export default {
     name: String,
     quantity: Number,
     cents: Number,
-    imgPath: String,
+    photo_thumbnail: String,
+    photo_base: String,
+    photo_fullsize: String,
     description: String
   },
   computed: {
@@ -44,10 +43,21 @@ export default {
       } else {
         return [this.quantity, "in stock"].join(" ");
       }
+    },
+    dollars() {
+      return "$ " + (this.cents / 100).toFixed(2);
+    },
+    thumbnail() {
+      return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_thumbnail;
+    },
+    shortDescription() {
+      let description = this.description.split(" ");
+      if (description.length < 10) {
+        return this.description;
+      } else {
+        return description.splice(0, 10).join(" ") + "…";
+      }
     }
-  },
-  methods: {
-    dollars: cents => "$ " + (cents / 100).toFixed(2)
   }
 };
 </script>
-- 
cgit v1.2.3