Skip to content

Commit aa7ad58

Browse files
juicycleffjuicycleff
committed
Vue routes awesome
1 parent 9d194cb commit aa7ad58

11 files changed

+565
-92
lines changed

‎basic/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"name": "vue-apollo-instagram-example",
3+
"version": "0.0.1",
34
"description": ":camera: Instagram clone built with Vue 2 & Apollo Client",
45
"private": true,
56
"scripts": {
@@ -9,7 +10,9 @@
910
"dependencies": {
1011
"apollo-client": "1.9.3",
1112
"vue": "2.5.13",
12-
"vue-apollo": "2.1.0-rc.8"
13+
"vue-apollo": "2.1.0-rc.8",
14+
"vue-router": "^3.0.1",
15+
"vue-template-compiler": "2.5.13"
1316
},
1417
"devDependencies": {
1518
"babel-core": "6.26.0",
@@ -18,7 +21,7 @@
1821
"cross-env": "1.0.8",
1922
"css-loader": "0.28.9",
2023
"file-loader": "0.11.2",
21-
"vue-loader": "9.9.5",
24+
"vue-loader": "14.1.0",
2225
"webpack": "2.7.0",
2326
"webpack-dev-server": "2.11.1"
2427
}

‎basic/src/App.vue

+5-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
<template>
2-
<div class="app">
3-
<create/>
4-
<feed/>
5-
2+
<div id="app">
3+
<router-view/>
64
</div>
75
</template>
86

97
<script>
10-
import ListPage from './components/ListPage.vue'
11-
import CreatePost from './components/CreatePost.vue'
12-
13-
export default {
14-
name: 'app',
15-
components: {
16-
'feed': ListPage,
17-
'create': CreatePost,
18-
},
19-
}
8+
export default {
9+
name: 'app'
10+
}
2011
</script>
2112

2213
<style>

‎basic/src/components/CreatePost.vue renamed to ‎basic/src/components/CreatePage.vue

File renamed without changes.

‎basic/src/components/DetailPage.vue

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<template>
2+
<div class='detail'>
3+
<div class="modal-mask" v-if="showModal" @close="showModal = false">
4+
<div class="modal-wrapper">
5+
<div class="modal-container">
6+
7+
<div class="modal-header">
8+
<slot name="header">
9+
Add New Photo
10+
</slot>
11+
</div>
12+
13+
<div class="modal-body">
14+
<slot name="body">
15+
<input v-model="description" placeholder="Description">
16+
<input v-model="imageUrl" placeholder="Image url">
17+
<button @click="create">Create Post</button>
18+
</slot>
19+
</div>
20+
21+
<div class="modal-footer">
22+
<slot name="footer">
23+
24+
<button @click="showModal = false">
25+
Close Modal
26+
</button>
27+
</slot>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
<div class='createPost' @click="showModal = true">
33+
34+
<img src="http://www.startuppassion.eu/wp-content/uploads/2017/03/plus-sign.png" class="plusImage" alt=""><br>
35+
<button class='newPost' >NEW POST</button>
36+
</div>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import gql from 'graphql-tag'
42+
const CREATE_POST = gql `
43+
mutation createPost($description: String!, $imageUrl: String!) {
44+
createPost(description: $description, imageUrl: $imageUrl) {
45+
id
46+
imageUrl
47+
description
48+
}
49+
}
50+
`
51+
export default {
52+
data: () => ({
53+
description: '',
54+
imageUrl: '',
55+
showModal: false,
56+
}),
57+
58+
// Attribute
59+
methods: {
60+
create() {
61+
const description = this.description
62+
const imageUrl = this.imageUrl
63+
64+
this.description = ''
65+
this.imageUrl = ''
66+
67+
// Mutation
68+
this.$apollo.mutate({
69+
mutation: CREATE_POST,
70+
variables: {
71+
description,
72+
imageUrl,
73+
},
74+
updateQueries: {
75+
allPosts: (prev, {
76+
mutationResult
77+
}) => {
78+
return {
79+
// append at head of list because we sort the posts reverse chronological
80+
allPosts: [mutationResult.data.createPost, ...prev.allPosts],
81+
}
82+
},
83+
},
84+
}).then((data) => {
85+
// Result
86+
console.log(data);
87+
this.showModal=false;
88+
}).catch((error) => {
89+
// Error
90+
console.error(error)
91+
})
92+
},
93+
},
94+
}
95+
</script>
96+
97+
<style>
98+
.createPost {
99+
/* Add shadows to create the "card" effect */
100+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
101+
transition: 0.3s;
102+
width: 300px;
103+
height: 300px;
104+
margin-top: 35px;
105+
float: left;
106+
}
107+
108+
.createPost:hover {
109+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
110+
}
111+
112+
.newPost {
113+
border: none;
114+
color: gray;
115+
background-color: white;
116+
}
117+
118+
.plusImage {
119+
opacity: 0.4;
120+
margin-top: 25%;
121+
width: 25%;
122+
height: 25%;
123+
}
124+
125+
.modal-mask {
126+
position: fixed;
127+
z-index: 9998;
128+
top: 0;
129+
left: 0;
130+
width: 100%;
131+
height: 100%;
132+
background-color: rgba(0, 0, 0, .5);
133+
display: table;
134+
transition: opacity .3s ease;
135+
}
136+
137+
.modal-wrapper {
138+
display: table-cell;
139+
vertical-align: middle;
140+
}
141+
142+
.modal-container {
143+
width: 400px;
144+
height: 200px;
145+
margin: 0px auto;
146+
padding: 20px 30px;
147+
background-color: #fff;
148+
border-radius: 2px;
149+
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
150+
transition: all .3s ease;
151+
font-family: Helvetica, Arial, sans-serif;
152+
}
153+
154+
.modal-header h3 {
155+
margin-top: 0;
156+
color: #42b983;
157+
}
158+
159+
.modal-body {
160+
margin: 15%;
161+
}
162+
.modal-enter {
163+
opacity: 0;
164+
}
165+
.modal-footer{
166+
float:right;
167+
}
168+
.modal-leave-active {
169+
opacity: 0;
170+
}
171+
172+
.modal-enter .modal-container,
173+
.modal-leave-active .modal-container {
174+
-webkit-transform: scale(1.1);
175+
transform: scale(1.1);
176+
}
177+
/*
178+
.create {
179+
text-align: center;
180+
display: flex;
181+
justify-content: flex-start;
182+
flex-direction: column;
183+
}*/
184+
</style>

0 commit comments

Comments
 (0)