Update Chat Mobile

templates/chat/chat.html

@@ -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>

templates/chat/chat_css.html

@@ -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 %}

templates/chat/chat_js.html

@@ -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>

templates/chat/user_online_status.html

@@ -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">