UI updates and fix message directioning

assets/css/app.css

@@ -128,9 +128,15 @@
 
 
 /* Chat css from: https://www.bootdey.com/snippets/view/card-chat-list#html */
+.chat-container {
+  height: 300px;
+  overflow-y: scroll;
+}
+
 .chat-list {
   padding: 0;
   font-size: .8rem;
+  padding-bottom: 12px;
 }
 
 .chat-list li {
@@ -139,6 +145,18 @@
   color: #ffffff;
 }
 
+.chat-list .chat-img {
+  float: left;
+  width: 48px;
+}
+
+.chat-list .chat-img img {
+  -webkit-border-radius: 50px;
+  -moz-border-radius: 50px;
+  border-radius: 50px;
+  width: 100%;
+}
+
 .chat-list .chat-message {
   -webkit-border-radius: 50px;
   -moz-border-radius: 50px;
@@ -170,7 +188,7 @@
   padding: 0;
 }
 
-.chat-list .chat-card-body {
+.chat-list .chat-body {
   margin-left: 20px;
   float: left;
   width: 70%;
@@ -202,17 +220,12 @@
   border-left: 20px solid #fc6d4c;
 }
 
-.chat-card {
-  overflow-y: scroll;
-  max-height: 300px;
-}
-
-.chat-card .card-header:first-child {
+.card .card-header:first-child {
   -webkit-border-radius: 0.3rem 0.3rem 0 0;
   -moz-border-radius: 0.3rem 0.3rem 0 0;
   border-radius: 0.3rem 0.3rem 0 0;
 }
-.chat-card .card-header {
+.card .card-header {
   background: #17202b;
   border: 0;
   font-size: 1rem;
@@ -221,3 +234,7 @@
   font-weight: 600;
   color: #ffffff;
 }
+
+.content{
+  margin-top:40px;    
+}

lib/aggiedit/rooms/comment.ex

@@ -19,6 +19,6 @@ defmodule Aggiedit.Post.Comment do
   end
 
   def serialize(c) do
-    %{"body" => c.comment, "user" => c.user.username, "id" => c.id, "inserted_at" => c.inserted_at}
+    %{"body" => c.comment, "user" => c.user.username, "user_id" => c.user_id, "id" => c.id, "inserted_at" => c.inserted_at}
   end
 end

lib/aggiedit_web/live/post_live/show.html.heex

@@ -23,9 +23,10 @@
 <div class="container content mt-2">
   <div class="row">
   <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
-      <div class="chat-card">
-        <div class="chat-card-body">
-          <ul class="chat-list" id="chat" phx-update="ignore">
+        	<div class="card">
+        		<div class="card-header">Chat</div>
+        		<div class="card-body chat-container">
+        			<ul class="chat-list" id="chat">
         			</ul>
         		</div>
         	</div>
@@ -52,11 +53,11 @@
     element.scrollIntoView({ behavior: 'smooth', block: 'end' });
   };
 
-  const appendComment = ({user, body, id, inserted_at}, element) => {
+  const appendComment = ({user, body, id, user_id, inserted_at}, element) => {
     const messageElement = document.createElement("div");
     messageElement.innerHTML = `
-      <li class="in" id=${id}>
-        <div class="chat-card-body">
+      <li class="${user_id == <%= @current_user.id %> ? 'out' : 'in'}" id=${id}>
+        <div class="chat-body">
           <div class="chat-message">
             <h5>${user}</h5>
             <p>${body}</p>
@@ -69,10 +70,11 @@
   };
 
 
+  let channel;
   window.addEventListener('phx:initial-post', (e) => {
     const chatWindow = document.getElementById("chat");
     window.userSocket.connect();
-    let channel = window.RoomChat.connect(window.userSocket, e.detail.id);
+    channel = window.RoomChat.connect(window.userSocket, e.detail.id);
 
     channel.on('shout', (comment) => {
       appendComment(comment, chatWindow);