Skip to content

Instantly share code, notes, and snippets.

@marcelotk15
Last active September 8, 2020 07:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcelotk15/2e4c5a34314907c72a9f to your computer and use it in GitHub Desktop.
Save marcelotk15/2e4c5a34314907c72a9f to your computer and use it in GitHub Desktop.
Style to https://github.com/cmgmyr/laravel-messenger with differentiate senders and receiver.
.mensagens-chat
{
list-style: none;
margin: 0;
padding: 0;
}
.mensagens-chat li
{
margin-bottom: 10px;
padding: 15px 0;
border-bottom: 1px dotted #eee;
}
.mensagens-chat li:last-child
{
border-bottom: 0;
}
.mensagens-chat li.left .mensagens-chat-body
{
margin-left: 70px;
}
.mensagens-chat li.right .mensagens-chat-body
{
margin-right: 70px;
}
.mensagens-chat li .mensagens-chat-body p
{
margin: 0;
color: #777777;
}
.mensagens-chat li .mensagens-chat-body .header{
margin-bottom: 15px;
margin-top: -14px;
}
.mensagens-chat .glyphicon
{
margin-right: 5px;
}
<ul class="mensagens-chat">
<?php $mensagemAnterior = null; ?>
@foreach($thread->messages as $message)
<?php $class = Auth::user()->id == $message->user->id ? 'right' : 'left'; ?>
<?php $class2 = $class == 'right' ? 'left' : 'right'; ?>
@if ($mensagemAnterior == $message->user->id)
<li class="{{$class}} clearfix mesmo_user">
<span class="mensagens-chat-img pull-{{$class}}"></span>
<div class="mensagens-chat-body clearfix">
<div class="header">
<strong class="primary-font"> </strong>
<small class="pull-{{$class2}} text-muted">
<span class="glyphicon glyphicon-time"></span>{{$message->created_at->diffForHumans()}}
</small>
</div>
<p>
{{$message->body}}
</p>
</div>
</li>
@else
<li class="{{$class}} clearfix">
<span class="mensagens-chat-img pull-{{$class}}">
<img src="//www.gravatar.com/avatar/{!! md5($message->user->email) !!}?s=64" alt="{!! $message->user->name !!}" class="pull-{{$class}} img-circle">
</span>
<div class="mensagens-chat-body clearfix">
<div class="header">
<strong class="primary-font">{{ $message->user->name }}</strong>
<small class="pull-{{$class2}} text-muted">
<span class="glyphicon glyphicon-time"></span>{{$message->created_at->diffForHumans()}}
</small>
</div>
<p>
{{$message->body}}
</p>
</div>
</li>
@endif
<?php $mensagemAnterior = $message->user->id?>
@endforeach
</ul>
@cpy466
Copy link

cpy466 commented Sep 8, 2020

Hey! Thanks for this info ! I have a question , is it possible to do this in the message model or another way because in the approach above there are many duplicated queries.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment