diff options
| -rw-r--r-- | iridescence/src/App.vue | 31 | ||||
| -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 | ||||
| -rw-r--r-- | iridescence/src/views/Cart.vue | 3 |
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> - © 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> 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> |