summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/CartCheckout.vue19
-rw-r--r--iridescence/src/components/Footer.vue29
-rw-r--r--iridescence/src/components/Navbar.vue4
-rw-r--r--iridescence/src/components/ProductDetail.vue25
-rw-r--r--iridescence/src/components/ProductSearch.vue14
-rw-r--r--iridescence/src/components/cart/CartItem.vue21
-rw-r--r--iridescence/src/components/cart/Totals.vue11
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue173
8 files changed, 214 insertions, 82 deletions
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
index 590e5b9..1b327b2 100644
--- a/iridescence/src/components/CartCheckout.vue
+++ b/iridescence/src/components/CartCheckout.vue
@@ -1,9 +1,17 @@
<template>
<div id="cartCheckout">
<div class="buttons has-addons">
- <router-link to="/cart" class="button is-primary is-rounded"
- >🛒 {{ checkoutReady }}</router-link
+ <router-link
+ v-if="inCart"
+ to="/cart"
+ class="button is-success is-rounded"
>
+ <span class="iconify-inline" data-icon="mdi-cart"></span>
+ <span>Checkout</span></router-link
+ >
+ <a v-else class="button is-static is-rounded">
+ <span class="iconify-inline" data-icon="mdi-cart"></span>
+ </a>
<button class="button is-static">x{{ inCart }}</button>
<button class="button is-static is-rounded">
{{ cartTotal }}
@@ -24,13 +32,6 @@ 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 d0d4f70..ac394c7 100644
--- a/iridescence/src/components/Footer.vue
+++ b/iridescence/src/components/Footer.vue
@@ -7,9 +7,22 @@
<li>
<a
class="navbar-item"
+ target="_blank"
href="https://www.facebook.com/glassyladiesart"
- >Like Us on Facebook</a
>
+ <span class="iconify-inline" data-icon="mdi-facebook"></span>
+ <span>Like Us on Facebook</span>
+ </a>
+ </li>
+ <li>
+ <a
+ class="navbar-item"
+ target="_blank"
+ href="mailto:liz@theglassyladies.com"
+ >
+ <span class="iconify-inline" data-icon="mdi-email"></span>
+ <span>Write to Us</span>
+ </a>
</li>
</ul>
</div>
@@ -22,15 +35,23 @@
<li>
<a>
<router-link to="/admin" class="navbar-item">
- Inventory
+ <span
+ class="iconify-inline"
+ data-icon="mdi-package-variant-closed"
+ ></span>
+ <span>Inventory</span>
</router-link>
</a>
</li>
<li>
<a
><router-link to="/privacy" class="navbar-item">
- Privacy Policy</router-link
- ></a
+ <span
+ class="iconify-inline"
+ data-icon="mdi-monitor-eye"
+ ></span>
+ <span>Privacy Policy</span>
+ </router-link></a
>
</li>
</ul>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
index 0ef7de5..f9f99c2 100644
--- a/iridescence/src/components/Navbar.vue
+++ b/iridescence/src/components/Navbar.vue
@@ -1,11 +1,11 @@
<template>
<div id="navbar">
- <nav class="navbar is-fixed-top is-transparent">
+ <nav class="navbar is-fixed-top is-primary">
<div class="navbar-brand">
<div class="navbar-item">
<img src="@/assets/logo.png" />
<div class="navbar-item">
- <span>
+ <span style="color: white">
The Glassy Ladies
</span>
</div>
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
index 430d78b..6aeb68c 100644
--- a/iridescence/src/components/ProductDetail.vue
+++ b/iridescence/src/components/ProductDetail.vue
@@ -38,33 +38,44 @@
<p class="subtitle">{{ stock }}</p>
<div v-if="inCart" class="field has-addons">
<p class="control is-expanded">
- <a class="button is-static is-fullwidth">
+ <a
+ class="button is-static is-fullwidth is-rounded is-medium"
+ >
{{ inCart }} in cart
</a>
</p>
<div class="control">
<a
@click="incrementCartQuantity(-1)"
- class="button is-info is-outlined"
+ class="button is-info is-medium"
>
- -
+ <span
+ class="iconify-inline"
+ data-icon="mdi-cart-minus"
+ ></span>
</a>
</div>
<div class="control">
<a
@click="incrementCartQuantity(1)"
- class="button is-info is-outlined"
+ class="button is-info is-rounded is-medium"
>
- +
+ <span
+ class="iconify-inline"
+ data-icon="mdi-cart-plus"
+ ></span>
</a>
</div>
</div>
<button
v-else
@click="incrementCartQuantity(1)"
- class="button is-primary is-fullwidth"
+ class="button is-success is-fullwidth is-rounded is-medium"
>
- Add to Cart
+ <span
+ class="iconify-inline"
+ data-icon="mdi-cart-arrow-down"
+ ></span>
</button>
</div>
</div>
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
index 0cf8cf2..2a7a2e3 100644
--- a/iridescence/src/components/ProductSearch.vue
+++ b/iridescence/src/components/ProductSearch.vue
@@ -1,24 +1,30 @@
<template>
<div id="productSearch">
<div class="field is-grouped is-grouped-multiline">
- <div class="control is-expanded">
+ <div class="control is-expanded has-icons-left">
<input
- class="input is-primary is-medium"
+ class="input is-medium is-primary is-rounded"
type="text"
placeholder="Find something in particular..."
v-model.trim="term"
@input="updateSearch"
autofocus
/>
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-magnify"></span>
+ </span>
</div>
- <div class="control">
- <div class="select is-primary is-medium">
+ <div class="control has-icons-left">
+ <div class="select is-medium is-primary is-rounded">
<select v-model="sortOptionName" @change="updateSort">
<option v-for="name in sortOptionNames" :key="name" :value="name">
{{ name }}
</option>
</select>
</div>
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-sort"></span>
+ </span>
</div>
</div>
<content class="has-text-centered" v-if="noResults">
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
index c99d714..0d26f4e 100644
--- a/iridescence/src/components/cart/CartItem.vue
+++ b/iridescence/src/components/cart/CartItem.vue
@@ -25,32 +25,39 @@
<div class="level-item">
<div class="field has-addons">
<p class="control is-expanded">
- <a class="button is-static is-fullwidth">
+ <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-outlined"
+ 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-outlined"
+ class="button is-info is-rounded"
>
- +
+ <span
+ class="iconify-inline"
+ data-icon="mdi-cart-plus"
+ ></span>
</a>
</div>
</div>
</div>
<div class="level-item">
- <button class="button is-outlined is-danger" @click="removeAll">
- Remove
+ <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>
</div>
diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue
index b679207..5c211ae 100644
--- a/iridescence/src/components/cart/Totals.vue
+++ b/iridescence/src/components/cart/Totals.vue
@@ -1,13 +1,16 @@
<template>
<div>
<h1 class="subtitle has-text-centered">
- Summary
+ Total
</h1>
<hr />
- <h1 class="title has-text-centered">Total: {{ cartTotal }}</h1>
- <router-link to="/checkout" class="button is-primary is-fullwidth">
- Checkout
+ <h1 class="title has-text-centered">{{ cartTotal }}</h1>
+ <router-link
+ to="/checkout"
+ class="button is-success is-fullwidth is-rounded is-medium"
+ >
+ Checkout Now
</router-link>
</div>
</template>
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
index ee6c898..d64d747 100644
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -10,89 +10,152 @@
<div class="field">
<label for="firstName" class="label">First Name</label>
- <div class="control">
- <input id="firstName" class="input" type="text" required />
+ <div class="control has-icons-left">
+ <input
+ id="firstName"
+ class="input is-rounded"
+ type="text"
+ required
+ />
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-card-account-details"
+ ></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">Last Name</label>
- <div class="control">
- <input class="input" type="text" required />
+ <div class="control has-icons-left">
+ <input class="input is-rounded" type="text" required />
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-card-account-details"
+ ></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">Email Address</label>
- <div class="control">
- <input class="input" type="email" required />
+ <div class="control has-icons-left">
+ <input class="input is-rounded" type="email" required />
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-email"></span>
+ </span>
</div>
<p class="help">Example: you@example.com</p>
</div>
<div class="field">
<label class="label">Phone Number</label>
- <div class="control">
- <input class="input" type="tel" pattern="[0-9]{10}" required />
+ <div class="control has-icons-left">
+ <input
+ class="input is-rounded"
+ type="tel"
+ pattern="[0-9]{10}"
+ required
+ />
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-phone-classic"
+ ></span>
+ </span>
</div>
<p class="help">Example: 7571234567</p>
</div>
<label class="checkbox">
<input type="checkbox" />
+ <span class="iconify" data-icon="mdi-cellphone-android"></span>
May we text order updates and questions to this number?
</label>
</div>
<div class="column">
- <div class="field">
- <label class="label">Country</label>
-
- <div class="control">
- <div class="select">
+ <label class="label">Location</label>
+ <div class="field has-addons">
+ <div class="control has-icons-left">
+ <div class="select is-rounded">
<select required>
<option selected>United States</option>
</select>
</div>
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-flag-variant"
+ ></span>
+ </span>
+ </div>
+
+ <div class="control has-icons-left">
+ <div class="select is-rounded">
+ <select required>
+ <option selected>Virginia</option>
+ </select>
+ </div>
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-map"></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">Address</label>
- <div class="control">
- <input class="input" type="text" required />
+ <div class="control has-icons-left">
+ <input class="input is-rounded" type="text" required />
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-road-variant"
+ ></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">Address 2 (Optional)</label>
- <div class="control">
- <input class="input" type="text" />
+ <div class="control has-icons-left">
+ <input class="input is-rounded" type="text" />
+ <span class="icon is-left">
+ <span
+ class="iconify-inline"
+ data-icon="mdi-format-list-numbered"
+ ></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">City</label>
- <div class="control">
- <input class="input" type="text" required />
- </div>
- </div>
-
- <div class="field">
- <label class="label">State</label>
-
- <div class="select">
- <select required>
- <option selected>VA</option>
- </select>
+ <div class="control has-icons-left">
+ <input class="input is-rounded" type="text" required />
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-city"></span>
+ </span>
</div>
</div>
<div class="field">
<label class="label">Zip Code</label>
- <input class="input" type="text" pattern="[0-9]{5}" required />
+ <div class="control has-icons-left">
+ <input
+ class="input is-rounded"
+ type="text"
+ pattern="[0-9]{5}"
+ required
+ />
+ <span class="icon is-left">
+ <span class="iconify-inline" data-icon="mdi-mailbox"></span>
+ </span>
+ </div>
</div>
</div>
</div>
@@ -101,30 +164,50 @@
<section class="section">
<h1 class="title">Payment</h1>
<hr />
- payment option (mailed check, paypal, cash or check on delivery)
+
+ <div class="field">
+ <div class="control ">
+ <label class="radio">
+ <input type="radio" name="payment" checked />
+ Cash or check upon delivery
+ </label>
+ <label class="radio">
+ <input type="radio" name="payment" />
+ Mail-in cash or check
+ </label>
+ <label class="radio">
+ <input type="radio" name="payment" />
+ PayPal, Square
+ </label>
+ </div>
+ </div>
</section>
<section class="section">
<h1 class="title">Delivery Options</h1>
<hr />
- <div class="control">
- <label class="radio">
- <input type="radio" name="delivery" />
- Pick up at studio
- </label>
- <label class="radio">
- <input type="radio" name="delivery" />
- Pick up at Simply Vintage Art Gallery
- </label>
- <label class="radio">
- <input type="radio" name="delivery" />
- Delivery
- </label>
+ <div class="field">
+ <div class="control ">
+ <label class="radio">
+ <input type="radio" name="delivery" checked />
+ Pick up at studio
+ </label>
+ <label class="radio">
+ <input type="radio" name="delivery" />
+ Pick up at Simply Vintage Art Gallery
+ </label>
+ <label class="radio">
+ <input type="radio" name="delivery" />
+ Delivery
+ </label>
+ </div>
</div>
</section>
<section class="section">
- <button class="button is-primary">Continue to Confirmation</button>
+ <button class="button is-success is-rounded">
+ Continue to Confirmation
+ </button>
</section>
</form>
</div>