summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-11-16 19:55:48 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-11-16 19:55:48 -0500
commitfe5403014267b81142581f54c38e4576a391ea6f (patch)
treee5ad97d3cc08f41ac7b7ba9eb42362528cd7da7f /iridescence
parent9c5b036bd537f1465e3ecacbc98a192f98a84e7f (diff)
downloadtheglassyladies-fe5403014267b81142581f54c38e4576a391ea6f.tar.xz
theglassyladies-fe5403014267b81142581f54c38e4576a391ea6f.zip
Thumbnails and shortened descriptions.
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/components/ProductCard.vue32
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>