everything is done except for the stretch goal of having other users'…

… profiles as a view

final/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Slice of Life",
+  "name": "Slice-Of-Life",
   "version": "0.1.0",
   "private": true,
   "scripts": {

final/src/App.vue

@@ -13,16 +13,16 @@
 <template>
   <div id="app">
     <div id="nav">
-      <div>
-        <router-link to="/">Home</router-link> |
-        <router-link to="/about"><img class="navImg" src="./assets/prof-link-placeholder.png"></router-link> |
-        <router-link to="/profile">Profile</router-link> |
+      <div v-if="authenticated">
+        <router-link to="/"><img class="navImg" src="./assets/home-icon.png"></router-link> |
+        <router-link to="/profile"><img class="navImg" src="./assets/profile-page-icon.png"></router-link> |
         <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>
+        <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')"><img class="navImg" src="./assets/logout.png"></a>
       </div>
       <div id="navSidebar">
-        <img id ="logo" src="./assets/slice-o-life-logo.png">
-        <div id="profPreview">
+        <img id="logo" src="./assets/slice-o-life-logo.png"><br>
+        <img id="siteName" src="./assets/title.png">
+        <div v-if="authenticated" id="profPreview">
           <img id="profPreviewPic" v-bind:src="$store.state.user.photoURL">
           <div>
             <span>{{ $store.state.user.displayName }}</span>
@@ -55,6 +55,10 @@ export default {
 </script>
 
 <style lang="scss">
+body {
+  background-color: #c4d4dc;
+}
+
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -63,28 +67,36 @@ export default {
   color: #2c3e50;
   display: flex;
   justify-content: flex-start;
-  height: 90vh;
+  height: calc(97.2vh - 18px);
 }
+
 #nav {
   padding: 23px;
   width: 30%;
   min-width: 30%;  
   display: flex;
   flex-direction: column;
   a {
-    font-weight: bold;
-    color: #2c3e50;
     &.router-link-exact-active {
-      color: #42b983;
-      filter: brightness(120%);
+      filter: hue-rotate(-108deg) saturate(70%) brightness(180%)
+      drop-shadow(2px 2px 0 #3c6318);
     }
   }
   img.navImg {
     height: 30px;
+    padding-left: 9px;
+    padding-right: 9px;
   }
 
 }
 
+#siteName {
+  width: 53%;
+  margin-top: -10px;
+  margin-bottom: 25px;
+  -webkit-user-drag: none;
+}
+
 #profPreview {
   display: flex;
   justify-content: center;
@@ -93,11 +105,14 @@ export default {
     width: 20%;
     max-width:200px;
     height: auto;
+    border-radius: 10px;
   }
   div {
     padding-left: 5%;
     line-height: 200%;
-    width: 55%;
+    max-width: 55%;
+    font-weight: bolder;
+    font-size: 14pt;
   }
 
 }
@@ -108,7 +123,7 @@ export default {
 }
 
 #navSidebar {
-
+  flex-direction: column;
   width: 100%;
 }
 
@@ -118,25 +133,119 @@ export default {
 .home {
   width: 60%;
   display: flex;
+  height: 100%;
 }
 
 #postList {
   text-align: left;
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background-color: #ebf0f2;
+  border: solid #1e7daf;
+  border-radius: 3px;
+  border-width: 2px;
+  padding-bottom: 18px;
+}
+
+#toTopArrow {
+  position: absolute;
+  text-align: center;
+  padding-left: 294px;
+  padding-top: 8px;
+  width: 12%;
+  opacity: 50%;
+  visibility: hidden;
+}
+
+#toTopArrow:hover {
+  opacity: 70%;
+}
+
+#postListTop {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 10px;
+  padding-left: 3%;
+  padding-right: 3%;
+  align-items: center;
+  border-bottom-style: solid;
+  border-bottom-color: #1e7daf;
+  padding-bottom: 10px;
+}
+
+#newPost {
+  height: 20px;
+  width: 70%;
+}
+
+#sendButton {
+  height: 54px;
+  width: 80px;
+  background-color: #1e7daf;
+  color: white;
+  border: none;
+  font-size: 140%;
+  font-variant: small-caps;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+#sendButton:hover {
+  filter: brightness(75%);
+}
+
+#updateButton {
+  height: 40px;
+  align-items: flex-end;
+  cursor: pointer;
+  margin-right: 10px;
+  padding: 5px;
+  border-radius: 10px;
 }
 
 .postDiv {
   width: 100%;
+  display: flex;
+  margin-top: 20px;
+  padding-left: 15px;
 }
 
 .postPFP {
   height: 100px;
   width: 100px;
   object-fit: cover;
+  border-radius: 10px;
+  margin-right: 15px;
 }
 
-#updateButton {
-  height: 100px;
-  align-items: flex-end;
+.postUsn {
+  font-weight: bolder;
+  text-decoration: underline;
+  /*cursor: pointer;*/
+  line-height: 150%;
 }
 
+/* ---------- Profile View ---------- */
+
+.profile {
+  width: 60%;
+  height: calc(100% - 80px);
+}
+
+.profBanner {
+
+}
+
+
+
+
+
+
+/*drop-shadow(1.5px 1px 0 black)
+        drop-shadow(-0.5px 1px 0 black)
+        drop-shadow(1px -1px 0 black)
+        drop-shadow(-1px -1px 0 black);*/
 </style>

final/src/router.js

@@ -37,7 +37,8 @@ const router = new Router({
       path: '/profile',
       name: 'profile',
       component: Profile
-    }
+    },
+
   ]
 });
 

final/src/views/Home.vue

@@ -1,19 +1,27 @@
 <template>
   <div class="home">
     <!-- make the post input and refresh divs here -->
-
-    <div id="postList">
+    <!-- @scroll="checkTopArrow()" -->
+    <div id="postList" @scroll="checkTopArrow()">
+      <img id="toTopArrow" src="../assets/to-top-arrow.png" @click="goToTop()">
+      <div id="postListTop">
+        <img src="../assets/refresh.png" id="updateButton" @click="refreshPosts()">
+        <input type="text" name="newPost" id="newPost" autocomplete="off" @keyup.enter="sendPost()">
+        <button id="sendButton" @click="sendPost()">send</button>
+      </div>
       <div class="postDiv" v-for="(post, name, index) in posts" :key=index>
         <img v-if="post.hasOwnProperty('img')" class="postPFP" v-bind:src="post.img">
         <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
-        <span v-if="post.hasOwnProperty('username')">{{ post.username }}</span>
-        <span v-if="!post.hasOwnProperty('username')">[ERROR: USERNAME NOT FOUND]</span>
-        <br>
-        {{ post.message }}
+        <div>
+          <span v-if="post.hasOwnProperty('username')" class="postUsn">{{ post.username }}</span>
+          <span v-if="!post.hasOwnProperty('username')" class="postUsn">[ERROR: USERNAME NOT FOUND]</span>
+          <br>
+          {{ post.message }} 
+        </div>
       </div>
     </div>
    <!-- make a back-to-top button here -->
-    <button id="updateButton" @click="clearPosts()">update</button>
+
 
   </div>
 
@@ -36,7 +44,7 @@ export default {
 
   methods: {
     getPosts(){
-      db.collection("posts").get().then(querySnapshot => {
+      db.collection("posts").orderBy('dateStamp', 'desc').limit(200).get().then(querySnapshot => {
           querySnapshot.forEach( doc => {
               // doc.data() is never undefined for query doc snapshots
               /*console.log(doc.id, " => ", doc.data());*/
@@ -45,42 +53,91 @@ export default {
       }); 
     },
 
-    getMyPosts(){
-      db.collection("posts").get().then(querySnapshot => {
-          querySnapshot.forEach( doc => {
-              // doc.data() is never undefined for query doc snapshots
-              console.log(doc.id, " => ", doc.data());
-              this.posts.push(doc.data())
-          });
-      }); 
+    goToTop(){
+      document.getElementById('toTopArrow').style.visibility = "hidden";
+      postList.scrollTop = 0;
     },
 
+    checkTopArrow(){
+      if (postList.scrollTop >= 250) {
+        document.getElementById('toTopArrow').style.visibility = "visible";
+      } else if (postList.scrollTop <= 100) {
+        document.getElementById('toTopArrow').style.visibility = "hidden";
+      }
+    },
 
-    // this currently isn't a "clear posts" function, but proves I can grab all posts and do something to them
-    clearPosts(){
-      document.querySelectorAll('.postDiv').forEach( div => {
-        div.style.backgroundColor = "red";
-      })
+
+    refreshPosts(){
+      this.posts = [];
+      this.getPosts();
     },
 
     getPostsTest(){
-      db.collection("posts").onSnapshot((snapshot) => {
-        snapshot.docChanges().forEach( change => {
+      db.collection("posts").onSnapshot(function(snapshot) {
+        snapshot.docChanges().forEach(function(change) {
             if (change.type === "added") {
-                this.posts.push(change.doc.data());
+               /* console.log("New city: ", change.doc.data());*/
             }
         });
     });
-    }
+    },
+
+    savePostToFirebase(post) {
+      db.collection("posts").add(post);
+    },
+
+    sendPost(){
+      var postObj = {
+        dateStamp: Date.now(),
+        message: newPost.value,
+        username: this.$store.state.user.displayName,
+        uid: this.$store.state.user.uid,
+        img: this.$store.state.user.photoURL  
+      }
 
+      if(postObj.message !== "") {
+        this.savePostToFirebase(postObj);
+      }
+      this.refreshPosts();
+      newPost.value = "";
+      newPost.focus();
+    },
   },
 
   // This runs when the page loads
   mounted() {
     // console.log(db);
 
     this.getPosts();
-    this.getPostsTest();
+    // this.getPostsTest();
+    
   }
 };
 </script>
+
+
+<!-- db.collection("cities").where("state", "==", "CA")
+    .onSnapshot(function(snapshot) {
+        snapshot.docChanges().forEach(function(change) {
+            if (change.type === "added") {
+                console.log("New city: ", change.doc.data());
+            }
+            if (change.type === "modified") {
+                console.log("Modified city: ", change.doc.data());
+            }
+            if (change.type === "removed") {
+                console.log("Removed city: ", change.doc.data());
+            }
+        });
+    }); -->
+
+
+    <!-- getPostsTest(){
+      db.collection("posts").get().then((snapshot) => {
+        snapshot.docChanges().forEach( change => {
+            if (change.type === "added") {
+                this.posts.push(change.doc.data());
+            }
+        });
+    });
+    } -->