Responsive live-chat

So, I currently have a working live-chat application. The problem is that on a laptop screen it looks like this: https://pasteboard.co/IEHrCyL.png, while on the phone it looks like: https://pasteboard.co/IEHs2uB.png What I want is to make a mobile version that looks like WhatsApp: We have the contacts list, then we select one and the conversation is displayed. For returning to the contacts list, we press the ‘back’ button. Any idea regarding how to achieve this?

The current code is this (even though I don’t think it’s really useful since I’m looking for an idea):

<?php 
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" id="bootstrap-css">
<script src="js/chat.js"></script>
<style>
.modal-dialog {
    width: 400px;
    margin: 30px auto;  
}
</style>
</head>
<body>
<div class="container">     
        <div class="chat">  
            <div id="frame">        
                <div id="sidepanel">
                    <div id="profile">
                    <?php
                    include ('Chat.php');
                    $chat = new Chat();
                    $loggedUser = $chat->getUserDetails($_SESSION['userid']);
                    echo '<div class="wrap">';
                    $currentSession = '';
                    foreach ($loggedUser as $user) {
                        $currentSession = $user['current_session'];
                        echo '<img id="profile-img" src="userpics/'.$user['avatar'].'" class="online" alt="" />
                    }
                    echo '</div>';
                    ?>
                    </div>
                    <div id="contacts"> 
                    <?php
                    echo '<ul>';
                    $chatUsers = $chat->chatUsers($_SESSION['userid']);
                    foreach ($chatUsers as $user) {
                        $status = 'offline';                        
                        if($user['online']) {
                            $status = 'online';
                        }
                        $activeUser = '';
                        if($user['userid'] == $currentSession) {
                            $activeUser = "active";
                        }
                        echo '<li id="'.$user['userid'].'" class="contact '.$activeUser.'" data-touserid="'.$user['userid'].'" data-tousername="'.$user['username'].'">';
                        echo '<div class="wrap">';
                        echo '<span id="status_'.$user['userid'].'" class="contact-status '.$status.'"></span>';
                        echo '<img src="userpics/'.$user['avatar'].'" alt="" />';
                        echo '<div class="meta">';
                        echo '<p class="name">'.$user['username'].'<span id="unread_'.$user['userid'].'" class="unread">'.$chat->getUnreadMessageCount($user['userid'], $_SESSION['userid']).'</span></p>';
                        echo '<p class="preview"><span id="isTyping_'.$user['userid'].'" class="isTyping"></span></p>';
                        echo '</div>';
                        echo '</div>';
                        echo '</li>'; 
                    }
                    echo '</ul>';
                    ?>
                    </div>
                </div>          
                <div class="content" id="content"> 
                    <div class="contact-profile" id="userSection">  
                    <?php
                    $userDetails = $chat->getUserDetails($currentSession);
                    foreach ($userDetails as $user) {                                       
                        echo '<img src="userpics/'.$user['avatar'].'" alt="" />';
                            echo '<p>'.$user['username'].'</p>';
                    }   
                    ?>                      
                    </div>
                    <div class="messages" id="conversation">        
                    <?php
                    echo $chat->getUserChat($_SESSION['userid'], $currentSession);                  
                    ?>
                    </div>
                    <div class="message-input" id="replySection">               
                        <div class="message-input" id="replyContainer">
                            <div class="wrap">
                                <input type="text" class="chatMessage" id="chatMessage<?php echo $currentSession; ?>" placeholder="Write your message..." />
                                <button class="submit chatButton" id="chatButton<?php echo $currentSession; ?>"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>   
                            </div>
                        </div>                  
                    </div>
                </div>
            </div>
        </div>
</div>  
</body>
</html>

JavaScript
​x
 
<?php session_start();?><!DOCTYPE html><html><head><link href="css/style.css" rel="stylesheet" id="bootstrap-css"><script src="js/chat.js"></script><style>.modal-dialog {    width: 400px;    margin: 30px auto;  }</style></head><body><div class="container">             <div class="chat">              <div id="frame">                        <div id="sidepanel">                    <div id="profile">                    <?php                    include ('Chat.php');                    $chat = new Chat();                    $loggedUser = $chat->getUserDetails($_SESSION['userid']);                    echo '<div class="wrap">';                    $currentSession = '';                    foreach ($loggedUser as $user) {                        $currentSession = $user['current_session'];                        echo '<img id="profile-img" src="userpics/'.$user['avatar'].'" class="online" alt="" />                    }                    echo '</div>';                    ?>                    </div>                    <div id="contacts">                     <?php                    echo '<ul>';                    $chatUsers = $chat->chatUsers($_SESSION['userid']);                    foreach ($chatUsers as $user) {                        $status = 'offline';                                                if($user['online']) {                            $status = 'online';                        }                        $activeUser = '';                        if($user['userid'] == $currentSession) {                            $activeUser = "active";                        }                        echo '<li id="'.$user['userid'].'" class="contact '.$activeUser.'" data-touserid="'.$user['userid'].'" data-tousername="'.$user['username'].'">';                        echo '<div class="wrap">';                        echo '<span id="status_'.$user['userid'].'" class="contact-status '.$status.'"></span>';                        echo '<img src="userpics/'.$user['avatar'].'" alt="" />';                        echo '<div class="meta">';                        echo '<p class="name">'.$user['username'].'<span id="unread_'.$user['userid'].'" class="unread">'.$chat->getUnreadMessageCount($user['userid'], $_SESSION['userid']).'</span></p>';                        echo '<p class="preview"><span id="isTyping_'.$user['userid'].'" class="isTyping"></span></p>';                        echo '</div>';                        echo '</div>';                        echo '</li>';                     }                    echo '</ul>';                    ?>                    </div>                </div>                          <div class="content" id="content">                     <div class="contact-profile" id="userSection">                      <?php                    $userDetails = $chat->getUserDetails($currentSession);                    foreach ($userDetails as $user) {                                                               echo '<img src="userpics/'.$user['avatar'].'" alt="" />';                            echo '<p>'.$user['username'].'</p>';                    }                       ?>                                          </div>                    <div class="messages" id="conversation">                            <?php                    echo $chat->getUserChat($_SESSION['userid'], $currentSession);                                      ?>                    </div>                    <div class="message-input" id="replySection">                                       <div class="message-input" id="replyContainer">                            <div class="wrap">                                <input type="text" class="chatMessage" id="chatMessage<?php echo $currentSession; ?>" placeholder="Write your message..." />                                <button class="submit chatButton" id="chatButton<?php echo $currentSession; ?>"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>                               </div>                        </div>                                      </div>                </div>            </div>        </div></div>  </body></html>​

Answer

Maybe use @media query in css to get correct view on mobile. You can set positioning in different screen width. Read some about RWD, it may be helpful.

Advertisement

Answer