From 2addcc1fa8f3b1e425b2eb16e8516a9392e6261b Mon Sep 17 00:00:00 2001
From: Rohan Sircar <rohansircar@tuta.io>
Date: Sat, 20 Jun 2020 12:51:44 +0530
Subject: [PATCH] Adjusted chat UI height to page height

---
 src/main/resources/static/css/chat.css | 323 +++++++++++++------------
 src/main/resources/templates/chat.html | 136 ++++++-----
 2 files changed, 240 insertions(+), 219 deletions(-)

diff --git a/src/main/resources/static/css/chat.css b/src/main/resources/static/css/chat.css
index 48a5872..2d9674f 100644
--- a/src/main/resources/static/css/chat.css
+++ b/src/main/resources/static/css/chat.css
@@ -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;
-    }
-}
\ No newline at end of file
+.chat-height {
+  min-height: 90vh;
+  max-height: 90vh;
+}
+@media (max-width: 576px) {
+  .contacts_card {
+    margin-bottom: 15px !important;
+  }
+}
diff --git a/src/main/resources/templates/chat.html b/src/main/resources/templates/chat.html
index babe0c5..167fa18 100644
--- a/src/main/resources/templates/chat.html
+++ b/src/main/resources/templates/chat.html
@@ -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>