Modify Chat UI

This commit is contained in:
cuom1999 2023-08-29 18:36:01 -05:00
parent 9f0213865d
commit 00113848c8
10 changed files with 1663 additions and 1572 deletions

View file

@ -20,7 +20,6 @@
window.lock = false;
window.lock_click_space = false;
window.pushed_messages = new Set();
let isMobile = window.matchMedia("only screen and (max-width: 799px)").matches;
window.load_dynamic_update = function (last_msg) {
var receiver = new EventReceiver(
@ -71,25 +70,20 @@
<div id="chat-container">
<div id="chat-online" class="chat-right-panel sidebox">
<h3>
<i class="fa fa-users"></i>{{_('Online Users')}}
</h3>
<div id="chat-online-content">
<div id="search-container">
<center>
<form id="search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
{% csrf_token %}
<input id="search-handle" type="text" name="search"
placeholder="{{ _('Search by handle...') }}">
</form>
</center>
<form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
{% csrf_token %}
<input id="search-handle" type="text" name="search"
placeholder="{{ _('Search by handle...') }}">
</form>
</div>
<div id="chat-online-list">
{% include "chat/online_status.html" %}
</div>
</div>
</div>
<div id="chat-area" class="chat-left-panel" style="width:100%">
<div id="chat-area" class="chat-left-panel">
<div id="chat-info" style="height: 10%">
{% include 'chat/user_online_status.html' %}
</div>

View file

@ -102,12 +102,22 @@
float: inherit;
}
#search-container {
margin-bottom: 0.4em;
padding: 1em;
}
#setting {
position: relative;
}
.status-user {
display: flex;
flex-direction: column;
min-width: 0;
flex-grow: 1;
}
.wrapline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@media (min-width: 800px) {
#page-container {

File diff suppressed because it is too large Load diff

View file

@ -27,11 +27,18 @@
fill="{{'green' if user.is_online else 'red'}}"/>
</svg>
</div>
<span style="padding-left:0.3em" class="username {{ user.user.css_class }}">
{{ user.user.username }}
</span>
<span class="spacer">
<span class="unread-count" id="unread-count-{{user.user.id}}">{{user.unread_count if user.unread_count}}</span>
<div class="status-user">
<span class="username {{ user.user.css_class }} wrapline">
{{ user.user.username }}
</span>
{% if user.last_msg %}
<span class="status_last_message wrapline" {% if user.room %}id="last_msg-{{user.room}}"{% endif %}>
{{ user.last_msg }}
</span>
{% endif %}
</div>
<span class="unread-count" id="unread-count-{{user.user.id}}">
{{user.unread_count if user.unread_count}}
</span>
</li>
{% endfor %}