summaryrefslogtreecommitdiff
path: root/iridescence
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2020-12-18 17:15:06 -0500
committerAdam T. Carpenter <atc@53hor.net>2020-12-18 17:15:06 -0500
commit335a9e3dfe2bb1dde3900018b01fdad6baad1595 (patch)
tree2d9a46d61db02a8e9a64f0f16cc63f56b7e37c34 /iridescence
parentba965367090f183d62490c6a5e4d5ef5ea654dad (diff)
downloadtheglassyladies-335a9e3dfe2bb1dde3900018b01fdad6baad1595.tar.xz
theglassyladies-335a9e3dfe2bb1dde3900018b01fdad6baad1595.zip
made cart item displays actually level, also rearranged view
Diffstat (limited to 'iridescence')
-rw-r--r--iridescence/src/components/cart/CartItem.vue106
-rw-r--r--iridescence/src/components/cart/Totals.vue2
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue2
-rw-r--r--iridescence/src/views/Cart.vue6
4 files changed, 53 insertions, 63 deletions
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">