From 9ddbd38bce721176c1ae7a0c5548126b58ea53e3 Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Wed, 5 Sep 2018 23:23:10 +0100
Subject: [PATCH] implemented inline form

---
 app/assets/stylesheets/pages/_messages.scss | 18 ++++++-
 app/views/chat_rooms/show.html.erb          | 55 ++++++++++++---------
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss
index 3f2d4fa..9cd1d8b 100644
--- a/app/assets/stylesheets/pages/_messages.scss
+++ b/app/assets/stylesheets/pages/_messages.scss
@@ -5,15 +5,29 @@
   position: relative;
   .chat {
     position: absolute;
-    bottom: 10px;
+    bottom: 0px;
   }
 }
 
 #messages-container {
   overflow: scroll;
-  height: 80%;
+  height: 95%;
   padding: 10px;
   .message {
     color: white;
   }
 }
+
+select:not([multiple]) {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-position: right 50%;
+    background-repeat: no-repeat;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
+    padding: .5em;
+    padding-right: 1.5em;
+}
+
+#language-1 {
+    border-radius: 0;
+}
diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb
index a7b7ea0..adcfc50 100644
--- a/app/views/chat_rooms/show.html.erb
+++ b/app/views/chat_rooms/show.html.erb
@@ -5,34 +5,43 @@
 <div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
 
 
-<!-- <div class="row">
-  <div class="col-xs-12 col-sm-6 col-lg-4"></div>
-  <div class="col-xs-12 col-sm-6 col-lg-4"></div>
-</div> -->
-<div class="call-container">
-  <div id="remote-video-container">
-    <div id="video_overlays">
-      <video id="local-video" autoplay muted></video>
+<div class="row">
+  <div class="call-container">
+    <div class="col-xs-12 col-sm-6 col-lg-4">
+      <div id="remote-video-container">
+        <div id="video_overlays">
+          <video id="local-video" autoplay muted></video>
+        </div>
+          <video id="remote-video" autoplay></video>
+          <i class="far fa-hand-paper hand"></i>
+      </div>
     </div>
-      <video id="remote-video" autoplay></video>
-      <i class="far fa-hand-paper hand"></i>
-  </div>
-
-  <div class="messages-container-container">
-    <div id="messages-container">
-    </div>
-    <div class="chat">
-      <select id="language-1" class="input-field-text-black input-dropdown form-control">
-        <% @languages.each do |language| %>
-          <option value="<%= language.code %>"><%= language.name %></option>
-        <% end %>
-      </select>
-      <input type="text" class="form-control" name="chat-input" id="chat-input" value="">
-      <button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
+    <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
+      <div class="messages-container-container">
+        <div id="messages-container">
+        </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>
+            <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>
+            <input type="text" class="form-control" name="chat-input" id="chat-input" value="">
+            <span class="input-group-btn">
+              <button class="btn btn-primary form-control" id="send-btn" type="submit" remote: true>Send</button>
+                <!-- <i class="far fa-paper-plane"></i> -->
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
 
+
+
 <div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
 
 <%= javascript_pack_tag 'chatrooms' %>