I've successfully built a messenger system using Vue.js with a Laravel backend. My goal is to display messages from myself (Jim, the logged in user) on the right side in blue and messages from Debbie (the recipient) on the left side in yellow, similar to Facebook or Twitter, utilizing flexbox:
https://i.sstatic.net/evYw2.png
Sample JSON Output
{
"0": {
"name": "Debbie",
"message": "Good, Thanks for asking."
},
"1": {
"name": "Jim",
"message": "I'm good, how are you?"
},
"2": {
"name": "Debbie",
"message": "How are you?"
},
"3": {
"name": "Jim",
"message": "Hi Debbie"
},
"4": {
"name": "Debbie",
"message": "Hi Jim"
}
}
To distinguish myself and my messages from others through the JSON API, what data should be sent? Is there a way to achieve this without altering the JSON output?
How can I integrate this layout into my existing messenger system built with flexbox? The main component being used is the conversation-messages component:
Vue.component('conversation-messages',{
template: '#conversation-messages',
props: ['conversationId'],
data: function() {
return {
messages: [],
url: ''
}
},
mounted() {
console.log("message mounted")
this.getOldMessages(this.conversationId);
},
});
View this question answered solely with CSS.
Implementing a Chat Bubble System Like FB Using CSS Tricks
Example HTML Structure with Floats Instead of Flexbox
<ul>
<li class="him">By Other User</li>
<li class="me">By this User, first message</li>
<li class="me">By this User, second message</li>
<li class="me">By this User, third message</li>
<li class="me">By this User, fourth message</li>
</ul>
CSS Example Demonstrating Chat Bubbles Design
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
display:inline-block;
clear: both;
padding: 20px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
}
.him{
background: #eee;
float: left;
}
.me{
float: right;
background: #0084ff;
color: #fff;
}
.him + .me{
border-bottom-right-radius: 5px;
}
.me + .me{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.me:last-of-type {
border-bottom-right-radius: 30px;
}