diff options
Diffstat (limited to 'iridescence')
| -rw-r--r-- | iridescence/src/components/ProductCard.vue | 32 |
1 files changed, 21 insertions, 11 deletions
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> |