From 1ec0fd99cdf48fa3db61c7580d4e80a2c5216ed8 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Mon, 16 Nov 2020 22:32:15 -0500
Subject: basic image details, base and fullsize image displays
---
iridescence/src/App.vue | 2 +-
iridescence/src/components/ProductCard.vue | 15 ++++++
iridescence/src/components/ProductDetail.vue | 68 ++++++++++++++++++++++++++++
3 files changed, 84 insertions(+), 1 deletion(-)
create mode 100644 iridescence/src/components/ProductDetail.vue
(limited to 'iridescence/src')
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>
--
cgit v1.2.3