refactor(admin_chat.html): style chat
This commit is contained in:
@@ -5,25 +5,88 @@
|
||||
{% trans "Chat with" %} {{ chat_user.email }}
|
||||
{% endblock titletag %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.admin-chat-messages {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.5em 0;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e2e2;
|
||||
}
|
||||
.admin-chat-messages li {
|
||||
padding: 0.7em 1em;
|
||||
border-bottom: 1px solid #ececec;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
.admin-chat-messages li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.admin-chat-message-meta {
|
||||
color: #888;
|
||||
font-size: 0.92em;
|
||||
margin-right: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admin-chat-form {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.admin-chat-form input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 0.5em;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 1em;
|
||||
}
|
||||
.admin-chat-form button {
|
||||
padding: 0.5em 1.2em;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
background: #0073e6;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.admin-chat-form button:hover {
|
||||
background: #005bb5;
|
||||
}
|
||||
.admin-message-admin {
|
||||
background: #334;
|
||||
}
|
||||
.admin-message-user {
|
||||
}
|
||||
</style>
|
||||
{% endblock extra_css %}
|
||||
|
||||
{% block content %}
|
||||
{% include "wagtailadmin/shared/header.html" with title="Chat" icon="mail" %}
|
||||
<h1>{% trans "Admin Chat View" %}</h1>
|
||||
<p>{% trans "This is the admin view of the chat. Here you can manage conversations and monitor user interactions." %}</p>
|
||||
<div style="padding: 0 3em;">
|
||||
<h1>{% trans "Admin Chat View" %}</h1>
|
||||
<p>{% trans "Chat with" %} <strong>{{ chat_user.email }}</strong></p>
|
||||
|
||||
<ul>
|
||||
{% for message in chat_messages %}
|
||||
<li>
|
||||
<strong>{{ message.sender.email }}:</strong> {{ message.content }}
|
||||
</li>
|
||||
{% empty %}
|
||||
<li>{% trans "No messages found." %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<form action="/chat/send/{{ chat_user.id }}/" method="post">
|
||||
{% csrf_token %}
|
||||
<input type="text" name="content" placeholder="{% trans "Type your message here..." %}" required>
|
||||
<button type="submit">{% trans "Send" %}</button>
|
||||
</form>
|
||||
<ul class="admin-chat-messages">
|
||||
{% for message in chat_messages %}
|
||||
<li class="{% if message.sender.id == chat_user.id %}admin-message-user{% else %}admin-message-admin{% endif %}">
|
||||
<span class="admin-chat-message-meta">{{ message.timestamp|date:"Y-m-d H:i" }}</span>
|
||||
<strong>{{ message.sender.email }}: </strong> {{ message.content }}
|
||||
</li>
|
||||
{% empty %}
|
||||
<li>{% trans "No messages found." %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<form action="/chat/send/{{ chat_user.id }}/" method="post" class="admin-chat-form">
|
||||
{% csrf_token %}
|
||||
<input type="text" name="content" placeholder="{% trans "Type your message here..." %}" required>
|
||||
<button type="submit">{% trans "Send" %}</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user