121 lines
2.2 KiB
HTML
121 lines
2.2 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<br><br><br>
|
|
|
|
<h2 style="opacity: 80%; padding-left:40px">General Chat</h2>
|
|
|
|
<style>
|
|
.chat-container{
|
|
/* width:420px;*/
|
|
height:470px;
|
|
border-radius:12px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.messages{
|
|
flex:1;
|
|
overflow-y:auto;
|
|
padding: 10px 40px;
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:10px;
|
|
}
|
|
|
|
.message{
|
|
background:#334155;
|
|
padding:2px 5px;
|
|
border-radius:2px;
|
|
}
|
|
|
|
.message-author{
|
|
font-size:15px;
|
|
padding: 0px 5px;
|
|
opacity:0.7;
|
|
/* margin-bottom:4px;*/
|
|
}
|
|
|
|
p {
|
|
font-size: 18px;
|
|
padding: 0px 5px;
|
|
margin: 0;
|
|
}
|
|
|
|
.input-area{
|
|
display:flex;
|
|
height: 60px;
|
|
padding:20px 40px;
|
|
border-top:1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.input-area input{
|
|
flex: 1;
|
|
padding:10px;
|
|
font-size: 30px;
|
|
border-radius:8px;
|
|
border:none;
|
|
outline:none;
|
|
background:#0f172a;
|
|
color:white;
|
|
}
|
|
|
|
.input-area button{
|
|
/* flex: 1;*/
|
|
margin-left:8px;
|
|
padding:10px 14px;
|
|
border:none;
|
|
border-radius:8px;
|
|
background:#3b82f6;
|
|
color:white;
|
|
cursor:pointer;
|
|
}
|
|
|
|
footer {;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
|
|
<div class="chat-container">
|
|
<div
|
|
id="post-list"
|
|
class="messages"
|
|
hx-get="{% url 'ChatPartial' %}"
|
|
hx-trigger="every 3s"
|
|
hx-swap="innerHTML">
|
|
{% include "blog/partials/postList.html" %}
|
|
</div>
|
|
|
|
<form
|
|
class="input-area"
|
|
id="post-form"
|
|
hx-post="{% url 'Chat' %}"
|
|
hx-target="#post-list"
|
|
hx-swap="beforeend">
|
|
{% csrf_token %}
|
|
{{ form.content }}
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var container = document.getElementById("post-list");
|
|
let autoScroll = true
|
|
function isAtBottom(){
|
|
return container.scrollHeight - container.scrollTop - container.clientHeight < 50;
|
|
}
|
|
|
|
container.addEventListener("scroll", () => {
|
|
autoScroll = isAtBottom();
|
|
});
|
|
|
|
document.body.addEventListener("htmx:afterSwap", (e) => {
|
|
if(e.target.id !== "post-list") return
|
|
if(autoScroll){ container.scrollTop = container.scrollHeight; }
|
|
});
|
|
|
|
</script>
|
|
{% endblock %} |