chat css
This commit is contained in:
parent
1327e86d03
commit
84a155571a
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
|
@ -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"]}`
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue