Improve friends and posts styling

app/lib/queries.js

@@ -81,6 +81,7 @@ const getPosts = async (ssbServer, profile) => {
                 content: {
                   type: "post",
                   root: { $not: true },
+                  channel: { $not: true },
                 },
               },
             },

app/public/js/index.js

@@ -52,3 +52,16 @@ if (profilePicUpload) {
   profilePicUpload.addEventListener("change", previewImage);
   previewImage();
 }
+
+const jsPublicOption = document.querySelector(".js-public-option");
+const jsVanishingOption = document.querySelector(".js-vanishing-option");
+const jsVanishingMessage = document.querySelector(".js-vanishing-message");
+if (jsVanishingOption) {
+  const onVisibilityChange = () => {
+    const vanishing = jsVanishingOption.checked;
+    jsVanishingMessage.style.display = vanishing ? "block" : "none";
+  };
+  jsPublicOption.addEventListener("change", onVisibilityChange);
+  jsVanishingOption.addEventListener("change", onVisibilityChange);
+  onVisibilityChange();
+}

app/public/style.css

@@ -2,10 +2,8 @@
   box-sizing: border-box;
 }
 body {
-  font-family: "Helvetica Neue", Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
-  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
   margin: 0;
   line-height: 1.3em;
   word-wrap: break-word;
@@ -120,6 +118,12 @@ main {
   align-content: stretch;
 }
 
+.reverse-columns {
+  display: flex;
+  align-content: stretch;
+  flex-direction: row-reverse;
+}
+
 h1 {
   font-weight: bold;
   line-height: 1.3em;
@@ -139,8 +143,8 @@ h2 {
 
 .post {
   display: flex;
-  padding: 20px 0;
+  padding: 10px 0;
-  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ddd;
 }
 
 .post-profile-pic {
@@ -179,7 +183,7 @@ a.notification-box,
 button.notification-box {
   background: none;
   text-align: center;
-  border: 1px solid #333;
+  border: 1px solid #666;
   cursor: pointer;
   color: #000;
   margin-right: 8px;
@@ -191,7 +195,7 @@ button.notification-box {
 
 a.notification-box:hover,
 button.notification-box:hover {
-  background: #e2e2e2;
+  background: #f0f0f0;
   color: #000;
 }
 
@@ -278,3 +282,29 @@ button.notification-box:hover {
   max-width: 100%;
   display: block;
 }
+
+.friend-item {
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 5px;
+  text-decoration: none;
+  color: #000;
+  background: #fff;
+}
+
+.friend-item:hover {
+  background: #f0f0f0;
+}
+
+.compose-post {
+  border-radius: 5px;
+  border: 1px solid #aaaaaa;
+  resize: none;
+  width: 100%;
+  padding: 8px;
+  height: 66px;
+  line-height: 1.3em;
+}

app/views/_friends.ejs

@@ -0,0 +1,8 @@
+<h2 style="margin-top: 30px">Friends</h2>
+
+<% friends.friends.map(friend => { %>
+  <a class="friend-item" href="<%= profileUrl(friend.id) %>">
+    <img style="width: 32px; max-height: 100px; margin-right: 5px;" src="<%= profileImageUrl(friend) %>" />
+    <div><%= friend.name %></div>
+  </a>
+<% }) %>

app/views/_post.ejs

@@ -1,13 +0,0 @@
-<div class="post">
-  <div>
-    <img src="<%= profileImageUrl(post.authorProfile) %>" class="post-profile-pic" />
-  </div>
-  <div class="post-content">
-    <div class="content-header">
-      <%= post.authorProfile.name %>
-    </div>
-    <div class="content-body">
-      <%= post.content.text.slice(0, 140) %>
-    </div>
-  </div>
-</div>

app/views/_posts.ejs

@@ -0,0 +1,21 @@
+<div style="padding-top: 15px;">
+  <% posts.map(post => { %>
+    <div class="post">
+      <div>
+        <img src="<%= profileImageUrl(post.authorProfile) %>" class="post-profile-pic" />
+      </div>
+      <div class="post-content">
+        <div class="content-header">
+          <%= post.authorProfile.name %>
+        </div>
+        <div class="content-body">
+          <% let text = post.content.text.slice(0, 140) %>
+          <% if (post.content.text.length > 140) text += "..." %>
+          <% text.split("\n").map((line, index) => { %>
+            <%- index > 0 ? "<br />" : "" %><%= line %>
+          <% }) %>
+        </div>
+      </div>
+    </div>
+  <% }) %>
+</div>

app/views/home.ejs

@@ -7,23 +7,12 @@
 
     <%= profile.description %>
 
-    <h2>Friends</h2>
+    <%- include('_friends', { friends }) %>
-
-    <ul>
-      <% friends.friends.map(friend => { %>
-        <li>
-          <a href="<%= profileUrl(friend.id) %>">
-            <%= friend.name %> (<%= friend.id.slice(0, 8) %>)
-          </a>
-        </li>
-      <% }) %>
-    </ul>
-
   </div>
 
   <div class="wall">
     <% if (vanishingMessages.length > 0) { %>
-      <div class="js-vanishing-messages" style="padding-bottom: 20px">
+      <div class="js-vanishing-messages">
         <h2>Vanishing Messages</h2>
         <div class="notifications">
           <% vanishingMessages.reverse().map(message => { %>
@@ -54,7 +43,7 @@
 
     <% if (friends.requestsReceived.length) { %>
       <h2>Friend Requests</h2>
-      <div class="notifications" style="padding-bottom: 20px">
+      <div class="notifications">
         <% friends.requestsReceived.map(friend => { %>
           <a href="<%= profileUrl(friend.id) %>" class="notification-box">
             <div><img src="<%= profileImageUrl(friend) %>" class="post-profile-pic" /></div>
@@ -64,16 +53,15 @@
       </div>
     <% } %>
 
-    <h2>Your Wall</h2>
+    <form action="/publish" method="POST" style="padding-top: 20px;">
-
+      <textarea name="message" class="compose-post"></textarea>
-    <form action="/publish" method="POST">
+      <div class="reverse-columns" style="margin-top: 10px">
-      <textarea name="message"></textarea>
+        <input type="submit" value="Publish" />
-      <input type="submit" value="Send" />
+      </div>
     </form>
 
-    <% posts.map(post => { %>
+    <h2 style="margin: 0">Your Wall</h2>
-      <%- include('_post', { post }) %>
+    <%- include('_posts', { posts }) %>
-    <% }) %>
   </div>
 </div>
 

app/views/profile.ejs

@@ -35,41 +35,33 @@
       <% } %>
     </div>
 
-    <h2>Friends</h2>
+    <%- include('_friends', { friends }) %>
-
-    <ul>
-      <% friends.friends.map(friend => { %>
-        <li>
-          <a href="<%= profileUrl(friend.id) %>">
-            <%= friend.name %> (<%= friend.id.slice(0, 8) %>)
-          </a>
-        </li>
-      <% }) %>
-    </ul>
   </div>
 
   <div class="wall">
-    <h1><%= profile.name %>'s Wall</h1>
-
     <h2>Leave <%= profile.name %> a message</h2>
     <form action="<%= profileUrl(profile.id, "/publish") %>" method="POST">
       <div>
         <label>
-          <input type="radio" name="visibility" value="public" checked=checked>
+          <input type="radio" name="visibility" value="public" checked="checked" class="js-public-option">
           Public
         </label>
         <label>
-          <input type="radio" name="visibility" value="vanishing">
+          <input type="radio" name="visibility" value="vanishing" class="js-vanishing-option">
           Vanishing
         </label>
       </div>
-      <textarea name="message"></textarea>
+      <div style="display: none; padding-top: 20px; font-size: 13px; color: #666" class="js-vanishing-message">
-      <input type="submit" value="Send" />
+        Vanishing messages are private and disapear right after being read
+      </div>
+      <textarea name="message" class="compose-post"></textarea>
+      <div class="reverse-columns" style="margin-top: 10px">
+        <input type="submit" value="Publish" />
+      </div>
     </form>
 
-    <% posts.map(post => { %>
+    <h2 style="margin: 0"><%= profile.name %>'s Wall</h2>
-      <%- include('_post', { post }) %>
+    <%- include('_posts', { posts }) %>
-    <% }) %>
   </div>
 </div>