paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chat css

This commit is contained in:
Beatrice Olivera 2018-09-06 14:17:24 +01:00
parent 1327e86d03
commit 84a155571a
3 changed files with 50 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/assets/stylesheets/pages/_messages.scss
View File

@ -101,3 +101,24 @@ select:not([multiple]) {
box-shadow: none; 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 {
}

10
app/javascript/packs/chatrooms.js
View File

@ -51,6 +51,16 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
messagesContainer.appendChild(messageDiv) messagesContainer.appendChild(messageDiv)
} else if (data["chat_message"] && data["chat_message"]["userId"] != userId) { } 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 chatMessage = data["chat_message"]
const target = document.getElementById('language-1').value const target = document.getElementById('language-1').value
const message = `${chatMessage["message"]}` const message = `${chatMessage["message"]}`

33
app/views/chat_rooms/show.html.erb
View File

@ -20,28 +20,33 @@
<div class="col-xs-12 col-sm-6 col-lg-4 no-padding"> <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
<div class="messages-container-container"> <div class="messages-container-container">
<div id="messages-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"> <div class="hover-notice">
<span class="text-center"><small>Hover to see the original message</small></span> <span class="text-center"><small>Hover to see the original message</small></span>
</div> </div>
</div> </div>
<div class="chat"> <div class="chat">
<div class="input-group"> <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"> <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> </form>
</div> </div>
</div> </div>
</div> </div>