summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-11-16 22:32:15 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-11-16 22:32:15 -0500
commit1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8 (patch)
tree5681ea769324bc0ff4fb9d479cb28f7917a50960 /iridescence/src/components
parentf92fe9e965d903f4ef5520fff0075928ece3a443 (diff)
downloadtheglassyladies-1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8.tar.xz
theglassyladies-1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8.zip
basic image details, base and fullsize image displays
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/ProductCard.vue15
-rw-r--r--iridescence/src/components/ProductDetail.vue68
2 files changed, 83 insertions, 0 deletions
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index cfea0fd..67fbfbd 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -26,12 +26,27 @@
</div>
</div>
</div>
+ <ProductDetail
+ v-if="id == 6"
+ v-bind="{
+ id: id,
+ name: name,
+ quantity: quantity,
+ cents: cents,
+ photo_base: photo_base,
+ photo_fullsize: photo_fullsize,
+ description: description
+ }"
+ ></ProductDetail>
</div>
</template>
<script>
+import ProductDetail from "@/components/ProductDetail.vue";
+
export default {
name: "ProductCard",
+ components: { ProductDetail },
props: {
id: Number,
name: String,
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
new file mode 100644
index 0000000..6725595
--- /dev/null
+++ b/iridescence/src/components/ProductDetail.vue
@@ -0,0 +1,68 @@
+<template>
+ <div id="productDetail">
+ <div class="modal is-active">
+ <div class="modal-background"></div>
+ <div class="modal-content">
+ <div class="card">
+ <div class="card-image">
+ <figure class="image ">
+ <a target="_blank" :href="fullsize">
+ <img :src="base" :alt="name" title="Click for fullsize" />
+ </a>
+ </figure>
+ </div>
+
+ <div class="card-content">
+ <div class="content">
+ <p class="title">
+ {{ name }}
+ </p>
+ <p class="subtitle">
+ {{ dollars }}
+ </p>
+ <p class="subtitle">{{ stock }}</p>
+ </div>
+
+ <div class="content">
+ {{ description }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="modal-close is-large"></div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "ProductDetail",
+ props: {
+ id: Number,
+ name: String,
+ quantity: Number,
+ cents: Number,
+ photo_base: String,
+ photo_fullsize: String,
+ description: String
+ },
+ computed: {
+ stock() {
+ if (this.quantity == 0) {
+ return "Made to order";
+ } else {
+ return [this.quantity, "in stock"].join(" ");
+ }
+ },
+ dollars() {
+ return "$ " + (this.cents / 100).toFixed(2);
+ },
+ base() {
+ return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_base;
+ },
+ fullsize() {
+ return process.env.VUE_APP_IMAGE_ROOT + "/" + this.photo_fullsize;
+ }
+ }
+};
+</script>