diff options
Diffstat (limited to 'iridescence/src/components')
| -rw-r--r-- | iridescence/src/components/CartCheckout.vue | 9 | ||||
| -rw-r--r-- | iridescence/src/components/Footer.vue | 32 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 9 | ||||
| -rw-r--r-- | iridescence/src/components/cart/CartItem.vue | 103 | ||||
| -rw-r--r-- | iridescence/src/components/cart/Totals.vue | 8 |
5 files changed, 94 insertions, 67 deletions
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue index cde78d9..590e5b9 100644 --- a/iridescence/src/components/CartCheckout.vue +++ b/iridescence/src/components/CartCheckout.vue @@ -2,7 +2,7 @@ <div id="cartCheckout"> <div class="buttons has-addons"> <router-link to="/cart" class="button is-primary is-rounded" - >🛒</router-link + >🛒 {{ checkoutReady }}</router-link > <button class="button is-static">x{{ inCart }}</button> <button class="button is-static is-rounded"> @@ -24,6 +24,13 @@ export default { }, cartTotal() { return this.$store.getters.cartTotal; + }, + checkoutReady() { + if (this.inCart) { + return "Checkout"; + } else { + return ""; + } } } }; diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue index e124440..709f2c0 100644 --- a/iridescence/src/components/Footer.vue +++ b/iridescence/src/components/Footer.vue @@ -1,17 +1,37 @@ <template> <div id="footer"> <footer class="footer"> - <div class="content has-text-centered"> - <p> - © 2020 The Glassy Ladies, LLC - </p> - </div> + <nav class="level"> + <div class="level-item has-text-centered"> + (Social links) + </div> + + <div class="level-item has-text-centered"> + <p>© {{ year }} The Glassy Ladies, LLC</p> + </div> + <div class="level-item has-text-centered"> + <ul> + <li> + <a> + <router-link to="/admin" class="navbar-item"> + Inventory + </router-link> + </a> + </li> + </ul> + </div> + </nav> </footer> </div> </template> <script> export default { - name: "Footer" + name: "Footer", + data() { + return { + year: new Date().getFullYear() + }; + } }; </script> diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue index 3ef4ead..0ef7de5 100644 --- a/iridescence/src/components/Navbar.vue +++ b/iridescence/src/components/Navbar.vue @@ -19,14 +19,11 @@ <div :class="navMenu"> <div class="navbar-start"> <router-link to="/" class="navbar-item"> - Home + Shop </router-link> - <router-link to="/about" class="navbar-item"> + <!--<router-link to="/about" class="navbar-item"> About - </router-link> - <router-link to="/admin" class="navbar-item"> - Admin - </router-link> + </router-link>--> </div> <transition diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue index e31a109..c99d714 100644 --- a/iridescence/src/components/cart/CartItem.vue +++ b/iridescence/src/components/cart/CartItem.vue @@ -1,60 +1,63 @@ <template> - <article class="media" id="cartItem"> - <figure class="media-left"> - <p class="image is-64x64"> - <img :src="thumbnail" :title="product.name" /> - </p> - </figure> - <div class="media-content"> - <nav class="level"> - <div class="level-left"> - <div class="level-item"> - <div class="content"> - <strong> - <p> - {{ product.name }} - </p> - </strong> + <div> + <hr /> + <article class="media" id="cartItem"> + <figure class="media-left"> + <p class="image is-64x64"> + <img :src="thumbnail" :title="product.name" /> + </p> + </figure> + <div class="media-content"> + <nav class="level"> + <div class="level-left"> + <div class="level-item"> + <div class="content"> + <strong> + <p> + {{ product.name }} + </p> + </strong> + </div> </div> </div> - </div> - <div class="level-right"> - <div class="level-item">Subtotal: {{ dollars }}</div> - <div class="level-item"> - <div class="field has-addons"> - <p class="control is-expanded"> - <a class="button is-static is-fullwidth"> - {{ inCart }} in cart - </a> - </p> - <div class="control"> - <a - @click="incrementCartQuantity(-1)" - class="button is-info is-outlined" - > - - - </a> - </div> - <div class="control"> - <a - @click="incrementCartQuantity(1)" - class="button is-info is-outlined" - > - + - </a> + <div class="level-right"> + <div class="level-item">Subtotal: {{ dollars }}</div> + <div class="level-item"> + <div class="field has-addons"> + <p class="control is-expanded"> + <a class="button is-static is-fullwidth"> + {{ inCart }} in cart + </a> + </p> + <div class="control"> + <a + @click="incrementCartQuantity(-1)" + class="button is-info is-outlined" + > + - + </a> + </div> + <div class="control"> + <a + @click="incrementCartQuantity(1)" + class="button is-info is-outlined" + > + + + </a> + </div> </div> </div> - </div> - <div class="level-item"> - <button class="button is-outlined is-danger" @click="removeAll"> - Remove - </button> + <div class="level-item"> + <button class="button is-outlined is-danger" @click="removeAll"> + Remove + </button> + </div> </div> - </div> - </nav> - </div> - </article> + </nav> + </div> + </article> + </div> </template> <script> diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue index 7b95462..b679207 100644 --- a/iridescence/src/components/cart/Totals.vue +++ b/iridescence/src/components/cart/Totals.vue @@ -3,10 +3,10 @@ <h1 class="subtitle has-text-centered"> Summary </h1> - <h1 class="title has-text-centered"> - {{ cartTotal }} - </h1> - <router-link to="/checkout" class="button is-primary"> + <hr /> + + <h1 class="title has-text-centered">Total: {{ cartTotal }}</h1> + <router-link to="/checkout" class="button is-primary is-fullwidth"> Checkout </router-link> </div> |