From fa08af8864102e422ef3dc1da81db14180edc8c0 Mon Sep 17 00:00:00 2001
From: Jeremy Zhang <jkzhang@uw.edu>
Date: Tue, 7 Nov 2017 07:43:02 +0000
Subject: [PATCH] Embed message box fix and remove fetching spinner

---
 webapp/titanembeds/static/css/embedstyle.css | 38 +++++++++++++++-----
 webapp/titanembeds/static/js/embed.js        |  4 ---
 webapp/titanembeds/templates/embed.html.j2   | 17 ++-------
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/webapp/titanembeds/static/css/embedstyle.css b/webapp/titanembeds/static/css/embedstyle.css
index 92bb5c9..ea1ef46 100644
--- a/webapp/titanembeds/static/css/embedstyle.css
+++ b/webapp/titanembeds/static/css/embedstyle.css
@@ -262,6 +262,7 @@ nav .brand-logo {
 }
 
 .footercontainer {
+  display: flex;
   width: 100%;
   position: relative;
   margin: 10px;
@@ -276,6 +277,28 @@ nav .brand-logo {
 #messageboxouter {
   width: 100%;
   overflow: hidden;
+  height: 46px;
+}
+
+.input-field.inline {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 0px;
+}
+
+textarea.materialize-textarea {
+    overflow-y: hidden;
+    padding: 8px 0px 0px 5px;
+    resize: none;
+    min-height: 50px;
+    margin: 0px 0px 0px 0px;
+    line-height: initial;
+    border-bottom: none;
+}
+
+textarea.materialize-textarea:focus:not([readonly]) {
+    border-bottom: none;
+    box-shadow: none;
 }
 
 .currentuserchip {
@@ -287,11 +310,17 @@ nav .brand-logo {
   background-color: #455a64;
 }
 
+#currentuserimage_parent {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .currentuserimage {
   width: 30px;
 }
 
 .currentusername {
+  display: inline-block;
   position: relative;
   top: 7px;
   left: 5px;
@@ -308,7 +337,6 @@ nav .brand-logo {
 }
 
 #currentuserimage {
-  margin-top: 4px;
   margin-right: 4px;
 }
 
@@ -354,14 +382,6 @@ a {
   text-decoration: underline;
 }
 
-#fetching-indicator {
-  position: absolute;
-  right: 1vw;
-  bottom: 13px;
-  width: 25px;
-  height: 25px;
-}
-
 .brand-logo img {
   width: 25px;
   margin-right: 10px;
diff --git a/webapp/titanembeds/static/js/embed.js b/webapp/titanembeds/static/js/embed.js
index fab7f9d..7e08a94 100644
--- a/webapp/titanembeds/static/js/embed.js
+++ b/webapp/titanembeds/static/js/embed.js
@@ -976,7 +976,6 @@
         var channel_id = selected_channel;
         var fet;
         var jumpscroll;
-        $("#fetching-indicator").fadeIn(800);
         if (last_message_id == null) {
             $("#chatcontent").empty();
             fet = fetch(channel_id);
@@ -1020,9 +1019,6 @@
             }
             setVisitorMode(true);
         });
-        fet.always(function() {
-            $("#fetching-indicator").fadeOut(800);
-        });
     }
     
     function process_message_users_cache() {
diff --git a/webapp/titanembeds/templates/embed.html.j2 b/webapp/titanembeds/templates/embed.html.j2
index a99245e..b231916 100644
--- a/webapp/titanembeds/templates/embed.html.j2
+++ b/webapp/titanembeds/templates/embed.html.j2
@@ -165,24 +165,13 @@
     </div>
 
     <footer id="footer" class="footer">
-      <div id="fetching-indicator" class="preloader-wrapper small active" style="display: none;">
-        <div class="spinner-layer spinner-blue-only">
-          <div class="circle-clipper left">
-            <div class="circle"></div>
-          </div><div class="gap-patch">
-            <div class="circle"></div>
-          </div><div class="circle-clipper right">
-            <div class="circle"></div>
-          </div>
-        </div>
-      </div>
       <div id="emoji-tray-toggle">
         <a class="btn-floating btn-large waves-effect waves-light"><i class="material-icons">tag_faces</i></a>
       </div>
       <div id="footercontainer" class="footercontainer">
-        <div class="currentuserchip left" id="nameplate">
-          <div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>
-          <div id="currentusername" class="currentusername left"><span id="curuser_name">Titan</span><span id="curuser_discrim">#0001</span></div>
+        <div class="currentuserchip" id="nameplate">
+          <div id="currentuserimage_parent"><img id="currentuserimage" src="" class="circle currentuserimage" style="display: none;"></div>
+          <div id="currentusername" class="currentusername"><span id="curuser_name">Titan</span><span id="curuser_discrim">#0001</span></div>
         </div>
         <div id="messageboxouter" class="input-field inline">
           <textarea placeholder="Enter message" id="messagebox" type="text" class="materialize-textarea" rows="1"></textarea>