Edit components nayarahilton#1

lucasjs · Nov 8, 2017 · e20e7c2 · e20e7c2
1 parent 13b1667
commit e20e7c2
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 122 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,6 @@
 <template>
 	<div id="app">
-		<header class="header">
-			<button @click="showMenu" class="nav-button">
-				<span class="nav-icon">☰</span>
-			</button>
-			<span class="logo">Profil</span>
-		</header>
-		<nav class="nav">
-			<ul class="nav-list">
-				<li>
-					<router-link class="nav-link" to="/" @click.native="hideMenu">Login</router-link>
-				</li>
-				<li>
-					<router-link class="nav-link" to="/Home" @click.native="hideMenu">Home</router-link>
-				</li>
-				<li>
-					<router-link class="nav-link" to="/post" @click.native="hideMenu">Post a picture</router-link>
-				</li>
-			</ul>
-			<div class="ofuscator" @click="hideMenu"></div>
-		</nav>
-		<main>
-			<router-view></router-view>
-		</main>
+		<router-view />
 	</div>
 </template>
 
@@ -42,8 +20,7 @@ export default {
 
 <style lang="stylus">
 	@import url('https://fonts.googleapis.com/css?family=Cairo:200,300,400,600,700,900');
-	@import 'assets/styles/_colors'
-	$header-height = 56px
+	@import './assets/styles/_colors'
 
 	body
 		margin 0
@@ -56,80 +33,11 @@ export default {
 		-webkit-font-smoothing antialiased
 		-moz-osx-font-smoothing grayscale
 
-	.nav-button
-		color $blue
-		border 1px solid #ddd
-		font-size 20px
-		background-color #f9f9f9
-		height 56px
-		width 56px
-		position absolute
-
-	.nav
-		background #ffffff
-		padding 20px
-		box-sizing border-box
-		position fixed
-		z-index 1
-		width 230px
-		height 100vh
-		top 0
-		transform translateX(-230px)
-		transition transform .4s ease-in-out
-
-	.ofuscator
-		background rgba(0, 0, 0, 0.8)
-		position fixed
-		z-index -1
-		left 230px
-		bottom 0
-		top 0
-		height 100vh
-		width 100vw
-		right 0
-		opacity 0
-		visibility hidden
-		transition opacity .2s ease-in-out, visibility .2s ease-in-out
-
-	&.-show
-		transform none
-
-		.ofuscator
-			opacity 1
-			visibility visible
-
-	.nav-list
-		list-style none
-		margin 0
-		padding 0
-
 	a
 		text-decoration none
 		cursor pointer
 
 	svg
 		width 20px
 		height 20px
-
-	.header
-		margin 0
-		box-sizing border-box
-		color #ffffff
-		background-color #ffffff
-		border-bottom 1px solid rgba(0, 0, 0, .1)
-		display flex
-		align-items center
-		height $header-height
-
-	.logo
-		font-size 20px
-		letter-spacing 0.6em
-		text-transform uppercase
-		font-weight 700
-		box-sizing border-box
-		padding 3px
-		padding-left calc(0.6em + 3px)
-		border-radius 14px 14px 14px 0
-		background-color $blue
-		margin 0 auto
 </style>
diff --git a/src/components/MainHeader.vue b/src/components/MainHeader.vue
@@ -0,0 +1,112 @@
+<template>
+    <div>
+  		<header class="header">
+			<button @click="showMenu" class="nav-button">
+				<span class="nav-icon">☰</span>
+			</button>
+			<span class="logo">Profil</span>
+		</header>
+		<nav class="nav">
+			<ul class="nav-list">
+				<li>
+					<router-link class="nav-link" to="/" @click.native="hideMenu">Login</router-link>
+				</li>
+				<li>
+					<router-link class="nav-link" to="/Home" @click.native="hideMenu">Home</router-link>
+				</li>
+				<li>
+					<router-link class="nav-link" to="/post" @click.native="hideMenu">Post a picture</router-link>
+				</li>
+			</ul>
+			<div class="ofuscator" @click="hideMenu"></div>
+		</nav>
+    </div>
+</template>
+
+<script>
+export default {
+	methods: {
+		showMenu: function showMenu() {
+			document.querySelector('.nav').classList.add('-show');
+		},
+		hideMenu: function hideMenu() {
+			document.querySelector('.nav').classList.remove('-show');
+		},
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+	@import '../assets/styles/_colors'
+	$header-height = 56px
+
+    .nav-button
+		color $blue
+		border 1px solid #ddd
+		font-size 20px
+		background-color #f9f9f9
+		height 56px
+		width 56px
+		position absolute
+
+	.nav
+		background #ffffff
+		padding 20px
+		box-sizing border-box
+		position fixed
+		z-index 1
+		width 230px
+		height 100vh
+		top 0
+		transform translateX(-230px)
+		transition transform .4s ease-in-out
+
+	.ofuscator
+		background rgba(0, 0, 0, 0.8)
+		position fixed
+		z-index -1
+		left 230px
+		bottom 0
+		top 0
+		height 100vh
+		width 100vw
+		right 0
+		opacity 0
+		visibility hidden
+		transition opacity .2s ease-in-out, visibility .2s ease-in-out
+
+	&.-show
+		transform none
+
+		.ofuscator
+			opacity 1
+			visibility visible
+
+	.nav-list
+		list-style none
+		margin 0
+		padding 0
+
+	.header
+		margin 0
+		box-sizing border-box
+		color #ffffff
+		background-color #ffffff
+		border-bottom 1px solid rgba(0, 0, 0, .1)
+		display flex
+		align-items center
+		height $header-height
+
+	.logo
+		font-size 20px
+		letter-spacing 0.6em
+		text-transform uppercase
+		font-weight 700
+		box-sizing border-box
+		padding 3px
+		padding-left calc(0.6em + 3px)
+		border-radius 14px 14px 14px 0
+		background-color $blue
+		margin 0 auto
+</style>
+
diff --git a/src/components/SocialButton.vue b/src/components/SocialButton.vue
@@ -66,6 +66,8 @@ export default {
 		top 50%
 		left 50%
 		transform translate(-50%, -50%)
+		width 20px
+		height 20px		
 
 	span
 		padding 0 15px

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,36 +1,43 @@
 <template>
-	<div class="home">
-	<div v-for="picture in this.getCats()" class="card">
-
-		 <div class="card-picture" @click="displayDetails(picture['.key'])">
-			<img :src="picture.url" />
-		</div>
-		<div class="card-comment">
-			<span>{{ picture.comment }}</span>
-		</div>
-		<div class="card-info">
-			<profile-resume
-				:image="picture.url"
-				:nickname="picture.autor"
-				username="@nayarahilton"
-				profession="#Profissão"
-				@click.native="goToProfile(picture['.key'])"
+	<div class="home">	
+		<main-header />	
+		<div
+			v-for="picture in this.getCats()"
+			class="card"
+		>
+			<div
+				class="card-picture"
+				@click="displayDetails(picture['.key'])"
 			>
-			</profile-resume>
-			<post-reactions></post-reactions>
+				<img :src="picture.url" />
+			</div>
+			<div class="card-comment">
+				<span>{{ picture.comment }}</span>
+			</div>
+			<div class="card-info">
+				<profile-resume
+					:image="picture.url"
+					:nickname="picture.autor"
+					username="@nayarahilton"
+					profession="#Profissão"
+					@click.native="goToProfile(picture['.key'])"
+				>
+				</profile-resume>
+				<post-reactions />
+			</div>
 		</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>
+		<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>
 
 <script>
+import MainHeader from '../components/MainHeader';
 import ProfileResume from '../components/ProfileResume';
 import PostReactions from '../components/PostReactions';
 
@@ -44,6 +51,7 @@ export default {
 		this.saveCatsToCache();
 	},
 	components: {
+		'main-header': MainHeader,
 		'profile-resume': ProfileResume,
 		'post-reactions': PostReactions,
 	},

diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
@@ -59,8 +59,10 @@ export default {
 };
 </script>
 
-<style scoped lang="stylus">
+<style lang="stylus" scoped>
+	@import '../assets/styles/_mixins'
 	@import '../assets/styles/_colors'
+	
 
 	$header-height = 56px
 	$border-radius = 10px
@@ -69,16 +71,16 @@ export default {
 		color #fff
 
 	.welcome
+		linear_gradient(top, lightness($pink, 60%), lightness($blue, 70%))
 		padding 40px 20px
 		box-sizing border-box
 		display flex
 		flex-direction column
 		justify-content space-between
 		align-items center
 		text-align center
-		background-color rgba(0, 74, 141, 0.5)
 		color #ffffff
-		min-height "calc(100vh - %s)" % $header-height
+		height 100vh
 
 		.link
 			color #ffffff