Merge pull request #74 from beatriceo/chat-css-fixes

chat css

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 {
+
+}

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"]}`

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>
+              <!-- <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...">
+              <div class="form-group guyisbadass">
-              <span class="input-group-btn">
+                <input type="text" class="form-control input-transparent input-large" name="chat-input" id="chat-input" value="" placeholder="Type something...">
-                <button class="form-control send-button" id="send-btn" type="submit" remote: true>
+              </div>
-                  <i class="fas fa-paper-plane"></i>
+              <div class="form-group">
-                </button>
+                <span class="input-group-btn">
-              </span>
+                  <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>