From 335a9e3dfe2bb1dde3900018b01fdad6baad1595 Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Fri, 18 Dec 2020 17:15:06 -0500
Subject: made cart item displays actually level, also rearranged view

---
 iridescence/src/components/cart/CartItem.vue       | 106 ++++++++++-----------
 iridescence/src/components/cart/Totals.vue         |   2 +-
 .../src/components/checkout/CheckoutForm.vue       |   2 +-
 iridescence/src/views/Cart.vue                     |   6 +-
 4 files changed, 53 insertions(+), 63 deletions(-)

(limited to 'iridescence/src')

diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index 0d26f4e..20ddec8 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -1,69 +1,59 @@
 <template>
   <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>
+    <nav class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <p class="image is-64x64">
+            <img :src="thumbnail" :title="product.name" />
+          </p>
+        </div>
+        <div class="level-item">
+          <div class="content">
+            <strong>
+              <p>
+                {{ product.name }}
+              </p>
+            </strong>
           </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 is-rounded">
-                    {{ inCart }} in cart
-                  </a>
-                </p>
-                <div class="control">
-                  <a
-                    @click="incrementCartQuantity(-1)"
-                    class="button is-info is-rounded"
-                  >
-                    <span
-                      class="iconify-inline"
-                      data-icon="mdi-cart-minus"
-                    ></span>
-                  </a>
-                </div>
-                <div class="control">
-                  <a
-                    @click="incrementCartQuantity(1)"
-                    class="button is-info is-rounded"
-                  >
-                    <span
-                      class="iconify-inline"
-                      data-icon="mdi-cart-plus"
-                    ></span>
-                  </a>
-                </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 is-rounded">
+                {{ inCart }} in cart
+              </a>
+            </p>
+            <div class="control">
+              <a
+                @click="incrementCartQuantity(-1)"
+                class="button is-info is-rounded"
+              >
+                <span class="iconify-inline" data-icon="mdi-cart-minus"></span>
+              </a>
             </div>
-
-            <div class="level-item">
-              <button class="button is-danger is-rounded" @click="removeAll">
-                <span class="iconify-inline" data-icon="mdi-cart-remove"></span>
-                <span>Remove All</span>
-              </button>
+            <div class="control">
+              <a
+                @click="incrementCartQuantity(1)"
+                class="button is-info is-rounded"
+              >
+                <span class="iconify-inline" data-icon="mdi-cart-plus"></span>
+              </a>
             </div>
           </div>
-        </nav>
+        </div>
+
+        <div class="level-item">
+          <button class="button is-danger is-rounded" @click="removeAll">
+            <span class="iconify-inline" data-icon="mdi-cart-remove"></span>
+            <span>Remove</span>
+          </button>
+        </div>
       </div>
-    </article>
+    </nav>
   </div>
 </template>
 
diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue
index 5c211ae..36c9e77 100644
--- a/iridescence/src/components/cart/Totals.vue
+++ b/iridescence/src/components/cart/Totals.vue
@@ -10,7 +10,7 @@
       to="/checkout"
       class="button is-success is-fullwidth is-rounded is-medium"
     >
-      Checkout Now
+      Continue to Checkout
     </router-link>
   </div>
 </template>
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
index d64d747..cf73149 100644
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -82,7 +82,7 @@
               <div class="control has-icons-left">
                 <div class="select is-rounded">
                   <select required>
-                    <option selected>United States</option>
+                    <option selected>USA</option>
                   </select>
                 </div>
                 <span class="icon is-left">
diff --git a/iridescence/src/views/Cart.vue b/iridescence/src/views/Cart.vue
index 8fa8752..26949f5 100644
--- a/iridescence/src/views/Cart.vue
+++ b/iridescence/src/views/Cart.vue
@@ -3,6 +3,9 @@
     <div class="container">
       <div v-if="items.length" class="section">
         <div class="columns">
+          <div class="column is-one-third">
+            <Totals></Totals>
+          </div>
           <div class="column">
             <h1 class="subtitle">Your Shopping Cart</h1>
             <CartItem
@@ -12,9 +15,6 @@
               v-bind:in-cart="item[1]"
             ></CartItem>
           </div>
-          <div class="column is-one-third">
-            <Totals></Totals>
-          </div>
         </div>
       </div>
       <div v-else class="section">
-- 
cgit v1.2.3