feat: instagram

instagram/App.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="app" :class="{ 'camera-mode': isCameraOpen }">
+    <router-view />
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState(['isCameraOpen'])
+  }
+}
+</script>
+
+<style>
+@import url('https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css');
+
+* {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: inherit;
+}
+ul,
+ol {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4 {
+  font: inherit;
+}
+input,
+select,
+button {
+  font: inherit;
+}
+html,
+body {
+  height: 100%;
+  -webkit-user-select: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+#app {
+}
+#app.camera-mode {
+  height: 100%;
+  overflow: hidden;
+}
+</style>

instagram/README.md

@@ -0,0 +1,17 @@
+# instagram
+
+### Compiles and hot-reloads for development
+
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+
+```
+npm run build
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).

instagram/components/AppBar.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="app-bar">
+    <span class="app-bar_l" @click="$emit('left')">
+      <i :class="['fa', `fa-${left}`]"></i>
+    </span>
+    <h1>{{ title }}</h1>
+    <span class="app-bar_r" @click="$emit('right')">
+      <i :class="['fa', `fa-${right}`]"></i>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    left: {
+      type: String,
+      default: 'chevron-left'
+    },
+    right: {
+      type: String,
+      default: 'ellipsis-v'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.app-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 20px;
+  height: 68px;
+  background-color: white;
+  font-size: 15px;
+  z-index: 10;
+
+  h1 {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+    height: 26px;
+    font-size: 0;
+    background-image: url(../assets/instagram-logo.jpg);
+    background-size: 40%;
+    background-position: bottom;
+    background-repeat: no-repeat;
+  }
+  span {
+    padding: 0 20px;
+  }
+}
+</style>

instagram/components/BottomTabs.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="bottom-tabs">
+    <span><i class="fa fa-home"/></span>
+    <span><i class="fa fa-search"/></span>
+    <span><i class="fa fa-instagram"/></span>
+    <span><i class="fa fa-heart-o"/></span>
+    <span><i class="fa fa-user-o"/></span>
+  </div>
+</template>
+
+<style lang="scss">
+.bottom-tabs {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  border-top: 1px solid #eee;
+  height: 64px;
+  background-color: white;
+  font-size: 20px;
+}
+.bottom-tabs span {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+</style>