From fe5403014267b81142581f54c38e4576a391ea6f Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" 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 @@
-
- +
+

{{ name }}

- {{ dollars(cents) }} + {{ dollars }}

{{ stock }}

- {{ description }} + {{ shortDescription }}
@@ -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) } }; -- cgit v1.2.3