summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/InventoryCard.vue44
-rw-r--r--iridescence/src/components/InventoryList.vue37
-rw-r--r--iridescence/src/components/Navbar.vue21
3 files changed, 94 insertions, 8 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>