diff options
Diffstat (limited to 'iridescence/src/components')
| -rw-r--r-- | iridescence/src/components/CartCheckout.vue | 19 | ||||
| -rw-r--r-- | iridescence/src/components/Footer.vue | 29 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 4 | ||||
| -rw-r--r-- | iridescence/src/components/ProductDetail.vue | 25 | ||||
| -rw-r--r-- | iridescence/src/components/ProductSearch.vue | 14 | ||||
| -rw-r--r-- | iridescence/src/components/cart/CartItem.vue | 21 | ||||
| -rw-r--r-- | iridescence/src/components/cart/Totals.vue | 11 | ||||
| -rw-r--r-- | iridescence/src/components/checkout/CheckoutForm.vue | 173 |
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> |