2022-03-19 21:20:23 +00:00
{% extends "default.html" %}
{% block PseudoSubmitForm %}{% endblock %}
{% block sidebar %}{% endblock %}
{% block navbar %}{% endblock %}
{% block sortnav %}{% endblock %}
{% block viewfilters %}{% endblock %}
{% block mobilenavbar %}{% endblock %}
{% block mobile_description %}{% endblock %}
{% block title %}
< title > Chat< / title >
< meta name = "description" content = "Chat" >
{% endblock %}
{% block desktopbanner %}
{% endblock %}
{% block infobar %}
< div class = "border-right py-3 px-3" >
< span data-toggle = "tooltip" data-placement = "bottom" title = "people online right now" class = "text-muted" >
< i class = "far fa-user fa-sm mr-1" > < / i > < span class = "board-chat-count" > < / span >
< / span >
< / div >
{% endblock %}
{% block content %}
< div class = "container p-md-0 chat-container" >
< div id = "chat-window" >
< div id = "chat-text" { % if request . path . endswith ( ' / chat ' ) % } class = "fullchat" { % else % } class = "sidebarchat" { % endif % } >
< / div >
< div id = "system-template" >
< div class = "system-line" >
< p class = "message text-muted" > < / p >
< / div >
< / div >
< / div >
{% if request.path.endswith('/chat') %}
< div class = "position-relative form-group d-flex pb-3" >
< div class = "position-absolute text-muted text-small" style = "bottom: -1.5rem; line-height: 1;" >
< span id = "typing-indicator" > < / span >
< span id = "loading-indicator" class = "d-none" > < / span >
< / div >
< input id = "input-text" type = "text" class = "form-control" placeholder = "Message #, or type /help" autocomplete = "off" autofocus / >
{% if v.has_premium %}
< label class = "btn btn-secondary ml-3 mb-0" for = "chat-image-upload" >
< div id = "filename-show" > < i class = "fad fa-image" > < / i > < / div >
< input id = "chat-image-upload" type = "file" name = "image" accept = "image/*" onchange = "upload_chat_image()" hidden >
< / label >
{% endif %}
< button id = "chatsend" class = "btn btn-primary ml-3" type = "submit" > Send< / button >
< / div >
< input id = "autojoin" type = "hidden" value = "True" >
{% else %}
< div class = "position-relative form-group pb-3" >
< div class = "position-absolute text-muted text-small" style = "bottom: -.5rem; line-height: 1;" >
< span id = "typing-indicator" > < / span >
< span id = "loading-indicator" class = "d-none" > < / span >
< / div >
< input id = "input-text" type = "text" class = "form-control" placeholder = "Message or type /help" autocomplete = "off" >
< div class = "d-flex mt-3" >
{% if v.has_premium %}
< label class = "btn btn-secondary w-20 mr-3 mb-0 ml-auto" for = "chat-image-upload" >
< div id = "filename-show" > < i class = "fad fa-image" > < / i > < / div >
< input id = "chat-image-upload" type = "file" name = "image" accept = "image/*" onchange = "upload_chat_image()" hidden >
< / label >
{% endif %}
< button id = "chatsend" class = "btn btn-primary w-100 ml-auto" type = "submit" > Send< / button >
< / div >
< / div >
< input id = "autojoin" type = "hidden" value = "{{ v.auto_join_chat }}" >
{% endif %}
< input id = "guildname" type = "hidden" value = "general" >
< input id = "username" type = "hidden" value = "{{ v.username }}" >
< div id = "chat-line-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle = "tooltip" data-placement = "right" >
< a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > @< span class = "username" > < / span > < / a >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black text-break" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "msg-in-template" class = "d-none" >
< div class = "chat-line my-2 chat-mention" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" data-toggle = "tooltip" data-placement = "right" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
from < a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > @< span class = "username" > < / span > < / a > to < b > me< / b > .< i class = "fad fa-eye-slash ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "msg-out-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" data-toggle = "tooltip" data-placement = "right" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
from < b > me< / b > to < a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > @< span class = "username" > < / span > < / a > .< i class = "fad fa-eye-slash ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "bot-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" data-toggle = "tooltip" data-placement = "right" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
< a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > @< span class = "username" > < / span > < / a > < i class = "fad fa-robot text-info ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "help-template" class = "d-none" >
< div class = "system-line" >
< p class = "message text-muted" > < / p >
< / div >
< / div >
< div id = "me-template" class = "d-none" >
< div class = "system-line" >
< p > < i class = "message text-muted" > < / i > < / p >
< / div >
< / div >
< div id = "system-info" class = "d-none" >
< div class = "system-line" >
< p class = "message text-primary" > < / p >
< / div >
< / div >
< div id = "system-warning" class = "d-none" >
< div class = "system-line" >
< p class = "message text-danger" > < / p >
< / div >
< / div >
< div id = "gm-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle = "tooltip" data-placement = "right" >
< a href = "" class = "font-weight-bold text-warning userlink" target = "_blank" > @< span class = "username" > < / span > < / a > < i class = "fad fa-crown text-warning ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "motd-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" data-toggle = "tooltip" data-placement = "right" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
< a href = "" class = "font-weight-bold text-primary userlink" target = "_blank" > +< span class = "username" > < / span > < / a > < i class = "fad fa-chess-rook text-primary ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "admin-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" data-toggle = "tooltip" data-placement = "right" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" >
< a href = "" class = "font-weight-bold text-danger userlink" target = "_blank" > @< span class = "username" > < / span > < / a > < i class = "fad fa-shield text-danger ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div id = "wallop-template" class = "d-none" >
< div class = "chat-line my-2" >
< div class = "d-flex align-items-center" >
< span class = "rounded mb-auto d-none d-md-block chat-profile" >
< img class = "desktop-avatar rounded-circle w-100" >
< / span >
< div class = "pl-md-3 text-muted" >
< div >
< img class = "mobile-avatar profile-pic-30 mr-2 d-inline-block d-md-none" data-toggle = "tooltip" data-placement = "right" >
< a href = "" class = "font-weight-bold text-danger userlink" target = "_blank" > @< span class = "username" > < / span > < / a > < i class = "fad fa-shield text-danger ml-1" > < / i > < i class = "fad fa-bullhorn text-danger ml-1" > < / i >
< div style = "overflow:hidden" class = "pl-4 pl-md-0 ml-4 ml-md-0" >
< span class = "chat-message font-weight-bold text-black" > < / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< script src = "/assets/js/jquery-2.0.3.min.js" > < / script >
< script src = "/assets/js/socketio.js" > < / script >
< script src = "/assets/js/chat.js?v=2.38.0a" > < / script >
< style >
/*
.sidebar-chat:focus-within #chat-text {
overflow-y:scroll;
animation: chatexpand ease-out 500ms;
max-height:calc(100vh - 300px);
}
.sidebar-chat:not(:focus-within) #chat-text {
overflow-y:scroll;
max-height: 200px;
}
@keyframes chatexpand {
from {max-height: 200px;}
to {max-height:calc(100vh - 300px);}
}
@-webkit-keyframes chatexpand {
from {max-height: 200px;}
to {max-height:calc(100vh - 300px);}
}
}
*/
#chat-window {
max-height:calc(100vh - 300px);
overflow-y: scroll;
}
#loading-indicator:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation: ellipsis steps(4,end) 900ms infinite;
animation: ellipsis steps(4,end) 900ms infinite;
content: "\2026"; /* ascii code for the ellipsis character */
width: 0px;
}
@keyframes ellipsis {
to {
width: 20px;
}
}
@-webkit-keyframes ellipsis {
to {
width: 20px;
}
}
.chat-mention {
background-color: rgba(128, 90, 213, 0.3);
}
/* Hide scrollbar for Chrome, Safari and Opera */
#chat-window::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#chat-window {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.fullchat .chat-profile {
min-width: 42px;
width: 42px;
height: 42px;
}
.sidebarchat .chat-profile {
min-width: 30px;
width: 30px;
height: 30px;
}
< / style >
2022-03-19 22:47:52 +00:00
{% endblock %}