brian meeting for 5/7

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

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/final/package.json b/final/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "web-three-twitter-boilerplate",
+  "name": "Slice of Life",
   "version": "0.1.0",
   "private": true,
   "scripts": {

diff --git a/final/public/index.html b/final/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>web-three-twitter-boilerplate</title>
+    <title>Slice Of Life</title>
   </head>
   <body>
     <noscript>

diff --git a/final/src/App.vue b/final/src/App.vue
@@ -13,11 +13,13 @@
 <template>
   <div id="app">
     <div id="nav">
-      <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> |
-      <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>
+        <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> |
+        <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>
       <div id="navSidebar">
         <img id ="logo" src="./assets/slice-o-life-logo.png">
         <div id="profPreview">
@@ -61,11 +63,14 @@ export default {
   color: #2c3e50;
   display: flex;
   justify-content: flex-start;
+  height: 90vh;
 }
 #nav {
   padding: 23px;
   width: 30%;
   min-width: 30%;  
+  display: flex;
+  flex-direction: column;
   a {
     font-weight: bold;
     color: #2c3e50;
@@ -82,6 +87,7 @@ export default {
 
 #profPreview {
   display: flex;
+  justify-content: center;
   width: 100%;
   img {
     width: 20%;
@@ -106,14 +112,31 @@ export default {
   width: 100%;
 }
 
+
+/* ---------- Home View ---------- */
+
+.home {
+  width: 60%;
+  display: flex;
+}
+
 #postList {
   text-align: left;
 }
 
+.postDiv {
+  width: 100%;
+}
+
 .postPFP {
   height: 100px;
   width: 100px;
   object-fit: cover;
 }
 
+#updateButton {
+  height: 100px;
+  align-items: flex-end;
+}
+
 </style>
diff --git a/final/src/views/Home.vue b/final/src/views/Home.vue
@@ -2,15 +2,15 @@
   <div class="home">
 
     <div id="postList">
-      <div v-for="(post, name, index) in posts" :key=index>
+      <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-else class="postPFP" src="../assets/ph-pfp.png">
+        <img v-if="!post.hasOwnProperty('img')" class="postPFP" src="../assets/ph-pfp.png">
         {{ post.username }}
         <br>
         {{ post.message }}</div>
     </div>
 
-    <button @click="getPosts()">update</button>
+    <button id="updateButton" @click="getPosts()">update</button>
 
   </div>