UI updates and fix message directioning

This commit is contained in:
Logan Hunt 2022-04-20 17:23:27 -06:00
parent 763ea5331b
commit d9943b201d
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
3 changed files with 39 additions and 20 deletions

View File

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

View File

@ -19,6 +19,6 @@ defmodule Aggiedit.Post.Comment do
end end
def serialize(c) do 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
end end

View File

@ -22,14 +22,15 @@
<!-- chat container from https://www.bootdey.com/snippets/view/card-chat-list#html --> <!-- chat container from https://www.bootdey.com/snippets/view/card-chat-list#html -->
<div class="container content mt-2"> <div class="container content mt-2">
<div class="row"> <div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="chat-card"> <div class="card">
<div class="chat-card-body"> <div class="card-header">Chat</div>
<ul class="chat-list" id="chat" phx-update="ignore"> <div class="card-body chat-container">
</ul> <ul class="chat-list" id="chat">
</ul>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
@ -52,11 +53,11 @@
element.scrollIntoView({ behavior: 'smooth', block: 'end' }); 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"); const messageElement = document.createElement("div");
messageElement.innerHTML = ` messageElement.innerHTML = `
<li class="in" id=${id}> <li class="${user_id == <%= @current_user.id %> ? 'out' : 'in'}" id=${id}>
<div class="chat-card-body"> <div class="chat-body">
<div class="chat-message"> <div class="chat-message">
<h5>${user}</h5> <h5>${user}</h5>
<p>${body}</p> <p>${body}</p>
@ -69,10 +70,11 @@
}; };
let channel;
window.addEventListener('phx:initial-post', (e) => { window.addEventListener('phx:initial-post', (e) => {
const chatWindow = document.getElementById("chat"); const chatWindow = document.getElementById("chat");
window.userSocket.connect(); 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) => { channel.on('shout', (comment) => {
appendComment(comment, chatWindow); appendComment(comment, chatWindow);