summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/App.vue31
-rw-r--r--iridescence/src/components/CartCheckout.vue9
-rw-r--r--iridescence/src/components/Footer.vue32
-rw-r--r--iridescence/src/components/Navbar.vue9
-rw-r--r--iridescence/src/components/cart/CartItem.vue103
-rw-r--r--iridescence/src/components/cart/Totals.vue8
-rw-r--r--iridescence/src/views/Cart.vue3
7 files changed, 117 insertions, 78 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index d9499c4..1d60cc3 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -1,14 +1,16 @@
<template>
<div id="app">
- <Navbar></Navbar>
- <BusyBar></BusyBar>
- <transition
- mode="out-in"
- enter-active-class="animate__animated animate__fadeInRight animate__faster"
- leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
- >
- <router-view />
- </transition>
+ <div id="main">
+ <Navbar></Navbar>
+ <BusyBar></BusyBar>
+ <transition
+ mode="out-in"
+ enter-active-class="animate__animated animate__fadeInRight animate__faster"
+ leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
+ >
+ <router-view />
+ </transition>
+ </div>
<Footer></Footer>
</div>
</template>
@@ -31,6 +33,15 @@ export default {
<style lang="scss">
@charset "utf-8";
/*modal-background-background-color: hsla(0, 0%, 4%, 0.2);*/
-$modal-content-width: 800px;
+$modal-content-width: 50em;
@import "../node_modules/bulma/bulma.sass";
+
+#app {
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+#main {
+ flex: 1;
+}
</style>
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>
- &copy; 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>&copy; {{ 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>
diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
index 7d64a65..8fa8752 100644
--- a/iridescence/src/views/Cart.vue
+++ b/iridescence/src/views/Cart.vue
@@ -4,6 +4,7 @@
<div v-if="items.length" class="section">
<div class="columns">
<div class="column">
+ <h1 class="subtitle">Your Shopping Cart</h1>
<CartItem
v-for="item in items"
:key="item[0]"
@@ -20,7 +21,7 @@
<div class="content">
<p class="has-text-centered">
There's nothing in your cart.
- <a> <router-link to="/">Go home to start shopping!</router-link></a>
+ <a> <router-link to="/">Start shopping!</router-link></a>
</p>
</div>
</div>