Update Chat Mobile
This commit is contained in:
anhkha2003
parent
bd8d7848b9
commit
21f6f86d72
8 changed files with 54 additions and 63 deletions
|
|
@ -182,6 +182,9 @@ header {
|
|||
cursor: pointer;
|
||||
padding: 3.5px;
|
||||
}
|
||||
img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-shadow {
|
||||
|
|
@ -539,7 +542,11 @@ math {
|
|||
|
||||
@media (max-width: 799px) {
|
||||
#navigation {
|
||||
height: 36px;
|
||||
height: $navbar_height_mobile;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top: $navbar_height_mobile;
|
||||
}
|
||||
|
||||
#navicon {
|
||||
|
|
@ -637,11 +644,11 @@ math {
|
|||
}
|
||||
|
||||
#chat-icon {
|
||||
color: $theme_color;
|
||||
color: darkgreen;
|
||||
}
|
||||
|
||||
#chat-icon:hover {
|
||||
color: green;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
#nav-lang-icon {
|
||||
|
|
|
|||
|
|
@ -115,21 +115,6 @@
|
|||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
#refresh-button {
|
||||
padding: 0;
|
||||
margin-left: auto;
|
||||
margin-right: 0.3em;
|
||||
background: transparent;
|
||||
border: none;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
#refresh-button:hover {
|
||||
background: lightgreen;
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
transition: 1.5s ease-in-out;
|
||||
}
|
||||
.status-pic {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -186,10 +171,11 @@
|
|||
color: white;
|
||||
}
|
||||
.chat-input-icon {
|
||||
color: $theme_color;
|
||||
color: white;
|
||||
background-color: #3c8262;
|
||||
}
|
||||
.chat-input-icon:hover {
|
||||
background: lightgray;
|
||||
background: #57b28b;
|
||||
}
|
||||
.chat {
|
||||
.active-span {
|
||||
|
|
@ -233,6 +219,6 @@
|
|||
|
||||
@media (max-width: 799px) {
|
||||
#chat-area {
|
||||
height: calc(100vh - 120px);
|
||||
height: calc(100vh - $navbar_height_mobile);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "vars";
|
||||
|
||||
.list-contest {
|
||||
box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
|
||||
box-shadow: 0px 1px 2px lightgrey, 0px 1px 5px lightgrey;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -12,3 +12,4 @@ $table_header_rounding: 6px;
|
|||
|
||||
$monospace-fonts: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
|
||||
$navbar_height: 50px;
|
||||
$navbar_height_mobile: 36px;
|
||||
|
|
|
|||
|
|
@ -59,17 +59,8 @@
|
|||
|
||||
{% block body %}
|
||||
<div class="chat">
|
||||
<div id="mobile" class="tabs">
|
||||
<ul>
|
||||
<li id="chat-tab" class="tab active"><a href="#">
|
||||
<i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
|
||||
</a></li>
|
||||
<li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="chat-container">
|
||||
<div id="chat-online" class="chat-right-panel sidebox">
|
||||
<div id="chat-online" class="chat-left-panel sidebox">
|
||||
<div id="chat-online-content">
|
||||
<div id="search-container">
|
||||
<form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
|
||||
|
|
@ -83,7 +74,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-area" class="chat-left-panel">
|
||||
<div id="chat-area" class="chat-right-panel">
|
||||
<div id="chat-info">
|
||||
{% include 'chat/user_online_status.html' %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
#content {
|
||||
padding-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -197,21 +198,25 @@
|
|||
#chat-area {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
.back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 799px) {
|
||||
html, body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#mobile ul {
|
||||
width: 100%;
|
||||
}
|
||||
.info-pic {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.active-span {
|
||||
display: none;
|
||||
}
|
||||
#chat-area {
|
||||
display: none;
|
||||
}
|
||||
.back-button {
|
||||
margin-right: 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endcompress %}
|
||||
|
|
@ -279,6 +279,21 @@
|
|||
$("#click_space_" + window.other_user_id).addClass("selected-status-row");
|
||||
}
|
||||
|
||||
function show_right_panel() {
|
||||
if (isMobile) {
|
||||
$('.chat-left-panel').hide();
|
||||
$('#chat-area').css('display', 'flex');
|
||||
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function hide_right_panel() {
|
||||
if (isMobile) {
|
||||
$('.chat-left-panel').show();
|
||||
$('#chat-area').hide();
|
||||
}
|
||||
}
|
||||
|
||||
function load_room(encrypted_user) {
|
||||
if (window.lock_click_space) return;
|
||||
|
||||
|
|
@ -288,6 +303,7 @@
|
|||
update_last_seen();
|
||||
refresh_status();
|
||||
$('#chat-input').focus();
|
||||
show_right_panel();
|
||||
}
|
||||
window.lock_click_space = true;
|
||||
if (encrypted_user) {
|
||||
|
|
@ -314,6 +330,7 @@
|
|||
function register_click_space() {
|
||||
$('.click_space').on('click', function(e) {
|
||||
if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
|
||||
show_right_panel();
|
||||
return;
|
||||
}
|
||||
var other_user = $(this).attr('value');
|
||||
|
|
@ -323,10 +340,10 @@
|
|||
if (window.room_id) {
|
||||
load_room(null);
|
||||
}
|
||||
else {
|
||||
show_right_panel();
|
||||
}
|
||||
});
|
||||
if (isMobile) {
|
||||
$('#chat-tab a').click();
|
||||
}
|
||||
}
|
||||
|
||||
function update_last_seen() {
|
||||
|
|
@ -439,26 +456,6 @@
|
|||
return true
|
||||
});
|
||||
|
||||
$('#chat-tab').find('a').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#chat-tab').addClass('active');
|
||||
$('#online-tab').removeClass('active');
|
||||
$('.chat-left-panel').show();
|
||||
$('.chat-right-panel').hide();
|
||||
});
|
||||
$('#online-tab').find('a').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('#online-tab').addClass('active');
|
||||
$('#chat-tab').removeClass('active');
|
||||
$('.chat-left-panel').hide();
|
||||
$('.chat-right-panel').show();
|
||||
});
|
||||
|
||||
$('#refresh-button').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
refresh_status();
|
||||
});
|
||||
|
||||
setInterval(refresh_status, 2 * 60 * 1000);
|
||||
|
||||
$('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
|
||||
|
|
@ -466,7 +463,7 @@
|
|||
const button = document.querySelector('#emoji-button');
|
||||
const tooltip = document.querySelector('.tooltip');
|
||||
Popper.createPopper(button, tooltip, {
|
||||
placement: 'left-end',
|
||||
placement: isMobile ? 'auto-end' : 'left-end',
|
||||
});
|
||||
|
||||
function toggleEmoji() {
|
||||
|
|
@ -567,6 +564,7 @@
|
|||
$(this).css('height', '80%');
|
||||
}
|
||||
});
|
||||
|
||||
$('#submit-button').on('click', submit_chat);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
<div onclick="hide_right_panel()" class="back-button">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</div>
|
||||
{% if other_user %}
|
||||
<div class="status-container" style="height: 3em; width: 3em;">
|
||||
<img src="{{ gravatar(other_user, 135) }}" class="info-pic">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue