diff options
Diffstat (limited to 'iridescence/src')
| -rw-r--r-- | iridescence/src/App.vue | 25 | ||||
| -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 |
9 files changed, 238 insertions, 83 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue index 1d60cc3..8e4e1ec 100644 --- a/iridescence/src/App.vue +++ b/iridescence/src/App.vue @@ -32,8 +32,31 @@ export default { <style lang="scss"> @charset "utf-8"; -/*modal-background-background-color: hsla(0, 0%, 4%, 0.2);*/ + +/* Fonts */ +@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap"); +$family-sans-serif: "Oxygen", sans-serif; + +/* Custom colors */ +$viridian-green: #2b9292ff; +$cultured: #f4f6f6ff; +$gainsboro: #dee5e5ff; +$queen-blue: #41668cff; +$madder-lake: #cc2936ff; +$rich-black-fogra-29: #001011ff; + +/* Color overrides */ +$primary: $viridian-green; +$danger: $madder-lake; +$info: $queen-blue; +$link: $queen-blue; +$black: $rich-black-fogra-29; +$scheme-main: $cultured; +$scheme-main-bis: $gainsboro; + +/* Resizing */ $modal-content-width: 50em; + @import "../node_modules/bulma/bulma.sass"; #app { 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> |