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

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

@ -2,9 +2,9 @@ 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,
@ -33,7 +33,7 @@ html {
} }
.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;
} }
@ -182,7 +182,8 @@ html {
color: white; color: white;
} }
.user_info p, .user_info p span { .user_info p,
.user_info p span {
font-size: 10px; font-size: 10px;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
} }
@ -294,6 +295,10 @@ html {
color: #000000; color: #000000;
} }
.chat-height {
min-height: 90vh;
max-height: 90vh;
}
@media (max-width: 576px) { @media (max-width: 576px) {
.contacts_card { .contacts_card {
margin-bottom: 15px !important; margin-bottom: 15px !important;

48
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>
@ -121,7 +134,8 @@
<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"
class="rounded-circle user_img_msg">
</div> </div>
<div class="msg msg_container"> <div class="msg msg_container">
{{{message}}} {{{message}}}
@ -148,7 +162,8 @@
<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"
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">
@ -166,7 +181,8 @@
<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"
class="rounded-circle user_img">
</div> </div>
<div class="user_info"> <div class="user_info">
<span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span> <span class="to-user-span">{{userName}}</span><span> {{{lockIcon unlocked}}}</span>