Adjusted chat UI height to page height
This commit is contained in:
parent
6754071700
commit
2addcc1fa8
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user