diff options
| -rw-r--r-- | iridescence/src/components/InventoryCard.vue | 44 | ||||
| -rw-r--r-- | iridescence/src/components/InventoryList.vue | 37 | ||||
| -rw-r--r-- | iridescence/src/components/Navbar.vue | 21 | ||||
| -rw-r--r-- | iridescence/src/router/index.js | 3 | ||||
| -rw-r--r-- | iridescence/src/store/index.js | 80 | ||||
| -rw-r--r-- | iridescence/src/views/Home.vue | 10 |
6 files changed, 183 insertions, 12 deletions
diff --git a/iridescence/src/components/InventoryCard.vue b/iridescence/src/components/InventoryCard.vue new file mode 100644 index 0000000..75e683a --- /dev/null +++ b/iridescence/src/components/InventoryCard.vue @@ -0,0 +1,44 @@ +<template> + <div id="inventoryCard"> + <div class="card"> + <div class="card-image"> + <figure class="image is-4by3"> + <img + src="https://bulma.io/images/placeholders/1280x960.png" + :alt="name" + /> + </figure> + </div> + <div class="card-content"> + <div class="content"> + <p class="title is-4">{{ name }}</p> + <p class="subtitle is-4"> + {{ dollars(cents) }} + </p> + <p class="subtitle is-6">{{ quantity }} in stock.</p> + </div> + + <div class="content"> + {{ description }} + </div> + </div> + </div> + </div> +</template> + +<script> +export default { + name: "InventoryCard", + props: { + id: Number, + name: String, + quantity: Number, + cents: Number, + imgPath: String, + description: String + }, + methods: { + dollars: cents => "$ " + (cents / 100).toFixed(2) + } +}; +</script> diff --git a/iridescence/src/components/InventoryList.vue b/iridescence/src/components/InventoryList.vue new file mode 100644 index 0000000..dbda9a4 --- /dev/null +++ b/iridescence/src/components/InventoryList.vue @@ -0,0 +1,37 @@ +<template> + <div id="inventoryList"> + <section class="section"> + <div class="container"> + <div class="columns is-multiline is-variable is-7-desktop"> + <div + class="column is-one-quarter" + v-for="item in inventory" + :key="item.id" + > + <InventoryCard v-bind="item"></InventoryCard> + </div> + </div> + </div> + </section> + </div> +</template> + +<script> +import InventoryCard from "@/components/InventoryCard.vue"; + +export default { + name: "InventoryList", + components: { + InventoryCard + }, + data() { + return {}; + }, + computed: { + inventory() { + return this.$store.getters.inventory; + } + }, + methods: {} +}; +</script> diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue index bf287b2..b83834a 100644 --- a/iridescence/src/components/Navbar.vue +++ b/iridescence/src/components/Navbar.vue @@ -1,9 +1,14 @@ <template> <div id="navbar"> - <nav class="navbar"> + <nav class="navbar is-primary"> <div class="navbar-brand"> <div class="navbar-item"> <img src="@/assets/logo.png" /> + <div class="navbar-item"> + <span> + The Glassy Ladies + </span> + </div> </div> <a class="navbar-burger burger" v-on:click="toggleNavMenu"> <span></span> @@ -13,12 +18,12 @@ </div> <div :class="navMenu"> <div class="navbar-start"> - <a class="navbar-item"> - <router-link to="/">Home</router-link> - </a> - <a class="navbar-item"> - <router-link to="/about">About</router-link> - </a> + <router-link to="/" class="navbar-item"> + Home + </router-link> + <router-link to="/about" class="navbar-item"> + About + </router-link> </div> <div class="navbar-end"> <div class="navbar-item"> @@ -26,7 +31,7 @@ <button class="button"> Cart (5) </button> - <button class="button is-primary"> + <button class="button is-info"> Checkout </button> </div> diff --git a/iridescence/src/router/index.js b/iridescence/src/router/index.js index 9a1e0c2..28b1079 100644 --- a/iridescence/src/router/index.js +++ b/iridescence/src/router/index.js @@ -30,7 +30,8 @@ const routes = [ const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, - routes + routes: routes, + linkExactActiveClass: "is-active" }); export default router; diff --git a/iridescence/src/store/index.js b/iridescence/src/store/index.js index fb6015f..4a851ef 100644 --- a/iridescence/src/store/index.js +++ b/iridescence/src/store/index.js @@ -4,7 +4,85 @@ import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ - state: {}, + state: { + inventory: [ + { + id: 1, + name: "Beach Box", + quantity: 5, + cents: 1100, + imgPath: "/beach_box.jpg", + description: "This is a beach box." + }, + { + id: 2, + name: "Wind Chime", + quantity: 2, + cents: 4500, + imgPath: "/wind-chime.jpg", + description: "Makes noise when the wind blows." + }, + { + id: 3, + name: "Beach Box", + quantity: 5, + cents: 1100, + imgPath: "/beach_box.jpg", + description: "This is a beach box." + }, + { + id: 4, + name: "Wind Chime", + quantity: 2, + cents: 4500, + imgPath: "/wind-chime.jpg", + description: "Makes noise when the wind blows." + }, + { + id: 5, + name: "Beach Box", + quantity: 5, + cents: 1100, + imgPath: "/beach_box.jpg", + description: "This is a beach box." + }, + { + id: 6, + name: "Wind Chime", + quantity: 2, + cents: 4500, + imgPath: "/wind-chime.jpg", + description: "Makes noise when the wind blows." + }, + { + id: 7, + name: "Beach Box", + quantity: 5, + cents: 1100, + imgPath: "/beach_box.jpg", + description: "This is a beach box." + }, + { + id: 8, + name: "Wind Chime", + quantity: 2, + cents: 4500, + imgPath: "/wind-chime.jpg", + description: "Makes noise when the wind blows." + }, + { + id: 9, + name: "Wind Chime", + quantity: 2, + cents: 4500, + imgPath: "/wind-chime.jpg", + description: "Makes noise when the wind blows." + } + ] + }, + getters: { + inventory: state => state.inventory + }, mutations: {}, actions: {}, modules: {} diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue index e3b0eb4..5aef877 100644 --- a/iridescence/src/views/Home.vue +++ b/iridescence/src/views/Home.vue @@ -3,15 +3,21 @@ allow users to sort, filter, and search for items and add them to their cart. --> - <div> + <div id="home"> <figure class="image is-128x128"> <img alt="The Glassy Ladies" src="../assets/logo.png" /> </figure> + <InventoryList></InventoryList> </div> </template> <script> +import InventoryList from "@/components/InventoryList.vue"; + export default { - name: "Home" + name: "Home", + components: { + InventoryList + } }; </script> |