diff options
| -rw-r--r-- | iridescence/src/App.vue | 2 | ||||
| -rw-r--r-- | iridescence/src/components/ProductCard.vue | 15 | ||||
| -rw-r--r-- | iridescence/src/components/ProductDetail.vue | 68 |
3 files changed, 84 insertions, 1 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue index debc599..8851fbd 100644 --- a/iridescence/src/App.vue +++ b/iridescence/src/App.vue @@ -30,6 +30,6 @@ export default { <style lang="scss"> @charset "utf-8"; -$modal-background-background-color: hsla(0, 0%, 4%, 0.2); +//$modal-background-background-color: hsla(0, 0%, 4%, 0.2); @import "../node_modules/bulma/bulma.sass"; </style> 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> |