lkva/NDOJ
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update UI chatbox

Browse source
This commit is contained in:
cuom1999 2021-07-02 01:38:48 -05:00
parent 5e21332911
commit f773fb5e70
5 changed files with 117 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

52
templates/chat/chat.html
View file

@ -192,7 +192,9 @@
console.log("Fail to retrieve data");
}
else {
$('#chat-online-content').html(data);
$('#chat-online-content').html(data).find('.toggle').each(function () {
register_toggle($(this));
});;
}
})
})
@ -224,6 +226,54 @@
background: lightgreen;
color: grey !important;
}
.status-pic {
height: 1.3em;
width: 1.3em;
border-radius: 0.3em;
}
.status-container {
position: relative;
display: inline-flex;
}
.status-circle {
position: absolute;
bottom: 0;
right: 0;
cx: 18;
cy: 18;
r: 4.5;
stroke: white;
stroke-width: 1;
}
.status-row {
display: flex;
margin-bottom: 0.5em;
font-size: 15px;
}
.status-list {
padding: 0;
}
.status-section-title {
cursor: pointer;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
</style>
{% endblock media %}

6
templates/chat/message.html
View file

@ -1,5 +1,7 @@
<li class="message" id="message-{{ message.id }}">
<img src="{{ gravatar(message.author, 32) }}" class="profile-pic">
<li class="message" id="message-{{ message.id }}">
<a href="{{ url('user_page', message.author.user.username) }}">
<img src="{{ gravatar(message.author, 135) }}" class="profile-pic">
</a>
<div class="body-message">
<div class="user-time">
<span class="username {{ message.author.css_class }}">

49
templates/chat/online_status.html
View file

@ -1,24 +1,27 @@
<h4>{{_('Admins')}}: </h4>
<hr/>
{% for user in admin_status %}
<li style="padding-left: 1em">
{% if user.is_online %}
<span class="green-dot"></span>
{% else %}
<span class="red-dot"></span>
{% endif %}
<span style="padding-left:0.25em">
{{ link_user(user.user) }}
</span>
</li>
{% for section in status_sections %}
{% if section.user_list %}
<div class="status-section-title toggle open">
<h4>
<i class="fa fa-chevron-right fa-fw"></i>{{_(section.title)}}
</h4>
<hr/>
</div>
<ul class="status-list toggled">
{% for user in section.user_list %}
<li style="padding-left: 0.1em" class="status-row">
<div class="status-container">
<img src="{{ gravatar(user.user, 135) }}" class="status-pic">
<svg style="position:absolute;" height="32" width="32">
<circle class="status-circle"
fill="{{'green' if user.is_online else 'red'}}"/>
</svg>
</div>
<span style="padding-left:0.3em" class="username {{ user.user.css_class }}">
{{ link_user(user.user) }}
</span>
</li>
{% endfor %}
</ul>
<br>
{% endif %}
{% endfor %}
<h4 style="margin-top:1em;">{{_('Users')}}: </h4>
<hr/>
{% for user in online_users %}
<li style="padding-left: 1em">
<span class="green-dot"></span>
<span style="padding-left:0.25em">
{{ link_user(user.user) }}
</span>
</li>
{% endfor %}