summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/App.vue35
-rw-r--r--iridescence/src/assets/logo.pngbin6849 -> 603239 bytes
-rw-r--r--iridescence/src/assets/logo_sm.pngbin0 -> 98670 bytes
-rw-r--r--iridescence/src/components/HelloWorld.vue138
-rw-r--r--iridescence/src/components/Navbar.vue63
-rw-r--r--iridescence/src/main.js (renamed from iridescence/src/main.ts)0
-rw-r--r--iridescence/src/router/index.js (renamed from iridescence/src/router/index.ts)4
-rw-r--r--iridescence/src/shims-tsx.d.ts13
-rw-r--r--iridescence/src/shims-vue.d.ts4
-rw-r--r--iridescence/src/store/index.js (renamed from iridescence/src/store/index.ts)0
-rw-r--r--iridescence/src/views/Home.vue13
11 files changed, 81 insertions, 189 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
index 0228dd3..aee2f10 100644
--- a/iridescence/src/App.vue
+++ b/iridescence/src/App.vue
@@ -1,32 +1,21 @@
<template>
<div id="app">
- <div id="nav">
- <router-link to="/">Home</router-link> |
- <router-link to="/about">About</router-link>
- </div>
+ <Navbar></Navbar>
<router-view />
</div>
</template>
-<style lang="scss">
-#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
- color: #2c3e50;
-}
-
-#nav {
- padding: 30px;
-
- a {
- font-weight: bold;
- color: #2c3e50;
+<script>
+import Navbar from "@/components/Navbar.vue";
- &.router-link-exact-active {
- color: #42b983;
- }
+export default {
+ name: "App",
+ components: {
+ Navbar
}
-}
+};
+</script>
+
+<style lang="scss">
+@import "../node_modules/bulma/bulma.sass";
</style>
diff --git a/iridescence/src/assets/logo.png b/iridescence/src/assets/logo.png
index f3d2503..892376b 100644
--- a/iridescence/src/assets/logo.png
+++ b/iridescence/src/assets/logo.png
Binary files differ
diff --git a/iridescence/src/assets/logo_sm.png b/iridescence/src/assets/logo_sm.png
new file mode 100644
index 0000000..b74ccfd
--- /dev/null
+++ b/iridescence/src/assets/logo_sm.png
Binary files differ
diff --git a/iridescence/src/components/HelloWorld.vue b/iridescence/src/components/HelloWorld.vue
deleted file mode 100644
index 86668ba..0000000
--- a/iridescence/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br />
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
- >vue-cli documentation</a
- >.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
- target="_blank"
- rel="noopener"
- >babel</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
- target="_blank"
- rel="noopener"
- >typescript</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
- target="_blank"
- rel="noopener"
- >router</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
- target="_blank"
- rel="noopener"
- >vuex</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
- target="_blank"
- rel="noopener"
- >eslint</a
- >
- </li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li>
- <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
- </li>
- <li>
- <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
- >Forum</a
- >
- </li>
- <li>
- <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
- >Community Chat</a
- >
- </li>
- <li>
- <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
- >Twitter</a
- >
- </li>
- <li>
- <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
- </li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li>
- <a href="https://router.vuejs.org" target="_blank" rel="noopener"
- >vue-router</a
- >
- </li>
- <li>
- <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
- </li>
- <li>
- <a
- href="https://github.com/vuejs/vue-devtools#vue-devtools"
- target="_blank"
- rel="noopener"
- >vue-devtools</a
- >
- </li>
- <li>
- <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
- >vue-loader</a
- >
- </li>
- <li>
- <a
- href="https://github.com/vuejs/awesome-vue"
- target="_blank"
- rel="noopener"
- >awesome-vue</a
- >
- </li>
- </ul>
- </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
- @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
new file mode 100644
index 0000000..bf287b2
--- /dev/null
+++ b/iridescence/src/components/Navbar.vue
@@ -0,0 +1,63 @@
+<template>
+ <div id="navbar">
+ <nav class="navbar">
+ <div class="navbar-brand">
+ <div class="navbar-item">
+ <img src="@/assets/logo.png" />
+ </div>
+ <a class="navbar-burger burger" v-on:click="toggleNavMenu">
+ <span></span>
+ <span></span>
+ <span></span>
+ </a>
+ </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>
+ </div>
+ <div class="navbar-end">
+ <div class="navbar-item">
+ <div class="buttons">
+ <button class="button">
+ Cart (5)
+ </button>
+ <button class="button is-primary">
+ Checkout
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </nav>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Navbar",
+ data() {
+ return {
+ isMenuActive: false
+ };
+ },
+ computed: {
+ navMenu() {
+ if (this.isMenuActive) {
+ return "navbar-menu is-active";
+ } else {
+ return "navbar-menu";
+ }
+ }
+ },
+ methods: {
+ toggleNavMenu() {
+ this.isMenuActive = !this.isMenuActive;
+ }
+ }
+};
+</script>
diff --git a/iridescence/src/main.ts b/iridescence/src/main.js
index 3a47006..3a47006 100644
--- a/iridescence/src/main.ts
+++ b/iridescence/src/main.js
diff --git a/iridescence/src/router/index.ts b/iridescence/src/router/index.js
index 8716a04..3d5155d 100644
--- a/iridescence/src/router/index.ts
+++ b/iridescence/src/router/index.js
@@ -1,10 +1,10 @@
import Vue from "vue";
-import VueRouter, { RouteConfig } from "vue-router";
+import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
-const routes: Array<RouteConfig> = [
+const routes = [
{
path: "/",
name: "Home",
diff --git a/iridescence/src/shims-tsx.d.ts b/iridescence/src/shims-tsx.d.ts
deleted file mode 100644
index 2bcdf9f..0000000
--- a/iridescence/src/shims-tsx.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import Vue, { VNode } from "vue";
-
-declare global {
- namespace JSX {
- // tslint:disable no-empty-interface
- interface Element extends VNode {}
- // tslint:disable no-empty-interface
- interface ElementClass extends Vue {}
- interface IntrinsicElements {
- [elem: string]: any;
- }
- }
-}
diff --git a/iridescence/src/shims-vue.d.ts b/iridescence/src/shims-vue.d.ts
deleted file mode 100644
index 0660bd6..0000000
--- a/iridescence/src/shims-vue.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module "*.vue" {
- import Vue from "vue";
- export default Vue;
-}
diff --git a/iridescence/src/store/index.ts b/iridescence/src/store/index.js
index fb6015f..fb6015f 100644
--- a/iridescence/src/store/index.ts
+++ b/iridescence/src/store/index.js
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
index 191049e..1197e75 100644
--- a/iridescence/src/views/Home.vue
+++ b/iridescence/src/views/Home.vue
@@ -1,18 +1,13 @@
<template>
<div class="home">
- <img alt="Vue logo" src="../assets/logo.png" />
- <HelloWorld msg="Welcome to Your Vue.js App" />
+ <figure class="image is-128x128">
+ <img alt="The Glassy Ladies" src="../assets/logo.png" />
+ </figure>
</div>
</template>
<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
export default {
- name: "Home",
- components: {
- HelloWorld
- }
+ name: "Home"
};
</script>