61 lines
3.1 KiB
PHP
61 lines
3.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow" style="height:calc(100vh - 120px); display:flex; flex-direction:column;">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0"><i class="fas fa-comments"></i> Chats</h5>
|
|
</div>
|
|
<div class="card-body p-0" style="overflow-y: auto;">
|
|
@forelse($users as $user)
|
|
<a href="{{ route('chat.show', $user) }}" class="text-decoration-none">
|
|
<div class="d-flex align-items-center p-3 border-bottom chat-user-item">
|
|
<div class="position-relative mr-3 flex-shrink-0">
|
|
<img src="{{ $user->profile_photo_url }}"
|
|
class="rounded-circle"
|
|
width="45" height="45"
|
|
style="object-fit:cover;
|
|
{{ $user->is_friend ? '' : 'filter:grayscale(60%); opacity:.8' }}">
|
|
@unless($user->is_friend)
|
|
<span class="position-absolute"
|
|
style="bottom:0;right:0;background:#dc3545;border-radius:50%;
|
|
width:16px;height:16px;display:flex;align-items:center;
|
|
justify-content:center;border:2px solid #fff">
|
|
<i class="fas fa-lock" style="font-size:.45rem;color:#fff"></i>
|
|
</span>
|
|
@endunless
|
|
</div>
|
|
<div class="flex-grow-1 overflow-hidden">
|
|
<div class="font-weight-bold text-dark text-truncate">{{ $user->name }}</div>
|
|
<small class="{{ $user->is_friend ? 'text-muted' : 'text-danger' }}">
|
|
{{ $user->is_friend ? $user->getRoleNames()->first() : 'Ya no son amigos' }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<div class="text-center text-muted py-5">
|
|
<i class="fas fa-user-friends fa-3x mb-3 d-block"></i>
|
|
<p class="mb-2">Aún no tienes conversaciones.</p>
|
|
<a href="{{ route('feed') }}" class="btn btn-primary btn-sm">
|
|
<i class="fas fa-search mr-1"></i> Buscar personas
|
|
</a>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<style>
|
|
#content { overflow: hidden !important; }
|
|
.container-fluid { height: calc(100vh - 120px); }
|
|
.sticky-footer { display: none !important; }
|
|
</style>
|
|
@endsection
|