cart finished for initial release, fixed annoying footer

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>