From 84a155571a314f438db4dfdcbf93614b7ccfb696 Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Thu, 6 Sep 2018 14:17:24 +0100
Subject: [PATCH] chat css

---
 app/assets/stylesheets/pages/_messages.scss | 21 +++++++++++++
 app/javascript/packs/chatrooms.js           | 10 +++++++
 app/views/chat_rooms/show.html.erb          | 33 ++++++++++++---------
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss
index b767dd7..eab5dd0 100644
--- a/app/assets/stylesheets/pages/_messages.scss
+++ b/app/assets/stylesheets/pages/_messages.scss
@@ -101,3 +101,24 @@ select:not([multiple]) {
     box-shadow: none;
   }
 }
+
+.chat-information {
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.input-group{
+  width: 100%;
+}
+
+.form-inline{
+    width: 100%;
+}
+
+.guyisbadass{
+    width: 85%;
+}
+#chat-input {
+
+}
diff --git a/app/javascript/packs/chatrooms.js b/app/javascript/packs/chatrooms.js
index b43e61d..a377d25 100644
--- a/app/javascript/packs/chatrooms.js
+++ b/app/javascript/packs/chatrooms.js
@@ -51,6 +51,16 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
         messagesContainer.appendChild(messageDiv)
 
       } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
+        // const callerName = document.getElementById('caller-name')
+        // callerName.innerText = data["chat_message"]["user_info"]
+        // console.log(data["chat_message"]["user_info"]["name"])
+
+        // const photo = data["chat_message"]["photo_url"]
+        // photo.height = '20px'
+        // photo.width = '20px'
+        // const chatInfo = document.querySelector('chat-information')
+        // chatInfo.insertBefore(photo, chatInfo.firstChild)
+
         const chatMessage = data["chat_message"]
         const target = document.getElementById('language-1').value
         const message = `${chatMessage["message"]}`
diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb
index d4b1216..9451eaa 100644
--- a/app/views/chat_rooms/show.html.erb
+++ b/app/views/chat_rooms/show.html.erb
@@ -20,28 +20,33 @@
     <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
       <div class="messages-container-container">
         <div id="messages-container">
+          <div class="chat-information">
+            <!-- <p id="caller-name">name</p> -->
+            <select id="language-1" class="form-control no-radius">
+              <% @languages.each do |language| %>
+                <option value="<%= language.code %>"><%= language.name %></option>
+              <% end %>
+            </select>
+          </div>
           <div class="hover-notice">
             <span class="text-center"><small>Hover to see the original message</small></span>
           </div>
         </div>
         <div class="chat">
           <div class="input-group">
-            <select id="language-1" class="form-control no-radius">
-              <% @languages.each do |language| %>
-                <option value="<%= language.code %>"><%= language.name %></option>
-              <% end %>
-            </select>
-
             <form class="form-inline" id="chat-form">
-              <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
-              <input type="text" class="form-control input-transparent" name="chat-input" id="chat-input" value="" placeholder="Type something...">
-              <span class="input-group-btn">
-                <button class="form-control send-button" id="send-btn" type="submit" remote: true>
-                  <i class="fas fa-paper-plane"></i>
-                </button>
-              </span>
+              <!-- <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span> -->
+              <div class="form-group guyisbadass">
+                <input type="text" class="form-control input-transparent input-large" name="chat-input" id="chat-input" value="" placeholder="Type something...">
+              </div>
+              <div class="form-group">
+                <span class="input-group-btn">
+                  <button class="form-control send-button" id="send-btn" type="submit" remote: true>
+                    <i class="fas fa-paper-plane"></i>
+                  </button>
+                </span>
+              </div>
             </form>
-
           </div>
         </div>
       </div>