summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--dichroism/src/dtos/product_get.rs6
-rw-r--r--dichroism/src/models/photo.rs4
-rw-r--r--iridescence/src/components/ProductCard.vue32
3 files changed, 24 insertions, 18 deletions
diff --git a/dichroism/src/dtos/product_get.rs b/dichroism/src/dtos/product_get.rs
index 3f68eef..aa52f19 100644
--- a/dichroism/src/dtos/product_get.rs
+++ b/dichroism/src/dtos/product_get.rs
@@ -24,9 +24,9 @@ impl From<Product> for ProductGet {
quantity: p.quantity,
featured: p.featured,
category: p.category,
- photo_fullsize: p.photo_set.fullsize.filename(),
- photo_base: p.photo_set.base.filename(),
- photo_thumbnail: p.photo_set.thumbnail.filename(),
+ photo_fullsize: p.photo_set.fullsize.id,
+ photo_base: p.photo_set.base.id,
+ photo_thumbnail: p.photo_set.thumbnail.id,
}
}
}
diff --git a/dichroism/src/models/photo.rs b/dichroism/src/models/photo.rs
index e24a691..086d387 100644
--- a/dichroism/src/models/photo.rs
+++ b/dichroism/src/models/photo.rs
@@ -7,8 +7,4 @@ impl Photo {
pub fn new(id: String) -> Self {
Self { id }
}
-
- pub fn filename(&self) -> String {
- format!("{}.jpg", self.id)
- }
}
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>