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

Adjusted chat UI height to page height

master
Rohan Sircar 4 years ago
parent
6754071700
commit
2addcc1fa8
2 changed files with 240 additions and 219 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 323
      src/main/resources/static/css/chat.css
  2. 136
      src/main/resources/templates/chat.html

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

@ -1,301 +1,306 @@
body,
html {
height: 100%;
margin: 0;
background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
height: 100%;
margin: 0;
background: #7f7fd5;
background: -webkit-linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
background: linear-gradient(to right, #91eae4, #86a8e7, #7f7fd5);
}
.msg_container_send p,
.msg_container_send ol,
.msg_container_send ul,
.msg_container p,
.msg_container ol,
.msg_container ul {
margin-bottom: 0;
.msg_container p,
.msg_container ol,
.msg_container ul {
margin-bottom: 0;
}
.user-box:hover {
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.1);
}
.active:hover {
background-color: rgba(0, 0, 0, 0.4);
background-color: rgba(0, 0, 0, 0.4);
}
.no-user-selected-h2 {
color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.4);
}
.chat {
margin-top: auto;
margin-bottom: auto;
margin-top: auto;
margin-bottom: auto;
}
.card {
height: 800px;
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.4) !important;
/* height: 800px; */
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.4) !important;
}
.contacts_body {
padding: 0.75rem 0 !important;
overflow-y: auto;
white-space: nowrap;
padding: 0.75rem 0 !important;
overflow-y: auto;
white-space: nowrap;
}
.msg_card_body {
overflow-y: auto;
overflow-y: auto;
}
.card-header {
border-radius: 15px 15px 0 0 !important;
border-bottom: 0 !important;
border-radius: 15px 15px 0 0 !important;
border-bottom: 0 !important;
}
.card-footer {
border-radius: 0 0 15px 15px !important;
border-top: 0 !important;
border-radius: 0 0 15px 15px !important;
border-top: 0 !important;
}
.container {
align-content: center;
align-content: center;
}
.search {
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
}
.search-cancel {
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
/* border-color: rgba(0, 0, 0, 0.3) !important; */
color: white !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
/* border-color: rgba(0, 0, 0, 0.3) !important; */
color: white !important;
}
.search:focus {
box-shadow: none !important;
outline: 0px !important;
box-shadow: none !important;
outline: 0px !important;
}
.type_msg {
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
height: 60px !important;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
height: 60px !important;
overflow-y: auto;
}
.type_msg:focus {
box-shadow: none !important;
outline: 0px !important;
box-shadow: none !important;
outline: 0px !important;
}
.attach_btn {
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
border-radius: 15px 0 0 15px !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.send_btn {
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.search_btn {
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
border-radius: 0 15px 15px 0 !important;
background-color: rgba(0, 0, 0, 0.3) !important;
border: 0 !important;
color: white !important;
cursor: pointer;
}
.contacts {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.contacts li {
width: 100% !important;
padding: 5px 10px;
margin-bottom: 15px !important;
width: 100% !important;
padding: 5px 10px;
margin-bottom: 15px !important;
}
.active {
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.3);
}
.user_img {
height: 70px;
width: 70px;
border: 1.5px solid #f5f6fa;
height: 70px;
width: 70px;
border: 1.5px solid #f5f6fa;
}
.user_img_msg {
height: 40px;
width: 40px;
border: 1.5px solid #f5f6fa;
height: 40px;
width: 40px;
border: 1.5px solid #f5f6fa;
}
.img_cont {
position: relative;
height: 70px;
width: 70px;
position: relative;
height: 70px;
width: 70px;
}
.img_cont_msg {
height: 40px;
width: 40px;
height: 40px;
width: 40px;
}
.online_icon {
position: absolute;
height: 15px;
width: 15px;
background-color: #4cd137;
border-radius: 50%;
bottom: 0.2em;
right: 0.4em;
border: 1.5px solid white;
position: absolute;
height: 15px;
width: 15px;
background-color: #4cd137;
border-radius: 50%;
bottom: 0.2em;
right: 0.4em;
border: 1.5px solid white;
}
.offline {
background-color: #c23616 !important;
background-color: #c23616 !important;
}
.user_info {
margin-top: auto;
margin-bottom: auto;
margin-left: 15px;
margin-top: auto;
margin-bottom: auto;
margin-left: 15px;
}
.user_info span {
font-size: 20px;
color: white;
font-size: 20px;
color: white;
}
.user_info p, .user_info p span {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
.user_info p,
.user_info p span {
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
}
.video_cam {
margin-left: 50px;
margin-top: 5px;
margin-left: 50px;
margin-top: 5px;
}
.video_cam span {
color: white;
font-size: 20px;
cursor: pointer;
margin-right: 20px;
color: white;
font-size: 20px;
cursor: pointer;
margin-right: 20px;
}
.msg_container {
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
border-radius: 25px;
background-color: #82ccdd;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
border-radius: 25px;
background-color: #82ccdd;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
}
.msg_container_send {
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
border-radius: 25px;
background-color: #78e08f;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
margin-top: auto;
margin-bottom: auto;
margin-right: 10px;
border-radius: 25px;
background-color: #78e08f;
padding: 10px;
position: relative;
min-width: 100px;
text-align: center;
}
.msg_time {
position: absolute;
left: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
position: absolute;
left: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.msg_time_send {
position: absolute;
right: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
position: absolute;
right: 0;
bottom: -15px;
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
}
.msg_head {
position: relative;
position: relative;
}
#action_menu_btn {
position: absolute;
right: 10px;
top: 10px;
color: white;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 10px;
top: 10px;
color: white;
cursor: pointer;
font-size: 20px;
}
.action_menu {
z-index: 1;
position: absolute;
padding: 15px 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
color: white;
border-radius: 15px;
top: 30px;
right: 15px;
display: none;
z-index: 1;
position: absolute;
padding: 15px 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
color: white;
border-radius: 15px;
top: 30px;
right: 15px;
display: none;
}
.action_menu ul {
list-style: none;
padding: 0;
margin: 0;
list-style: none;
padding: 0;
margin: 0;
}
.action_menu ul li {
width: 100%;
padding: 10px 15px;
margin-bottom: 5px;
width: 100%;
padding: 10px 15px;
margin-bottom: 5px;
}
.action_menu ul li i {
padding-right: 10px;
padding-right: 10px;
}
.action_menu ul li:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
background-color: rgba(0, 0, 0, 0.2);
}
.bg-blur {
backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.modal-dialog {
color: #000000;
color: #000000;
}
@media(max-width: 576px) {
.contacts_card {
margin-bottom: 15px !important;
}
}
.chat-height {
min-height: 90vh;
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>
<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">
<meta charset="UTF-8">
<title id="pageTitle">Chat</title>
</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">
</head>
@ -29,7 +31,9 @@
</div>
<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>
@ -42,12 +46,14 @@
<div class="container-fluid h-100 mt-4 pt-4">
<div class="row justify-content-center h-100 mt-3">
<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">
<form action="#" id="user-search">
<div class="input-group">
<input type="text" placeholder="Search..." id="user-search-term" class="form-control search">
<button class="search-cancel" id="user-search-cancel" hidden><i class="fas fa-times"></i></button>
<input type="text" placeholder="Search..." id="user-search-term"
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">
<button class="input-group-text search_btn"><i class="fas fa-search"></i></button>
@ -57,14 +63,17 @@
</div>
<div class="card-body contacts_body">
<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>
</div>
<div class="card-footer"></div>
</div>
</div>
<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="d-flex justify-content-center">
<div class="align-self-center">
@ -73,11 +82,12 @@
</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="d-flex bd-highlight">
<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> -->
</div>
<div class="user_info">
@ -102,14 +112,17 @@
<div class="card-body msg_card_body" id="chat-area-new">
</div>
<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-append">
<span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span>
</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">
<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>
</form>
@ -119,65 +132,68 @@
</div>
</div>
<template id="msg_container_template">
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
</div>
<div class="msg msg_container">
{{{message}}}
<span class="msg_time">{{msgDateFormat messageTime}}</span>
</div>
</div>
<div class="d-flex justify-content-start mb-4">
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img_msg">
</div>
<div class="msg msg_container">
{{{message}}}
<span class="msg_time">{{msgDateFormat messageTime}}</span>
</div>
</div>
</template>
<template id="msg_container_send_template">
<div class="d-flex justify-content-end mb-4">
<div class="msg msg_container_send">
{{{message}}}
<span class="msg_time_send">{{msgDateFormat messageTime}}</span>
</div>
<!-- <div class="img_cont_msg">
<div class="msg msg_container_send">
{{{message}}}
<span class="msg_time_send">{{msgDateFormat messageTime}}</span>
</div>
<!-- <div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img_msg">
</div> -->
{{{avatar}}}
</div>
{{{avatar}}}
</div>
</template>
<template id="user-contact-online-template">
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
<p>{{userName}} is online</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div>
</div>
</li>
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
<p>{{userName}} is online</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div>
</div>
</li>
</template>
<template id="user-contact-offline-template">
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
<p>Last active {{fromNow lastActive}}</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div>
</div>
</li>
<li name="user-box" class="user-box">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg"
class="rounded-circle user_img">
</div>
<div class="user_info">
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>
<p>Last active {{fromNow lastActive}}</p>
</div>
<div class="d-flex flex-column ml-auto">
<div class="text-right">{{moment lastMessageTime "MMM DD"}}</div>
<div style="color: rgba(255,255,255,0.7);">{{lastMessageText}}</div>
</div>
</div>
</li>
</template>
</body>

Write Preview
Loading…
Cancel
Save