Post adjustments

src/components/MainHeader.vue

@@ -9,14 +9,17 @@
 		<nav class="nav">
 			<ul class="nav-list">
 				<li>
-					<router-link class="nav-link" to="/" @click.native="hideMenu">Login</router-link>
+					<router-link class="nav-link" to="/Home" @click.native="hideMenu">Home</router-link>
 				</li>
 				<li>
-					<router-link class="nav-link" to="/Home" @click.native="hideMenu">Home</router-link>
+					<router-link class="nav-link" to="/camera" @click.native="hideMenu">Post a picture</router-link>
 				</li>
 				<li>
-					<router-link class="nav-link" to="/post" @click.native="hideMenu">Post a picture</router-link>
+					<router-link class="nav-link" to="/" @click.native="hideMenu">Login</router-link>
 				</li>
+				<li>
+					<router-link class="nav-link" to="/register" @click.native="hideMenu">Cadastro</router-link>
+				</li>	
 			</ul>
 			<div class="ofuscator" @click="hideMenu"></div>
 		</nav>

src/components/PhotoUpload.vue

@@ -8,6 +8,7 @@
 				id="photo-upload-button"
 				accept="image/*"
 				class="input-file"
+				capture="camera"
 			/>
 			<label for="photo-upload-button">{{ labelText }}</label>
 		</div>

src/main.js

@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import Vuefire from 'vuefire';
 import VueResource from 'vue-resource';
-import VueAnalytics from 'vue-analytics';
 import { database } from '@/services/firebase';
 import App from './App';
 import router from './router';
@@ -12,10 +11,6 @@ Vue.config.productionTip = false;
 
 Vue.use(Vuefire);
 Vue.use(VueResource);
-Vue.use(VueAnalytics, {
-	id: 'UA-101944993-1',
-	router,
-});
 
 Vue.config.productionTip = false;
 

src/router/index.js

@@ -3,7 +3,6 @@ import Router from 'vue-router';
 import WelcomeView from '@/views/WelcomeView';
 import HomeView from '@/views/HomeView';
 import DetailView from '@/views/DetailView';
-import PostView from '@/views/PostView';
 import RegisterView from '@/views/RegisterView';
 import ProfileView from '@/views/ProfileView';
 import FeedbackView from '@/views/FeedbackView';
@@ -23,11 +22,6 @@ export default new Router({
 			name: 'detail',
 			component: DetailView,
 		},
-		{
-			path: '/post',
-			name: 'post',
-			component: PostView,
-		},
 		{
 			path: '/camera',
 			name: 'camera',

src/views/CameraView.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="camera-modal">
     <video ref="video" class="camera-stream"/>
-	<input id="username" v-model="title" type="text" placeholder="Escreva uma legenda">
+		<img src="/" class="img">
+		<canvas></canvas>
     <div class="camera-modal-container">
-		<main-button text-inner="Post a photo" @click.prevent.native="capture">
-		</main-button>
+			<input id="username" v-model="title" type="text" placeholder="Escreva uma legenda">
+			<main-button text-inner="Take a Picture" @click.prevent.native="capture">
+			</main-button>
+			<main-button text-inner="Post a photo" @click.prevent.native="post">
+			</main-button>
     </div>
   </div>
 </template>
 
 <script>
+	/* eslint-disable */
+
 	import { storage } from '@/services/firebase';
 	import postCat from '@/mixins/postCat';
 	import MainButton from '../components/MainButton';
@@ -38,43 +44,78 @@
 			'main-button': MainButton,
 		},
 		methods: {
+
+		
 			capture() {
 				const pathPicture = 'images/picture';
 				const mediaStreamTrack = this.mediaStream.getVideoTracks()[0];
 				const imageCapture = new window.ImageCapture(mediaStreamTrack);
-				return imageCapture.takePhoto().then((blob) => {
-					storage.ref().child(pathPicture + new Date().getTime()).put(blob)
-					.then((res) => {
-						this.postCat(res.metadata.downloadURLs[0], this.title);
-					});
-				});
+
+				/*const canvas = document.querySelector('canvas');
+				
+				imageCapture.grabFrame()
+					.then(imageBitmap => {
+						canvas.width = imageBitmap.width;
+						canvas.height = imageBitmap.height;
+						canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
+					})
+					.catch(error => console.error('grabFrame() error:', error));*/
+
+				const img = document.querySelector('.img');
+				return imageCapture.takePhoto()
+					.then(blob => {
+						img.src = URL.createObjectURL(blob);
+						img.onload = () => { URL.revokeObjectURL(this.src); }
+						storage.ref().child(pathPicture + new Date().getTime()).put(blob)
+						.then((res) => {
+							img.src = res.metadata.downloadURLs[0];
+							console.log( 'URRRLLLLLL', res.metadata.downloadURLs[0])
+						});
+					})
+
+				/*return imageCapture.takePhoto().then((blob) => {
+					
+					
+				});*/
 			},
+
+			post() {
+				const img = document.querySelector('.img');
+				this.postCat(img.src, this.title);
+			}
+
+			/* eslint-enable */
 		},
 	};
 </script>
 
-<style scoped>
-  .camera-modal {
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    position: absolute;
-    background-color: white;
-    z-index: 10;
-  }
-  .camera-stream {
-    width: 100%;
-    max-height: 100%;
-  }
-  .camera-modal-container {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    align-items: center;
-    margin-bottom: 24px;
-  }
-  .take-picture-button {
-    display: flex;
-  }
+<style lang="stylus" scoped>
+
+.camera-modal 
+	height 300px
+	width 100%
+	position relative
+	box-sizing border-box
+
+	&-container
+		padding 20px 50px
+
+
+.img,
+canvas 
+	max-height 300px
+	max-width 100%
+	position absolute
+	top 0
+	left 50%
+	transform translateX(-50%)
+
+input 
+	border 0
+	width 250px
+
+.camera-stream 
+	width 100%
+	max-height 300px
+  
 </style>

src/views/HomeView.vue

@@ -26,13 +26,6 @@
 				<post-reactions />
 			</div>
 		</div>
-
-		<router-link class="add-picture-button" to="/post">
-			<span>+</span>
-		</router-link>
-		<router-link class="take-picture-button" to="/camera">
-			<span>[o]</span>
-		</router-link>
 	</div>
 </template>
 
@@ -90,7 +83,7 @@ export default {
 	@import '../assets/styles/_colors'
 
 	.home
-		background #eee
+		background #f4f4f4
 
 	.add-picture-button
 		position fixed