added proper logo, implemented initial/placeholder profile pic in posts

clr14003 · May 7, 2020 · 1b018c1 · 1b018c1
1 parent c5ba9da
commit 1b018c1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/final/src/App.vue b/final/src/App.vue
@@ -1,3 +1,15 @@
+<!-- 
+  COLORS FOR STYLING
+  Logo Blues
+    -Lightest: #1e7daf
+    -Middle: #1d6ba8
+    -Darkest: #20659b
+
+  Logo Green: #7eca41
+
+
+ -->
+
 <template>
   <div id="app">
     <div id="nav">
@@ -7,11 +19,11 @@
       <router-link to="/login" v-if="!authenticated">Log in</router-link>
       <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')"><img class="navImg" src="./assets/logout-placeholder.png"></a>
       <div id="navSidebar">
-        <img id ="logo" src="./assets/logo-placeholder.png">
+        <img id ="logo" src="./assets/slice-o-life-logo.png">
         <div id="profPreview">
-          <img id="profPreviewPic" src="./assets/prof-pic-placeholder.png">
+          <img id="profPreviewPic" v-bind:src="$store.state.user.photoURL">
           <div>
-            <span>Profile Name</span>
+            <span>{{ $store.state.user.displayName }}</span>
           </div>
         </div>
 
@@ -52,7 +64,8 @@ export default {
 }
 #nav {
   padding: 23px;
-  width: 30%;  
+  width: 30%;
+  min-width: 30%;  
   a {
     font-weight: bold;
     color: #2c3e50;
@@ -71,8 +84,9 @@ export default {
   display: flex;
   width: 100%;
   img {
-    width: 30%;
+    width: 20%;
     max-width:200px;
+    height: auto;
   }
   div {
     padding-left: 5%;
@@ -92,5 +106,14 @@ export default {
   width: 100%;
 }
 
+#postList {
+  text-align: left;
+}
+
+.postPFP {
+  height: 100px;
+  width: 100px;
+  object-fit: cover;
+}
 
 </style>
diff --git a/final/src/assets/ph-pfp.png b/final/src/assets/ph-pfp.png
diff --git a/final/src/assets/slice-o-life-logo.png b/final/src/assets/slice-o-life-logo.png
diff --git a/final/src/views/Home.vue b/final/src/views/Home.vue
@@ -1,11 +1,16 @@
 <template>
   <div class="home">
 
-    <ul id="postList">
-      <li v-for="(post, name, index) in posts" :key=index>{{ post.message }}</li>
-    </ul>
+    <div id="postList">
+      <div v-for="(post, name, index) in posts" :key=index>
+        <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
+        <img v-else class="postPFP" src="../assets/ph-pfp.png">
+        {{ post.username }}
+        <br>
+        {{ post.message }}</div>
+    </div>
 
-    <!-- <PlaceholderTweets msg="still works?"/> -->
+    <button @click="getPosts()">update</button>
 
   </div>
 
@@ -24,7 +29,6 @@ export default {
     }
   },
   components: {
-    // PlaceholderTweets
   },
 
   methods: {
@@ -33,7 +37,7 @@ export default {
           querySnapshot.forEach( doc => {
               // doc.data() is never undefined for query doc snapshots
               console.log(doc.id, " => ", doc.data());
-              this.posts.unshift(doc.data())
+              this.posts.push(doc.data())
           });
       }); 
     }

diff --git a/final/src/views/Profile.vue b/final/src/views/Profile.vue
@@ -5,6 +5,7 @@
       {{ $store.state.user }}
 
     </div>
+    <img v-bind:src="$store.state.user.photoURL">
   </div>
 
 </template>
@@ -31,7 +32,7 @@ export default {
   // This runs when the page loads
   mounted() {
     // console.log(db);
-    console.log(this.$store.state.user)
+    console.log(this.$store.state.user.photoURL)
 
   }
 };