nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

Adjusted chat UI height to page height

Browse Source
This commit is contained in:
Rohan Sircar 2020-06-20 12:51:44 +05:30
parent 6754071700
commit 2addcc1fa8
2 changed files with 240 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

321
src/main/resources/static/css/chat.css
View File

@ -1,301 +1,306 @@
body, body,
html { html {
height: 100%; height: 100%;
margin: 0; margin: 0;
background: #7F7FD5; background: #7f7fd5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
} }
.msg_container_send p, .msg_container_send p,
.msg_container_send ol, .msg_container_send ol,
.msg_container_send ul, .msg_container_send ul,
.msg_container p, .msg_container p,
.msg_container ol, .msg_container ol,
.msg_container ul { .msg_container ul {
margin-bottom: 0; margin-bottom: 0;
} }
.user-box:hover { .user-box:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
.active:hover { .active:hover {
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4);
} }
.no-user-selected-h2 { .no-user-selected-h2 {
color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.4);
} }
.chat { .chat {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
.card { .card {
height: 800px; /* height: 800px; */
border-radius: 15px !important; border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.4) !important; background-color: rgba(0, 0, 0, 0.4) !important;
} }
.contacts_body { .contacts_body {
padding: 0.75rem 0 !important; padding: 0.75rem 0 !important;
overflow-y: auto; overflow-y: auto;
white-space: nowrap; white-space: nowrap;
} }
.msg_card_body { .msg_card_body {
overflow-y: auto; overflow-y: auto;
} }
.card-header { .card-header {
border-radius: 15px 15px 0 0 !important; border-radius: 15px 15px 0 0 !important;
border-bottom: 0 !important; border-bottom: 0 !important;
} }
.card-footer { .card-footer {
border-radius: 0 0 15px 15px !important; border-radius: 0 0 15px 15px !important;
border-top: 0 !important; border-top: 0 !important;
} }
.container { .container {
align-content: center; align-content: center;
} }
.search { .search {
border-radius: 15px 0 0 15px !important; border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
color: white !important; color: white !important;
} }
.search-cancel { .search-cancel {
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
/* border-color: rgba(0, 0, 0, 0.3) !important; */ /* border-color: rgba(0, 0, 0, 0.3) !important; */
color: white !important; color: white !important;
} }
.search:focus { .search:focus {
box-shadow: none !important; box-shadow: none !important;
outline: 0px !important; outline: 0px !important;
} }
.type_msg { .type_msg {
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
color: white !important; color: white !important;
height: 60px !important; height: 60px !important;
overflow-y: auto; overflow-y: auto;
} }
.type_msg:focus { .type_msg:focus {
box-shadow: none !important; box-shadow: none !important;
outline: 0px !important; outline: 0px !important;
} }
.attach_btn { .attach_btn {
border-radius: 15px 0 0 15px !important; border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
color: white !important; color: white !important;
cursor: pointer; cursor: pointer;
} }
.send_btn { .send_btn {
border-radius: 0 15px 15px 0 !important; border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
color: white !important; color: white !important;
cursor: pointer; cursor: pointer;
} }
.search_btn { .search_btn {
border-radius: 0 15px 15px 0 !important; border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important; background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important; border: 0 !important;
color: white !important; color: white !important;
cursor: pointer; cursor: pointer;
} }
.contacts { .contacts {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
.contacts li { .contacts li {
width: 100% !important; width: 100% !important;
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 15px !important; margin-bottom: 15px !important;
} }
.active { .active {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.user_img { .user_img {
height: 70px; height: 70px;
width: 70px; width: 70px;
border: 1.5px solid #f5f6fa; border: 1.5px solid #f5f6fa;
} }
.user_img_msg { .user_img_msg {
height: 40px; height: 40px;
width: 40px; width: 40px;
border: 1.5px solid #f5f6fa; border: 1.5px solid #f5f6fa;
} }
.img_cont { .img_cont {
position: relative; position: relative;
height: 70px; height: 70px;
width: 70px; width: 70px;
} }
.img_cont_msg { .img_cont_msg {
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
.online_icon { .online_icon {
position: absolute; position: absolute;
height: 15px; height: 15px;
width: 15px; width: 15px;
background-color: #4cd137; background-color: #4cd137;
border-radius: 50%; border-radius: 50%;
bottom: 0.2em; bottom: 0.2em;
right: 0.4em; right: 0.4em;
border: 1.5px solid white; border: 1.5px solid white;
} }
.offline { .offline {
background-color: #c23616 !important; background-color: #c23616 !important;
} }
.user_info { .user_info {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
margin-left: 15px; margin-left: 15px;
} }
.user_info span { .user_info span {
font-size: 20px; font-size: 20px;
color: white; color: white;
} }
.user_info p, .user_info p span { .user_info p,
font-size: 10px; .user_info p span {
color: rgba(255, 255, 255, 0.6); font-size: 10px;
color: rgba(255, 255, 255, 0.6);
} }
.video_cam { .video_cam {
margin-left: 50px; margin-left: 50px;
margin-top: 5px; margin-top: 5px;
} }
.video_cam span { .video_cam span {
color: white; color: white;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }
.msg_container { .msg_container {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
margin-left: 10px; margin-left: 10px;
border-radius: 25px; border-radius: 25px;
background-color: #82ccdd; background-color: #82ccdd;
padding: 10px; padding: 10px;
position: relative; position: relative;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
} }
.msg_container_send { .msg_container_send {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
margin-right: 10px; margin-right: 10px;
border-radius: 25px; border-radius: 25px;
background-color: #78e08f; background-color: #78e08f;
padding: 10px; padding: 10px;
position: relative; position: relative;
min-width: 100px; min-width: 100px;
text-align: center; text-align: center;
} }
.msg_time { .msg_time {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: -15px; bottom: -15px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 10px; font-size: 10px;
} }
.msg_time_send { .msg_time_send {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: -15px; bottom: -15px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
font-size: 10px; font-size: 10px;
} }
.msg_head { .msg_head {
position: relative; position: relative;
} }
#action_menu_btn { #action_menu_btn {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
color: white; color: white;
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
} }
.action_menu { .action_menu {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
padding: 15px 0; padding: 15px 0;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
color: white; color: white;
border-radius: 15px; border-radius: 15px;
top: 30px; top: 30px;
right: 15px; right: 15px;
display: none; display: none;
} }
.action_menu ul { .action_menu ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.action_menu ul li { .action_menu ul li {
width: 100%; width: 100%;
padding: 10px 15px; padding: 10px 15px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.action_menu ul li i { .action_menu ul li i {
padding-right: 10px; padding-right: 10px;
} }
.action_menu ul li:hover { .action_menu ul li:hover {
cursor: pointer; cursor: pointer;
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.bg-blur { .bg-blur {
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} }
.modal-dialog { .modal-dialog {
color: #000000; color: #000000;
} }
@media(max-width: 576px) { .chat-height {
.contacts_card { min-height: 90vh;
margin-bottom: 15px !important; max-height: 90vh;
} }
@media (max-width: 576px) {
.contacts_card {
margin-bottom: 15px !important;
}
} }

136
src/main/resources/templates/chat.html
View File

@ -4,13 +4,15 @@
<head> <head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script>
<script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer" th:if="false"></script> <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer"
th:if="false"></script>
<div th:replace="fragments/head :: headFragment"> <div th:replace="fragments/head :: headFragment">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title id="pageTitle">Chat</title> <title id="pageTitle">Chat</title>
</div> </div>
<script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-bundle')}}" defer></script> <script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-bundle')}}"
defer></script>
<link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css"> <link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">
</head> </head>
@ -29,7 +31,9 @@
</div> </div>
<div class="p-4 align-self-end"> <div class="p-4 align-self-end">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam dolorem nostrum consequatur eos voluptates. Ipsam ullam quos illo qui. Quaerat corrupti nisi numquam rerum quasi nesciunt deserunt fugit commodi consequatur! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam dolorem nostrum
consequatur eos voluptates. Ipsam ullam quos illo qui. Quaerat corrupti nisi numquam
rerum quasi nesciunt deserunt fugit commodi consequatur!
</div> </div>
</div> </div>
@ -42,12 +46,14 @@
<div class="container-fluid h-100 mt-4 pt-4"> <div class="container-fluid h-100 mt-4 pt-4">
<div class="row justify-content-center h-100 mt-3"> <div class="row justify-content-center h-100 mt-3">
<div class="col-md-4 col-xl-3 chat"> <div class="col-md-4 col-xl-3 chat">
<div class="card mb-sm-3 mb-md-0 contacts_card"> <div class="card mb-sm-3 mb-md-0 contacts_card chat-height" id="contactsCard">
<div class="card-header"> <div class="card-header">
<form action="#" id="user-search"> <form action="#" id="user-search">
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Search..." id="user-search-term" class="form-control search"> <input type="text" placeholder="Search..." id="user-search-term"
<button class="search-cancel" id="user-search-cancel" hidden><i class="fas fa-times"></i></button> class="form-control search">
<button class="search-cancel" id="user-search-cancel" hidden><i
class="fas fa-times"></i></button>
<div class="input-group-prepend"> <div class="input-group-prepend">
<button class="input-group-text search_btn"><i class="fas fa-search"></i></button> <button class="input-group-text search_btn"><i class="fas fa-search"></i></button>
@ -57,14 +63,17 @@
</div> </div>
<div class="card-body contacts_body"> <div class="card-body contacts_body">
<ui class="contacts" id="contacts-box"> <ui class="contacts" id="contacts-box">
<li class="text-center " ><div class="spinner-grow spinner-grow-lg text-info " style="width: 100px; height: 100px;"></div></li> <li class="text-center ">
<div class="spinner-grow spinner-grow-lg text-info "
style="width: 100px; height: 100px;"></div>
</li>
</ui> </ui>
</div> </div>
<div class="card-footer"></div> <div class="card-footer"></div>
</div> </div>
</div> </div>
<div class="col-md-8 col-xl-6 chat"> <div class="col-md-8 col-xl-6 chat">
<div class="card" id="no-user-selected"> <div class="card chat-height" id="no-user-selected">
<div class="m-auto"> <div class="m-auto">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<div class="align-self-center"> <div class="align-self-center">
@ -73,11 +82,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card" id="chat-card" hidden> <div class="card chat-height" id="chat-card" hidden>
<div class="card-header msg_head"> <div class="card-header msg_head">
<div class="d-flex bd-highlight"> <div class="d-flex bd-highlight">
<div class="img_cont"> <div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img">
<!-- <span class="online_icon"></span> --> <!-- <span class="online_icon"></span> -->
</div> </div>
<div class="user_info"> <div class="user_info">
@ -102,14 +112,17 @@
<div class="card-body msg_card_body" id="chat-area-new"> <div class="card-body msg_card_body" id="chat-area-new">
</div> </div>
<div class="card-footer"> <div class="card-footer">
<form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm" class="needs-validation" novalidate> <form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm"
class="needs-validation" novalidate>
<div class="input-group"> <div class="input-group">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span> <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
</div> </div>
<textarea name="" id="chatInput" class="form-control type_msg" placeholder="Type your message..." required></textarea> <textarea name="" id="chatInput" class="form-control type_msg"
placeholder="Type your message..." required></textarea>
<div class="input-group-append"> <div class="input-group-append">
<button class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button> <button class="input-group-text send_btn"><i
class="fas fa-location-arrow"></i></button>
</div> </div>
</div> </div>
</form> </form>
@ -119,65 +132,68 @@
</div> </div>
</div> </div>
<template id="msg_container_template"> <template id="msg_container_template">
<div class="d-flex justify-content-start mb-4"> <div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg"> <div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
</div> class="rounded-circle user_img_msg">
<div class="msg msg_container"> </div>
{{{message}}} <div class="msg msg_container">
<span class="msg_time">{{msgDateFormat messageTime}}</span> {{{message}}}
</div> <span class="msg_time">{{msgDateFormat messageTime}}</span>
</div> </div>
</div>
</template> </template>
<template id="msg_container_send_template"> <template id="msg_container_send_template">
<div class="d-flex justify-content-end mb-4"> <div class="d-flex justify-content-end mb-4">
<div class="msg msg_container_send"> <div class="msg msg_container_send">
{{{message}}} {{{message}}}
<span class="msg_time_send">{{msgDateFormat messageTime}}</span> <span class="msg_time_send">{{msgDateFormat messageTime}}</span>
</div> </div>
<!-- <div class="img_cont_msg"> <!-- <div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img_msg"> class="rounded-circle user_img_msg">
</div> --> </div> -->
{{{avatar}}} {{{avatar}}}
</div> </div>
</template> </template>
<template id="user-contact-online-template"> <template id="user-contact-online-template">
<li name="user-box" class="user-box"> <li name="user-box" class="user-box">
<div class="d-flex bd-highlight"> <div class="d-flex bd-highlight">
<div class="img_cont"> <div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
<span class="online_icon"></span> class="rounded-circle user_img">
</div> <span class="online_icon"></span>
<div class="user_info"> </div>
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span> <div class="user_info">
<p>{{userName}} is online</p> <span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
</div> <p>{{userName}} is online</p>
<div class="d-flex flex-column ml-auto"> </div>
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div> <div class="d-flex flex-column ml-auto">
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div> <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
</div> <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div> </div>
</li> </div>
</li>
</template> </template>
<template id="user-contact-offline-template"> <template id="user-contact-offline-template">
<li name="user-box" class="user-box"> <li name="user-box" class="user-box">
<div class="d-flex bd-highlight"> <div class="d-flex bd-highlight">
<div class="img_cont"> <div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
</div> class="rounded-circle user_img">
<div class="user_info"> </div>
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span> <div class="user_info">
<p>Last active {{fromNow lastActive}}</p> <span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
</div> <p>Last active {{fromNow lastActive}}</p>
<div class="d-flex flex-column ml-auto"> </div>
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div> <div class="d-flex flex-column ml-auto">
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div> <div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
</div> <div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div> </div>
</li> </div>
</li>
</template> </template>
</body> </body>