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>
Advertisement
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.