added lesson 44 code

Shaun Pelling · Shaun Pelling · commit 29bf174ef206 · 2017-04-04T17:18:26.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -8,7 +8,6 @@
 <script>
 // Imports
 import showBlogs from './components/showBlogs.vue';
-import listBlogs from './components/listBlogs.vue';
 import header from './components/header.vue';
 
 export default {
diff --git a/src/components/addBlog.vue b/src/components/addBlog.vue
@@ -63,17 +63,21 @@ export default {
 }
 #add-blog{
     margin: 20px auto;
-    max-width: 500px;
+    max-width: 600px;
+    padding: 20px;
 }
 label{
     display: block;
     margin: 20px 0 10px;
 }
-input[type="text"], textarea{
+input[type="text"], textarea, select{
     display: block;
     width: 100%;
     padding: 8px;
 }
+textarea{
+    height:200px;
+}
 #preview{
     padding: 10px 20px;
     border: 1px dotted #ccc;
@@ -90,4 +94,18 @@ h3{
     display: inline-block;
     margin-top: 0;
 }
+hr{
+    display: none;
+}
+button{
+    display: block;
+    margin: 20px 0;
+    background: crimson;
+    color: #fff;
+    border: 0;
+    padding: 14px;
+    border-radius: 4px;
+    font-size: 18px;
+    cursor: pointer;
+}
 </style>
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -24,16 +24,16 @@ li{
 a{
     color: #fff;
     text-decoration: none;
-    padding: 6px 8px;
+    padding: 12px;
     border-radius: 5px;
 }
 nav{
-    background: #444;
-    padding: 20px 0;
+    background: crimson;
+    padding: 30px 0;
     margin-bottom: 40px;
 }
 .router-link-active{
-    background: #eee;
+    background: rgba(255,255,255,0.8);
     color: #444;
 }
 </style>
diff --git a/src/components/listBlogs.vue b/src/components/listBlogs.vue
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -4,7 +4,7 @@
         <input type="text" v-model="search" placeholder="search blogs" />
         <div v-for="blog in filteredBlogs" class="single-blog">
             <router-link v-bind:to="'/blog/' + blog.id"><h2>{{ blog.title }}</h2></router-link>
-            <article>{{ blog.body }}</article>
+            <article>{{ blog.content }}</article>
         </div>
     </div>
 </template>
@@ -21,8 +21,16 @@ export default {
         }
     },
     created() {
-        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
-            this.blogs = data.body.slice(0,10);
+        this.$http.get('https://nn-vue-playlist.firebaseio.com/posts.json').then(function(data){
+            return data.json()
+        }).then(function(data){
+            var blogsArray = [];
+            for (let key in data){
+                data[key].id = key;
+                blogsArray.push(data[key]);
+            }
+            this.blogs = blogsArray;
+            //console.log(this.blogs);
         });
     },
     mixins: [searchMixin]
@@ -39,6 +47,7 @@ export default {
     margin: 20px 0;
     box-sizing: border-box;
     background: #eee;
+    border: 1px dotted #aaa;
 }
 
 #show-blogs a{
diff --git a/src/components/singleBlog.vue b/src/components/singleBlog.vue
@@ -1,7 +1,12 @@
 <template>
     <div id="single-blog">
         <h1>{{ blog.title }}</h1>
-        <article>{{ blog.body }}</article>
+        <article>{{ blog.content }}</article>
+        <p>Author: {{ blog.author }}</p>
+        <p>Categories:</p>
+        <ul>
+            <li v-for="category in blog.categories">{{ category }}</li>
+        </ul>
         </div>
     </div>
 </template>
@@ -18,9 +23,10 @@ export default {
         }
     },
     created() {
-        this.$http.get('http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
-            // console.log(data);
-            this.blog = data.body;
+        this.$http.get('https://nn-vue-playlist.firebaseio.com/posts/' + this.id + '.json').then(function(data){
+            return data.json();
+        }).then(function(data){
+            this.blog = data;
         });
     }
 }
@@ -30,5 +36,8 @@ export default {
 #single-blog{
     max-width: 960px;
     margin: 0 auto;
+    padding: 20px;
+    background: #eee;
+    border: 1px dotted #aaa;
 }
 </style>
